Difference between revisions of "ARIA Combobox"

From Level Access Web Labs
Jump to navigation Jump to search
(Example 2, <button> using aria-owns)
(Example 2, <button> using aria-owns)
Line 384: Line 384:
 
</div>
 
</div>
 
<br />
 
<br />
 +
<div role="combobox" tabindex="0" style="border: 1px solid black">
 +
<span role="textbox" aria-readonly="true"></span>
 +
<ul role="listbox">
 +
<li role="presentation">
 +
<a href="#" role="option" aria-selected="true" tabindex="-1">&nbsp;</a>
 +
<!-- Null option here provided for the benefit of Android. TalkBack appears to not handle the design properly is NO option is currently selected, which causes it to read out the entire listbox as the current value. Adding a &nbsp; entry solves the issue. -->
 +
</li>
 +
<li role="presentation">
 +
<a href="#" role="option" aria-selected="false" tabindex="-1">Firefox</a>
 +
</li>
 +
<li role="presentation">
 +
<a href="#" role="option" aria-selected="false" tabindex="-1">Internet Explorer 11</a>
 +
</li>
 +
<li role="presentation">
 +
<a href="#" role="option" aria-selected="false" tabindex="-1">Safari</a>
 +
</li>
 +
<li role="presentation">
 +
<a href="#" role="option" aria-selected="false" tabindex="-1">Chrome</a>
 +
</li>
 +
</ul>
 +
</div>
 
<script>
 
<script>
 
(function(){
 
(function(){

Revision as of 17:36, 31 March 2017

Example 1, Based on native <input>

Note about this example:

  • Bullet's are shown because wiki overrides list-style-type.
  • This solution uses the autocomplete="list" approach with aria-activedescendant on a listbox.

Challenges this solution overcomes:

  • IE does not render display none referred to be aria-activedescendant. This example make the visible child input as the activedescendant when the combobox is closed.
  • IE appears to create a infinite combobox structure when role combobox applied to input. This solution uses a div with role of combobox.
  • JAWS auto forms mode doesn't work correctly when role of combobox is used on input field -- it sees the box as an edit and turns off forms mode when arrow keys are used. This solution uses a div element instead with a role of combo box.
  • activedescendant doesn't work right in IE unless tabindex="-1" is put on each element. That is done in this example.

Reference: WAI - description, properties, keyboard interaction.
http://www.w3.org/TR/wai-aria-practices-1.1/#combobox

ARIA Combobox

  • iOS
  • Android
  • Windows Phone

Example 2, <button> using aria-owns

Notes about this example:

  • Example is primarily designed to demonstrate a remediation of a typical <button> bound pop-out section control, e.g. the type of simulated "drop-down" control generated by a UI library such as legacy versions of jQueryUI.
  • Example utilizes jQuery as a matter of expediency (i.e. developer of the example was able to generate the code by integrating event handler code from previous examples). It is not a requirement of compliant design for this type of structure.
  • 3/27/17 note - example code not currently complete, widget lacks event handler code for arrow keys to increment the value when combobox is collapsed. Update pending

Select a Browser: