WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: _mallory
Date: Mar 12, 2016 1:40AM

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