From db5754752e709cdd17cf8e613e67501a04bcfbd6 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 and Revise CSS 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. --- 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!