Font Awesome

Assistive Technologies (AT) test for Font Awesome and icon fonts in general. We decided to do these tests after Dylan raised an issue with Font Awesome.

• All font based test results are in tests/index.html
• All SVG based test results are in tests/svg.html
• A non-ARIA test bed can be found in tests/plain-bed.html

Any help welcome

From code, to test results, to how to actually do decent testing. Anything is welcome.

Roadmap

There is a basic roadmap available. All new issues will be assigned to a fitting milestone within the roadmap.

How to go about this testing buisiness

How to add a test

1. Copy the contents of test-template.html to tests/index.html
2. Write test
3. Do test
4. Make a pull-request with a short description
5. Be awesome!

How to add results to a test

1. Either copy the example table row from test-template.html or;
2. copy a table row from tests/index.html
3. Make a pull-request with a short description
4. Profit?

How to properly test

Depending on the icon coding technique, some or all of these scenarios will be worth testing.

In a screen reader:

1. Linear reading, e.g. screen reader "arrow navigation"
2. Read the icon and its text equivalent in the context of a link. Techniques vary by screen reader: e.g. tab key, rotor, or list of links
3. Read character-at-a-time, e.g. RightArrow
4. Read with a Braille display
5. Repeat the above tests with different verbosity settings, especially with settings related to punctuation.

Other configurations for accessibility:

1. Browser zoom: full page
2. Browser zoom: text-only
3. Windows high contrast mode
4. Text customizations (details TBD)

Resources

• E-mail thread at WAI IG
• Icon Fonts + Unicode and Accessibility
• ARIA for Screen Readers Not Able to Read Symbols
• Death to Icon Fonts & Slides
• Seriously, Don’t Use Icon Fonts
• Bootstrap: How to use
• Not allowing pages to choose their own fonts breaks with icon fonts
• Icon Usability
• Icon Classification: Resemblance, Reference, and Arbitrary Icons
• Accessibility support for CSS generated content
• Lessons Learned: Accessibility Theory vs. Implementation Reality (Use case 3)
• Testing labeling icons
• Accessible svg sprite icons
• Testing accessible text for external SVG icons
• Grunting Icons into SVG Sprites

Contributors

• Mallory (@StommePoes)
• Michiel Bijl (@MichielBijl)
• Mitchell Evan (@mitchellrevan)
• Chaals McCathieNevile (@Chaals)