fix(a11y): add aria-label where title is used#1475
Conversation
|
1272ee0 was deployed to: https://fred-pr1475.review.mdn.allizom.net/ |
|
|
||
| const hasHistory = notes.length > 0; | ||
| const isExpanded = hasHistory && this._showTimelineId == timelineId; | ||
| const toggleTitle = ifDefined(hasHistory && "Toggle history"); |
There was a problem hiding this comment.
Bug from before, but I think this'll evaludate to title=false in DOM - need:
| const toggleTitle = ifDefined(hasHistory && "Toggle history"); | |
| const toggleTitle = ifDefined(hasHistory ? "Toggle history" : undefined); |
There was a problem hiding this comment.
I thought undefined renders as "undefined", but IIRC I've seen nothing do the trick:
| const toggleTitle = ifDefined(hasHistory && "Toggle history"); | |
| const toggleTitle = hasHistory ? "Toggle history" : nothing; |
| key=${name} | ||
| class="engine" | ||
| title=${title} | ||
| aria-label=${title} |
There was a problem hiding this comment.
<span> is role="generic" by default, and aria-label is prohibited/ignored on generic elements.
So perhaps we'll need a list of GENERIC_TAGS, which we ignore, unless role is set to a non-ignored value.
And we ignore all roles in this list: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label#associated_roles
| aria-label=${title} | ||
| >${this.l10n("compat-link-report-missing")`Report this issue`}</a |
There was a problem hiding this comment.
This linter might be too much of a blunt instrument, there's a number of examples like this where we have a label shown in UI, but then an even more descriptive one in aria-label.
This fails https://www.w3.org/WAI/WCAG21/Understanding/label-in-name: AIUI for users using visible labels, but speech input, they'll say something like "click report this issue", but this element will be represented within the accessibility tree as "Report missing compatibility data" and they won't be able to.
So perhaps our original premise: use aria-label everywhere we use title is a false one? Let's discuss
3 participants
Description
Add
aria-labelwheretitleis used.Also adds an ESLint rule to ensure this going forward.
Motivation
titleis not accessible to screen-readers.Additional details
Related issues and pull requests
Fixes #959.