Media

• 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.

• 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.
• 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.

Note: we are using a randomly generated image filler so the `alt` text is not as descriptive as it could be...make your real images more descriptive!

• 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.

• 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.
• 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.
• When using images as links, one must consider how the alt text will be read back to users of assistive technology. The following examples showcase appropriate alt text for logos when used as a link, or as a stand alone image asset.

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"

• 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.