Technique ARIA14: Replacing “invisible label” with “accessible name” #4482
There are no files selected for viewing
This file contains hidden or 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 |
|---|---|---|
| @@ -1,63 +1,96 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Using aria-label to provide an accessible name where a visible label cannot be used</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>Using aria-label to provide an accessible name where a visible label cannot be used</h1> | ||
| <section class="meta"> | ||
| <p class="id">ID: ARIA14</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>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 closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”. | ||
| </p> | ||
| <p>When no clear visible text label is available due to design decisions, the accessible name can be set by using the <code class="language-html">aria-label</code> attribute instead, provided that the element has an implict or explicit <a href="https://www.w3.org/TR/wai-aria-1.2/#namefromauthor">role that supports naming</a>.</p> | ||
patrickhlauke marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
patrickhlauke marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| <p>The <code class="language-html">aria-label</code> attribute can also be used to provide an accessible name for custom controls that are not <a href="https://html.spec.whatwg.org/multipage/forms.html#category-label">labelable elements</a>, and cannot therefore use a <code class="language-html"><label></code> element with the <code class="language-html">for</code> attribute.</p> | ||
|
|
||
| <p>For instance, <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code> are the most suitable way to provide an accessible name when a <code class="language-html"><div></code> element is made editable using the <code class="language-html">contentEditable</code> attribute, instead of native form elements such as <code class="language-html"><input type="text"></code> or <code class="language-html"><textarea></code> in order to provide a richer text editing experience.</p> | ||
|
|
||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>A close button in a dialog</h3> | ||
yatil marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| <p>On a page, a button displays a dialog (a <code class="language-html"><div></code> element) with additional information. The “close” element is implemented as a <code class="language-html"><button></code> containing merely the symbol “×”. The property <code class="language-html">aria-label="close"</code> is used to provide an accessible name to the button.</p> | ||
| <pre xml:space="preserve"><code class="language-html"><dialog id="dialog"> | ||
| This is the content of the dialog. | ||
| <button aria-label="Close">×</button> | ||
| </dialog></code></pre> | ||
| <p class="working-example">Working example: <a href="../../working-examples/aria-label-accessible-name-dialog/">Close button example</a>. | ||
| </p> | ||
|
|
||
| </section> | ||
| <section class=" example"> | ||
| <h3>A phone number with multiple fields</h3> | ||
|
|
||
| <pre xml:space="preserve"><code class="language-html"><div role="group" aria-labelledby="groupLabel"> | ||
| <span id="groupLabel">Work Phone</span> | ||
| +<input autocomplete="tel-country-code" type="number" aria-label="country code"> | ||
| <input autocomplete="tel-area-code" type="number" aria-label="area code"> | ||
| <input autocomplete="tel-local" type="number" aria-label="subscriber number"> | ||
| </div></code></pre> | ||
|
|
||
| </section> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="procedure"> | ||
| <h3>Procedure</h3> | ||
| <p>For elements that use the <code class="language-html">aria-label</code> attribute: | ||
| </p> | ||
| <ol> | ||
| <li>Check that the value of the <code class="language-html">aria-label</code> attribute properly describes the purpose of an element where user input is required | ||
| </li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>#1 is true.</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="../aria/ARIA6">ARIA6</a></li> | ||
| <li><a href="../aria/ARIA16">ARIA16</a></li> | ||
| </ul> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or 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,51 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <title>aria-label Example: close button</title> | ||
|
|
||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| button { | ||
| border: 1px solid #000; | ||
| border-radius: 3px; | ||
| box-shadow: 3px 3px 4px rgba(0, 0, 0, .3); | ||
|
|
||
| &:hover, | ||
| &:focus-visible { | ||
| outline: 1px solid #000; | ||
| box-shadow: 6px 6px 4px rgba(0, 0, 0, .3); | ||
| } | ||
| } | ||
|
|
||
| dialog { | ||
| width: 30%; | ||
| height: 20%; | ||
| padding: 1rem; | ||
| border: 2px solid black; | ||
| background-color: #ddd; | ||
| } | ||
|
|
||
| dialog button { | ||
| float: right; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <p><button type="button" onclick="document.getElementById('dialog').showModal();">Display the dialog</button></p> | ||
|
|
||
| <dialog id="dialog"> | ||
| This is the content of the dialog. | ||
| <button aria-label="Close" onclick="document.getElementById('dialog').close();">×</button> | ||
| </dialog> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.