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.</p> | ||||||
|
|
||||||
| <p>The <code class="language-html">aria-label</code> attribute can also be used to provide an accessible name for custom controls. Custom controls can’t use techniques for native HTML controls, like using a <code class="language-html"><label></code> element with the <code class="language-html">for</code> attribute.</p> | ||||||
|
There was a problem hiding this comment.
This isn't accurate either - you can absolutely use There was a problem hiding this comment. not all though ... "custom controls" in the sense of, say, a mere There was a problem hiding this comment. It's tough to talk about use of aria-label without ensuring considerations around role are also mentioned. Eric suggested more specific examples to support screen readers. A more thorough example -- maybe a working example? -- would be better. There was a problem hiding this comment.
Suggested change
|
||||||
|
|
||||||
| <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> |
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't accurate; you can't always use
aria-labelany time you want to give an accessible name to any arbitrary element. Notably, in the exact example implied by the following paragraphs (<div aria-label="whatever" contenteditable></div>,aria-labelwould not be allowed unless the author also gave thedivan explicitrole(because WAI-ARIA prohibits the use ofaria-labelandaria-labelledbyon elements withgenericroles, likedivis by default)).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dbjorge, would this help?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.