resolves #1407 by changing example in aria-brailleroledescription (#1409)

cookiecrook · web-flow · commit c38c9afa3cdb · 2021-03-04T15:43:40.000-08:00
diff --git a/index.html b/index.html
@@ -10641,11 +10641,17 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
 					<li>If the value of <code>aria-brailleroledescription</code> does not contain characters in <a>Unicode Braille Patterns</a>, translate the value according to the user's preferred translation table.</li>
 					<li>Otherwise, pass the value to the user without translation.</li>
 				</ol>
-				<p>The following example shows the use of <code>aria-brailleroledescription</code> to indicate that a button's description has a particular braille contraction.</p>
-				<pre class="example highlight">&lt;button aria-roledescription="planet" aria-brailleroledescription="pln" id="jupiter"&gt;
-&lt;img alt="jupiter" src="images/jupiter.jpg"/&gt;
-&lt;/button&gt;</pre>
-				<p>In the previous example, a braille display may display "pln Jupiter" in Braille rather than the verbose "planet Jupiter".</p>
+
+				<p>The following two examples show the use of <code>aria-brailleroledescription</code> to abbreviate the role of a repeated non-interactive "slide" container in a web-based presentation application.</p>
+				<pre class="example highlight">&lt;div role="article" aria-roledescription="slide" aria-brailleroledescription="sld" id="slide" aria-labelledby="slideheading"&gt;
+&lt;h1 id="slideheading">Quarterly Report&lt;/h1&gt;
+&lt;!-- remaining slide contents --&gt;
+&lt;/div&gt;</pre>
+				<pre class="example highlight">&lt;article aria-roledescription="slide" aria-brailleroledescription="sld" id="slide" aria-labelledby="slideheading"&gt;
+&lt;h1 id="slideheading">Quarterly Report&lt;/h1&gt;
+&lt;!-- remaining slide contents --&gt;
+&lt;/div&gt;</pre>
+				<p>In the previous examples, a braille screen reader user may read "sld Quarterly Report" rather than the more verbose "slide Quarterly Report."</p>
 			</div>
 			<table class="property-features">
 				<caption>Characteristics:</caption>
@@ -12696,15 +12702,15 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
 				</ol>
 				<p><a>Assistive technologies</a> SHOULD use the value of <code>aria-roledescription</code> when presenting the role of an element, but SHOULD NOT change other functionality based on the role of an element that has a value for <code>aria-roledescription</code>. For example, an assistive technology that provides functions for navigating to the next <rref>region</rref> or <rref>button</rref> SHOULD allow those functions to navigate to regions and buttons that have an <code>aria-roledescription</code>.</p>
 				<p>The following two examples show the use of <code>aria-roledescription</code> to indicate that a non-interactive container is a "slide" in a web-based presentation application.</p>
-				<pre class="example highlight">&lt;div role="region" aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading"&gt;
-&lt;h1 id="slide42heading">Quarterly Report&lt;/h1&gt;
+				<pre class="example highlight">&lt;div role="article" aria-roledescription="slide" id="slide" aria-labelledby="slideheading"&gt;
+&lt;h1 id="slideheading">Quarterly Report&lt;/h1&gt;
 &lt;!-- remaining slide contents --&gt;
 &lt;/div&gt;</pre>
-				<pre class="example highlight">&lt;section aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading"&gt;
-&lt;h1 id="slide42heading">Quarterly Report&lt;/h1&gt;
+				<pre class="example highlight">&lt;article aria-roledescription="slide" id="slide" aria-labelledby="slideheading"&gt;
+&lt;h1 id="slideheading">Quarterly Report&lt;/h1&gt;
 &lt;!-- remaining slide contents --&gt;
 &lt;/section&gt;</pre>
-				<p>In the previous examples, a screen reader user may hear "Quarterly Report, slide" rather than the more vague "Quarterly Report, region" or "Quarterly Report, group."</p>
+				<p>In the previous examples, a screen reader user may hear "Quarterly Report, slide" rather than the more vague "Quarterly Report, article" or "Quarterly Report, group."</p>
 			</div>
 			<table class="property-features">
 				<caption>Characteristics:</caption>
