Write content with screen readers in mind
Some of our users can’t see. They use screen readers when doing things on the web. Someone can tell a screen reader to only read headings (h1, h2, and so forth), or to skip from section to section, or just from link to link.
Use descriptive alt text for images, icons, and controls. If the text is meant to be read, don’t put it in an image.
Don’t refer to where things physically appear on a screen.
Write meaningful link text. Long text links can be partially hidden in the code for people using screen readers.
Create text alternatives for charts and graphs. A cool way to do this is to include a data table near the chart.
Be careful with color and contrast
Some of our users are color blind. Others have low vision and need lots of contrast between background and text. Some people use screen magnifiers, and others just prefer to zoom or enlarge text to make things easier to read.
Include icons with text to make things clear.
Don’t use images of text. It’s not screen-reader friendly and can’t be enlarged when someone zooms in on the screen.
Include icons with text to indicate status changes.
Don’t rely on color alone to indicate status change.
Use captions for audio content
Some of our users can’t hear. They need to be able to read text versions of voiceovers or recordings.
Make sure videos have captions that indicate who is speaking.
Don’t rely on sound alone for notifications.
Keep captions in sync with what’s happening on the screen.
Keep it simple for all users
Some of our users have cognitive impairments or learning disabilities. These folks need content that is simple, clear, and direct to help focus their attention.
Give just the info our users need, right when they need it.
Don’t give instructions before they’re needed.
Keep sentences simple. Aim for 5th-8th grade readability.
Try not to have lines longer than 80 characters, or sentences longer than 20 words.
Use images to support content. Illustrations and graphs can clarify complex concepts.
Don’t use form-field ghost text in place of a field label.
Pair icons with text labels to provide contextual cues and help with comprehension.
Keep user interface terms (menu, tabs, and so forth) consistent throughout the product or on a screen.