E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Bruno Girard
Date: Fri, Mar 11 2016 2:18PM
Subject: Misuse of <fieldset>, <label> and <input> tags or not? Conform?
No previous message | Next message →

Hello all,


I am testing something in a page of the online services we develop for our
clients. The page I am testing is within a client private account and
display static information about his payment. We aren't in a form with
editable information. Event thought, our developper has choosen a
components in the library that we normally use in our forms. The component
he has choosen regroup each block of information within the page inside a
fieldset and presents each chunk of information coded using a label and an
input tags. Inputs are read only. In fact, the informations displayed is
static, a summary of actual account payment setup of the client. Normally,
I would have expect my developper to use the component in our librairy
presenting each block as a section and each chunk of information structure
with headers or within lists.

For your analysis, you will find, after my question, an example of the
actual code that I have cleaned.



We are at a point were it will be difficult make any change before
implementation. So, I would like to evaluate the risk or find the good
arguments to have the solution fixed rapidly.

So, my question is: Do we have a non-conformity according to WCAG 2.0 level
A or maybe many ? If so, under which success criterias it would be and why?

The example of code:

<fieldset aria-labelledby="paymentAccountInfo">

<h2 id="paymentAccountInfo">Payment and account information</h2>
<a href="/Prcpt/Payment/Edit">Edit payment method</a>

<fieldset aria-labelledby="PaymentLegend">
<h3 id="PaymentLegend"> Payment </h3>

<label for="paymentMethod">Payment method</label>
<input id="paymentMethod" type="text" value="Pre-authorized
withdrawals" readonly="True" name="paymentMethod">


<label for="paymentFrequency">Frequency</label>
<input id="paymentFrequency" type="text" value="Monthly"
readonly="True" name="paymentFrequency">
</fieldset>


<fieldset aria-labelledby="AccountLegend">
<h3 id="AccountLegend"> Account </h3>

<label class="question" for="accountNumber">Account number</label>
<input id="accountNumber" type="text" value="1-3362-****115"
readonly="True" name="accountNumber">


<label for="financialInstitution">Financial institution</label>
<input id="financialInstitution" type="text" value="BANK OF
MONTREAL" readonly="True" name="financialInstitution">

</fieldset>

</fieldset>


Thanks in advance for your answer and time!

I would like to tell you that I really appreciate being on this list.

Bruno

From: Birkir R. Gunnarsson
Date: Fri, Mar 11 2016 4:16PM
Subject: Re: Misuse of <fieldset>, <label> and <input> tags or not? Conform?
← Previous message | Next message →

Bruno

This looks fine to me.
The labeling is correct, the state (readonly) is correct. The
information is there.
Sure, the fieldset element is used a little bit frivolously (and the
aria-labeling is not really going to work with most assistive
technologies), but the unnecessary fieldsets will at worst create a
little extra verbosity.

It is a little unorthodox, normally static info is presented in lists
and such, but there is nothing wrong with this as far as I can see (of
course I am totally blind, so that saying does not inspire
confidence).
Cheers
-B


On 3/11/16, Bruno Girard < = EMAIL ADDRESS REMOVED = > wrote:
> Hello all,
>
>
> I am testing something in a page of the online services we develop for our
> clients. The page I am testing is within a client private account and
> display static information about his payment. We aren't in a form with
> editable information. Event thought, our developper has choosen a
> components in the library that we normally use in our forms. The component
> he has choosen regroup each block of information within the page inside a
> fieldset and presents each chunk of information coded using a label and an
> input tags. Inputs are read only. In fact, the informations displayed is
> static, a summary of actual account payment setup of the client. Normally,
> I would have expect my developper to use the component in our librairy
> presenting each block as a section and each chunk of information structure
> with headers or within lists.
>
> For your analysis, you will find, after my question, an example of the
> actual code that I have cleaned.
>
>
>
> We are at a point were it will be difficult make any change before
> implementation. So, I would like to evaluate the risk or find the good
> arguments to have the solution fixed rapidly.
>
> So, my question is: Do we have a non-conformity according to WCAG 2.0 level
> A or maybe many ? If so, under which success criterias it would be and why?
>
> The example of code:
>
> <fieldset aria-labelledby="paymentAccountInfo">
>
> <h2 id="paymentAccountInfo">Payment and account information</h2>
> <a href="/Prcpt/Payment/Edit">Edit payment method</a>
>
> <fieldset aria-labelledby="PaymentLegend">
> <h3 id="PaymentLegend"> Payment </h3>
>
> <label for="paymentMethod">Payment method</label>
> <input id="paymentMethod" type="text" value="Pre-authorized
> withdrawals" readonly="True" name="paymentMethod">
>
>
> <label for="paymentFrequency">Frequency</label>
> <input id="paymentFrequency" type="text" value="Monthly"
> readonly="True" name="paymentFrequency">
> </fieldset>
>
>
> <fieldset aria-labelledby="AccountLegend">
> <h3 id="AccountLegend"> Account </h3>
>
> <label class="question" for="accountNumber">Account number</label>
> <input id="accountNumber" type="text" value="1-3362-****115"
> readonly="True" name="accountNumber">
>
>
> <label for="financialInstitution">Financial institution</label>
> <input id="financialInstitution" type="text" value="BANK OF
> MONTREAL" readonly="True" name="financialInstitution">
>
> </fieldset>
>
> </fieldset>
>
>
> Thanks in advance for your answer and time!
>
> I would like to tell you that I really appreciate being on this list.
>
> Bruno
> > > > >


--
Work hard. Have fun. Make history.

From: _mallory
Date: Sat, Mar 12 2016 1:40AM
Subject: Re: Misuse of <fieldset>, <label> and <input> tags or not? Conform?
← Previous message | Next message →

If clicking those edit links did some ajax-type of request or used
Javascript to change the form input from readonly to editable, it
could actually make a lot of sense. If not, agreed with Birkir that
it's a bit overkill.

When I did insurance forms, the version we sent back to users after
they'd filled in such a form was a definition list, with an "Edit
this information" link at the bottom.

Birkir, with the aria-labelling, did you mean for example the
headings would likely remain silent in an SR in forms mode? Because
it's the same technique I use for that pesky issue where a non-form
control needs to contain a question in front of a bunch of radios/
checkboxes (when legend can't be used) and for additional info for
an input (in a <p> or similar).

_mallory


On Fri, Mar 11, 2016 at 06:16:11PM -0500, Birkir R. Gunnarsson wrote:
> Bruno
>
> This looks fine to me.
> The labeling is correct, the state (readonly) is correct. The
> information is there.
> Sure, the fieldset element is used a little bit frivolously (and the
> aria-labeling is not really going to work with most assistive
> technologies), but the unnecessary fieldsets will at worst create a
> little extra verbosity.
>
> It is a little unorthodox, normally static info is presented in lists
> and such, but there is nothing wrong with this as far as I can see (of
> course I am totally blind, so that saying does not inspire
> confidence).
> Cheers
> -B
>
>
> On 3/11/16, Bruno Girard < = EMAIL ADDRESS REMOVED = > wrote:
> > Hello all,
> >
> >
> > I am testing something in a page of the online services we develop for our
> > clients. The page I am testing is within a client private account and
> > display static information about his payment. We aren't in a form with
> > editable information. Event thought, our developper has choosen a
> > components in the library that we normally use in our forms. The component
> > he has choosen regroup each block of information within the page inside a
> > fieldset and presents each chunk of information coded using a label and an
> > input tags. Inputs are read only. In fact, the informations displayed is
> > static, a summary of actual account payment setup of the client. Normally,
> > I would have expect my developper to use the component in our librairy
> > presenting each block as a section and each chunk of information structure
> > with headers or within lists.
> >
> > For your analysis, you will find, after my question, an example of the
> > actual code that I have cleaned.
> >
> >
> >
> > We are at a point were it will be difficult make any change before
> > implementation. So, I would like to evaluate the risk or find the good
> > arguments to have the solution fixed rapidly.
> >
> > So, my question is: Do we have a non-conformity according to WCAG 2.0 level
> > A or maybe many ? If so, under which success criterias it would be and why?
> >
> > The example of code:
> >
> > <fieldset aria-labelledby="paymentAccountInfo">
> >
> > <h2 id="paymentAccountInfo">Payment and account information</h2>
> > <a href="/Prcpt/Payment/Edit">Edit payment method</a>
> >
> > <fieldset aria-labelledby="PaymentLegend">
> > <h3 id="PaymentLegend"> Payment </h3>
> >
> > <label for="paymentMethod">Payment method</label>
> > <input id="paymentMethod" type="text" value="Pre-authorized
> > withdrawals" readonly="True" name="paymentMethod">
> >
> >
> > <label for="paymentFrequency">Frequency</label>
> > <input id="paymentFrequency" type="text" value="Monthly"
> > readonly="True" name="paymentFrequency">
> > </fieldset>
> >
> >
> > <fieldset aria-labelledby="AccountLegend">
> > <h3 id="AccountLegend"> Account </h3>
> >
> > <label class="question" for="accountNumber">Account number</label>
> > <input id="accountNumber" type="text" value="1-3362-****115"
> > readonly="True" name="accountNumber">
> >
> >
> > <label for="financialInstitution">Financial institution</label>
> > <input id="financialInstitution" type="text" value="BANK OF
> > MONTREAL" readonly="True" name="financialInstitution">
> >
> > </fieldset>
> >
> > </fieldset>
> >
> >
> > Thanks in advance for your answer and time!
> >
> > I would like to tell you that I really appreciate being on this list.
> >
> > Bruno
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > >

From: Bruno Girard
Date: Sat, Mar 12 2016 5:15AM
Subject: Re: Misuse of <fieldset>, <label> and <input> tags or not? Conform?
← Previous message | Next message →

Hello _mallory

To answer your question, the hyperlink "<a href="/Prcpt/Payment/Edit">Edit
payment method</a>" is to enter the form made to edit the payment mode. It
doesn't trigger any action in the page such has changing the inputs from
readonly to editable. I should have remove this hyperlink to avoid
confusion. We are on a static page that is part of the client online
services presenting static details about it's insurance policy. To make any
change, hyperlinks to forms are provided. This is my main concern that
coding for forms was used on a static information page and for what I am
asking your opinion.

Thanks

Bruno
Le 12 mars 2016 3:42 AM, "_mallory" < = EMAIL ADDRESS REMOVED = > a écrit :

> If clicking those edit links did some ajax-type of request or used
> Javascript to change the form input from readonly to editable, it
> could actually make a lot of sense. If not, agreed with Birkir that
> it's a bit overkill.
>
> When I did insurance forms, the version we sent back to users after
> they'd filled in such a form was a definition list, with an "Edit
> this information" link at the bottom.
>
> Birkir, with the aria-labelling, did you mean for example the
> headings would likely remain silent in an SR in forms mode? Because
> it's the same technique I use for that pesky issue where a non-form
> control needs to contain a question in front of a bunch of radios/
> checkboxes (when legend can't be used) and for additional info for
> an input (in a <p> or similar).
>
> _mallory
>
>
> On Fri, Mar 11, 2016 at 06:16:11PM -0500, Birkir R. Gunnarsson wrote:
> > Bruno
> >
> > This looks fine to me.
> > The labeling is correct, the state (readonly) is correct. The
> > information is there.
> > Sure, the fieldset element is used a little bit frivolously (and the
> > aria-labeling is not really going to work with most assistive
> > technologies), but the unnecessary fieldsets will at worst create a
> > little extra verbosity.
> >
> > It is a little unorthodox, normally static info is presented in lists
> > and such, but there is nothing wrong with this as far as I can see (of
> > course I am totally blind, so that saying does not inspire
> > confidence).
> > Cheers
> > -B
> >
> >
> > On 3/11/16, Bruno Girard < = EMAIL ADDRESS REMOVED = > wrote:
> > > Hello all,
> > >
> > >
> > > I am testing something in a page of the online services we develop for
> our
> > > clients. The page I am testing is within a client private account and
> > > display static information about his payment. We aren't in a form with
> > > editable information. Event thought, our developper has choosen a
> > > components in the library that we normally use in our forms. The
> component
> > > he has choosen regroup each block of information within the page
> inside a
> > > fieldset and presents each chunk of information coded using a label
> and an
> > > input tags. Inputs are read only. In fact, the informations displayed
> is
> > > static, a summary of actual account payment setup of the client.
> Normally,
> > > I would have expect my developper to use the component in our librairy
> > > presenting each block as a section and each chunk of information
> structure
> > > with headers or within lists.
> > >
> > > For your analysis, you will find, after my question, an example of the
> > > actual code that I have cleaned.
> > >
> > >
> > >
> > > We are at a point were it will be difficult make any change before
> > > implementation. So, I would like to evaluate the risk or find the good
> > > arguments to have the solution fixed rapidly.
> > >
> > > So, my question is: Do we have a non-conformity according to WCAG 2.0
> level
> > > A or maybe many ? If so, under which success criterias it would be and
> why?
> > >
> > > The example of code:
> > >
> > > <fieldset aria-labelledby="paymentAccountInfo">
> > >
> > > <h2 id="paymentAccountInfo">Payment and account information</h2>
> > > <a href="/Prcpt/Payment/Edit">Edit payment method</a>
> > >
> > > <fieldset aria-labelledby="PaymentLegend">
> > > <h3 id="PaymentLegend"> Payment </h3>
> > >
> > > <label for="paymentMethod">Payment method</label>
> > > <input id="paymentMethod" type="text" value="Pre-authorized
> > > withdrawals" readonly="True" name="paymentMethod">
> > >
> > >
> > > <label for="paymentFrequency">Frequency</label>
> > > <input id="paymentFrequency" type="text" value="Monthly"
> > > readonly="True" name="paymentFrequency">
> > > </fieldset>
> > >
> > >
> > > <fieldset aria-labelledby="AccountLegend">
> > > <h3 id="AccountLegend"> Account </h3>
> > >
> > > <label class="question" for="accountNumber">Account
> number</label>
> > > <input id="accountNumber" type="text" value="1-3362-****115"
> > > readonly="True" name="accountNumber">
> > >
> > >
> > > <label for="financialInstitution">Financial institution</label>
> > > <input id="financialInstitution" type="text" value="BANK OF
> > > MONTREAL" readonly="True" name="financialInstitution">
> > >
> > > </fieldset>
> > >
> > > </fieldset>
> > >
> > >
> > > Thanks in advance for your answer and time!
> > >
> > > I would like to tell you that I really appreciate being on this list.
> > >
> > > Bruno
> > > > > > > > > > > > > > >
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > > > > > >

From: Birkir R. Gunnarsson
Date: Sat, Mar 12 2016 6:37AM
Subject: Re: Misuse of <fieldset>, <label> and <input> tags or not? Conform?
← Previous message | No next message

Bruno

I wouldn't be too worried about it. Semantically, you did the right
think by making the "edit" into a link as opposed to a button. If it
was a button, the user would expect to stay on the page, a link is
supposed to navigate to another resource. Not that the user is going
to be that semantically educated mind. If you wanted to make any
changes I would suggest changing the link text from "edit" to "update"
or "change", because edit implies changing the things in front of you.
I would not remove the link, because it is good usability to offer an
easy way to correct mistakes or update the information in front of
you.



My aria not working comment is just that a fieldset is supposed to be
mapped to ARIA role="group" by the browser, so when it is labeled you
would expect screen readers to announce the word "group" along with
the group label.
However this did not work last time I tried. If you wanted it to be
announced you would have to braek the implied semantic rule and put
role="group" on the fieldset tag.
In this case, since the headings are descriptive, it is actually good
that the fieldset is not announced as a group by assistive
technologies. It would not really communicate new information and
would get awfully verbose.
Cheers
-B



On 3/12/16, Bruno Girard < = EMAIL ADDRESS REMOVED = > wrote:
> Hello _mallory
>
> To answer your question, the hyperlink "<a href="/Prcpt/Payment/Edit">Edit
> payment method</a>" is to enter the form made to edit the payment mode. It
> doesn't trigger any action in the page such has changing the inputs from
> readonly to editable. I should have remove this hyperlink to avoid
> confusion. We are on a static page that is part of the client online
> services presenting static details about it's insurance policy. To make any
> change, hyperlinks to forms are provided. This is my main concern that
> coding for forms was used on a static information page and for what I am
> asking your opinion.
>
> Thanks
>
> Bruno
> Le 12 mars 2016 3:42 AM, "_mallory" < = EMAIL ADDRESS REMOVED = > a écrit :
>
>> If clicking those edit links did some ajax-type of request or used
>> Javascript to change the form input from readonly to editable, it
>> could actually make a lot of sense. If not, agreed with Birkir that
>> it's a bit overkill.
>>
>> When I did insurance forms, the version we sent back to users after
>> they'd filled in such a form was a definition list, with an "Edit
>> this information" link at the bottom.
>>
>> Birkir, with the aria-labelling, did you mean for example the
>> headings would likely remain silent in an SR in forms mode? Because
>> it's the same technique I use for that pesky issue where a non-form
>> control needs to contain a question in front of a bunch of radios/
>> checkboxes (when legend can't be used) and for additional info for
>> an input (in a <p> or similar).
>>
>> _mallory
>>
>>
>> On Fri, Mar 11, 2016 at 06:16:11PM -0500, Birkir R. Gunnarsson wrote:
>> > Bruno
>> >
>> > This looks fine to me.
>> > The labeling is correct, the state (readonly) is correct. The
>> > information is there.
>> > Sure, the fieldset element is used a little bit frivolously (and the
>> > aria-labeling is not really going to work with most assistive
>> > technologies), but the unnecessary fieldsets will at worst create a
>> > little extra verbosity.
>> >
>> > It is a little unorthodox, normally static info is presented in lists
>> > and such, but there is nothing wrong with this as far as I can see (of
>> > course I am totally blind, so that saying does not inspire
>> > confidence).
>> > Cheers
>> > -B
>> >
>> >
>> > On 3/11/16, Bruno Girard < = EMAIL ADDRESS REMOVED = > wrote:
>> > > Hello all,
>> > >
>> > >
>> > > I am testing something in a page of the online services we develop for
>> our
>> > > clients. The page I am testing is within a client private account and
>> > > display static information about his payment. We aren't in a form with
>> > > editable information. Event thought, our developper has choosen a
>> > > components in the library that we normally use in our forms. The
>> component
>> > > he has choosen regroup each block of information within the page
>> inside a
>> > > fieldset and presents each chunk of information coded using a label
>> and an
>> > > input tags. Inputs are read only. In fact, the informations displayed
>> is
>> > > static, a summary of actual account payment setup of the client.
>> Normally,
>> > > I would have expect my developper to use the component in our librairy
>> > > presenting each block as a section and each chunk of information
>> structure
>> > > with headers or within lists.
>> > >
>> > > For your analysis, you will find, after my question, an example of the
>> > > actual code that I have cleaned.
>> > >
>> > >
>> > >
>> > > We are at a point were it will be difficult make any change before
>> > > implementation. So, I would like to evaluate the risk or find the good
>> > > arguments to have the solution fixed rapidly.
>> > >
>> > > So, my question is: Do we have a non-conformity according to WCAG 2.0
>> level
>> > > A or maybe many ? If so, under which success criterias it would be and
>> why?
>> > >
>> > > The example of code:
>> > >
>> > > <fieldset aria-labelledby="paymentAccountInfo">
>> > >
>> > > <h2 id="paymentAccountInfo">Payment and account information</h2>
>> > > <a href="/Prcpt/Payment/Edit">Edit payment method</a>
>> > >
>> > > <fieldset aria-labelledby="PaymentLegend">
>> > > <h3 id="PaymentLegend"> Payment </h3>
>> > >
>> > > <label for="paymentMethod">Payment method</label>
>> > > <input id="paymentMethod" type="text" value="Pre-authorized
>> > > withdrawals" readonly="True" name="paymentMethod">
>> > >
>> > >
>> > > <label for="paymentFrequency">Frequency</label>
>> > > <input id="paymentFrequency" type="text" value="Monthly"
>> > > readonly="True" name="paymentFrequency">
>> > > </fieldset>
>> > >
>> > >
>> > > <fieldset aria-labelledby="AccountLegend">
>> > > <h3 id="AccountLegend"> Account </h3>
>> > >
>> > > <label class="question" for="accountNumber">Account
>> number</label>
>> > > <input id="accountNumber" type="text" value="1-3362-****115"
>> > > readonly="True" name="accountNumber">
>> > >
>> > >
>> > > <label for="financialInstitution">Financial
>> > > institution</label>
>> > > <input id="financialInstitution" type="text" value="BANK OF
>> > > MONTREAL" readonly="True" name="financialInstitution">
>> > >
>> > > </fieldset>
>> > >
>> > > </fieldset>
>> > >
>> > >
>> > > Thanks in advance for your answer and time!
>> > >
>> > > I would like to tell you that I really appreciate being on this list.
>> > >
>> > > Bruno
>> > > >> > > >> > > >> > > >> > >
>> >
>> >
>> > --
>> > Work hard. Have fun. Make history.
>> > >> > >> > >> > >> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.