Audio

  • Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later. This is true of all components, but especially for media components.
  • Make sure your player is accessible and includes control elements to pause, stop, and play your media.
  • Do not auto-play your media. This can cause confusion as well as annoyance.
  • Make sure your media has alternative methods to get to the content. For example, add transcripts of your audio files.
There are a ton of WCAG Guidelines for media on websites for a reason...there are a lot of factors to consider. Don't let that scare you though, there are also some easy wins. Just including alternatives to the media you present (ex. transcript for a video) is half the battle.

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

1.2.1 Audio-only and Video-only (Prerecorded) - Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. (Level A)

1.2.2 Captions (Prerecorded) - Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

1.2.3 Audio Description or Media Alternative (Prerecorded) - An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

1.2.6 Sign Language (Prerecorded) - Sign language interpretation is provided for all prerecorded audio content in synchronized media. (Level AAA)

Cards

  • Make sure you have tabbing focus indicators for all elements that need to be highlighted.
  • Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image.
  • If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page.
  • Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
  • You can add class="visuallyhidden" with descriptive text to give more context to a button or link's purpose.

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)

1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)

2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Example #1: Cards with hover effect

Example #2: Cards with click effect

Images

  • Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image.
  • If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page.
  • Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
  • Make sure any text in images of text is at least 14 points and has good contrast with the background.

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)

1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)

Small, pink snail resting on top of a gray capped mushrom with green moss as the background

SVGs

SVGs are scalable vector graphics and can be made used for icons, images, logos, etc. SVG content is scalable and scales without any reduction in visual quality.

  • The best way to make SVGs accessible to Assistive Technologies (AT) like screen readers and speech recognition tools is to put it directly into your HTML using the <svg> tag
  • Avoid using <embed>, <object>, or <img> elements as they are not as supported by browsers as inline SVG
  • Include a <title> and <description> in your SVG markup
  • Use aria-labelledby="" and reference the id values of the title and description elements
  • Give your SVGs a job with the role="" attribute
  • To “hide” elements from a screen reader in an SVG add role="presentation"

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)

1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)

Example #1: SVG with image role

Thumbs Up A hand with a thumb pointed upwards in approval. Call it the approval thumb.

Example #2: SVG with link role

Blue rectangle A dark blue rectangle with rounded corners and a dark gray border. Google

Videos

  • Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later. This is true of all components, but especially for media components.
  • Make sure your player is accessible and includes control elements to pause, stop, and play your media.
  • Do not auto-play your media. This can cause confusion as well as annoyance.
  • Make sure your media has alternative methods to get to the content. For example, add captions to your videos and/or provide a transcript for your users to read.
  • Make sure your media does not cause seizures! Use the Photosensitive Epilepsy Analysis Tool (PEAT) to check your media before you add it to your website.
There are a ton of WCAG Guidelines for media on websites for a reason...there are a lot of factors to consider. Don't let that scare you though, there are also some easy wins. Just including alternatives to the media you present (ex. transcript for a video) is half the battle.

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

1.2.1 Audio-only and Video-only (Prerecorded) - Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. (Level A)

1.2.2 Captions (Prerecorded) - Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

1.2.3 Audio Description or Media Alternative (Prerecorded) - An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

1.2.5 Audio Description (Prerecorded) - Provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material. (Level AA)

1.2.6 Sign Language (Prerecorded) - Sign language interpretation is provided for all prerecorded audio content in synchronized media. (Level AAA)

1.2.8 Media Alternative (Prerecorded) - An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media. (Level AAA)