Images
Add alternative text (“alt text”) to all images. Alt text is a short description you write for images that will be read aloud by screen readers, and is required for accessibility. Alt text can also be helpful for users on mobile devices or slow internet connections, where the text can be read if images are turned off or not loading. You can find instructions for how to do this on your own site on the OpenLab Help page, Making Your Work Accessible.
Tips
- When writing alt text, do not include the words “photo of” or “image of” because the screen reader will already signal that it is an image file. Keep the description short and informative.
- For images that represent concepts and information, such as photos and illustrations, include alt text that briefly conveys the essential information presented by the image. For more on alt text for different types of images, see CUNY’s guide to image accessibility.
Video, Audio, and Animation
Captions
Video and audio must include captions to be accessible. Captions provide text versions of the words spoken in a video. They are essential for people who cannot hear the audio, and can be helpful for all users of your site, including people not fluent in the language used in the audio, or people who are working in a quiet or loud space without headphones. It can also be helpful to include a transcript as well.
Tips
- YouTube is the suggested video platform for the OpenLab, and provides instructions for adding your own subtitles and closed captions.
- Do not use the autoplay feature with videos. People using screen readers may have difficulty hearing the reader’s output if other audio is playing at the same time.
- Do not use flashing visual content. Quickly blinking or flashing images can trigger seizures in people with certain types of seizure disorders.
- Avoid using animations. They can be disorienting to many people, especially those with certain types of cognitive disorders.
- Find more information about video captioning tools via CUNY’s guide.
Additional Resources
- W3C Web Accessibility Initiative’s Images Tutorial
- Alternative Text (WebAIM)
- WAVE Web Accessibility Checker
- aXe Tools for testing web accessibility
- WebAIM Color Contrast Checker
Sources
Information on this page is adapted from:
- Making your Work Accessible (OpenLab Help)
- CUNY’s guide to image accessibility