Skip to content

Commit

Permalink
Checkbox Example: Restore focus styling, add accessibility features d…
Browse files Browse the repository at this point in the history 
…ocumentation, and implement current code guide practices (pull #1802)

*  Restored visual focus styling features that were mistakenly removed.
*  Added documentation of accessibility features.
*  Renamed example HTML file: checkbox.html  (NOTE: the mixed checkbox example will use the checkbox-mixed.html  file name).
*  Updated JS code to implement current APG coding practices.
*  Changed from using event.keyCode  to event.key  in event handlers.

Co-authored-by: Matt King <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 committed Oct 17, 2021
1 parent 744816a commit 45e9a6c
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 277 deletions.
80 changes: 0 additions & 80 deletions examples/checkbox/checkbox-1/js/checkbox.js
View file

This file was deleted.

158 changes: 82 additions & 76 deletions examples/checkbox/checkbox-1/checkbox-1.html → examples/checkbox/checkbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../../css/core.css">
<script src="../../js/examples.js"></script>
<script src="../../js/highlight.pack.js"></script>
<script src="../../js/app.js"></script>
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<link href="../css/checkbox.css" rel="stylesheet">
<link href="css/checkbox.css" rel="stylesheet">
<script src="js/checkbox.js" type="text/javascript"></script>
</head>
<body>
Expand Down Expand Up @@ -42,53 +42,63 @@ <h2 id="ex_label">Example</h2>
<h3 id="id-group-label">Sandwich Condiments</h3>
<div role="group" aria-labelledby="id-group-label">
<ul class="checkboxes">
<li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
<li><div role="checkbox" aria-checked="true" tabindex= "0">Tomato</div></li>
<li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
<li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div></li>
<li><div role="checkbox" aria-checked="true" tabindex="0">Tomato</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Mustard</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Sprouts</div></li>
</ul>
</div>

<script type="text/javascript">
window.onload = function () {

var checkboxes = document.querySelectorAll('[role="checkbox"]');

for (var i = 0; i < checkboxes.length; i++) {
var cb = new Checkbox(checkboxes[i]);
cb.init();
}

};
</script>

</div>

<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>

</section>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr data-test-id="key-tab">
<th><kbd>Tab</kbd></th>
<td>Moves keyboard focus to the <code>checkbox</code>.</td>
<section>
<h2>Accessibility Features</h2>
<ul>
<li>To help assistive technology users understand that each checkbox is part of a set of related checkboxes named <q>Sandwich Condiments</q>, the checkboxes are wrapped in a <code>group</code> labeled by the <code>h3</code> heading element.</li>
<li>To enable assistive technology users to perceive the set of checkboxes as a list of four items, each <code>div</code> element that serves as a checkbox is contained within a <code>li</code> element contained by a <code>ul</code> element.</li>
<li>To make it easier to perceive that clicking either the label or checkbox will activate the checkbox, when a pointer hovers over either the checkbox or label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
<li>
Because transparent borders are visible on some systems when operating system high contrast settings are enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
</li>
<li>
To ensure the borders of the inline SVG checkbox graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
For example, the color of the checkbox borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentColor</code> value for the <code>stroke</code> property of the <code>rect</code> and <code>polyline</code> elements used to draw the checkbox.
To make the background of the checkbox graphics match the high contrast background color, the <code>fill-opacity</code> attribute of the <code>rect</code> element is set to zero.
If specific colors were instead used to specify the <code>stroke</code> and <code>fill</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the checkbox and the background or even make the checkbox invisible if the color matched the high contrast mode background.<br>
Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentColor</code> value to be updated in high contrast mode.
Some browsers do not use <code>auto</code> for the default value.
</li>
</ul>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
<tr data-test-id="key-space">
<th><kbd>Space</kbd></th>
<td>Toggles checkbox between checked and unchecked states.</td>
</tr>
</tbody>
</table>
</section>
</thead>
<tbody>
<tr data-test-id="key-tab">
<th><kbd>Tab</kbd></th>
<td>Moves keyboard focus to the <code>checkbox</code>.</td>
</tr>
<tr data-test-id="key-space">
<th><kbd>Space</kbd></th>
<td>Toggles checkbox between checked and unchecked states.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
Expand Down Expand Up @@ -126,11 +136,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<th scope="row"></th>
<td><code>aria-labelledby</code></td>
<td><code>div</code></td>
<td>
<ul>
<li>The <code>aria-labelledby</code> attribute references the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of checkboxes.</li>
</ul>
</td>
<td>References the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of checkboxes.</td>
</tr>
<tr data-test-id="checkbox-role">
<th scope="row"><code>checkbox</code></th>
Expand All @@ -145,30 +151,30 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
<tr data-test-id="checkbox-tabindex">
<td></td>
<th scope="row"><code>tabindex=&quot;0&quot;</code></th>
<th scope="row"><code>tabindex="0"</code></th>
<td><code>div</code></td>
<td>Includes the checkbox in the page tab sequence.</td>
</tr>
<tr data-test-id="checkbox-aria-checked">
<td></td>
<th scope="row"><code>aria-checked=&quot;false&quot;</code></th>
<th scope="row"><code>aria-checked="false"</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Indicates the <code>checkbox</code> is <strong>not</strong> checked.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>To support operating system and browser high contrast settings, the CSS <code>::before</code> pseudo element and <code>content</code> property are used to generate the visual indicators of the checkbox state.</li>
</ul>
</td>
</tr>
<tr data-test-id="checkbox-aria-checked">
<td></td>
<th scope="row"><code>aria-checked=&quot;true&quot;</code></th>
<th scope="row"><code>aria-checked="true"</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Indicates the <code>checkbox</code> is checked.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>To support operating system and browser high contrast settings, the CSS <code>::before</code> pseudo element and <code>content</code> property are used to generate the visual indicators of the checkbox state.</li>
</ul>
</td>
Expand All @@ -177,30 +183,30 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul id="css_js_files">
<li>
CSS: <a href="../css/checkbox.css" type="text/css">checkbox.css</a>
</li>
<li>
Javascript: <a href="js/checkbox.js" type="text/javascript">checkbox.js</a>
</li>
</ul>
</section>

<section>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul id="css_js_files">
<li>
CSS: <a href="css/checkbox.css" type="text/css">checkbox.css</a>
</li>
<li>
Javascript: <a href="js/checkbox.js" type="text/javascript">checkbox.js</a>
</li>
</ul>
</section>

<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
<section>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>

<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../../#checkbox">Checkbox Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
Expand Down
Loading

0 comments on commit 45e9a6c

Please sign in to comment.