My day job focuses a lot on accessibility and that includes figuring out how to get screen readers to read symbols that are not necessarily recognized by default.

A long term solution is to beef up the default symbol library, but that doesn’t work for all screen readers. If you need to have a few symbols be read aloud by a screen reader, you can use the ARIA spec to get ARIA-ready screen readers to THINK the symbol is an image with an ALT tag.

Let me throw up some code for a common scenario to use » (“right angle double bracket”) to mean “Next”.

Code: <span role="img" aria-label="Next">»</span>

Result: »

For a sighted user, the Result probably looks just like any other », but if you’re on JAWS 15 or VoiceOver Yosemite, it will actually say Graphic: Next.

As previously mentioned, a long term solution would be to beef up symbol support in screen readers. If I had had to use ARIA for all the phonetic symbols I use, I would get code bloat in a hurry. But I am glad I found an emergency exit.

Share →

Leave a Reply

Skip to toolbar