Test one: aria-hidden
on the icon
We can hide the icon from assistive technologies (AT for short) by adding aria-hidden
. This will however not convey the meaning—or any other information it carries—to users of AT.
Example
The link in this example has an icon of a bed before the text "Book a hotel". The icon is however hidden for AT with aria-hidden
.
<a href="#book-hotel"><span class="fa fa-bed" aria-hidden="true"></span> Book a hotel</a>
Results
AT, Browser, OS | Test Result | Expected Result | Actual Result | Caret navigation |
---|---|---|---|---|
VoiceOver, Safari 9, OS X 10.10 | Pass | Icon is not spoken | Icon is not spoken | Icon is read as new line |
VoiceOver, Yandex 15, OS X 10.9 | Pass | Icon is not spoken | Icon is not spoken | - |
VoiceOver Braille display, Yandex 15, OS X 10.9 | Pass | Icon is not rendered | Icon is not rendered | - |
VoiceOver, Safari, iOS 9 | Pass | Icon is not spoken | Icon is not spoken | Icon is not spoken |
JAWS 16, IE 11, Windows 7 | Pass | Icon is not spoken | Icon is not spoken | Icon is not spoken |
Issues
- Icon meaning is not conveyed.