E-mail List Archives
Re: Usage of <ul> <li> to form elements which is violating accessibility guidelines
From: Karl Groves
Date: Nov 12, 2013 6:46AM
- Next message: Sailesh Panchang: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Next message in Thread: None
- Previous message in Thread: Ryan E. Benson: "Re: Usage of
- to form elements which is violating accessibility guidelines"
- View all messages in this Thread
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 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
- Next message: Sailesh Panchang: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Next message in Thread: None
- Previous message in Thread: Ryan E. Benson: "Re: Usage of
- to form elements which is violating accessibility guidelines"
- View all messages in this Thread