Web Accessibility

Using font/glyph symbols can be a major accessibility issue, depending on which
are used. There are 2 major problems with font-based icons:
1. Not everyone with a disability uses assistive technology. Some may rely only on
visible text alternatives.
2. Assistive technology may incorrectly read an icon, or may completely fail to
recognize it. Even some simple punctuation marks will not be read by screen
readers.
To solve these 2 problems, you can use the html attribute aria-hidden="true" and
assistive technology will ignore the icon. You should add an on-screen text alternative
as well.
Safe to Use Symbols
@ & / © ® • $ € £ ¥ % ½ ¼ ¾ °
Unsafe Symbols
Minus symbol: read as "dash", Less than symbol: read as "equals",
Greater than symbol: read as "equals", Tilde symbol: read as "approximately equals"
Characters that one or more screen reader will not read:
~ ? ! ¡ # ^ * ( ) – — — – _ , . … … \ | ? ¿ ; : ” ” ” “ « » ‹ › ‘ ’ ‘
{ } [ ] § · † ‡ + – ± ÷ × = ‰ < >
Abbreviations may seem simple to understand, but they can confuse or frustrate
those who use screen readers. This is because abbreviations usually aren't recognized
as words, and may be read as individual letters.
For example, the word "room" can be abbreviated to "rm", but a screen reader
would not understand how to correctly read the word.
The same abbreviation can also have multiple meanings based on contexts. An
example of this is the abbreviation "Dr". It can mean either a doctor or a driveway,
but screen reading software would not understand this.
There are also other ways that abbreviations may confuse screen readers. To
avoid any of these potential issues, you don't have to simply stop using
abbreviations. Instead, use the "abbr" element to expand abbreviations.
8
6