Skip to content

Commit 9b4740f

Browse files
michael-n-coopermcking65
michael-n-cooper
andcommitted
Generated by TRAVIS-CI f482257
Select-only Combobox Example: Add Accessibility Features section (pull #1432) Co-authored-by: Matt King <[email protected]>
1 parent 0ac0556 commit 9b4740f

File tree

2 files changed

+22
-5
lines changed

2 files changed

+22
-5
lines changed

examples/combobox/combobox-select-only.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,23 @@ <h2 id="ex_label">Example</h2>
6767
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
6868
</section>
6969

70+
<section>
71+
<h2>Accessibility Features</h2>
72+
<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>
73+
<ol>
74+
<li>
75+
If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via <code>aria-activedescendant</code>.
76+
This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
77+
</li>
78+
<li>
79+
Navigating the list of options does not set the value of the input.
80+
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.
81+
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.
82+
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.
83+
</li>
84+
</ol>
85+
</section>
86+
7087
<section>
7188
<h2 id="kbd_label">Keyboard Support</h2>
7289
<p>

index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,16 +150,16 @@
150150
"aliasOf": "WAI-ARIA-1.1"
151151
}
152152
},
153-
"publishDate": "2020-07-13",
154-
"publishISODate": "2020-07-13T00:00:00.000Z",
155-
"generatedSubtitle": "Editor's Draft 13 July 2020"
153+
"publishDate": "2020-07-14",
154+
"publishISODate": "2020-07-14T00:00:00.000Z",
155+
"generatedSubtitle": "Editor's Draft 14 July 2020"
156156
}</script><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED"></head>
157157
<body class="h-entry informative"><div class="head">
158158
<a class="logo" href="https://www.w3.org/"><img alt="W3C" width="72" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"></a> <h1 id="title" class="title">WAI-ARIA Authoring Practices 1.2</h1>
159159

160160
<h2>
161161
W3C Editor's Draft
162-
<time class="dt-published" datetime="2020-07-13">13 July 2020</time>
162+
<time class="dt-published" datetime="2020-07-14">14 July 2020</time>
163163
</h2>
164164
<dl>
165165
<dt>This version:</dt><dd>
@@ -7292,7 +7292,7 @@ <h3 id="c-4-enabling-funders"><bdi class="secno">C.4 </bdi>Enabling funders<a cl
72927292

72937293

72947294
</section>
7295-
<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b2554e48cfd91fe',m:'07d0326610bbcbbf10a84c90858ade3f6de970cb-1594667716-1800-ATyN8VUzxt9AhGCa15d8/iLeNJcPcJq2c+hgoWNSo1M1a0egndQo58iN8orvsAmKA76CcdtFkH3gb++5cF/kVAYbB2noHGJVef/SwUEpLlwJUC3jiV3aqMhLuaQYrbdTNW0XBDKAgW0mxmNuhkBEWQpG8P69NF3MOLnuNJn4Vz/UZQClUIKgsZ7yDtRfo5sSzhhwKrXTk79yqY8+xkU0j9E=',s:[0x5fe8a0fced,0xc8663e0d50],}})();</script>
7295+
<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b2d2ed48c5d0cb1',m:'3ab99254a6c6cac8fd068759e567bc3972e4534e-1594750042-1800-AXXNgmWlCOxaTNzOuWn/hjok/wb1RVqkYaVPNqpYGve6xKCmDqg2DRtYQVUeuHxrZNHssAN3DyhwtGRNN0ZxskKTlQuGjIvWZLJdnWsqYP8ibEvgYppscV2xzsFGaCQ3o8HUyJxTXAWR+4tBqcFC8xmSYAbpcyEowA3hy53EvfirU9HsAAmVtTRoVXDUGsADT8GFRhekMzS1e6+Uv0VdJsE=',s:[0xffcd68ab39,0xe4228c512d],}})();</script>
72967296

72977297
<section id="references" class="appendix"><h2 id="d-references"><bdi class="secno">D. </bdi>References<a class="self-link" aria-label="§" href="#references"></a></h2><section id="informative-references">
72987298
<h3 id="d-1-informative-references"><bdi class="secno">D.1 </bdi>

0 commit comments

Comments
 (0)