Skip to content

Commit

Permalink
Change Disclosure Examples to Use DL Semantics and Revise CSS
Browse files Browse the repository at this point in the history 
Per discussion in issue #264 and #265 for review of disclosure examples, made the following changes.

1. Use CSS generated images instead of entities for visual state information
2. For disclosure controls, use  HTML button element instead of span elements with role=button
3. In FAQ, moved answers inside of a `p` element inside of the `dd` element.
4. Fixed call to method for displaying html source.
5. Revised title and H1 to include the word "Example".
6. Change heading inside long description example to H3 from H2
7. Fix typos
8. Add accessibility features section describing use of CSS.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Feb 14, 2017
1 parent 247026c commit db57547
Show file tree
Hide file tree
Showing 7 changed files with 345 additions and 316 deletions.
59 changes: 35 additions & 24 deletions examples/disclosure/css/disclosure-faq.css
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,49 @@
[role="button"]:hover,
[role="button"]:focus {
background-color: #eee;
text-decoration: underline;
}

[role="button"]:active {
background-color: #bbb;
}

[role="button"][aria-expanded="false"]:before {
content: "\0025BA \0000A0";
color: #630;

}

[role="button"][aria-expanded="true"]:before {
content: "\0025BC \0000A0";
color: #630;
}

dl.faq dt {
dl.faq button {
margin: 0;
padding: 0;
margin-top: 0.5em;
margin-top: 1em;
font-weight: bold;
font-size: 110%;
border: thin solid transparent;
background-color: transparent;
padding-left: 0.125em;
}


dl.faq dd {
dl.faq .desc {
margin: 0;
padding: 0;
margin-top: 0.25em;
margin-left: 1.5em;
font-size: 110%;
display: none;
}

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

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

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

dl.faq button:active {
background-color: #bbb;
}

dl.faq button[aria-expanded="false"]:before {
content: url('../images/right-arrow-brown.png');
padding-right: 0.35em;

}

dl.faq button[aria-expanded="true"]:before {
content: url('../images/down-arrow-brown.png');
padding-right: 0.35em;
}

38 changes: 29 additions & 9 deletions examples/disclosure/css/disclosure-img-long-description.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,39 @@
[role="button"]:hover,
[role="button"]:focus {
figure button {
margin: 0;
padding: 0;
margin-top: 1em;
display: block;
font-size: 110%;
border: thin solid transparent;
background-color: transparent;
padding-left: 0.125em;
position: relative;
left: -0.35em;
}
figure button:hover,
figure button:focus {
background-color: #eee;
}

figure button:focus {
border-color: #663300;
}

figure button:hover {
text-decoration: underline;
}

[role="button"]:active {
figure button:active {
background-color: #bbb;
}

[role="button"][aria-expanded="false"]:before {
content: "\0025BA";
color: #630;
figure button[aria-expanded="false"]:before {
content: url('../images/right-arrow-brown.png');
padding-right: 0.25em;
}

[role="button"][aria-expanded="true"]:before {
content: "\0025BC";
color: #630;
figure button[aria-expanded="true"]:before {
content: url('../images/down-arrow-brown.png');
padding-right: 0.25em;
}

138 changes: 71 additions & 67 deletions examples/disclosure/disclosure-faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Disclosure (Show/Hide) of Answers to Frequently Asked Questions | WAI-ARIA Authoring
<title>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions | WAI-ARIA Authoring
Practices 1.1</title>
<meta name="generator" content="BBEdit 10.5" />
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>
Expand All @@ -15,57 +14,90 @@
</head>
<body>
<main>
<h1>Disclosure (Show/Hide) of Answers to Frequently Asked Questions</h1>
<h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1>
<p>
Please provide feedback on this example in
<a href="https://github.com/w3c/aria-practices/issues/265">issue 265.</a>
</p>
<p>
The following example demonstrates using the
<a href="../../#disclosure">disclosure design pattern</a>
to create a set of frequently asked questions where the answers may be independently shown or hidden.
to create a set of frequently asked questions where the answers may be independently shown or hidiven.
</p>
<p>Similar examples include:</p>
<ul>
<li>
<a href="disclosure-img-long-description.html">Disclosure (Show/Hide) of an Image
Description</a>
<a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
</li>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of" ></div>
<div id="ex1">
<dl class="faq">
<dt role="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?</dt>
<dd id="faq1_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.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I
lose my permit or if my permit is stolen?</dt>
<dd id="faq2_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.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking
on holidays?</dt>
<dd id="faq3_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
”Holidays” in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and
disabled parking is enforced at all times.</dd>

<dt role="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking
facilities have the same enforcement rules?</dt>
<dd id="faq4_desc">Some parking facility restrictions differ from others. Be sure to
take note of the signs at each lot entrance.</dd>

<dt>
<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">
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>
</dd>
<dt>
<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
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>
</dd>
<dt>
<button aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
</dt>
<dd>
<p 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>
</dd>
<dt>
<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">
Some parking facility restrictions differ from others. Be sure to
take note of the signs at each lot entrance.
</p>
</dd>
</dl>
</div>
<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>
<ol>
<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.
</li>
<li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS atribute 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>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label">
Expand Down Expand Up @@ -111,37 +143,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>button</code>
</th>
<td></td>
<td>
<code>span</code>
</td>
<td>
Identifies the <code>span</code> element as a <code>button</code>.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=&quot;0&quot;</code>
</th>
<td>
<code>span</code>
</td>
<td>
Includes the <code>span</code> element in the tab sequence of the page.
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-controls=&quot;IDREF&quot;</code>
</th>
<td>
<code>span</code>
<code>button</code>
</td>
<td>
The disclosure button controls visibility of the container identified by the <code>IDREF</code> value.
Expand All @@ -153,20 +161,20 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-expanded=&quot;false&quot;</code>
</th>
<td>
<code>span</code>
<code>button</code>
</td>
<td>
<ul>
<li>
Indicates that the container controlled by the disclosure button is <em>hidden </em>.
Indicates that the container controlled by the disclosure button is <em>hidiven </em>.
</li>
<li>
CSS attribute selectors (e.g. <code>[aria-expanded=&quot;false&quot;]</code>) are
used to synchronize the visual states with the value of the <code>aria-expanded</code>
attribute.
</li>
<li>
The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo selector and the <code>content</code> property
The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property
so the image is reliably rendered in high contrast mode of operating systems and browsers.
</li>
</ul>
Expand All @@ -178,7 +186,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-expanded=&quot;true&quot;</code>
</th>
<td>
<code>span</code>
<code>button</code>
</td>
<td>
<ul>
Expand All @@ -191,7 +199,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
attribute.
</li>
<li>
The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo selector and the <code>content</code> property
The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property
so the image is reliably rendered in high contrast mode of operating systems and browsers.
</li>
</ul>
Expand All @@ -218,13 +226,9 @@ <h2>Javascript and CSS Source Code</h2>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label"
aria-label="Start of"
></div>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of" ></div>
<div id="sc1"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label"
aria-label="End of"
></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of" ></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
Expand Down
Loading

0 comments on commit db57547

Please sign in to comment.