WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bruno Girard
Date: Mar 12, 2016 5:15AM

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