-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Techniques for WCAG 2.1 2019年10月1日版の追加
- Loading branch information
Showing
661 changed files
with
94,171 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>ARIA10: Using aria-labelledby to provide a text alternative for non-text content</title> | ||
| <link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" /> | ||
| <link rel="stylesheet" type="text/css" href="../techniques.css" /> | ||
| <link rel="stylesheet" type="text/css" href="../slicenav.css" /> | ||
| </head> | ||
| <body> | ||
| <nav> | ||
| <ul id="navigation"> | ||
| <li><a href="https://w3c.github.io/wcag/techniques/#techniques" title="Table of Contents">Contents</a></li> | ||
| <li><a href="https://w3c.github.io/wcag/techniques/#introduction" title="Introduction to Techniques">Intro</a></li> | ||
| <li><a href="ARIA9">Previous Technique: ARIA9</a></li> | ||
| <li><a href="ARIA11">Next Technique: ARIA11</a></li> | ||
| </ul> | ||
| </nav> | ||
| <nav class="navtoc"> | ||
| <p>On this page:</p> | ||
| <ul id="navbar"> | ||
| <li><a href="#important-information">Important Information about Techniques</a></li> | ||
| <li><a href="#applicability">Applicability</a></li> | ||
| <li><a href="#description">Description</a></li> | ||
| <li><a href="#examples">Examples</a></li> | ||
| <li><a href="#resources">Related Resources</a></li> | ||
| <li><a href="#related">Related Techniques</a></li> | ||
| <li><a href="#tests">Tests</a></li> | ||
| </ul> | ||
| </nav> | ||
| <h1>Using aria-labelledby to provide a text alternative for non-text content</h1> | ||
| <section id="important-information"> | ||
| <h2>Important Information about Techniques</h2> | ||
| <p>See <a href="https://w3c.github.io/wcag/understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how | ||
| they relate to the normative WCAG 2.1 success criteria. The Applicability section | ||
| explains the scope of the technique, and the presence of techniques for a specific | ||
| technology does not imply that the technology can be used in all situations to create | ||
| content that meets WCAG 2.1. | ||
| </p> | ||
| </section> | ||
| <main> | ||
| <section id="applicability"> | ||
| <h2>Applicability</h2> | ||
| <p>This technique applies to HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. | ||
| </p> | ||
| <p>This technique relates to <span><a href="https://w3c.github.io/wcag/understanding/non-text-content">Success Criterion 1.1.1: Non-text Content</a> (Sufficient)</span>. | ||
| </p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The purpose of this technique is to provide a short description for an element that | ||
| can be read by assistive technologies (AT) by using the <code class="att">aria-labelledby</code> attribute. The <code class="att">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by | ||
| using an ID reference value that matches the ID attribute of the labeling element. | ||
| Assistive technology such as screen readers use the text of the element identified | ||
| by the value of the <code class="att">aria-labelledby</code> attribute as the text alternative for the element with the attribute. | ||
| </p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example" id="example-1-providing-a-short-description-for-a-complex-graphic"> | ||
| <h3>Example 1: Providing a short description for a complex graphic</h3> | ||
| <p>This example shows how to use the <code class="att">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><pre xml:space="preserve"><div role="img" aria-labelledby="star_id"> | ||
| <img src="fullstar.png" alt=""/> | ||
| <img src="fullstar.png" alt=""/> | ||
| <img src="fullstar.png" alt=""/> | ||
| <img src="fullstar.png" alt=""/> | ||
| <img src="emptystar.png" alt=""/> | ||
| </div> | ||
|
|
||
| <div id="star_id">4 of 5</div></pre><p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-description-complex-graphic/">Providing a short description for a complex graphic</a>. | ||
|
|
||
| </p> | ||
| </section> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <p>Resources are for information purposes only, no endorsement implied.</p> | ||
| <ul> | ||
|
|
||
| <li> | ||
| <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> | ||
|
|
||
| </li> | ||
|
|
||
| <li> | ||
| <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description | ||
| Calculation</a> | ||
|
|
||
| </li> | ||
|
|
||
| <li> | ||
| <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> | ||
|
|
||
| </li> | ||
|
|
||
| </ul> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
|
|
||
| <li><a href="https://w3c.github.io/wcag/techniques/html/H37">H37: Using alt attributes on img elements</a></li> | ||
|
|
||
| <li><a href="https://w3c.github.io/wcag/techniques/failures/F65">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative | ||
| on img elements, area elements, and input elements of type "image"</a></li> | ||
|
|
||
| </ul> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure" id="procedure"> | ||
| <h3>Procedure</h3> | ||
|
|
||
| <ol> | ||
|
|
||
| <li>Examine each element where the <code class="att">aria-labelledby</code> attribute is present and the element does not support the <code class="att">alt</code> attribute. | ||
| </li> | ||
|
|
||
| <li>Check whether the value of the <code class="att">aria-labelledby</code> attribute is the id of an element on the web page. | ||
| </li> | ||
|
|
||
| <li>Determine that the text of the element identified by the <code class="att">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or | ||
| provides equivalent information. | ||
| </li> | ||
|
|
||
| </ol> | ||
|
|
||
| </section> | ||
| <section class="results" id="expected-results"> | ||
| <h3>Expected Results</h3> | ||
|
|
||
| <ul> | ||
|
|
||
| <li>#2 and #3 are true.</li> | ||
|
|
||
| </ul> | ||
|
|
||
| </section> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> |
Oops, something went wrong.