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

2.5.3 - control with label but no accname (understanding note + new failure technique) #2057

Merged
merged 14 commits into from
Mar 11, 2024
Merged

2.5.3 - control with label but no accname (understanding note + new failure technique) #2057

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
82b9b52
Update 2.5.3 understanding
patrickhlauke Sep 25, 2021
6c236d0
Typo
patrickhlauke Sep 25, 2021
6cd8856
Add new technique F109 control with visible label but no accname
patrickhlauke Sep 25, 2021
f2ddf04
Merge branch 'main' into patrickhlauke-issue2045
patrickhlauke Apr 18, 2022
876bad8
Change filename for new technique
patrickhlauke Sep 6, 2023
5636228
Tweak test procedure
patrickhlauke Sep 6, 2023
ab3923a
Update techniques/failures/F111.html
alastc Feb 2, 2024
623a203
Update techniques/failures/F111.html
patrickhlauke Feb 5, 2024
2d12f16
Update techniques/failures/F111.html
patrickhlauke Feb 5, 2024
d3dc4a3
Update techniques/failures/F111.html
patrickhlauke Feb 5, 2024
e8eb2ee
Update techniques/failures/F111.html
patrickhlauke Mar 9, 2024
28a0eed
Update techniques/failures/F111.html
patrickhlauke Mar 9, 2024
05f64a7
Add new technique to 2.5.3 understanding, clean up/correct document
patrickhlauke Mar 9, 2024
c4a37d6
Merge branch 'patrickhlauke-issue2045' of https://github.com/w3c/wcag…
patrickhlauke Mar 9, 2024
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
83 changes: 83 additions & 0 deletions techniques/failures/F111.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Failure of Success Criterion 2.5.3 due to a control with visible label text but no accessible name</title>
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Failure due to a control with visible label text but no accessible name</h1>
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">general</p>
<p id="type">failure</p>
</section>

<section id="applicability">
<h2>When to Use</h2>
<p>All technologies that include interactive controls (such as links or form inputs).</p>
</section>

<section id="description">
<h2>Description</h2>
<p>The objective of this Failure is to describe situations where speech input users cannot reliably speak the name of a control because although it has a visible label, it lacks an accessible name.</p>
<p>When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (like the text in a button or a link, or the text labelling some input). If the control lacks an accessible name, speech users won't be able to activate the control using its visible label.</p>
</section>

<section id="examples">
<h2>Examples</h2>

<section class="example">
<h3>A text input with a visible label, but without an accessible name</h3>
<p>The text input is preceded by a visible text label "Enter name", but the text is not marked up as a <code>&lt;label&gt;</code> for the input, and there is no alternative way (e.g., <code>aria-label</code>) to provide the input with an accessible name at all.</p>
<pre><code>
&lt;p&gt;Enter name&lt;/p&gt;
&lt;input type="text"&gt;
</code></pre>
</section>

<section class="example">
<h3>A text input with a visible label and aria-labelledby pointing to a non-existent id</h3>
<p>The text input is preceded by a visible text label "Enter name". The text's container has an <code>id</code> of <code>nameEntry</code>, but the input has an <code>aria-labelledby</code> referencing a non-existent <code>name-entry</code> <code>id</code>. As a result, the input lacks an accessible name altogether.</p>
<pre><code>
&lt;p id="nameEntry"&gt;Enter name&lt;/p&gt;
&lt;input type="text" aria-labelledby="name-entry" &gt;
</code></pre>
</section>
</section>

<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For all controls with a visible label (e.g., link text, button text, programmatically linked label, images in links or buttons with text, etc.), check that:</p>
<ol>
<li>The control has a visible text label.</li>
<li>The control has an accessible name.</li>
<li>The accessible name contains the text that appears as the visible label.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>If check #1 is false, the Success Criterion does not apply.</li>
<li>If check #1 is true, but checks #2 and/or #3 are false, the content fails the Success Criterion.</li>
<li>If all checks are true, the content passes the Success Criterion.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../../techniques/general/F96">F96</a></li>
<li><a href="../../techniques/general/G131">G131</a></li>
<li><a href="../../techniques/aria/ARIA7">ARIA7</a></li>
<li><a href="../../techniques/aria/ARIA8">ARIA8</a></li>
<li><a href="../../techniques/aria/ARIA9">ARIA9</a></li>
<li><a href="../../techniques/aria/ARIA14">ARIA14</a></li>
<li><a href="../../techniques/aria/ARIA16">ARIA16</a></li>
<li><a href="../../techniques/client-side-script/SCR30">SCR30</a></li>
</ul>
</section>
</body>
</html>
1 change: 1 addition & 0 deletions techniques/failures/F96.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ <h3>Expected Results</h3>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../../techniques/general/F111">F111</a></li>
<li><a href="../../techniques/general/G131">G131</a></li>
<li><a href="../../techniques/aria/ARIA7">ARIA7</a></li>
<li><a href="../../techniques/aria/ARIA8">ARIA8</a></li>
Expand Down
3 changes: 2 additions & 1 deletion understanding/21/label-in-name.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ <h2>Intent</h2>
<p>Note that where a visible text label does not exist for a component, this Success Criterion does not apply to that component.</p>
<p>Where text labels exist and are properly linked to the user interface components through established authoring practices, the label and name will normally match. When they don't match, speech-input users who attempt to use the visible text label as a means of navigation or selection (e.g., "move to Password") will be unsuccessful. The speech-based navigation fails because the visible label spoken by the users does not match (or is not part of) the accessible name that is enabled as a speech-input command. In addition, when the accessible name is different from the visible label, it may function as a hidden command that can be accidentally activated by speech-input users.</p>
<p>Mismatches between visible labels and programmatic names for controls are even more of an issue for speech-input and text-to-speech users who also have cognitive challenges. Mismatches create an extra cognitive load for speech-input users, who must remember to say a speech command that is different from the visible label they see on a control. It also creates extra cognitive load for a text-to-speech user to absorb and understand speech output that does not match the visible label.</p>
<p>Note that when a <a>user interface component</a> lacks an <a>accessible name</a> — a failure of <a href="name-role-value">4.1.2 Name, Role, Value</a> — and has a visible text label, then it also fails this Success Criterion.</p>
<h3>Identifying label text for components</h3>
<p>In order for the label text and accessible name to be matched, it is first necessary to determine which text on the screen should be considered a label for any given control. There are often multiple text strings in a user interface that may be relevant to a control. However, there are reasons why it is best to conservatively interpret the label as being only the text in close proximity.</p>
<p>Conventionally the label for user interface components is the adjacent text string. The typical positioning for left to right languages is:</p>
Expand All @@ -29,7 +30,7 @@ <h3>Identifying label text for components</h3>
<h3>Text labels "express something in human language"</h3>
<section>
<h4>Symbolic text characters</h4>
<p>For the purposes of this SC, text should not be considered a visible label if it is used in a symbolic manner, rather than directly <q>expressing something in human language</q> as per the definition of <a>text</a> in WCAG. For example, <a href="https://www.w3.org/TR/WCAG21/#images-of-text">1.4.5 Images of Text</a> describes considerations for "symbolic text characters." In the images of text example "B", "I", and "ABC" appear on icons in a text editor, where they are meant to symbolize the functions for Bold, Italics, and Spelling, respectively. In such a case, the accessible name should be the function the button serves (e.g., "Spell check" or "Check spelling"), not the visible symbolic characters. A similar text editor is shown in the figure below.</p>
<p>For the purposes of this SC, text should not be considered a visible label if it is used in a symbolic manner, rather than directly <q>expressing something in human language</q> as per the definition of <a>text</a> in WCAG. For example, <a href="images-of-text">1.4.5 Images of Text</a> describes considerations for "symbolic text characters." In the images of text example "B", "I", and "ABC" appear on icons in a text editor, where they are meant to symbolize the functions for Bold, Italics, and Spelling, respectively. In such a case, the accessible name should be the function the button serves (e.g., "Spell check" or "Check spelling"), not the visible symbolic characters. A similar text editor is shown in the figure below.</p>
patrickhlauke marked this conversation as resolved.
Show resolved Hide resolved
<figure id="figure-RTE-github">
<img alt="Icons for transforming text, including heading, bold, italic, quote, code, and link, along with icons for ordered and unordered lists and other controls" src="img/rich-text-editor-detail.png" />
<figcaption>A detail of the rich text editor in Github, showing a variety of unlabeled icons, including icons resembling text characters.</figcaption>
Expand Down