WebAIM - Web Accessibility In Mind

E-mail List Archives

Font Icons and Pseudo-elements

for

From: Joseph Sherman
Date: Apr 11, 2016 10:27AM

Our web folks are suddenly using Font Icons and Pseudo-elements. Both seem to have some accessibility issues in our implementation.


1) The Font Icons are being used instead of IMG, in links with Title attributes. Unfortunately, accessibility support is inconsistent. When tabbing with NVDA or JAWS, the Title is always read properly. But when using JAWS and the "H" key, or having NVDA or JAWS list the elements, or , when on a Mac using VoiceOver, the screen reader just says "link" and does not read the Title. Would adding 'aria-label' to Font Icon links solve these?


2) They are using Generated content (::after) to indicate DocTypes for links to file downloads. So the file would say "Instructions, PDF", where the PDF is added by generated content. Unfortunately, when using IE the user will only hear "Instructions, link" without the file type. Internet Explorer is the only browser regularly used with a screen reader that does not expose the generated content as the accessible name for the element. Is there a way to add an ALT to the CSS for generated content like .new::before { content: url(./img/star.png); alt: "New!";

Joseph