Skip to content

Commit

Permalink
Change Disclosure Examples to Use DL Semantics restore use of DL/DT/D…
Browse files Browse the repository at this point in the history 
…D and use button element (#282)

* updated example to use images instead of entities for visual state information and removed the use of DL/DT/DD elements in FAQ example

* Updated disclosure example, restored DL, DT and DD and used the button element instead of span elements with role=button

* Revisions to disclosure FAQ Example

modified:   examples/disclosure/disclosure-faq.html:
* Moved answers inside of a `p` element inside of the `dd` element.
* Fixed call to method for displaying html source.
* Editorial revisions.

* Editorial Corrections to Disclosure Examples

modified examples/disclosure/disclosure-faq.html:
* Revised title and H1 to include the word "Example".

modified examples/disclosure/disclosure-img-long-description.html:
* Revised title and H1 to include the word "Example".
* Change heading inside of example to H3
* Fix typos
* Editorial revision to wording of accessibility features for clarity.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Feb 14, 2017
1 parent 247026c commit 9009bf5
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 9009bf5

Please sign in to comment.