Identify span element with the toggle button behavior as toggled off
+
Identify a element with the toggle button behavior as toggled off
aria-pressed="true"
-
span
+
a
-
Identify span element with the toggle button behavior as toggled on
+
Identify a element with the toggle button behavior as toggled on
@@ -227,28 +159,21 @@
Javascript and CSS Source Code
HTML Source Code
-
First Example: Push button
+
Action Button
-
+
-
-
Second Example: Toggle button
+
Toggle Button
-
+
-
Third Example: Push button
-
-
-
-
diff --git a/examples/button/js/button.js b/examples/button/js/button.js
index 964fc13330..87c8e3e846 100644
--- a/examples/button/js/button.js
+++ b/examples/button/js/button.js
@@ -11,27 +11,19 @@
function init () {
// Create variables for the various buttons
- var printButton = document.getElementById('print');
+ var actionButton = document.getElementById('action');
var toggleButton = document.getElementById('toggle');
- var alert1Button = document.getElementById('alert1');
- var alert2Button = document.getElementById('alert2');
// Add event listeners to the various buttons
- printButton.addEventListener('click', printButtonEventHandler);
- printButton.addEventListener('keydown', printButtonEventHandler);
+ actionButton.addEventListener('click', actionButtonEventHandler);
+ actionButton.addEventListener('keydown', actionButtonEventHandler);
toggleButton.addEventListener('click', toggleButtonEventHandler);
toggleButton.addEventListener('keydown', toggleButtonEventHandler);
- alert1Button.addEventListener('click', alertButtonEventHandler);
- alert1Button.addEventListener('keydown', alertButtonEventHandler);
-
- alert2Button.addEventListener('click', alertButtonEventHandler);
- alert2Button.addEventListener('keydown', alertButtonEventHandler);
-
}
-function printButtonEventHandler (event) {
+function actionButtonEventHandler (event) {
var type = event.type;
// Grab the keydown and click events
@@ -48,24 +40,6 @@ function printButtonEventHandler (event) {
}
}
-function alertButtonEventHandler (event) {
- var type = event.type;
- var message = 'Hej, hello, ciao, こんにちは';
-
- // Grab the keydown and click events
- if (type === 'keydown') {
- // If either enter or space is pressed, execute the funtion
- if (event.keyCode === 13 || event.keyCode === 32) {
- alert(message);
-
- event.preventDefault();
- }
- }
- else if (type === 'click') {
- alert(message);
- }
-}
-
function toggleButtonEventHandler (event) {
var type = event.type;
diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
new file mode 100644
index 0000000000..3a0d71d55c
--- /dev/null
+++ b/examples/disclosure/css/disclosure-faq.css
@@ -0,0 +1,38 @@
+[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 {
+ margin: 0;
+ padding: 0;
+ margin-top: 0.5em;
+ font-weight: bold;
+ font-size: 110%;
+}
+
+
+dl.faq dd {
+ margin: 0;
+ padding: 0;
+ margin-top: 0.25em;
+ margin-left: 1.5em;
+ font-size: 110%;
+ display: none;
+}
diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css
new file mode 100644
index 0000000000..bde8f35205
--- /dev/null
+++ b/examples/disclosure/css/disclosure-img-long-description.css
@@ -0,0 +1,19 @@
+[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";
+ color: #630;
+}
+
+[role="button"][aria-expanded="true"]:before {
+ content: "\0025BC";
+ color: #630;
+}
diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html
new file mode 100644
index 0000000000..a5ef92ec0c
--- /dev/null
+++ b/examples/disclosure/disclosure-faq.html
@@ -0,0 +1,239 @@
+
+
+
+
+Disclosure (Show/Hide) of Answers to Frequently Asked Questions | WAI-ARIA Authoring
+ Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+
Disclosure (Show/Hide) of Answers to Frequently Asked Questions
+
+ Please provide feedback on this example in
+ issue 265.
+
+
+ The following example demonstrates using the
+ disclosure design pattern
+ to create a set of frequently asked questions where the answers may be independently shown or hidden.
+
What do I do if I
+ have a permit for an assigned lot, but can't find a space there?
+
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.
+
+
What do I do if I
+ lose my permit or if my permit is stolen?
+
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.
+
+
Is there free parking
+ on holidays?
+
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.
+
+
Do all parking
+ facilities have the same enforcement rules?
+
Some parking facility restrictions differ from others. Be sure to
+ take note of the signs at each lot entrance.
+
+
+
+
+
+
+
Keyboard Support
+
+
+
+
Key
+
Function
+
+
+
+
+
+ Tab
+
+
+ Moves keyboard focus to the disclosure button.
+
+
+
+
+ Space or
+ Enter
+
+
+
+ Activates the disclosure button,
+ which toggles the visibility of the answer to the question.
+
+
+
+
+
+
+
+
Role, Property, State, and Tabindex Attributes
+
+
+
+
Role
+
Attribute
+
Element
+
Usage
+
+
+
+
+
+ button
+
+
+
+ span
+
+
+ Identifies the span element as a button.
+
+
+
+
+
+ tabindex="0"
+
+
+ span
+
+
+ Includes the span element in the tab sequence of the page.
+
+
+
+
+
+ aria-controls="IDREF"
+
+
+ span
+
+
+ The disclosure button controls visibility of the container identified by the IDREF value.
+
+
+
+
+
+ aria-expanded="false"
+
+
+ span
+
+
+
+
+ Indicates that the container controlled by the disclosure button is hidden .
+
+
+ CSS attribute selectors (e.g. [aria-expanded="false"]) are
+ used to synchronize the visual states with the value of the aria-expanded
+ attribute.
+
+
+ The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+
+
+
+
+
+
+ aria-expanded="true"
+
+
+ span
+
+
+
+
+ Indicates that the container controlled by the disclosure button is visible.
+
+
+ CSS attribute selectors (e.g. [aria-expanded="true"]) are
+ used to synchronize the visual states with the value of the aria-expanded
+ attribute.
+
+
+ The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+ Please provide feedback on this example in
+ issue 264.
+
+
+ The following example demonstrates using the
+ disclosure design pattern
+ to provide a way of revealing a table of data that complements an image.
+
+
+ Charles Minard's 1869 chart showing the number of men in
+ Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they
+ encountered on the return path
+ ( chart details ).
+
+
+
Data for Charles Minars's Chart of Naploean's Invasion of Russia
+
+
+
+
Location
+
Approximate Date
+
Size of Army
+
Tempature C
+
Tempature F
+
Direction
+
+
+
+
+
Kowno River
+
June 24th
+
442,000
+
na
+
na
+
Advance
+
+
+
Wilna
+
June 30th
+
400,000
+
na
+
na
+
Advance
+
+
+
Witebsk
+
na
+
175,000
+
na
+
na
+
Advance
+
+
+
Smolensk
+
August 16th
+
145,000
+
na
+
na
+
Advance
+
+
+
Chjat
+
na
+
127,000
+
na
+
na
+
Advance
+
+
+
Mojaisk
+
September 7th
+
100,000
+
na
+
na
+
Advance
+
+
+
Moscow
+
September 14th
+
100,000
+
na
+
na
+
Advance
+
+
+
Malo-jarosewli
+
October 18th
+
96,000
+
0
+
32
+
Retreat
+
+
+
Mojaisk
+
October 24th
+
87,000
+
0
+
32
+
Retreat
+
+
+
Wirma
+
na
+
55,000
+
na
+
na
+
Retreat
+
+
+
Smolensk
+
November 14th
+
37,000
+
-26
+
-13
+
Retreat
+
+
+
Orscha
+
na
+
24,000
+
na
+
na
+
Retreat
+
+
+
Botr
+
na
+
20,000
+
-14
+
-7
+
Retreat
+
+
+
Studienska (reinforcements arrive)
+
December 1st
+
50,000
+
-25
+
-13
+
Retreat
+
+
+
Minsk
+
December 1st
+
28,000
+
-30
+
-22
+
Retreat
+
+
+
Moloderno
+
December 6th
+
28,000
+
-38
+
-34
+
Retreat
+
+
+
Smorgeni
+
December 7th
+
12,000
+
-33
+
-27
+
Retreat
+
+
+
Wilna
+
+
na
+
+
8,000
+
na
+
na
+
Retreat
+
+
+
Kowno (reinforcements arrive)
+
December 14th
+
10,000
+
na
+
na
+
Retreat
+
+
+
+
+
+
+
+
+
+
Keyboard Support
+
+
+
+
Key
+
Function
+
+
+
+
+
+ Tab
+
+
+ Moves keyboard focus to the disclosure button.
+
+
+
+
+ Space or
+ Enter
+
+
+
+ Activates the disclosure button,
+ which toggles the visibility of the long description.
+
+
+
+
+
+
+
+
Role, Property, State, and Tabindex Attributes
+
+
+
+
Role
+
Attribute
+
Element
+
Usage
+
+
+
+
+
+ button
+
+
+
+ span
+
+
+ Identifies the span element as a button.
+
+
+
+
+
+ tabindex="0"
+
+
+ span
+
+
+ Includes the span element in the tab sequence of the page.
+
+
+
+
+
+ aria-controls="IDREF"
+
+
+ span
+
+
+ The disclosure button controls visibility of the container identified by the IDREF value.
+
+
+
+
+
+ aria-expanded="false"
+
+
+ span
+
+
+
+
+ Indicates that the container controlled by the disclosure button is hidden .
+
+
+ CSS attribute selectors (e.g. [aria-expanded="false"]) are
+ used to synchronize the visual states with the value of the aria-expanded
+ attribute.
+
+
+ The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+
+
+
+
+
+
+ aria-expanded="true"
+
+
+ span
+
+
+
+
+ Indicates that the container controlled by the disclosure button is visible.
+
+
+ CSS attribute selectors (e.g. [aria-expanded="true"]) are
+ used to synchronize the visual states with the value of the aria-expanded
+ attribute.
+
+
+ The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+