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
<h1>Using the <codeclass="language-html">aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
7
+
<h1>Using the <code>aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
8
8
<sectionclass="meta">
9
9
<pclass="id">ID: ARIA1</p>
10
10
<pclass="technology">Technology: aria</p>
@@ -16,18 +16,18 @@ <h2>When to Use</h2>
16
16
</section>
17
17
<sectionid="description">
18
18
<h2>Description</h2>
19
-
<p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <ahref="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><codeclass="language-html">aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <codeclass="language-html">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <codeclass="language-html">id</code> reference list. The <codeclass="language-html">id</code> reference list contains one or more unique element <codeclass="language-html">id</code>s.</p>
19
+
<p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <ahref="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code>aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code>aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code>id</code> reference list. The <code>id</code> reference list contains one or more unique element <code>id</code>s.</p>
20
20
<p>Refer to <ahref="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.</p>
21
21
<divclass="note">
22
-
<p>The <codeclass="language-html">aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <codeclass="language-html">id</code>, it must reference an element in the same <abbrtitle="Document Object Model">DOM</abbr> document.</p>
22
+
<p>The <code>aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code>id</code>, it must reference an element in the same <abbrtitle="Document Object Model">DOM</abbr> document.</p>
23
23
</div>
24
24
</section>
25
25
<sectionid="examples">
26
26
<h2>Examples</h2>
27
27
<sectionclass="example">
28
-
<h3>Using <codeclass="language-html">aria-describedby</code> to associate instructions with form fields</h3>
28
+
<h3>Using <code>aria-describedby</code> to associate instructions with form fields</h3>
29
29
30
-
<p>Sample form field using <codeclass="language-html">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
30
+
<p>Sample form field using <code>aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
<span id="fontDesc">Select the font faces and sizes to be used on this page</span>
@@ -59,7 +59,7 @@ <h2>Tests</h2>
59
59
<sectionclass="procedure">
60
60
<h3>Procedure</h3>
61
61
<ol>
62
-
<li>Check that there is a user interface control having an <codeclass="language-html">aria-describedby</code> attribute that references one or more elements via unique <codeclass="language-html">id</code>.</li>
62
+
<li>Check that there is a user interface control having an <code>aria-describedby</code> attribute that references one or more elements via unique <code>id</code>.</li>
63
63
<li>Check that the referenced element or elements provide additional information about the user interface control.</li>
64
64
</ol>
65
65
</section>
@@ -93,7 +93,7 @@ <h2>Resources</h2>
93
93
<ahref="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.
Copy file name to clipboardExpand all lines: techniques/aria/ARIA10.html
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
<!DOCTYPE html><htmllang="en"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><linkrel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><sectionclass="meta"><pclass="id">ID: ARIA10</p><pclass="technology">Technology: aria</p><pclass="type">Type: Technique</p></section><sectionid="applicability"><h2>When to Use</h2>
2
2
<p>This technique applies to HTML with <ahref="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
<p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <codeclass="language-html">aria-labelledby</code> attribute. The <codeclass="language-html">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <codeclass="language-html">id</code> reference value that matches the <codeclass="language-html">id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <codeclass="language-html">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
4
+
<p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code>aria-labelledby</code> attribute. The <code>aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code>id</code> reference value that matches the <code>id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code>aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
5
5
</section><sectionid="examples"><h2>Examples</h2>
6
6
<sectionclass="example">
7
7
<h3>Providing a short description for a complex graphic</h3>
8
8
9
-
<p>This example shows how to use the <codeclass="language-html">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
9
+
<p>This example shows how to use the <code>aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
@@ -22,9 +22,9 @@ <h3>Providing a short description for a complex graphic</h3>
22
22
</section><sectionid="tests"><h2>Tests</h2>
23
23
<sectionclass="procedure"><h3>Procedure</h3>
24
24
<ol>
25
-
<li>Examine each element where the <codeclass="language-html">aria-labelledby</code> attribute is present and the element does not support the <codeclass="language-html">alt</code> attribute.</li>
26
-
<li>Check whether the value of the <codeclass="language-html">aria-labelledby</code> attribute is the <codeclass="language-html">id</code> of an element on the web page.</li>
27
-
<li>Determine that the text of the element identified by the <codeclass="language-html">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
25
+
<li>Examine each element where the <code>aria-labelledby</code> attribute is present and the element does not support the <code>alt</code> attribute.</li>
26
+
<li>Check whether the value of the <code>aria-labelledby</code> attribute is the <code>id</code> of an element on the web page.</li>
27
+
<li>Determine that the text of the element identified by the <code>aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
Copy file name to clipboardExpand all lines: techniques/aria/ARIA11.html
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -22,14 +22,14 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
22
22
</p>
23
23
<p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute designates the type of landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the <cite>Rules of ARIA attribute usage by HTML element</cite> table in the <ahref="https://www.w3.org/TR/html-aria/">ARIA In HTML recommendation</a>.</p>
24
24
<ul>
25
-
<li><codeclass="language-html">banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
26
-
<li><codeclass="language-html">navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
27
-
<li><codeclass="language-html">main</code>: A region that contains a page's main content.</li>
28
-
<li><codeclass="language-html">region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <codeclass="language-html">region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <codeclass="language-html">aria-label</code> or <codeclass="language-html">aria-labelledby</code>.</li>
29
-
<li><codeclass="language-html">form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <codeclass="language-html">form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li></li>
30
-
<li><codeclass="language-html">search</code>: A region of the page containing search functionality.</li>
31
-
<li><codeclass="language-html">complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
32
-
<li><codeclass="language-html">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
25
+
<li><code>banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
26
+
<li><code>navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
27
+
<li><code>main</code>: A region that contains a page's main content.</li>
28
+
<li><code>region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code>region</code> landmark isn't exposed as a landmark region unless it has an accessible name, often provided using <code>aria-label</code> or <code>aria-labelledby</code>.</li>
29
+
<li><code>form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code>form</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li>
30
+
<li><code>search</code>: A region of the page containing search functionality.</li>
31
+
<li><code>complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
32
+
<li><code>contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
33
33
</ul>
34
34
35
35
<p>There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be named using a valid technique for labeling regions.</p>
<h3>Multiple landmarks of the same type and aria-labelledby</h3>
58
58
59
-
<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <codeclass="language-html">aria-labelledby</code>:</p>
59
+
<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code>aria-labelledby</code>:</p>
@@ -97,7 +97,7 @@ <h3>Multiple landmarks of the same type and aria-label</h3>
97
97
</section>
98
98
<sectionclass="example" id="search-form">
99
99
<h3>Search form</h3>
100
-
<p>The following example shows a search form with a "search" landmark. The <codeclass="language-html">search</code> role typically goes on the <codeclass="language-html">form</code> element or a <codeclass="language-html">div</code> surrounding the form:</p>
100
+
<p>The following example shows a search form with a "search" landmark. The <code>search</code> role typically goes on the <code>form</code> element or a <code>div</code> surrounding the form:</p>
<input id="product-search" placeholder="title, author, or ISBN" type="text">
@@ -110,7 +110,7 @@ <h3>Search form</h3>
110
110
<h3>Procedure</h3>
111
111
<ol>
112
112
<li>Examine each element with a <ahref="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
113
-
<li>Examine whether the correct element has been used to mark up content. For example: a <codeclass="language-html">navigation</code> role has been used to mark up a section with navigation links, or the <codeclass="language-html">main</code> role is used to contain the page's main content.</li>
113
+
<li>Examine whether the correct element has been used to mark up content. For example: a <code>navigation</code> role has been used to mark up a section with navigation links, or the <code>main</code> role is used to contain the page's main content.</li>
114
114
<li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
115
115
<li>If the same type of landmark appears multiple times on the page, check that each one is given a unique and meaningful accessible name.</li>
0 commit comments