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 240: Line 240:
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
function clickCB(e) {
+
function clickCB() {
 
if ($("#cb_List").hasClass("hidden")) {
 
if ($("#cb_List").hasClass("hidden")) {
 
$("#cb_List").removeClass("hidden");
 
$("#cb_List").removeClass("hidden");
$(e.target).attr("aria-expanded", "true");
+
$("#cb_Combobox").attr("aria-expanded", "true");
 
cbUpdateFocus($("#cb_List a").get(0));
 
cbUpdateFocus($("#cb_List a").get(0));
 
}
 
}
 
else {
 
else {
 
$("#cb_List").addClass("hidden");
 
$("#cb_List").addClass("hidden");
$(e.target).attr("aria-expanded", "false");
+
$("#cb_Combobox").attr("aria-expanded", "false");
$(e.target).get(0).focus();
+
$("#cb_Combobox").get(0).focus();
 
};
 
};
 
};
 
};
function keyupCB (e){
+
function keyupCB (){
 
if (e.which == 40 && e.altKey == true) {
 
if (e.which == 40 && e.altKey == true) {
 
e.preventDefault();
 
e.preventDefault();
clickCB(e);
+
clickCB();
}
+
};
 
};
 
};
 
function cbSelectValue(e) {
 
function cbSelectValue(e) {
Line 338: Line 338:
 
<li role="presentation">
 
<li role="presentation">
 
<a href="#" role="option" aria-selected="true" tabindex="-1">&nbsp;</a>
 
<a href="#" role="option" aria-selected="true" tabindex="-1">&nbsp;</a>
<!-- Null option here provided for the benefit of Android.  
+
<!-- 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. -->
TalkBack appears to not handle the design properly if no option is currently aria-selected="true".
 
This state causes it to read out the entire listbox as the current value.  
 
Adding a &nbsp; entry solves the issue. -->
 
 
</li>
 
</li>
 
<li role="presentation">
 
<li role="presentation">
Line 372: Line 369:
 
</body>
 
</body>
 
</html>
 
</html>
 +
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 18:32, 27 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

Note 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 from previous design work). It is not a requirement of compliant design for this type of structure.

Select a Browser: