From 9009bf52785a742e7792814e81ad3e82dcf7159a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 14 Feb 2017 17:21:33 -0600 Subject: [PATCH] Change Disclosure Examples to Use DL Semantics restore use of DL/DT/DD 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. --- examples/disclosure/css/disclosure-faq.css | 59 ++- .../css/disclosure-img-long-description.css | 38 +- examples/disclosure/disclosure-faq.html | 138 +++--- .../disclosure-img-long-description.html | 424 +++++++++--------- .../disclosure/images/down-arrow-brown.png | Bin 0 -> 1362 bytes .../disclosure/images/right-arrow-brown.png | Bin 0 -> 1401 bytes examples/disclosure/js/disclosureButton.js | 2 +- 7 files changed, 345 insertions(+), 316 deletions(-) create mode 100644 examples/disclosure/images/down-arrow-brown.png create mode 100644 examples/disclosure/images/right-arrow-brown.png diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css index 3a0d71d55c..87b07d586d 100644 --- a/examples/disclosure/css/disclosure-faq.css +++ b/examples/disclosure/css/disclosure-faq.css @@ -1,34 +1,16 @@ -[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; @@ -36,3 +18,32 @@ dl.faq dd { 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; +} + diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css index bde8f35205..c09ac7d043 100644 --- a/examples/disclosure/css/disclosure-img-long-description.css +++ b/examples/disclosure/css/disclosure-img-long-description.css @@ -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; } + diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html index a5ef92ec0c..5e2737ed79 100644 --- a/examples/disclosure/disclosure-faq.html +++ b/examples/disclosure/disclosure-faq.html @@ -2,9 +2,8 @@ -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 - @@ -15,7 +14,7 @@
-

Disclosure (Show/Hide) of Answers to Frequently Asked Questions

+

Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions

Please provide feedback on this example in issue 265. @@ -23,13 +22,12 @@

Disclosure (Show/Hide) of Answers to Frequently Asked Questions

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. + to create a set of frequently asked questions where the answers may be independently shown or hidiven.

Similar examples include:

@@ -37,35 +35,69 @@

Example

- -
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.
- - -
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.
- - -
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.
- - -
Some parking facility restrictions differ from others. Be sure to - take note of the signs at each lot entrance.
- +
+ +
+
+

+ 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. +

+
+
+ +
+
+

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. +

+
+
+ +
+
+

+ 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. +

+
+
+ +
+
+

+ Some parking facility restrictions differ from others. Be sure to + take note of the signs at each lot entrance. +

+
+ +
+

Accessibility Features

+
    +
  1. + The semantic structure of the FAQ is conveyed with native dl, dt and dd elements. + So that the list structure is communicated to assistive technologies, instead of applying a button role to the dt element, a button element is contained within the dd element. + Similarly, the container for the answer content that is shown and hidden is inside of the dd element so the dl structure is complete even when the answers are all hidden. +
    2. +
  2. The visual indication of expanded and collapsed states is synchronized with the value of aria-expanded using a CSS atribute selector and :before pseudo element that generates an image with the content property.
    3. +
  3. The interactivity of the question is visually indicated on focus and hover: +
      +
    • The CSS :focus pseudo class is used to change the background and border colors.
      • +
    • The CSS :hover pseudo class is used to change the background color and underline the text.
      • +
    +
    4. +
+
+

Keyboard Support

@@ -111,37 +143,13 @@

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - + + + +
+

Data for Charles Minars's Chart of Naploean's Invasion of Russia

+
- 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 + button The disclosure button controls visibility of the container identified by the IDREF value. @@ -153,12 +161,12 @@

Role, Property, State, and Tabindex Attributes

aria-expanded="false" 		- span + button
  • - Indicates that the container controlled by the disclosure button is hidden . + Indicates that the container controlled by the disclosure button is hidiven .
  • CSS attribute selectors (e.g. [aria-expanded="false"]) are @@ -166,7 +174,7 @@

    Role, Property, State, and Tabindex Attributes

    attribute.
  • - The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property + The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
@@ -178,7 +186,7 @@

Role, Property, State, and Tabindex Attributes

aria-expanded="true" 		- span + button
    @@ -191,7 +199,7 @@

    Role, Property, State, and Tabindex Attributes

    attribute.
  • - The visual indicator of the show/hide state is created using the CSS :before pseudo selector and the content property + The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
@@ -218,13 +226,9 @@

Javascript and CSS Source Code

HTML Source Code

- +
- + @@ -14,7 +13,7 @@
-

Disclosure (Show/Hide) of Image Description

+

Example Disclosure (Show/Hide) for Image Description

Please provide feedback on this example in issue 264. @@ -27,196 +26,213 @@

Disclosure (Show/Hide) of Image Description

Similar examples include:

Example

-

+

+ - Charles Minard's 1869 chart showing the number of men in + +
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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LocationApproximate DateSize of ArmyTempature CTempature FDirection
Kowno RiverJune 24th442,000nanaAdvance
WilnaJune 30th400,000nanaAdvance
Witebskna175,000nanaAdvance
SmolenskAugust 16th145,000nanaAdvance
Chjatna127,000nanaAdvance
MojaiskSeptember 7th100,000nanaAdvance
MoscowSeptember 14th100,000nanaAdvance
Malo-jarosewliOctober 18th96,000032Retreat
MojaiskOctober 24th87,000032Retreat
Wirmana55,000nanaRetreat
SmolenskNovember 14th37,000-26-13Retreat
Orschana24,000nanaRetreat
Botrna20,000-14-7Retreat
Studienska (reinforcements arrive)December 1st50,000-25-13Retreat
MinskDecember 1st28,000-30-22Retreat
MolodernoDecember 6th28,000-38-34Retreat
SmorgeniDecember 7th12,000-33-27Retreat
Wilna - - na - - 8,000nanaRetreat
Kowno (reinforcements arrive)December 14th10,000nanaRetreat
-
+ encountered on the return path.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LocationApproximate DateSize of ArmyTempature CTempature FDirection
Kowno RiverJune 24th442,000nanaAdvance
WilnaJune 30th400,000nanaAdvance
Witebskna175,000nanaAdvance
SmolenskAugust 16th145,000nanaAdvance
Chjatna127,000nanaAdvance
MojaiskSeptember 7th100,000nanaAdvance
MoscowSeptember 14th100,000nanaAdvance
Malo-jarosewliOctober 18th96,000032Retreat
MojaiskOctober 24th87,000032Retreat
Wirmana55,000nanaRetreat
SmolenskNovember 14th37,000-26-13Retreat
Orschana24,000nanaRetreat
Botrna20,000-14-7Retreat
Studienska (reinforcements arrive)December 1st50,000-25-13Retreat
MinskDecember 1st28,000-30-22Retreat
MolodernoDecember 6th28,000-38-34Retreat
SmorgeniDecember 7th12,000-33-27Retreat
Wilna + + na + + 8,000nanaRetreat
Kowno (reinforcements arrive)December 14th10,000nanaRetreat
+ + +
+
+

Accessibility Features

+
    +
  1. The visual indication of expanded and collapsed states is synchronized with the value of aria-expanded using a CSS atribute selector and :before pseudo element that generates an image with the content property.
    2. +
  2. The interactivity of the disclosure button is visually indicated on focus and hover: +
      +
    • The CSS :focus pseudo class is used to change the background and border colors.
      • +
    • The CSS :hover pseudo class is used to change the background color and underline the text.
      • +
    +
    3. +
+
+

Keyboard Support

@@ -262,40 +278,18 @@

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - @@ -304,7 +298,7 @@

Role, Property, State, and Tabindex Attributes

aria-expanded="false"
- 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 + button - The disclosure button controls visibility of the container identified by the IDREF value. +
    +
  • The disclosure button controls visibility of the container identified by the IDREF value.
    • +
- span + button
    @@ -312,12 +306,12 @@

    Role, Property, State, and Tabindex Attributes

    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 + CSS attribute selectors (e.g. [aria-expanded="false"]) + 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 + The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
@@ -329,7 +323,7 @@

Role, Property, State, and Tabindex Attributes

aria-expanded="true" 		- span + button
    @@ -337,12 +331,12 @@

    Role, Property, State, and Tabindex Attributes

    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 + CSS attribute selectors (e.g. [aria-expanded="true"]) + 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 + The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
diff --git a/examples/disclosure/images/down-arrow-brown.png b/examples/disclosure/images/down-arrow-brown.png new file mode 100644 index 0000000000000000000000000000000000000000..fe3e38aa3137fad169770d5cb788db37a5d15390 GIT binary patch literal 1362 zcmV-Y1+DstP)4Tx062|}Rb6NtRTMtEb7vzY&QokOg>Hg1+lHrgWS zWcKdPn90sKGrRqvPeo9CG3uKX#J{(IASm?@+di}}l?o-=)F3E6wD^Ni=!>T7nL9I? zX}YoAW$t|Qo$sD|?zw001?ah|SeB6#0T!CBEf+H4bBB+JJu8rehoBb*p;u8ID_yBf z0ya+zcePvJL&AGs+11_tpRKn>9TgyPA7ZoSs0)aX0r00)%XR^J`jH<$>RKN5V(7Oq zK*TS4xZz{h!*f1C3ECFkK$#7nA@pGN!$;%jYvwjAKwmYb0gKL(K8 z-kPtb5${A?tlI~wzMrJ6wTdBr=Y%%%EaEMQ&o}4FQ^DA)s*}Z>!FI&AHCpoWI|RUq zx?7s@$8!5^Q=anY%X@i5{QA6kNcMelpE>R6eCYFpmMsVTrI(b06~u#xf1yS} z_UGdMvD``!0~u->P=lA4?YN`hilQ|3tHka)7T{2CGqw zjZfMwx$5irQN_*|e4l)UHmiYuz74Yp1t^#>hrJ3-SOXDcC_o0^7T9R1gAN8V6s;5) zieI5-7aQlmJn}lUna#nz!j%5V$X|o`xX!dHWQRV27P1=rj;t2bW$~+pTw@bIek?Zv zKPDL<64`^#UNTAck#RBsB6*5DP4<%UA_FqU$I>2EH_cM;u)Q~SI+rg`Rn{L_AC5qq~L$#SMj%U z$6Cz0vP{G5Y*=%5RT^yu;}-DInZ=349rJPVM6C3K^oO)8y(fJr{l>k`ead~!ea?NsT>_Ci%bnxC;Vy6=b6>{xYV#Ue-+LB$ z7`JEXmTRm^AtP)R9u{)KHsMiWGV&)32xCG~*nyU<>-!d;FP=Re4r3qYr~6#KE>;1F z`>_J_P5xC?ROxV(DIHdCO*p$HRQI@7^PwV@Pvuf+5K}u-6REM(K@W$s zrgorh0{i?O)v0c>QtHxU-hBdD(>iYJ4b2sIOVX2K8m~4gmYVA5h^QEb$V`rCQ-|7Z zS{nuL-t>?3n=-o(6I(7vocj#GzCZEo`!3>+v;dYIfPu#&ZWzzX2i^rZ^Mu;6+rb@? zNPG+6)c5T6zxpzGe*M(x+{AON=PiJ>H#?ob-|uwRK0yDg0B4PV0id6JRZw95ZvX%R z07*naR45f=U>J0OG0m8P3+SrfM7oTXg^`(UCBxreTK^ds{@~NZ$iTqDz|3}yg&KnbyBWT}SO14Y2NOt~Q}8B-ifI;5BLhRezn=N8SGRZm`}Lh4XcGzmDPUsb{KzJz z>OOJfrITRI6E|Kw#jD|1$jlD(4zdm)n}vg$0VD@f12PG$fq{YXf7ku3i`hk$rm?cI zLTmskW@Tez;8wJl*7arUB9Iy+4M64r#y=_r`^q`xjE^!iGBU8RurhEdTOE~8o>b1T zn(;5h6u1o#ZnmS?7a;?WBxYXGSIoR3uOuuJld>JPzrYmZq)QWAy-H(Uy|5_&0JyeA U9gsdwRR91007*qoM6N<$g5(>R-T(jq literal 0 HcmV?d00001 diff --git a/examples/disclosure/images/right-arrow-brown.png b/examples/disclosure/images/right-arrow-brown.png new file mode 100644 index 0000000000000000000000000000000000000000..9808455aea8f66c00b9b50251a823befc107fe89 GIT binary patch literal 1401 zcmV-<1%~>GP)4Tx062|}Rb6NtRTMtEb7vzY&QokOg>Hg1+lHrgWS zWcKdPn90sKGrRqvPeo9CG3uKX#J{(IASm?@+di}}l?o-=)F3E6wD^Ni=!>T7nL9I? zX}YoAW$t|Qo$sD|?zw001?ah|SeB6#0T!CBEf+H4bBB+JJu8rehoBb*p;u8ID_yBf z0ya+zcePvJL&AGs+11_tpRKn>9TgyPA7ZoSs0)aX0r00)%XR^J`jH<$>RKN5V(7Oq zK*TS4xZz{h!*f1C3ECFkK$#7nA@pGN!$;%jYvwjAKwmYb0gKL(K8 z-kPtb5${A?tlI~wzMrJ6wTdBr=Y%%%EaEMQ&o}4FQ^DA)s*}Z>!FI&AHCpoWI|RUq zx?7s@$8!5^Q=anY%X@i5{QA6kNcMelpE>R6eCYFpmMsVTrI(b06~u#xf1yS} z_UGdMvD``!0~u->P=lA4?YN`hilQ|3tHka)7T{2CGqw zjZfMwx$5irQN_*|e4l)UHmiYuz74Yp1t^#>hrJ3-SOXDcC_o0^7T9R1gAN8V6s;5) zieI5-7aQlmJn}lUna#nz!j%5V$X|o`xX!dHWQRV27P1=rj;t2bW$~+pTw@bIek?Zv zKPDL<64`^#UNTAck#RBsB6*5DP4<%UA_FqU$I>2EH_cM;u)Q~SI+rg`Rn{L_AC5qq~L$#SMj%U z$6Cz0vP{G5Y*=%5RT^yu;}-DInZ=349rJPVM6C3K^oO)8y(fJr{l>k`ead~!ea?NsT>_Ci%bnxC;Vy6=b6>{xYV#Ue-+LB$ z7`JEXmTRm^AtP)R9u{)KHsMiWGV&)32xCG~*nyU<>-!d;FP=Re4r3qYr~6#KE>;1F z`>_J_P5xC?ROxV(DIHdCO*p$HRQI@7^PwV@Pvuf+5K}u-6REM(K@W$s zrgorh0{i?O)v0c>QtHxU-hBdD(>iYJ4b2sIOVX2K8m~4gmYVA5h^QEb$V`rCQ-|7Z zS{nuL-t>?3n=-o(6I(7vocj#GzCZEo`!3>+v;dYIfPu#&ZWzzX2i^rZ^Mu;6+rb@? zNPG+6)c5T6zxpzGe*M(x+{AON=PiJ>H#?ob-|uwRK0yDg0B4PV0id6JRZw95ZvX%R zCrLy>R45f=U_b(C#tdBPW^9{_65V8xgi)AGC_Dy+-wc0$Y5ll!dUw9Ro;d@!Q{F*2zA1L*((AkD(U%D~Jk z@`^)BClRL&5Y<2uXypHYe}MQe0|U@E_%#4cXJut&;8rp}D&?AG+r41-HWs)^Xbg~B znK`%^*hH14DQ0de&vq310#bri1IXI{Y@8o?)Ex@D?r&Yp;K=v~q!