Skip to content

Icon Functional Example

Examples

Example of Glyph Font Navigation, No Labels

Image of glyph font icons with no labels.
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

Image of glyph font icons 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

n 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.
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 Icon­Based Image Used as Navigation With No Associated Text

Image of W3C logo
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.
Print Friendly, PDF & Email