You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"secondary": "This success criterion is **related** to this rule. This is because this criterion applies to a visible transcript."
2043
+
},
2044
+
"wcag20:1.2.1": {
2045
+
"secondary": "This success criterion is **less strict** than this rule. This is because this criterion does not require a transcript when the audio-only or video-only is a media alternative for text and is clearly labeled as such. Some of the failed examples may satisfy this success criterion."
2038
2046
}
2039
2047
},
2040
2048
"input_aspects": [
@@ -4275,7 +4283,10 @@
4275
4283
{
4276
4284
"title": "Video element visual-only content has transcript",
"secondary": "This success criterion is **related** to this rule. This is because this criterion applies to a visible transcript."
4310
+
},
4311
+
"wcag20:1.2.1": {
4312
+
"secondary": "This success criterion is **less strict** than this rule. This is because this criterion does not require a transcript when the audio-only or video-only is a media alternative for text and is clearly labeled as such. Some of the failed examples may satisfy this success criterion."
Copy file name to clipboardExpand all lines: guidelines/terms/20/accessibility-supported.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -80,7 +80,7 @@
80
80
81
81
<pclass="note">The Accessibility Guidelines Working Group and the W3C do not specify which or how much support by assistive
82
82
technologies there must be for a particular use of a web technology in order for it
83
-
to be classified as accessibility supported. (See <ahref="https://www.w3.org/WAI/WCAG21/Understanding/conformance#support-level">Level of Assistive Technology Support Needed for "Accessibility Support"</a>.)
83
+
to be classified as accessibility supported. (See <ahref="https://www.w3.org/WAI/WCAG22/Understanding/conformance#support-level">Level of Assistive Technology Support Needed for "Accessibility Support"</a>.)
84
84
</p>
85
85
86
86
<pclass="note">Web technologies can be used in ways that are not accessibility supported as long
@@ -100,7 +100,7 @@
100
100
101
101
<pclass="note">One way for authors to locate uses of a technology that are accessibility supported
102
102
would be to consult compilations of uses that are documented to be accessibility supported.
103
-
(See <ahref="https://www.w3.org/WAI/WCAG21/Understanding/conformance#documented-lists">Understanding Accessibility-Supported Web Technology Uses</a>.) Authors, companies, technology vendors, or others may document accessibility-supported
103
+
(See <ahref="https://www.w3.org/WAI/WCAG22/Understanding/conformance#documented-lists">Understanding Accessibility-Supported Web Technology Uses</a>.) Authors, companies, technology vendors, or others may document accessibility-supported
104
104
ways of using web content technologies. However, all ways of using technologies in
105
105
the documentation would need to meet the definition of accessibility-supported Web
Copy file name to clipboardExpand all lines: guidelines/terms/20/text-alternative.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@
10
10
text alternative for the chart indicates that a description follows.
11
11
</p></aside>
12
12
13
-
<pclass="note">Refer to <ahref="https://www.w3.org/WAI/WCAG21/Understanding/conformance#text-alternatives">Understanding Text Alternatives</a> for more information.
13
+
<pclass="note">Refer to <ahref="https://www.w3.org/WAI/WCAG22/Understanding/conformance#text-alternatives">Understanding Text Alternatives</a> for more information.
<!DOCTYPE html><htmllang="en"><head><title>Using aria-label to provide an invisible label where a visible label cannot be used</title><linkrel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using aria-label to provide an invisible label where a visible label cannot be used</h1><sectionclass="meta"><pclass="id">ID: ARIA14</p><pclass="technology">Technology: aria</p><pclass="type">Type: Technique</p></section><sectionid="applicability"><h2>When to Use</h2>
1
+
<!DOCTYPE html>
2
+
<htmllang="en">
3
+
<head>
4
+
<title>Using aria-label to provide an accessible name where a visible label cannot be used</title>
<p>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up <code>div</code>s (light boxes) to indicate the control for closing the div.
5
-
</p>
6
-
<p>In some situations, elements can be given the attribute <code>aria-label</code> to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.</p>
18
+
</section>
19
+
<sectionid="description">
20
+
<h2>Description</h2>
21
+
<p>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “×” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.
22
+
</p>
23
+
<p>When no clear visible text label is available due to design decisions, the <ahref="https://www.w3.org/TR/accname-1.2/#dfn-accessible-name">accessible name</a> can be set by using the <code>aria-label</code> attribute instead, provided that the element has an implicit or explicit <ahref="https://www.w3.org/TR/wai-aria-1.2/#namefromauthor">role that supports naming</a>.</p>
24
+
25
+
<p>The <code>aria-label</code> attribute can also be used to provide an accessible name for custom controls that are not <ahref="https://html.spec.whatwg.org/multipage/forms.html#category-label">labelable elements</a>, and cannot therefore use a <code><label></code> element with the <code>for</code> attribute.</p>
7
26
8
-
<p>In other situations, elements can be given the attribute <code>aria-label</code>to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a <code>div</code>set to <code>contentEditable</code>is used instead of native form elements such as <code>input type="text"</code> or <code>textarea</code> in order to provide a richer text editing experience.</p>
27
+
<p>For instance, <code>aria-label</code>or <code>aria-labelledby</code> are the most suitable way to provide an accessible name when a <code><div></code>element is made editable using the <code>contentEditable</code>attribute, instead of native form elements such as <code><input type="text"></code> or <code><textarea></code> in order to provide a richer text editing experience.</p>
9
28
10
-
</section><sectionid="examples"><h2>Examples</h2>
29
+
</section>
30
+
<sectionid="examples">
31
+
<h2>Examples</h2>
11
32
<sectionclass="example">
12
-
<h3>A close button in a pop-up box</h3>
13
-
14
-
<p>On a page, a link displays a pop-up box (a <code>div</code>) with additional information. The 'close' element is implemented as a <code>button</code> containing merely the letter 'X'. The property <code>aria-label="close"</code> is used to provide an accessible name to the <code>button</code>.</p>
<p>On a page, a button displays a dialog (a <code><div></code> element) with additional information. The “close” element is implemented as a <code><button></code> containing merely the symbol “×”. The property <code>aria-label="close"</code> is used to provide an accessible name to the button.</p>
0 commit comments