mozilla

Compare Revisions

Using the listbox role

Change Revisions

Revision 50542:

Revision 50542 by hhillen on

Revision 353677:

Revision 353677 by lsta on

Title:
Using the listbox role
Using the listbox role
Slug:
Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role
Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role
Tags:
Accessibility, NeedsContent, ARIA
"NeedsContent", "ARIA", "Accessibility"
Content:

Revision 50542
Revision 353677
n11      This technique demonstrates how to use the <a class=" extern11      This technique demonstrates how to use the <a class="extern
>nal" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</>al" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a
>a> role and describes the effect it has on browsers and assistive>> role and describes the effect it has on browsers and assistive 
> technology.>technology.
n17      Each entry in the listbox should have a role of <a class=" n17      Each entry in the listbox should have a role of <a class="e
>external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/ro>xternal" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/rol
>les#option">option</a> and should be DOM children of listbox. If >es#option">option</a> and should be DOM children of listbox. If o
>one or more entries are not DOM children of listbox, please see t>ne or more entries are not DOM children of listbox, please see th
>he <a class=" external" href="http://www.w3.org/TR/wai-aria-pract>e <a class="external" href="http://www.w3.org/TR/wai-aria-practic
>ices/#listbox_div">ARIA best practices</a> for details of additio>es/#listbox_div">ARIA best practices</a> for details of additiona
>nal properties that may need to be set.>l properties that may need to be set.
n20      When a list is tabbed to, the first item in the list will bn20      When a list is tabbed to, the first item in the list will b
>e selected if nothing else already is. Up/down arrows navigate th>e selected if nothing else already is. Up/down arrows navigate th
>e list, and pressing Shift + Up/Down arrows will move and extend >e list, and pressing Shift + Up/Down arrows will move and extend 
>the selection. Typing one or more letters will navigate the list >the selection. Typing one or more letters will navigate the list 
>items (same letter goes to each item starting with that, differen>items (same letter goes to each item starting with that, differen
>t letters go to the first item starting with that entire string).>t letters go to the first item starting with that entire string).
> If the current item has an associated context menu, Shift+F10 wi> If the current item has an associated context menu, Shift+F10 wi
>ll launch that menu. If list items are checkable, Space can be us>ll launch that menu. If list items are checkable, Space can be us
>ed to toggle <a class=" external" href="http://www.w3.org/TR/wai->ed to toggle <a class="external" href="http://www.w3.org/TR/wai-a
>aria-practices/#checkbox">checkboxes</a>. For selectable list ite>ria-practices/#checkbox">checkboxes</a>. For selectable list item
>ms, Space toggles their selection, Shift+Space can be used to sel>s, Space toggles their selection, Shift+Space can be used to sele
>ect contiguous items, Ctrl+Arrow moves without selecting, and Ctr>ct contiguous items, Ctrl+Arrow moves without selecting, and Ctrl
>l+Space can be used to select non-contiguous items. It is recomme>+Space can be used to select non-contiguous items. It is recommen
>nded that a checkbox, link or other method be used to select all >ded that a checkbox, link or other method be used to select all i
>items, and Ctrl+A could be used as a shortcut key for this.>tems, and Ctrl+A could be used as a shortcut key for this.
n22    <h3 id="Possible_effects_on_user_agents_and_assistive_technoln22    <h3 id="Possible_effects_on_user_agents_and_assistive_technol
>ogy&nbsp;">>ogy.C2.A0">
n29      <li class="li2">Expose the element as having a listbox rolen29      <li class="li2">Expose the element as having a listbox role
> in the operating system's accessibility API. Alternatively, if i> in the operating system's accessibility API. Alternatively, if i
>t is the child of or owned by a <a class=" external" href="http:/>t is the child of or owned by a <a class="external" href="http://
>/www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, expose the >www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, expose the e
>element as a <a class=" external" href="http://www.w3.org/TR/wai->lement as a <a class="external" href="http://www.w3.org/TR/wai-ar
>aria/roles#menu">menu</a>.>ia/roles#menu">menu</a>.
n49    <h4 class="p1" id="Example_1:_A_single_select_listbox_that_usn49    <h4 class="p1" id="Example_1.3A_A_single_select_listbox_that_
>es_aria-activedescendant">>uses_aria-activedescendant">
nn52    <div class="warning">
53      <p>
54        This is actually a counter-example, and will be flagged b
 >y both Google's Accessibility Developer Tools and Microsoft's UI 
 >Accessibility Checker. In fact, the following type of snippet (fo
 >r listbox) is featured in a Microsoft help document as "what not 
 >to do":&nbsp;<a href="http://msdn.microsoft.com/en-us/library/win
 >dows/desktop/jj658621(v=vs.85).aspx" title="http://msdn.microsoft
 >.com/en-us/library/windows/desktop/jj658621(v=vs.85).aspx">http:/
 >/msdn.microsoft.com/en-us/library/windows/desktop/jj658621(v=vs.8
 >5).aspx</a>
55      </p>
56    </div>
n70    <h4 class="p1" id="Working_Examples:">n75    <h4 class="p1" id="Working_Examples.3A">
n88      <li class="li3">To be keyboard accessible, authors should <n93      <li class="li3">To be keyboard accessible, authors should <
>a class=" external" href="http://www.w3.org/TR/wai-aria/roles#opt>a class="external" href="http://www.w3.org/TR/wai-aria/roles#opti
>ion">manage focus</a> of all descendants of this role.>on">manage focus</a> of all descendants of this role.
n92      <li class="li3">If the listbox is not part of another widgen97      <li class="li3">If the listbox is not part of another widge
>t, it should have the <a class=" external" href="http://www.w3.or>t, it should have the <a class="external" href="http://www.w3.org
>g/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelle>/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelled
>dby"><span class="s1">aria-labelledby</span></a> property set.>by"><span class="s1">aria-labelledby</span></a> property set.
n94      <li class="li3">If one or more entries are not DOM childrenn99      <li class="li3">If one or more entries are not DOM children
> of listbox, additional <span class="s1">aria-*</span> properties> of listbox, additional <span class="s1">aria-*</span> properties
> will need to be set (see <a class=" external" href="http://www.w> will need to be set (see <a class="external" href="http://www.w3
>3.org/TR/wai-aria-practices/#listbox_div">ARIA Best Practices</a>>.org/TR/wai-aria-practices/#listbox_div">ARIA Best Practices</a>)
>).>.
n96      <li class="li3">If there is a valid reason to <a class=" exn101      <li class="li3">If there is a valid reason to <a class="ext
>ternal" href="http://www.w3.org/TR/wai-aria/states_and_properties>ernal" href="http://www.w3.org/TR/wai-aria/states_and_properties#
>#aria-expanded">expand</a> the listbox, the <a class=" external" >aria-expanded">expand</a> the listbox, the <a class="external" hr
>href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> >ef="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> ro
>role may be more appropriate.>le may be more appropriate.
n104        <a class=" external" href="http://www.w3.org/TR/wai-aria/n109        <a class="external" href="http://www.w3.org/TR/wai-aria/r
>roles#listbox">listbox</a>>oles#listbox">listbox</a>
n112        <a class=" external" href="http://www.w3.org/TR/wai-aria/n117        <a class="external" href="http://www.w3.org/TR/wai-aria/r
>roles#combobox">combobox</a> role>oles#combobox">combobox</a> role
t125      <li class="li2">ARIA Best Practices – Listbox: <a class=" et130      <li class="li2">ARIA Best Practices – Listbox: <a class="ex
>xternal" href="http://www.w3.org/TR/wai-aria-practices/#listbox_d>ternal" href="http://www.w3.org/TR/wai-aria-practices/#listbox_di
>iv">http://www.w3.org/TR/wai-aria-practices/#listbox_div</a>>v">http://www.w3.org/TR/wai-aria-practices/#listbox_div</a>

Back to History