E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: jyothi gogireddy
Date: Wed, Nov 06 2013 4:41AM
Subject: Usage of <ul> <li> to form elements which is violating accessibility guidelines
No previous message | Next message →

Hi All,
 
I have an issue wherein I have the below scenario, calling for an alternative solution to solve this. Appreciate for the solution provided and thanks in advance.
 
All dropdown elements in a page are coded in <ul> <li> so as to make the page responsive and the usage of <ul> <li> is violating the accessibility guidelines in terms of associating "for" and "id" of the form elements. Please find the below code for a better understanding. I have been researching on this and unable to find a solution.
 
<label>Time</label>
<ulclass="listdropdown">
<li>
<spanclass="xyz">Select</span>
<ulclass="ysa">
<liclass="ersd"><atitle="Time"href="#">Select</a></li>
<li><atitle="time 00:00"href="#">00:00</a></li>
<li><atitle="time 01:00"href="#">01:00</a></li>
<li><atitle="time 02:00"href="#">02:00</a></li>
<li><atitle="time 03:00"href="#">03:00</a></li>
<li><atitle="time 04:00"href="#">04:00</a></li>
<li><atitle="time 05:00"href="#">05:00</a></li>
</ul>
</li>
</ul>
 
Regards,
Jyothi
Accessibility Consultant

From: Ryan E. Benson
Date: Thu, Nov 07 2013 10:00PM
Subject: Re: Usage of <ul> <li> to form elements which is violating accessibility guidelines
← Previous message | Next message →

You are getting that error because a label tag needs a for attribute which
points to a valid ID. Why can't a Select with CSS work?

<label for="time">Time</label>
<select style="width:50%" id="time">
<option value="" title="01:00">01:00</option>
<option value="" title="02:00">02:00</option>
<option value="" title="03:00">03:00</option>
</select>


--
Ryan E. Benson


On Wed, Nov 6, 2013 at 6:41 AM, jyothi gogireddy <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi All,
>
> I have an issue wherein I have the below scenario, calling for an
> alternative solution to solve this. Appreciate for the solution provided
> and thanks in advance.
>
> All dropdown elements in a page are coded in <ul> <li> so as to make the
> page responsive and the usage of <ul> <li> is violating the accessibility
> guidelines in terms of associating "for" and "id" of the form elements.
> Please find the below code for a better understanding. I have been
> researching on this and unable to find a solution.
>
> <label>Time</label>
> <ulclass="listdropdown">
> <li>
> <spanclass="xyz">Select</span>
> <ulclass="ysa">
> <liclass="ersd"><atitle="Time"href="#">Select</a></li>
> <li><atitle="time 00:00"href="#">00:00</a></li>
> <li><atitle="time 01:00"href="#">01:00</a></li>
> <li><atitle="time 02:00"href="#">02:00</a></li>
> <li><atitle="time 03:00"href="#">03:00</a></li>
> <li><atitle="time 04:00"href="#">04:00</a></li>
> <li><atitle="time 05:00"href="#">05:00</a></li>
> </ul>
> </li>
> </ul>
>
> Regards,
> Jyothi
> Accessibility Consultant
> > > >

From: Karl Groves
Date: Tue, Nov 12 2013 6:46AM
Subject: Re: Usage of <ul> <li> to form elements which is violating accessibility guidelines
← Previous message | No next message

Jyothi,

I'm wondering what you mean by "I have been researching on this and unable
to find a solution."
For instance, did you take the time to contemplate specifically what this
UI element is, and what it does?

You say "the usage of <ul> <li> is violating the accessibility guidelines
in terms of associating "for" and "id" of the form elements". That's not
exactly what is violating the accessibility guidelines. The (proper) use of
<ul> and <li> is perfectly accessible.

The <label> is meant, as the element's name implies, to function as a label
for a form element. As the HTML specification says "The for attribute may
be specified to indicate a form control with which the caption is to be
associated. If the attribute is specified, the attribute's value must be
the ID <http://www.w3.org/TR/html5/infrastructure.html#concept-id>; of
a labelable
element <http://www.w3.org/TR/html5/forms.html#category-label>; in the same
Document <http://www.w3.org/TR/html5/dom.html#document>; as the
label<http://www.w3.org/TR/html5/forms.html#the-label-element>;element.
If
the attribute is specified and there is an element in the
Document<http://www.w3.org/TR/html5/dom.html#document>;whose
ID <http://www.w3.org/TR/html5/infrastructure.html#concept-id>; is equal to
the value of the for
<http://www.w3.org/TR/html5/forms.html#attr-label-for>;attribute, and
the first such element is a labelable
element <http://www.w3.org/TR/html5/forms.html#category-label>;, then that
element is the label<http://www.w3.org/TR/html5/forms.html#the-label-element>;element's
labeled
control <http://www.w3.org/TR/html5/forms.html#labeled-control>;." (Source:
http://www.w3.org/TR/html5/forms.html#the-label-element)

In the code sample you provided, the <label> has no for attribute. More
importantly, there's no form element at all for it to label. Instead, what
you provided is an unordered list. The unordered list has a class of
"listdropdown". Why? Because this code is imitating a <select> element,
right? Why?

Your message says "All dropdown elements in a page are coded in <ul> <li>
so as to make the page responsive". This, frankly, is not a reason to
disregard native semantics. In fact, you'll find that a native select
element will perform just fine on mobile and tablet devices without any
need to bugger around with the markup. After all, it isn't like this code
takes up a ton of space when displayed: <option value="05:00">05:00</option>

When attempting to solve accessibility problems, the absolute first step is
to determine whether the proper markup has been used for the job.
Constructing custom UI elements *always* puts you on the hook for ensuring
that the new custom UI element works like the native one. The native
element gives you accessibility for free.

Here's the DOM interface for a select element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Here's the DOM interface for UL and LI elements
https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElement

Even if you don't know what all that information is about, its pretty easy
to tell that there's a bit more involved in a <select> element. All those
extra properties and methods? They make a huge difference in the operation
of that control when it is displayed in the browser and a huge difference
in what is relayed to the assistive technology via the accessibility APIs.
For a demonstration of this, see the video at
http://www.karlgroves.com/2013/06/06/custom-ui-widget-accessibility-problems/

Best of luck to you.



On Wed, Nov 6, 2013 at 6:41 AM, jyothi gogireddy <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi All,
>
> I have an issue wherein I have the below scenario, calling for an
> alternative solution to solve this. Appreciate for the solution provided
> and thanks in advance.
>
> All dropdown elements in a page are coded in <ul> <li> so as to make the
> page responsive and the usage of <ul> <li> is violating the accessibility
> guidelines in terms of associating "for" and "id" of the form elements.
> Please find the below code for a better understanding. I have been
> researching on this and unable to find a solution.
>
> <label>Time</label>
> <ulclass="listdropdown">
> <li>
> <spanclass="xyz">Select</span>
> <ulclass="ysa">
> <liclass="ersd"><atitle="Time"href="#">Select</a></li>
> <li><atitle="time 00:00"href="#">00:00</a></li>
> <li><atitle="time 01:00"href="#">01:00</a></li>
> <li><atitle="time 02:00"href="#">02:00</a></li>
> <li><atitle="time 03:00"href="#">03:00</a></li>
> <li><atitle="time 04:00"href="#">04:00</a></li>
> <li><atitle="time 05:00"href="#">05:00</a></li>
> </ul>
> </li>
> </ul>
>
> Regards,
> Jyothi
> Accessibility Consultant
> > > >



--

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829