fix(icon): remove automatic aria labelling and add a11y guidance #4665
Conversation
googlebot
added
the
cla: yes
jelbourn
added
Accessibility
googlebot
added
the
cla: yes
src/lib/icon/icon.md
Outdated
| the icon is used. | ||
|
|
||
| In thinking about accessibility, it is useful to place icon use into one of three categories: | ||
| 1. **Decorative**: the icon conveys no real semantic meaning and is purely cosmetic. |
There was a problem hiding this comment.
since all 3 of these cases ask the user to add aria-hidden="true", can we just do that for them?
There was a problem hiding this comment.
I'm hesitant to always add aria-hidden, because the failure mode is that something that should be visible to screen reader users isn't
There was a problem hiding this comment.
I think we can check for a user-added aria-label, aria-labeledby, or role attribute and in those cases we wouldn't set aria-hidden, but if they don't provide any useful description anyways I think its safe to leave it hidden
There was a problem hiding this comment.
Changed to mark as aria-hidden by default based on feedback from Rob Dodson
| * The parent `<button>` or `<a>` should either have a meaningful label provided either through | ||
| direct text content, `aria-label`, or `aria-labelledby`. | ||
|
|
||
| #### Indicator icons |
There was a problem hiding this comment.
to make this easier we could add a simple component like this (it could also automatically add a tooltip):
<md-indicator [message]="msg">
<md-icon>error</md-icon>
</md-indicator>There was a problem hiding this comment.
Agreed that this would be useful. Out of scope for this PR, but maybe add eventually.
There was a problem hiding this comment.
Ok, created an issue to track
jelbourn
force-pushed
the
icon-a11y
branch
2 times, most recently
from
fb83a63
to
976e294
Compare
andrewseguin
added
pr: lgtm
action: merge
|
Needs rebase |
andrewseguin
added
pr: needs rebase
and removed
action: merge
The automatic application of aria-label for md-icon, in hindsight, was not a great idea. Neither the ligature string nor the SVG filename are likely to be meaningful descriptions. Even in cases where they *are*, the icon may be used in such a way that the application of a label is still the wrong thing. On top of that, adding `role="img"` is usually not the right approach for an icon, as that role typically refers to *content* images, rather than icons that are part of the UI. Ultimately, it is up to the application developer to add the appropriate meaning for icons based on how they're used. To this end, we add guidance to the documentation for what to do in different situations.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
The automatic application of aria-label for md-icon, in hindsight, was
not a great idea. Neither the ligature string nor the SVG filename are
likely to be meaningful descriptions. Even in cases where they are,
the icon may be used in such a way that the application of a label is
still the wrong thing. On top of that, adding
role="img"is usuallynot the right approach for an icon, as that role typically refers to
content images, rather than icons that are part of the UI.
Ultimately, it is up to the application developer to add the appropriate
meaning for icons based on how they're used. To this end, we add
guidance to the documentation for what to do in different situations.