Technique ARIA14: Replacing “invisible label” with “accessible name” #4482
Conversation
Sorry that this will make the actual PR more difficult to read, but it’s necessary to be able to efficiently make changes for me.
Trying to be clear that aria-label sets the accessible name, also clarified some text. This technique could probably do with more examples of screen reader and voice input interactions, I’m not sure if readers understand what the impact really is and why it is important.
|
yatil marked as non substantive for IPR from ash-nazg. |
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
once the working example is modified as well, this looks good to me
Preview: https://deploy-preview-4482--wcag2.netlify.app/techniques/aria/aria14
Working example is now using an html dialog and also some more styling, just to be fancy. I also synced the example back to the technique.
#Conflicts: # techniques/aria/ARIA14.html
Co-authored-by: Hidde de Vries <hidde@hiddedevries.nl>
| <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> |
There was a problem hiding this comment.
This isn't accurate; you can't always use aria-label any 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-label would not be allowed unless the author also gave the div an explicit role (because WAI-ARIA prohibits the use of aria-label and aria-labelledby on elements with generic roles, like div is by default)).
| </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.
Custom controls can’t use techniques for native HTML controls, like using a
<label>element with theforattribute.
This isn't accurate either - you can absolutely use <label> elements as part of implementing some types of custom controls. A <label> is allowed to label anything that the HTML spec considers "labelable element", which includes, for example, form-associated custom elements
There was a problem hiding this comment.
not all though ... "custom controls" in the sense of, say, a mere <div> with a role etc can't be labelled with a <label>. so yeah, this needs to be mitigated/explained
Trying to be clear that aria-label sets the accessible name, also clarified some text. This technique could probably do with more examples of screen reader and voice input interactions, I’m not sure if readers understand what the impact really is and why it is important.
I also modernised the language from “lightbox” to dialog, but I left the example mostly as is for now. It would be good to update it to a proper
<dialog>example.My apologies for automatically re-indenting the file, but it is so difficult to work with these files otherwise.