In the above example, the icons (glyph fonts) are hidden to the screen reader and text that communicates the meaning of the icons is supplied to the screen reader through CSS.
Example of Glyph Font Navigation, With Labels
In the above example, the icons (glyph fonts) and their links are hidden from the screen reader. The linked text of the label provides the screen reader with information for navigation.
Examples of Glyph Font Icons on Buttons with Labels
In the above example, the arrow icons (glyph fonts) are hidden by the screen reader and no alternative text is required. The button text supplies the necessary text for the screen reader.
Example of an IconBased Image Used as Navigation With No Associated Text
In the above example, the W3C Logo exists as a linked image that leads to the organization’s home page. The image’s “alt” attribute supplies the necessary text for the screen reader.
