Skip to content

Commit

Permalink
Fixing some monthly issues (#3810)
Browse files Browse the repository at this point in the history 
* Elements must be properly terminated with a matching end-tag
* Headings must be inside sections
  • Loading branch information
@iadawn
iadawn committed May 2, 2024
1 parent cb2b9c4 commit f1c0540
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 44 deletions.
2 changes: 1 addition & 1 deletion techniques/aria/ARIA12.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using role=heading to identify headings</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
</head>
<body>
<h1>Using <code class="language-html">role=heading</code> to identify headings</h1>
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F15.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h1>Failure of Success Criterion 4.1.2 due to implementing custom controls that
<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
</li>
<li>
<a href="https://www.w3.org/TR/html-aria/"ARIA in HTML</a>
<a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
</li>
</ul>

Expand Down
23 changes: 13 additions & 10 deletions techniques/general/G211.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,21 @@ <h3>Text in <code class="language-html">label</code> element provides name for i
<pre><code class="language-html">&lt;input type="checkbox" id="notification" name="notify" value="delays"&gt;
&lt;label for="notification"&gt;Notify me of delays&lt;/label&gt;
</code></pre>
<h4>Working sample of input</h4>
<input type="checkbox" id="notification" name="notify" value="delays"/>
<label for="notification">Notify me of delays</label>
<section>
<h4>Working sample of input</h4>
<input type="checkbox" id="notification" name="notify" value="delays"/>
<label for="notification">Notify me of delays</label>
</section>
</section>
<section class="example">
<h3>The button text provides the accessible name</h3>

<p>The text inside a <code class="language-html">button</code> element becomes both its visible label and its accessible name:</p>
<code class="language-html">&lt;button&gt;Send&lt;/button&gt;</code>

<h4>Non-working sample of button</h4>
<button type="button">Send</button>
<section>
<h4>Non-working sample of button</h4>
<button type="button">Send</button>
</section>
</section>

<section class="example">
Expand Down Expand Up @@ -133,7 +136,7 @@ <h3>Range of inputs with few labels</h3>
</figure>

<p>The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using <code class="language-html">legend</code>). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.</p>
<pre><code class=""language-html>&lt;fieldset&gt;
<pre><code class="language-html">&lt;fieldset&gt;
&lt;legend&gt;Rate your response&lt;/legend&gt;
&lt;label for="hated"&gt;Hated it&lt;/label&gt;
&lt;input type="radio" name="meal" id="hated" value="hated"&gt;
Expand All @@ -156,16 +159,16 @@ <h3>Text in parentheses and punctuation</h3>
&lt;label for="name"&gt;Name&lt;/label&gt; *
&lt;input type="text" name="name" id="name" required&gt;
&lt;label for="birth"&gt;Birth date&lt;/label&gt; &lt;span id="mask"&gt;(YYYY-MM-DD)&lt;/span&gt;
&lt;input type="text" name="birth" id="birth" aria-describedby="mask"&gt;</pre></code>
&lt;input type="text" name="birth" id="birth" aria-describedby="mask"&gt;</code></pre>

<section>
<h4>Working sample of inputs with simplified accessible names</h4>


<div><label for="name">Name</label> *</div>
<input type="text" name="name" id="name" required>
<input type="text" name="name" id="name" required="required"/>
<div><label for="birth">Birthdate</label> <span id="mask">(YYYY-MM-DD)</span></div>
<input type="text" name="birth" id="birth" aria-describedby="mask">
<input type="text" name="birth" id="birth" aria-describedby="mask"/>
</section>

<p>
Expand Down
39 changes: 24 additions & 15 deletions techniques/general/G56.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,46 @@ <h3>An announcer speaking over a riot scene</h3>
<h3>Sufficient audio contrast between a narrator and background music</h3>

<p>This example demonstrates a voice with music in the background in which the voice is the appropriate 20 DB above the background. The voice (foreground) is recorded at -17.52 decibels (average RMS) and the music (background) is at -37.52 decibels, which makes the foreground 20 decibels louder than the background.</p>
<h4>Audio example</h4>
<p class="working-example">
<a href="../../working-examples/audio-contrast/good-contrast.mp3">Audio Example: Foreground is 20 decibels above the background (mp3)</a>
</p>
<h4>Transcript of audio example (good contrast)</h4>
<p>"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done.."</p>
<h4>Visual example of the recording above</h4>
<p>The audio example above is visually represented below in a snapshot of the file in an audio editor. A section is highlighted that contains foreground and background. It is a much larger wave than the section that contains only background.</p>
<figure id="figure-visual-color-contrast">
<img alt="A display showing a sound wave. The left third of the sound wave is just background noise, registering from -10 to +10 decibels. The remaining right-hand section is foreground and background noise showing a range from -50 to +40 decibels." src="img/Audio_3.jpg"/>
<figcaption>Visual representation of sufficient contrast.</figcaption>
</figure>

<section>
<h4>Audio example</h4>
<p class="working-example">
<a href="../../working-examples/audio-contrast/good-contrast.mp3">Audio Example: Foreground is 20 decibels above the background (mp3)</a>
</p>
</section>
<section>
<h4>Transcript of audio example (good contrast)</h4>
<p>"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done.."</p>
</section>
<section>
<h4>Visual example of the recording above</h4>
<p>The audio example above is visually represented below in a snapshot of the file in an audio editor. A section is highlighted that contains foreground and background. It is a much larger wave than the section that contains only background.</p>
<figure id="figure-visual-color-contrast">
<img alt="A display showing a sound wave. The left third of the sound wave is just background noise, registering from -10 to +10 decibels. The remaining right-hand section is foreground and background noise showing a range from -50 to +40 decibels." src="img/Audio_3.jpg"/>
<figcaption>Visual representation of sufficient contrast.</figcaption>
</figure>
</section>
</section>
<section class="example">
<h3>Insufficient Audio Contrast between a narrator and background music</h3>

<section>
<h4>Audio example of the failure</h4>
<p>This example demonstrates a voice with music in the background in which the voice is not 20 DB above the background. The voice (foreground) is at -18 decibels and the music (background) is at about -16 decibels making the foreground only 2 decibels louder than the background.</p>
<p class="working-example">
<a href="../../working-examples/audio-contrast/bad-contrast.mp3">Audio Example: Foreground is less than 20 decibels above the background (mp3)</a>
</p>
</section>
<section>
<h4>Transcript of audio example (bad contrast)</h4>
<p>"This is an example of a voice that is not loud enough against the background. The voice which is the foreground is only about 2 decibels above the background. Therefore is difficult to understand for a person who is hard of hearing. It is hard to discern one word from the next. This is an example of what not to do."</p>
</section>
<section>
<h4>Visual example of the failure</h4>
<p>The highlighted section contains foreground and background. The wave is almost the same size the section that contains only background, which means the background is too loud in comparison to the foreground voice.</p>
<figure id="figure-visual-representation-poor-contrast">
<img alt="A display showing a sound wave. A short section on the left is just background noise with a range of -35db to +35db. The main section of the wave has background and foreground noise, with a range of almost -70db to +70db. The final background-only section has a spike of a similar size." src="img/Audio_4.jpg"/>
<figcaption>Visual representation of bad contrast.</figcaption>
</figure>

</section>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
Expand Down
4 changes: 2 additions & 2 deletions understanding/20/name-role-value.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8"></meta>
<title>Understanding Name, Role, Value</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
</head>
<body>
<h1>Understanding Name, Role, Value</h1>
Expand Down
29 changes: 14 additions & 15 deletions understanding/21/label-in-name.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,26 +50,25 @@ <h4>Symbolic text characters</h4>
</figure>
<p>Likewise, where an author has used a greater-than symbol (">") to mimic the appearance of the right-facing arrow, the text does not convey something in human language. It is a symbol, in this scenario likely meant to mimic the icons used for a "Play" button or a "Next" arrow.</p>
</section>
<h4>Punctuation and capitalization</h4>

<section>
<p>The use of punctuation and capitalization in labels <em>may</em> also be considered optional for the same reason. For example, the colon conventionally added at the end of input labels does not express something in human language, and capitals on the first letter of each word in a label do not normally alter the words' meaning. This is particularly relevant in the context of this SC, since it is primarily aimed at users of speech recognition; capitals and most punctuation are frequently ignored when a user speaks a label as a means of interacting with a control.</p>

<p>While it is certainly not an error to include the colon and capitalization in the accessible name, a computed name of "First name" should not be considered a failure of "First Name:".<br />
<label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname" /><br />
Likewise, "Next…" visibly shown on a button could have "Next" as the accessible name.<br />
<input type="submit" value="Next..." />. When in doubt, where a meaningful visible label exists, match the string exactly for the accessible name.</p>
<h4>Punctuation and capitalization</h4>
<p>The use of punctuation and capitalization in labels <em>may</em> also be considered optional for the same reason. For example, the colon conventionally added at the end of input labels does not express something in human language, and capitals on the first letter of each word in a label do not normally alter the words' meaning. This is particularly relevant in the context of this SC, since it is primarily aimed at users of speech recognition; capitals and most punctuation are frequently ignored when a user speaks a label as a means of interacting with a control.</p>

<p>While it is certainly not an error to include the colon and capitalization in the accessible name, a computed name of "First name" should not be considered a failure of "First Name:".<br />
<label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname" /><br />
Likewise, "Next…" visibly shown on a button could have "Next" as the accessible name.<br />
<input type="submit" value="Next..." />. When in doubt, where a meaningful visible label exists, match the string exactly for the accessible name.</p>
</section>

<h4>Mathematical expressions and formulae</h4>
<section>
<p>Mathematical expressions are an exception to the previous subsection about symbolic characters. Math symbols can be used as labels; for example "11&#215;3=33" and "A>B" convey meaning.<br />
<section>
<h4>Mathematical expressions and formulae</h4>
<p>Mathematical expressions are an exception to the previous subsection about symbolic characters. Math symbols can be used as labels; for example "11&#215;3=33" and "A>B" convey meaning.<br />

<input type="radio" name="equation" id="answer1" value="A&gt;B" /><label for="answer1">A&gt;B</label>
<input type="radio" name="equation" id="answer2" value="11&times3=33" /><label for="answer2">11&times3=33</label>
</p>
<p>The label should not be overwritten in the accessible name, and substitutions of words where a formula is used should be avoided since there are multiple ways to express the same equation. For example, making the name "eleven multiplied by three is equivalent to thirty-three" might mean a user who said "eleven times three equals thirty-three" may not match. It is best to leave the formulas as used in the label and count on the user's familiarity with their speech software to achieve a match. Further, converting a mathematical formula label into an accessible name that is a spelled-out equivalent may create issues for translation. The name should match the label's formula text. Note that a consideration for authors is to use the proper symbol in the formula. For instance 11x3 (with a lower or upper case letter X), 11*3 (with the asterisk symbol), and 11&#215;3 (with the <code>&amp;</code>times<code>;</code> symbol) are all easy for sighted users to interpret as meaning the same formula, but may not all be matched to "11 times 3" by the speech recognition software. The proper operator symbol (in this case the times symbol) should be used.</p>
<input type="radio" name="equation" id="answer1" value="A&gt;B" /><label for="answer1">A&gt;B</label>
<input type="radio" name="equation" id="answer2" value="11&#215;3=33" /><label for="answer2">11&#215;3=33</label>
</p>
<p>The label should not be overwritten in the accessible name, and substitutions of words where a formula is used should be avoided since there are multiple ways to express the same equation. For example, making the name "eleven multiplied by three is equivalent to thirty-three" might mean a user who said "eleven times three equals thirty-three" may not match. It is best to leave the formulas as used in the label and count on the user's familiarity with their speech software to achieve a match. Further, converting a mathematical formula label into an accessible name that is a spelled-out equivalent may create issues for translation. The name should match the label's formula text. Note that a consideration for authors is to use the proper symbol in the formula. For instance 11x3 (with a lower or upper case letter X), 11*3 (with the asterisk symbol), and 11&#215;3 (with the <code>&amp;</code>times<code>;</code> symbol) are all easy for sighted users to interpret as meaning the same formula, but may not all be matched to "11 times 3" by the speech recognition software. The proper operator symbol (in this case the times symbol) should be used.</p>
</section>
</section>
<section>
Expand All @@ -89,7 +88,7 @@ <h4>Text in parentheses</h4>
<section>
<p>Note: The term "parenthetical" in this section is describing text that literally appears within a set of round brackets (). It is not used in the more abstract sense of "information related to".</p>
<p>It is important to mention parenthetical text in labels in the context of accessible name versus description. In common usage, text in parentheses is considered secondary but relevant to meaning. Users of speech recognition would not typically announce text in parentheses as part of the input name. For that reason, parenthetical text may be optionally considered a description and left out of the accessible name.</p>
<p>However, where parenthetical information provides important context, such as indication of a required field or limitations on what is allowed for input, this information must be provided programmatically in some other way to the user if that information is not included as part of the accessible name. For example, "Name (required)" and "Date (YYYY-MM-DD)" could accept "Name" and "Date" as the accessible names. However, in order to pass 1.3.1 Info & Relationships, authors would need to programmatically surface both the required state and the limit on the allowed data formatting (in this example, eight integers fitting the YYYY-MM-DD pattern). The "required" state could be surfaced through the HTML <code>required</code> attribute or by using <code>aria-required="true"</code>. The allowed data formatting could be surfaced by being referenced using the <code>aria-describedby</code>) attribute.</p>
<p>However, where parenthetical information provides important context, such as indication of a required field or limitations on what is allowed for input, this information must be provided programmatically in some other way to the user if that information is not included as part of the accessible name. For example, "Name (required)" and "Date (YYYY-MM-DD)" could accept "Name" and "Date" as the accessible names. However, in order to pass 1.3.1 Info &amp; Relationships, authors would need to programmatically surface both the required state and the limit on the allowed data formatting (in this example, eight integers fitting the YYYY-MM-DD pattern). The "required" state could be surfaced through the HTML <code>required</code> attribute or by using <code>aria-required="true"</code>. The allowed data formatting could be surfaced by being referenced using the <code>aria-describedby</code>) attribute.</p>
</section>


Expand Down

0 comments on commit f1c0540

Please sign in to comment.