Font icons should be hidden from assistive technology (screen readers)

[OwenEdwards]

Description

The font icons are inserted into the page using special characters in the CSS, e.g.:

.vjs-icon-play:before, .video-js .vjs-big-play-button:before, .video-js .vjs-play-control:before {
    content: "\f101";
}

giving:

<button class="vjs-play-control vjs-control vjs-button vjs-paused" type="button" aria-live="polite" title="Play" aria-disabled="false">
    <!-- Icon is inserted here in the DOM -->
    <span class="vjs-control-text">Play</span>
</button>

Screen readers include the \f101 character in the name of the button, together with the vjs-control-text. No problems have been reported with this yet, but the extra character can be seen, for example, with VoiceOver on macOS, which displays the spoken text on the screen. This extra character will also be displayed on Refreshable Braille Displays, and could cause confusion.

Recommendation

The font icon should be inserted in a <span aria-hidden="true"></span> inside the control, so that the special character is hidden from screen readers as purely decorative.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

v5.15

browsers

Browser and screen readers including IE11 & JAWS18, Firefox & NVDA, Safari & VoiceOver

OSes

Windows 7, macOS

plugins

no.