WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

From: Bryan Garaventa
Date: Wed, Aug 15 2012 5:53PM
Subject: The ARIA Listbox Generator now supports scalability, sortability, multiselect, adding and removing, getting and setting, and more.
No previous message | Next message →

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.

From: Ramya Sethuraman
Date: Thu, Aug 16 2012 8:18AM
Subject: Re: The ARIA Listbox Generator now supports scalability, sortability, multiselect, adding and removing, getting and setting, and more.
← Previous message | Next message →

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 ADDRESS 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*

From: Bryan Garaventa
Date: Thu, Aug 16 2012 10:04AM
Subject: Re: The ARIA Listbox Generator now supports scalability, sortability, multiselect, adding and removing, getting and setting, and more.
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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*
> > >

From: Ramya Sethuraman
Date: Thu, Aug 16 2012 3:14PM
Subject: Re: The ARIA Listbox Generator now supports scalability, sortability, multiselect, adding and removing, getting and setting, and more.
← Previous message | No next message

Ah...thanks!

RS

On Thu, Aug 16, 2012 at 12:04 PM, Bryan Garaventa <
= EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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*