Images and Media

Using images, videos, GIFs, and other media on your website is a great tool to communicate your brand's vision, identity, and purpose. However, there are some additional steps needed to ensure that they are accessible to all users, including those who use assistive technologies to access your website.

  1. Use alt-text to describe images: Alternative text is a description of an image that is read aloud by screen readers. Use descriptive and concise alt text to describe the content of the image. Avoid using generic alt text such as "image" or "picture."
  2. Provide text-based alternatives for non-text content: For images that contain important information, provide a text-based alternative, such as a caption or summary, for users who cannot see the image. For example, if you upload a flowchart of an important legal process, consider explaining the flowchart using text as well.
  3. Use accessible image formats: Use image formats that are accessible to users with disabilities, such as JPEG or PNG. Avoid using image formats that are not compatible with assistive technologies, such as PDF or GIF. Read more about creating accessible PDFs.
  4. Provide captions and transcripts for videos: Captions and transcripts can make videos accessible to users with hearing impairments. Captions can also help users who are in noisy environments or have a poor internet connection.
  5. Use accessible media players: Use media players that are compatible with assistive technologies and allow users to control the playback speed, volume, and other settings.
  6. Avoid using flashing or strobing images: Flashing images can trigger seizures in users with photosensitive epilepsy, so it's important to avoid using flashing or rapidly changing images.
  7. Use descriptive links: When creating links, ensure they are easily identifiable and use descriptive link text that clearly indicates the link's destination. Avoid using phrases like "click here" as they are not helpful for people using screen readers. Additionally, ensure that any links or buttons are large enough to be easily clicked or tapped by users with motor impairments.
Image illustrating how to properly describe links.
An example of how to clearly describe the content behind a link. Source: Eviso