Skip to content

Commit

Permalink
Disclosure examples for FAQ and image description: Update accessibili…
Browse files Browse the repository at this point in the history 
…ty features documentation and implement coding practices in latest code guide (pull #1814)

* Added accessibility features documentation for high contrast support.
* Renamed image description HTML file and updated references.
* Updated JS code to implement latest practices from APG 
* Improved JS comments.

Co-authored-by: Matt King <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 committed Nov 7, 2021
1 parent f7de7ec commit b0c809b
Show file tree
Hide file tree
Showing 13 changed files with 230 additions and 244 deletions.
2 changes: 1 addition & 1 deletion aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1227,7 +1227,7 @@ <h3>Disclosure (Show/Hide)</h3>
<section class="notoc">
<h4>Examples</h4>
<ul>
<li><a href="examples/disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) of Image Description</a></li>
<li><a href="examples/disclosure/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
<li><a href="examples/disclosure/disclosure-faq.html">Disclosure (Show/Hide) of Answers to Frequently Asked Questions</a></li>
<li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) Navigation Menu</a></li>
<li><a href="examples/disclosure/disclosure-navigation-hybrid.html">Disclosure (Show/Hide) Navigation Menu with Top-Level Links</a></li>
Expand Down
43 changes: 20 additions & 23 deletions examples/disclosure/css/disclosure-faq.css
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,48 @@
dl.faq button {
margin: 0;
padding: 0;
margin-top: 1em;
margin-top: 16px;
padding: 4px 8px;
font-weight: bold;
font-size: 110%;
border: thin solid transparent;
border: none;
background-color: transparent;
padding-left: 0.125em;
border-radius: 5px;
}

dl dd {
margin: 0;
padding: 0;
margin-left: 1.5em;
padding-bottom: 20px;
border-bottom: 2px solid #777;
}

dl.faq .desc {
margin: 0;
padding: 0.5em;
margin-top: 0.25em;
padding: 0.25em;
font-size: 110%;
display: none;
background-color: #fffedb;
background-color: #fed;
}

dl.faq button:hover,
dl.faq button:focus {
background-color: #eee;
}

dl.faq button:focus {
border-color: #630;
}

dl.faq button:hover {
text-decoration: underline;
}

dl.faq button:active {
background-color: #bbb;
padding: 2px 6px;
background-color: #def;
border: 2px solid #005a9c;
cursor: pointer;
}

dl.faq button[aria-expanded="false"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
padding-right: 0.35em;
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
position: relative;
left: -2px;
}

dl.faq button[aria-expanded="true"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
padding-right: 0.35em;
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
position: relative;
left: -4px;
top: 2px;
}
45 changes: 45 additions & 0 deletions examples/disclosure/css/disclosure-image-description.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
figure button {
margin: 0;
margin-top: 1em;
padding: 4px 8px;
font-weight: bold;
font-size: 110%;
border: none;
background-color: transparent;
border-radius: 5px;
}

figure button:hover,
figure button:focus {
padding: 2px 6px;
background-color: #def;
border: 2px solid #005a9c;
cursor: pointer;
}

figure button[aria-expanded="false"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
position: relative;
left: -2px;
}

figure button[aria-expanded="true"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
position: relative;
left: -4px;
top: 2px;
}

figure figcaption {
text-align: left;
}

figure h3 {
margin: 0;
padding: 0;
margin-top: 1em;
}

figure .long_desc table tr:nth-child(even) {
background-color: #fed;
}
43 changes: 0 additions & 43 deletions examples/disclosure/css/disclosure-img-long-description.css
View file

This file was deleted.

74 changes: 40 additions & 34 deletions examples/disclosure/disclosure-faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<!-- js and css for the disclosure example. -->
<link href="css/disclosure-faq.css" rel="stylesheet">
<script src="js/disclosureButton.js" type="text/javascript"></script>
<script src="js/disclosure-button.js" type="text/javascript"></script>

</head>
<body>
Expand All @@ -35,7 +35,7 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
<p>Similar examples include:</p>
<ul>
<li>
<a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
<a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
</li>
<li>
<a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
Expand All @@ -48,46 +48,46 @@ <h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of" ></div>
<div id="ex1">
<h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
<dl class="faq">
<dt>
<button type="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
</dt>
<dd>
<p id="faq1_desc" class="desc">
<div id="faq1_desc" class="desc">
Park at the nearest available parking meter without paying the meter
and call 999-999-9999 to report the problem. We will note and approve your alternate
location and will investigate the cause of the shortage in your assigned facility.
</p>
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
</dt>
<dd>
<p id="faq2_desc" class="desc">You should come to the Parking office and report the
<div id="faq2_desc" class="desc">You should come to the Parking office and report the
loss. There is a fee to replace your lost permit. However, if your permit was stolen, a
copy of a police report needs to be submitted along with a stolen parking permit form for
a fee replacement exemption.
</p>
copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
</dt>
<dd>
<p id="faq3_desc" class="desc">
<div id="faq3_desc" class="desc">
All facilities are restricted from 2:00 am - 6:00 am on all days. No
exceptions are made for any holiday or recess except those officially listed as a
<q>Holidays</q> in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and
disabled parking is enforced at all times.
</p>
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
</dt>
<dd>
<p id="faq4_desc" class="desc">
<div id="faq4_desc" class="desc">
Some parking facility restrictions differ from others. Be sure to
take note of the signs at each lot entrance.
</p>
</div>
</dd>
</dl>
</div>
Expand All @@ -96,20 +96,30 @@ <h2 id="ex_label">Example</h2>

<section>
<h2>Accessibility Features</h2>
<ol>
<ul>
<li>
The semantic structure of the FAQ is conveyed with native <code>dl</code>, <code>dt</code> and <code>dd</code> elements.
So that the list structure is communicated to assistive technologies, instead of applying a button role to the <code>dt</code> element, a <code>button</code> element is contained within the <code>dd</code> element.
Similarly, the container for the answer content that is shown and hidden is inside of the <code>dd</code> element so the <code>dl</code> structure is complete even when the answers are all hidden.
To ensure the list structure is communicated to assistive technologies, instead of applying a button role to the <code>dt</code> element, a <code>button</code> element is contained within the <code>dt</code> element.
Similarly, each <code>div</code> element containing answer content that can be shown or hidden by the button is a child of a <code>dd</code> element.
Since all the <code>dd</code> elements are present in the DOM even if some answers are hidden, the <code>dl</code> structure is always complete.
</li>
<li>
To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.
</li>
<li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
<li>The interactivity of the question is visually indicated on focus and hover:
<ul>
<li>The CSS <code>:focus</code> pseudo class is used to change the background and border colors.</li>
<li>The CSS <code>:hover</code> pseudo class is used to change the background color and underline the text.</li>
</ul>
<li>
Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an 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 inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content.
For example, the color of the arrow 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> and <code>fill</code> properties of the <code>polygon</code> elements used to draw the arrows.
If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows 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>
</ol>
</ul>
</section>

<section>
Expand Down Expand Up @@ -159,19 +169,15 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<tr data-test-id="button-aria-controls">
<td></td>
<th scope="row">
<code>aria-controls=&quot;IDREF&quot;</code>
<code>aria-controls="ID_REFERENCE"</code>
</th>
<td>
<code>button</code>
</td>
<td>
The disclosure button controls visibility of the container identified by the <code>IDREF</code> value.
</td>
<td><code>button</code></td>
<td>Identifies the element controlled by the disclosure button.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded=&quot;false&quot;</code>
<code>aria-expanded="false"</code>
</th>
<td>
<code>button</code>
Expand All @@ -182,7 +188,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
Indicates that the container controlled by the disclosure button is <em>hidden</em>.
</li>
<li>
CSS attribute selectors (e.g. <code>[aria-expanded=&quot;false&quot;]</code>) are
CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) are
used to synchronize the visual states with the value of the <code>aria-expanded</code>
attribute.
</li>
Expand All @@ -196,7 +202,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded=&quot;true&quot;</code>
<code>aria-expanded="true"</code>
</th>
<td>
<code>button</code>
Expand All @@ -207,7 +213,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
Indicates that the container controlled by the disclosure button is <em>visible</em>.
</li>
<li>
CSS attribute selectors (e.g. <code>[aria-expanded=&quot;true&quot;]</code>) are
CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) are
used to synchronize the visual states with the value of the <code>aria-expanded</code>
attribute.
</li>
Expand All @@ -232,7 +238,7 @@ <h2>Javascript and CSS Source Code</h2>
</li>
<li>
Javascript:
<a href="js/disclosureButton.js" type="text/javascript">disclosureButton.js</a>
<a href="js/disclosure-button.js" type="text/javascript">disclosureButton.js</a>
</li>
</ul>
</section>
Expand Down
Loading

0 comments on commit b0c809b

Please sign in to comment.