Difference between revisions of "ARIA Listbox"

From Level Access Web Labs
Jump to navigation Jump to search
Line 96: Line 96:
 
       <div role="listbox" onfocus="" id="lb1" onkeydown="change(event); return true;" aria-owns="l1" aria-activedescendant="li1" aria-labelledby="lbl1" onblur="" tabindex="0" >
 
       <div role="listbox" onfocus="" id="lb1" onkeydown="change(event); return true;" aria-owns="l1" aria-activedescendant="li1" aria-labelledby="lbl1" onblur="" tabindex="0" >
 
       <ul class="lb" role="presentation" id="l1">
 
       <ul class="lb" role="presentation" id="l1">
         <li aria-posinset="1" aria-setsize="3" onclick="select(this);" aria-selected="true" id="li1" role="option" title="title 1" aria-setsize="3">iOS</li>
+
         <li aria-posinset="1" aria-setsize="3" onclick="select(this);" aria-selected="true" id="li1" role="option" aria-setsize="3">iOS</li>
         <li aria-posinset="2" onclick="select(this);" aria-selected="false" id="li2" role="option" title="title 2" aria-setsize="3" >Android</li>
+
         <li aria-posinset="2" onclick="select(this);" aria-selected="false" id="li2" role="option" aria-setsize="3" >Android</li>
         <li aria-posinset="3" onclick="select(this);" aria-selected="false" id="li3" role="option" title="title 3" >Windows Phone</li>
+
         <li aria-posinset="3" onclick="select(this);" aria-selected="false" id="li3" role="option" >Windows Phone</li>
 
       </ul>
 
       </ul>
 
       </div>
 
       </div>

Revision as of 19:22, 4 January 2017

  • Uses aria-activedescendant

ARIA Listbox

Notes about ARIA listbox implementations copied from an email from Bryan on 11/16/2016:

  • Regarding the use of aria-acrivedescendant versus "roving tabindex": Both methods whether aria-activedescendant managed focus or roving tabindex are equally valid, so either will work if done properly. However, the roving tabindex model is more useful for backwards compatibility, working correctly going as far back as IE8 with JAWS 11.
  • The use of aria-posinset and aria-setsize is optional, but I do recommend that if one is used they both should be used.
  • Regarding aria-expanded on role=listbox, I’ve observed that this is often left as aria-expanded=’false’ which seems to prevent some screen readers from being able to announce referenced nodes when the arrow keys are used to update the aria-activedescendant attribute. It works best when this is not present.