Skip to content

Commit

Permalink
Merge branch 'main' into focus-appearance-remove-AAA
Browse files Browse the repository at this point in the history
  • Loading branch information
@alastc
alastc committed May 25, 2022
2 parents 5f85c17 + 3136fb0 commit c7af7cc
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 34 deletions.
32 changes: 16 additions & 16 deletions techniques/aria/ARIA7.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby for link purpose</h1><section class="meta"><p class="id">ID: ARIA7</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link></head><body><h1>Using aria-labelledby for link purpose</h1><section class="meta"><p class="id">ID: ARIA7</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>With the <code class="att">aria-labelledby</code> attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).</p>
<p>When associating text to a focusable element with the help of <code class="att">aria-labelledby</code>, the target text element is given an ID which is referenced in the value of the <code class="att">aria-labelledby</code> attribute of the focusable element.</p>
<p>It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the <code class="att">aria-labelledby</code> attribute. The label text should then be concatenated following the order of IDs in the value of the <code class="att">aria-labelledby</code> attribute.</p>
<p>When applied on links, <code class="att">aria-labelledby</code> can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.</p>
<p>The specified behavior of <code class="att">aria-labelledby</code> is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the <code class="att">aria-labelledby</code> attribute.</p>
<p>For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#a-element">accessible name and description calculation for links</a> in the HTML to Platform Accessibility APIs Implementation Guide.</p>
<p>With the <code class="prop">aria-labelledby</code> attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).</p>
<p>When associating text to a focusable element with the help of <code class="prop">aria-labelledby</code>, the target text element is given an ID which is referenced in the value of the <code class="prop">aria-labelledby</code> attribute of the focusable element.</p>
<p>It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the <code class="prop">aria-labelledby</code> attribute. The label text should then be concatenated following the order of IDs in the value of the <code class="prop">aria-labelledby</code> attribute.</p>
<p>When applied on links, <code class="prop">aria-labelledby</code> can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.</p>
<p>The specified behavior of <code class="prop">aria-labelledby</code> is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the <code class="prop">aria-labelledby</code> attribute.</p>
<p>For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Providing additional information for links</h3>

<p>This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as:
<p>This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Screen readers will announce this as:
"Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.</p>
<pre xml:space="preserve">&lt;h2 id="headline"&gt;Storms hit east coast&lt;/h2&gt;

&lt;p&gt;Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
&lt;p&gt;Torrential rain and gale force winds have struck the east coast,
causing flooding in many coastal towns.
&lt;a id="p123" href="news.html" aria-labelledby="p123 headline"&gt;Read more...&lt;/a&gt;&lt;/p&gt;</pre>

</section>
<section class="example">
<h3>Concatenating link text from multiple sources</h3>

<p>There may be cases where an author will placed a tag around a section of code that will be referenced.</p>
<p>Note: The use of tabindex="-1" on the <code class="el">span</code> element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the <code class="el">span</code> element in the accessibility tree, thus making it available for reference by <code class="att">aria-labelledby</code>. For more details see <a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">Accessible HTML Elements</a>.</p>
<pre xml:space="preserve">&lt;p&gt;Download &lt;span id="report-title" tabindex="-1"&gt;2012 Sales Report&lt;/span&gt;:
<p>There may be cases where an author will place a tag around a section of code that will be referenced.</p>
<pre xml:space="preserve">&lt;p&gt;Download &lt;span id="report-title"&gt;2012 Sales Report&lt;/span&gt;:
&lt;a aria-labelledby="report-title pdf" href="#" id="pdf"&gt;PDF&lt;/a&gt; |
&lt;a aria-labelledby="report-title doc" href="#" id="doc"&gt;Word&lt;/a&gt; |
&lt;a aria-labelledby="report-title ppt" href="#" id="ppt"&gt;Powerpoint&lt;/a&gt;&lt;/p&gt;</pre>

</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each link that has an <code class="att">aria-labelledby</code> attribute:</p>
<p>For each link that has an <code class="prop">aria-labelledby</code> attribute:</p>
<ol>
<li>Check that each ID in the value of the <code class="att">aria-labelledby</code> attribute matches an ID of a text element used as part of the link purpose.</li>
<li>Check that the combined value of the text referenced by the one or more ID's in the <code class="att">aria-labelledby</code> attribute properly describes the purpose of the link element.</li>
<li>Check that each ID in the value of the <code class="prop">aria-labelledby</code> attribute matches an ID of a text element used as part of the link purpose.</li>
<li>Check that the combined value of the text referenced by the one or more ID's in the <code class="prop">aria-labelledby</code> attribute properly describes the purpose of the link element.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
Expand All @@ -51,4 +51,4 @@ <h3>Concatenating link text from multiple sources</h3>
</li>
</ul>

</section></body></html>
</section></body></html>
8 changes: 4 additions & 4 deletions techniques/css/C9.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
<li>
list-style-image. </li>
</ul>
<p>Note: This technique is not appropriate for any image that conveys
information or provides functionality, or for any image primarily intended
to create a specific sensory experience.</p>
<div class="note">
<p>This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.</p>
</div>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Background image for an HTML page </h3>
Expand Down Expand Up @@ -109,4 +109,4 @@ <h3>Background images with CSS to create rounded corners on
element is deprecated </li>
</ul>

</section></body></html>
</section></body></html>
8 changes: 4 additions & 4 deletions techniques/failures/F8.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
the "caption" does not include all of the dialogue (either verbatim or in
essence) as well as all important sounds then the 'Captions' are not real
captions. </p>
<p> NOTE: Captions sometimes simplify the spoken text both to make it easier to
read and to avoid forcing the viewer to read at very high speed. This is
standard procedure and does not invalidate a caption. </p>
<div class="note">
<p>Captions sometimes simplify the spoken text both to make it easier to read and to avoid forcing the viewer to read at very high speed. This is standard procedure and does not invalidate a caption.</p>
</div>
</section><section id="examples"><h2>Examples</h2>
<section class="example">

Expand All @@ -34,4 +34,4 @@
<li>If check #2 and check #3 are false, then this failure condition applies and the content fails the Success Criterion.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
2 changes: 1 addition & 1 deletion techniques/general/G219.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2>Description</h2>
<h2>Examples</h2>
<section class="example">
<ul>
<li>A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the the list via a <a>single pointer</a> inputs (taps or clicks at the up or down arrow).</li>
<li>A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the the list via <a>single pointer</a> inputs (taps or clicks at the up or down arrow).</li>
<li>A vertical priority list indicates the priority of items listed. Each item can be ‘picked up’ with a pointer and dragged up or down to another position. The other list items rearrange dynamically. To the left of each list item, a number in a text field shows the current priority position. For any of the items, users can put in another number. This leads to a dynamic reordering and renumbering of the priority list.</li>
<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.</li>
<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks. A directional horizontal swipe over an item moves it to the adjacent lane. This process can be repeated until the item is in the desired lane.</li>
Expand Down
11 changes: 5 additions & 6 deletions understanding/21/target-size-enhanced.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,17 @@ <h2>Examples</h2>
<h2>Resources</h2>
<p class="instructions"></p>
<ul>
<li><a href="https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/">Apple touch target size recommendations</a></li>
<li><a href="https://docs.microsoft.com/en-us/windows/uwp/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
<li><a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/">Apple touch target size recommendations</a></li>
<li><a href="https://docs.microsoft.com/en-us/windows/apps/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
<li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
<li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
<li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
<li><a href="http://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
<li><a href="https://docs.microsoft.com/en-us/archive/blogs/ie/guidelines-for-building-touch-friendly-sites">Microsoft Guidelines for Building Touch Friendly Sites</a></li>
<li><a href="https://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
<p>Each numbered item in this section represents a technique or combination of techniques that the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym>Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
<p>Each numbered item in this section represents a technique or combination of techniques that the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
<section id="sufficient">
<h3>Sufficient</h3>
<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
Expand All @@ -74,7 +73,7 @@ <h2>Advisory</h2>
</section>
<section id="failure">
<h2>Failure</h2>
<p class="instructions">The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group.</p>
<p class="instructions">The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group.</p>
<ul>
<li>Failure of success criterion 2.5.5 due to touch target being less than 44 by 44 CSS pixels.</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions understanding/22/focus-appearance.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ <h2>Intent of Focus Appearance</h2>

<p>For sighted people with mobility impairments who use a keyboard or keyboard-like device (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also be keyboard-only users.</p>

<p>A keyboard focus indicator can take different forms. This Success Criterion lists three primary considerations that can be met to consistently acheive a sufficient focus appearance. It then provides a list of exceptions for a focus indicator which may be less optimal for some users but still achieves a minimum level of focus appearance. This Understanding document will elaborate on each of the three primary considerations, then address the exceptions.</p>
<p>A keyboard focus indicator can take different forms. This Success Criterion lists three primary considerations that can be met to consistently achieve a sufficient focus appearance. It then provides a list of exceptions for a focus indicator which may be less optimal for some users but still achieves a minimum level of focus appearance. This Understanding document will elaborate on each of the three primary considerations, then address the exceptions.</p>

<section id="encloses">

Expand Down Expand Up @@ -108,7 +108,7 @@ <h4>Solidly</h4>

<figure id="focus-indicator-strong-dashed">
<img src="img/focus-indicator-strong-dashed-border.svg" alt="3 of 5 stars are selected with the whole third star outlined with a 2 pixel thick dashed line" />
<figcaption> Passes: the dashed outline does not "solidly bound" the third star; however, the dashed line meets the area requirements of the exception langauge.</figcaption>
<figcaption> Passes: the dashed outline does not "solidly bound" the third star; however, the dashed line meets the area requirements of the exception language.</figcaption>
</figure>
</section>

Expand Down
2 changes: 1 addition & 1 deletion understanding/22/redundant-entry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h2>Intent of Redundant Entry</h2>
<li>tick a checkbox to populate inputs with the same values as previously entered (e.g., my billing address is the same as my shipping address).</li>
</ul>

<p>This Success Criterion does not apply if data is provide by the user with a different method, such as uploading a resume in a document format.</p>
<p>This Success Criterion does not apply if data is provided by the user with a different method, such as uploading a resume in a document format.</p>

<p>This Success Criterion does not impact <a href="accessible-authentication.html">Accessible Authentication</a>, for which allowing auto-filling of passwords is a sufficient technique. In that case the filling is performed by the user's browser. Redundant Entry is asking for the website content to make the previous entry available, but not between sessions or for essential purposes such as asking for a password.</p>

Expand Down

0 comments on commit c7af7cc

Please sign in to comment.