Skip to content

Commit

Permalink
Select-only Combobox Example: Add Accessibility Features section (pull
Browse files Browse the repository at this point in the history
…#1432)


Co-authored-by: Matt King <a11yThinker@Gmail.com>
  • Loading branch information
carmacleod and mcking65 authored Jul 14, 2020
1 parent c9524a5 commit f482257
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions examples/combobox/combobox-select-only.html
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,23 @@ <h2 id="ex_label">Example</h2>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<section>
<h2>Accessibility Features</h2>
<p>While the functionality and user experience of this example are nearly equivalent to an HTML <code>select</code> element with the attribute <code>size="1"</code>, the following differences in behavior are implemented to improve both accessibility and general usability.</p>
<ol>
<li>
If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via <code>aria-activedescendant</code>.
This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
</li>
<li>
Navigating the list of options does not set the value of the input.
This gives screen reader users, who need to navigate among the options to perceive them, the ability to explore options without losing the current value of the input.
The value is set when users press <kbd>Space</kbd>, <kbd>Enter</kbd>, or <kbd>Tab</kbd>, or when focus moves out of the combobox.
The current value is retained if the listbox is closed with <kbd>Escape</kbd> or if the user collapses the list by clicking the input.
</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>
Expand Down

0 comments on commit f482257

Please sign in to comment.