Font icons are not used

Design Notes

Use SVGs not font icons

Some users may override the authored font family and will end up losing meaningful icons if icon fonts have been used. Plus, for mobile users using a screen reader, while they are navigating or reading through a page with icons, the icon will receive focus.

Developer Notes

Use SVGs not font icons

Scalable vector graphics (SVGs) should be used over icon fonts. Some users may override the current font family and will end up losing meaningful icons — such as the document symbol for PDF download links, for example.

For mobile screen reader users, while they are navigating or reading through a page with icons, the font icon will still receive focus.

Information and tools

Contextually Marking up Accessible SVG

Testing Notes

Font icons are not used

Scalable vector graphics (SVGs) should be used over icon fonts. This helps ensure users can customise text content to personal preference to improve readability.

Steps to check

• Check with developers
• If familiar with Chrome Developer Tools (Firefox will be similar), inspect the element and review implementation of icon in the DOM

Impact range: Medium - Low

Test type: Manual

WCAG Reference: Understanding Success Criterion 1.3.1: Info and Relationships