WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: Aug 15, 2012 5:53PM

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.