WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bruno Girard
Date: Mar 11, 2016 2:18PM

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