Disclosure examples for FAQ and image description: Update accessibility features documentation and implement coding practices in latest code guide

aria-practices.html

@@ -1227,7 +1227,7 @@ <h3>Disclosure (Show/Hide)</h3>
       <section class="notoc">
         <h4>Examples</h4>
         <ul>
-          <li><a href="examples/disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) of Image Description</a></li>
+          <li><a href="examples/disclosure/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
           <li><a href="examples/disclosure/disclosure-faq.html">Disclosure (Show/Hide) of Answers to Frequently Asked Questions</a></li>
           <li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) Navigation Menu</a></li>
           <li><a href="examples/disclosure/disclosure-navigation-hybrid.html">Disclosure (Show/Hide) Navigation Menu with Top-Level Links</a></li>

examples/disclosure/css/disclosure-faq.css

@@ -1,12 +1,12 @@
 dl.faq button {
   margin: 0;
-  padding: 0;
   margin-top: 1em;
+  padding: 4px 8px;
   font-weight: bold;
   font-size: 110%;
-  border: thin solid transparent;
+  border: none;
   background-color: transparent;
-  padding-left: 0.125em;
+  border-radius: 5px;
 }
 
 dl dd {
@@ -17,35 +17,30 @@ dl dd {
 
 dl.faq .desc {
   margin: 0;
-  padding: 0.5em;
+  margin-top: 0.25em;
+  padding: 0.25em;
   font-size: 110%;
   display: none;
-  background-color: #fffedb;
+  background-color: #fed;
 }
 
 dl.faq button:hover,
 dl.faq button:focus {
-  background-color: #eee;
-}
-
-dl.faq button:focus {
-  border-color: #630;
-}
-
-dl.faq button:hover {
-  text-decoration: underline;
-}
-
-dl.faq button:active {
-  background-color: #bbb;
+  padding: 2px 6px;
+  background-color: #def;
+  border: 2px solid #005a9c;
+  cursor: pointer;
 }
 
 dl.faq button[aria-expanded="false"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
-  padding-right: 0.35em;
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
+  position: relative;
+  left: -2px;
 }
 
 dl.faq button[aria-expanded="true"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
-  padding-right: 0.35em;
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
+  position: relative;
+  left: -4px;
+  top: 2px;
 }

examples/disclosure/css/disclosure-image-description.css

@@ -0,0 +1,45 @@
+figure button {
+  margin: 0;
+  margin-top: 1em;
+  padding: 4px 8px;
+  font-weight: bold;
+  font-size: 110%;
+  border: none;
+  background-color: transparent;
+  border-radius: 5px;
+}
+
+figure button:hover,
+figure button:focus {
+  padding: 2px 6px;
+  background-color: #def;
+  border: 2px solid #005a9c;
+  cursor: pointer;
+}
+
+figure button[aria-expanded="false"]::before {
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
+  position: relative;
+  left: -2px;
+}
+
+figure button[aria-expanded="true"]::before {
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
+  position: relative;
+  left: -4px;
+  top: 2px;
+}
+
+figure figcaption {
+  text-align: left;
+}
+
+figure h3 {
+  margin: 0;
+  padding: 0;
+  margin-top: 1em;
+}
+
+figure .long_desc table tr:nth-child(even) {
+  background-color: #fed;
+}

examples/disclosure/disclosure-faq.html

@@ -13,7 +13,7 @@
 
   <!--  js and css for the disclosure example. -->
   <link href="css/disclosure-faq.css" rel="stylesheet">
-  <script src="js/disclosureButton.js" type="text/javascript"></script>
+  <script src="js/disclosure-button.js" type="text/javascript"></script>
 
 </head>
 <body>
@@ -35,7 +35,7 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
   <p>Similar examples include:</p>
   <ul>
     <li>
-      <a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
+      <a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
     </li>
     <li>
       <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
@@ -96,20 +96,29 @@ <h2 id="ex_label">Example</h2>
 
   <section>
     <h2>Accessibility Features</h2>
-    <ol>
+    <ul>
       <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 attribute 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>
+        To provide a visual indication the labels can also be used to change the state of the button, the background color changes, a border appears and the cursor changes to a pointer when a pointer hovers over the button. The border and pointer changes help people with visual impairments identify the element as interactive.
+      </li>
+      <li>
+        Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
+      </li>
+      <li>
+        The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that defines an SVG graphic to visually identify the state of a disclosure button using the <code>content</code> property.
       </li>
-    </ol>
+        <li>
+          To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content.
+          For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentColor</code> value for the <code>stroke</code> and <code>fill</code> properties of the <code>polygon</code> elements used to draw the arrows.
+          If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.<br>
+          Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentColor</code> value to be updated in high contrast mode.
+          Some browsers do not use <code>auto</code> for the default value.
+        </li>
+      </ul>
   </section>
 
   <section>
@@ -232,7 +241,7 @@ <h2>Javascript and CSS Source Code</h2>
       </li>
       <li>
         Javascript:
-        <a href="js/disclosureButton.js" type="text/javascript">disclosureButton.js</a>
+        <a href="js/disclosure-button.js" type="text/javascript">disclosureButton.js</a>
       </li>
     </ul>
   </section>

examples/disclosure/disclosure-img-long-description.html → examples/disclosure/disclosure-image-description.html

@@ -11,8 +11,8 @@
 <script src="../js/highlight.pack.js"></script>
 <script src="../js/app.js"></script>
 
-<link href="css/disclosure-img-long-description.css" rel="stylesheet">
-<script src="js/disclosureButton.js" type="text/javascript"></script>
+<link href="css/disclosure-image-description.css" rel="stylesheet">
+<script src="js/disclosure-button.js" type="text/javascript"></script>
 
 </head>
 <body>
@@ -68,8 +68,10 @@ <h2 id="ex_label">Example</h2>
             In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army.
           </p>
   <p><strong>Note: A French translation from Wikipedia.</strong></p>
-        <button type="button" aria-expanded="true" aria-controls="id_long_desc">Data Table for Minard's Chart</button>
-        <div id="id_long_desc">
+        <button type="button" aria-expanded="true" aria-controls="id_long_desc">
+          Data Table for Minard's Chart
+        </button>
+        <div class="long_desc" id="id_long_desc">
           <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of Russia</h3>
           <table aria-labelledby="id_data_label" class="data">
             <thead>
@@ -246,15 +248,24 @@ <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of
 
   <section>
     <h2>Accessibility Features</h2>
-    <ol>
-    <li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
-      <li>The interactivity of the disclosure button 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>
+    <ul>
+      <li>
+        To provide a visual indication the labels can also be used to change the state of the button, the background color changes, a border appears and the cursor changes to a pointer when a pointer hovers over the button. The border and pointer changes help people with visual impairments identify the element as interactive.
+      </li>
+      <li>
+        Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
       </li>
-    </ol>
+      <li>
+        The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that defines an SVG graphic to visually identify the state of a disclosure button using the <code>content</code> property.
+      </li>
+        <li>
+          To ensure the SVG arrow graphic has sufficient contrast with the background when high contrast settings invert colors, the color of the arrow is synchronized with the color of the text content.
+          For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentColor</code> value for the <code>polygon</code> properties of the <code>polygon</code> elements used to draw the arrows.
+          If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make the arrow invisible if the color matched the high contrast mode background.<br>
+          Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentColor</code> value to be updated in high contrast mode.
+          Some browsers do not use <code>auto</code> for the default value.
+        </li>
+    </ul>
   </section>
 
   <section>
@@ -374,11 +385,11 @@ <h2>Javascript and CSS Source Code</h2>
     <ul id="css_js_files">
       <li>
         CSS:
-        <a href="css/disclosure-img-long-description.css" type="tex/css">disclosure-img-long-description.css</a>
+        <a href="css/disclosure-image-description.css" type="tex/css">disclosure-img-long-description.css</a>
       </li>
       <li>
         Javascript:
-        <a href="js/disclosureButton.js" type="text/javascript">disclosureButton.js</a>
+        <a href="js/disclosure-button.js" type="text/javascript">disclosureButton.js</a>
       </li>
     </ul>
   </section>

examples/disclosure/disclosure-navigation-hybrid.html

@@ -44,7 +44,7 @@ <h1>Example Disclosure Navigation Menu with Top-Level Links</h1>
     <ul>
       <li><a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a></li>
       <li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
-      <li><a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
+      <li><a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
       <li><a href="../menubar/menubar-navigation.html">Navigation Menubar Example</a></li>
     </ul>
 

examples/disclosure/disclosure-navigation.html

@@ -42,7 +42,7 @@ <h1>Example Disclosure Navigation Menu</h1>
     <p>Similar examples include:</p>
   <ul>
     <li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
-    <li><a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
+    <li><a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
     <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
     <li><a href="../menubar/menubar-navigation.html">Navigation Menubar Example</a></li>
   </ul>