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 11, 2016 4:16PM

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.