WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Misuse of <fieldset>, <label> and <input> tags or not? Conform?

for

From: Birkir R. Gunnarsson
Date: Mar 12, 2016 6:37AM

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 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 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 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.