Icon Fonts

From Level Access Web Labs
Jump to: navigation, search

Icon fonts use standard or custom font characters to display symbols. Screen readers such as JAWS and NVDA do not announce the before or after CSS pseudo property. VoiceOver does announce the property even when aria-label is used on the same element and regardless if there is text content in the element.

Icon fonts with no accessibility added.

Example with aria-label and aria-hidden

In this example, the icon font appears on an i element within an anchor element.

  <a href="javascript:alert('test');" aria-label="settings" role="button">
    <i class="icon-pref" aria-hidden="true"></i>