WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: The ARIA Listbox Generator now supports scalability, sortability, multiselect, adding and removing, getting and setting, and more.

for

From: Ramya Sethuraman
Date: Aug 16, 2012 3:14PM

Ah...thanks!

RS

On Thu, Aug 16, 2012 at 12:04 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> Actually no, that would be for role=list.
>
> E.G
>
> "Items within the list are static and, unlike standard HTML select
> elements,
> may contain images. List boxes contain children whose role is option."
> ( http://www.w3.org/TR/wai-aria/roles#listbox )
>
> ----- Original Message -----
> From: "Ramya Sethuraman" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Thursday, August 16, 2012 7:18 AM
> Subject: Re: [WebAIM] The ARIA Listbox Generator now supports scalability,
> sortability, multiselect, adding and removing, getting and setting, and
> more.
>
>
> > Hmm..shouldn't a container with role 'listbox' contain children with
> > role='listitem?
> >
> >
> >
> > On Wed, Aug 15, 2012 at 7:53 PM, Bryan Garaventa <
> > <EMAIL REMOVED> > wrote:
> >
> >> If it's of interest, I've updated the ARIA Listbox Generator, documented
> >> at
> >> http://lnkd.in/CKfG9x
> >>
> >> The ARIA Listbox Generator automates the process of rendering keyboard
> >> and
> >> screen reader accessible listbox controls, which are instantiated as
> >> independent Listbox objects.
> >>
> >> These Listbox objects support current selection tracking, callbacks,
> >> dynamic addition and deletion of new option elements, dynamic getting
> and
> >> setting, keyboard accessible sortability, and multiselect.
> >>
> >> For instance, you can automatically convert the following markup into
> >> keyboard and screen reader accessible ARIA Listbox controls:
> >>
> >> <ul id="standardListbox" role="listbox">
> >> <li id="value1" role="option"> Label1 Text </li>
> >> <li id="value2" role="option"> Label2 Text </li>
> >> </ul>
> >>
> >> Or...
> >>
> >> <div id="sortableListbox" role="listbox">
> >> <span id="sort1" role="option">
> >> <img src="whatever" alt="Label 1 Text" />
> >> </span>
> >> <span id="sort2" role="option">
> >> <img src="whatever" alt="Label 2 Text" />
> >> </span>
> >> </div>
> >>
> >> The tagging structure doesn't matter, as long as the container element
> >> includes role=listbox, and each child option element includes
> >> role=option,
> >> and all of these must include unique ID attribute values.
> >>
> >> Everything else is automated.
> >> > >> > >> > >>
> >
> >
> >
> > --
> > *I also exist @: http://www.ramyasethuraman.com*
> > > > > > >
> > > >



--
*I also exist @: http://www.ramyasethuraman.com*