Space inside icon test

← Index page

This test is to determine if a non-breaking space inside an icon is announced to screen readers.

Example 01: icon with space

Some text before icon:  

Code

Some text before icon: <i> </i>

Dummy link after

Example 01: icon with space

Some text before icon:  

Code

Some text before icon: <i aria-hidden="true"> </i>

Dummy link after

Results

• Windows/NVDA: Using read mode, the icon is not announced, so this does not present issues.
• Windows/JAWS: Using read mode, the icon is announced as a silent character, which could be confusing.
• OSX/Voiceover: Using read mode, the icon is announced as "Group", which could be confusing

Recommendation: Apply aria-hidden="true" to hide the element from the Accessibility Tree.

← Index page