Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icons by default have less-than-useful aria-label/title #1849

Open
jancborchardt opened this issue Apr 15, 2021 · 2 comments
Open

Icons by default have less-than-useful aria-label/title #1849

jancborchardt opened this issue Apr 15, 2021 · 2 comments
Labels
accessibility Making sure we design for the widest range of people possible, including those who have disabilities enhancement New feature or request

Comments

@jancborchardt
Copy link
Contributor

jancborchardt commented Apr 15, 2021

For example, the search in the top right was read by screenreaders as "Magnify icon" because that’s the aria-label and title of the icon:
magnify icon
(Fixed via nextcloud/server@83eb806 )

Since even we are doing this mistake, it is very possible that this issue will come up more and more in other apps as well, which would not be good.

Maybe a good solution would be to make the "title" attribute mandatory for icons at least when they are used as icons only? E.g. in the button component where there are icon-only buttons, or in the ActionMenu toggle, or the AppNavigationToggle. @skjnldsv @ma12-co

Edit: Also, the "title" should then be empty if the icon is used decoratively, like in a button component when text is next to it.

@jancborchardt jancborchardt added enhancement New feature or request accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Apr 15, 2021
@marcoambrosini
Copy link
Contributor

Shouldn't we always use icons decoratively and give the aria-label to their wrappers? That's at least what we're trying to do in talk now

@skjnldsv
Copy link
Contributor

For example, the search in the top right was read by screenreaders as "Magnify icon"

Is it bad?
I mean that seems like a good reading to have when describing a button?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Making sure we design for the widest range of people possible, including those who have disabilities enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants