Accessibility: Alternative text

[cjcenizal]

Problem

Every <img> element should include an alt attribute that conveys the content or function of the image to screen reader users. If the image is decorative, or if the alternative text for the image is provided in nearby text, then the image should be given 'null' alternative text (alt="").

Note: alt and title have a tendency to be used interchangeably. We should never use title (https://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/).

Aria-label

There are a number of places where aria-label is used to provide alternative text, and other places it could be used to provide alternative text (e.g., icon fonts). Great care must be used with aria-label because it can override other content. If it is used with a link that has descriptive text as well as an icon, the ARIA label will override the link text. Whenever ARIA is used, the results must always be tested in a screen reader.

SVGs, e.g. charts

Our charts use <svg>. These elements need alternative text. While you can give SVG elements alternative text, browsers and screen readers do not read it consistently. The most consistent method to provide alternative text is with the <title> element (not to be confused with the title attribute), role="img" and aria-labelldedby (see http://examples.anysurfer.be/svg/ for this technique). However, even this has its limitations—alternative text is not presented in Firefox. See http://www.sitepoint.com/tips-accessible-svg/ for more information about SVG.

Note that <img> elements that use SVG (<img src="[filename].svg>) should be given alternative text using the alt attribute.

Audit

• Search for <img and make sure they have alt attributes.
• Search for title= and remove all instances of title attributes (be careful -- make sure that this attribute isn't being used by a directive). Use alt and aria-label instead.
• Search for aria-label, ariaLabel, aria-labelledby, ariaLabelledby, aria-describedby, and ariaDescribedby and make sure they're being used correctly.
  • Use aria-label to denote any icon that is used without a label.
  • Use aria-hidden="true" to hide any icon that is used with a label.
  • Test each instance with a screen reader to ensure it's accessible.
• Search for svg and make sure they're accessible.

Relevant resources

• ARIA techniques
• aria-label
• aria-labelledby
• aria-describedby
• You can use the OS X VoiceOver screen reader to test during development

[cjcenizal]

We're also going to need to use aria-labelledby to associate form fields with their labels, and main or other sections with their headings. We should do this in a separate issue.

[timroes]

This should be done by now. If there are any places left this isn't done we should open a separate issue for that specific place, UI component, etc.