Graphics with text
When a graphic is distributed as an image (ie. formats like JPEG, PDF, PNG) any text that is part of the graphic becomes hidden from assistive technology and also may shrink to an unreadable size on smaller screens.
Category: Websites
Alt Text for Complex Images/ Data Visuals
When you add a complex image or data visualization, include a two-part alternative text description: short and long.
Screen Reader Demo
A quick video demonstration (1:29) of a screen reader reading a web page
Tables
If you don’t use meaningful language and set your top row as a header, a screen reader user will quickly lose all context for your data.
Audio description
When a video has stretches where information is shown but not narrated, people who can’t see have no way to access the information.
How to: Screen readers
How to activate a screen reader on your computer, phone or tablet, plus our favorite screen reader cheat sheet.
How to: Keyboard navigation
Checking that a page can be navigated without a mouse is one of the easiest accessibility tests you can do. It ensures that people who need to – or prefer to – navigate the web with their keyboard can get to the functionalities they need.
How to: Color contrast checker
We like the WebAIM color contrast checker because it includes an eyedropper tool that lets you sample colors from a graphic or image before you upload it to the web.
List formatting
A group of more than two related items is presented in paragraph form, separated by commas or is presented as a list but not marked up (coded) as a list.
Captions & Transcripts (prerecorded)
Make sure your video has text alternatives for people who can't hear it's spoken audio and other sound.