Difference between revisions of "ARIA Listbox"
Jump to navigation
Jump to search
ARIA Listbox
Rnickelson (talk | contribs) |
|||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | * | + | This is a single selection ARIA listbox |
| + | |||
| + | ARIA roles and properties used | ||
| + | * aria-activedescendant, aria-postinset, aria-setsize, aria-labelledby | ||
| + | * role listbox, presentation, and option | ||
<html lang="en"> | <html lang="en"> | ||
| Line 59: | Line 63: | ||
resetSelection(); | resetSelection(); | ||
obj.setAttribute('aria-selected','true'); | obj.setAttribute('aria-selected','true'); | ||
| − | |||
document.getElementById("lb1").setAttribute("aria-activedescendant",newActive); | document.getElementById("lb1").setAttribute("aria-activedescendant",newActive); | ||
} | } | ||
| Line 95: | Line 98: | ||
<div> | <div> | ||
<label id="lbl1">Platform:</label> | <label id="lbl1">Platform:</label> | ||
| − | <div role="listbox" onfocus="" id="lb1" onkeydown="change(event); return true; | + | <div role="listbox" onfocus="" id="lb1" onkeydown="change(event); return true;" aria-activedescendant="li1" aria-labelledby="lbl1" onblur="" tabindex="0" > |
| − | <ul class="lb" role=" | + | <ul class="lb" role="presentation" id="l1"> |
| − | + | <li aria-posinset="1" aria-setsize="3" onclick="select(this);" aria-selected="true" id="li1" role="option" aria-setsize="3">iOS</li> | |
| − | <li onclick="select(this);" aria-selected="false" id="li2" role="option | + | <li aria-posinset="2" onclick="select(this);" aria-selected="false" id="li2" role="option" aria-setsize="3" >Android</li> |
| − | <li onclick="select(this);" aria-selected="false" id="li3" role="option | + | <li aria-posinset="3" onclick="select(this);" aria-selected="false" id="li3" role="option" >Windows Phone</li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 106: | Line 109: | ||
<button> Nothing </button> | <button> Nothing </button> | ||
</div> | </div> | ||
| + | |||
| + | <p>Notes about ARIA listbox implementations copied from an email from Bryan on 11/16/2016:</p> | ||
| + | <ul> | ||
| + | <li> 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. </li> | ||
| + | <li>The use of aria-posinset and aria-setsize is optional, but I do recommend that if one is used they both should be used.</li> | ||
| + | <li>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.</li> | ||
| + | </ul> | ||
| + | |||
| + | |||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
| + | * JAWS works as expected in FireFox and Chrome. The Name role and currently selected value is announced in Forms mode and Virtual cursor mode. The posinset value is announced as expected in forms mode and virtual cursor mode. | ||
| + | * NVDA Works as expected in FireFox. The Posinset value is not announced in Browse mode in FireFox. In chrome the currently selected value is not announced in Browse mode. | ||
| + | *iOS Works as expected. The name Role and Currently selected value are announced. The posinset value is not announced. | ||
| + | *TalkBack Chrome, Works as expected, the Name Role and currently selected value are announced. It is possible to determine that it is a list of three items but the posinset is not announced by TalkBack. | ||
[[Category:ARIA]] | [[Category:ARIA]] | ||
Latest revision as of 11:29, 28 October 2019
This is a single selection ARIA listbox
ARIA roles and properties used
- aria-activedescendant, aria-postinset, aria-setsize, aria-labelledby
- role listbox, presentation, and option
- iOS
- Android
- Windows Phone
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.
- JAWS works as expected in FireFox and Chrome. The Name role and currently selected value is announced in Forms mode and Virtual cursor mode. The posinset value is announced as expected in forms mode and virtual cursor mode.
- NVDA Works as expected in FireFox. The Posinset value is not announced in Browse mode in FireFox. In chrome the currently selected value is not announced in Browse mode.
- iOS Works as expected. The name Role and Currently selected value are announced. The posinset value is not announced.
- TalkBack Chrome, Works as expected, the Name Role and currently selected value are announced. It is possible to determine that it is a list of three items but the posinset is not announced by TalkBack.