Im working on a project now but I'm not sure if an icon alone is accessible (AA) or if it needs to be accompanied by text?
Which would meet the WCAG AA standards?
1
-
do these rules change for ios or android. I know that aria tags can replace complex or simplified text but in the case of icon on native device can the readers read aria tages?– James EarnshawMay 23, 2019 at 5:51
Add a comment
|
3 Answers
Normally my advice would be to always pair an icon with text on the screen, making both clickable. In this way you can use an aria-hidden attribute to hide the icon for screen readers, which just leaves the text link for audio screen readers.
However, if it is not possible to do this, then you have to consider that someone cannot see the screen because they are using an audio screen reader, so you need to ensure there is a text equivalent for the icon, so that the audio screen reader user can understand its meaning. This is covered in WCAG 2.0 Guideline 1.1.1 Non-text Content, and is a Level A requirement (remember, if you want to meet AA it means meeting all Level A and all level AA requirements).
A text equivalent will depend on your icon format.
- If the icon is an image then you can simply use the image alt attribute (I am assuming your solution is html).
- If your icon is an icon font, then you need to use other techniques, which are described here: https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
-
Here's Nielsen/Norman's take on icons, based on their research. "Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity." Jun 13, 2018 at 11:57
-
I wonder how relevant the use of icons + text still is. Even the SE family doesn't use text in their top bar anymore. I think screen reader capability is less important than working smoothly on a mobile phone.– paul23May 23, 2019 at 14:58
Text is important, because for some users who would be using your project would get confused with only icons, this would lead to a Bad User Experience. But then again if your Project already has too many data to be shown(on each pages) then adding extra texts just for icons may cluster your screen with too many things, so in my opinion,
- If the contents on your page are heavily loaded with data, then you shouldn't add text and just keep the icon (But when user hovers the icon, you can show a text representing that icon there).
- If there are not much contents displayed on single page, then you can use Text and Icons both, as it won't cluster your screen with too much things
Text is an important part of UI development for AA. So the best choice would be including text.
