Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Mar 4, 2021
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
19c8432
resolves #1407
cookiecrook Feb 23, 2021
4932b5b
addressing review comments from PR #1409: remove slide number and cha…
cookiecrook Feb 25, 2021
0fa579e
review comment from @carmacleod: change examples to article for consi…
cookiecrook Mar 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10620,11 +10620,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>
Expand Down Expand Up @@ -12726,15 +12732,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>
Expand Down