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 it’s text meant to be read, we 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. And don’t use images of text. It’s not screen-reader friendly, and this type of text 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 and other copy for audio content

Some of our users can’t hear. They need to be able to read text versions of voice-overs or recordings.

  • Make sure videos have captions that indicate who is speaking.
  • Keep captions in sync with what’s happening on the screen.
  • Don’t rely on sound alone for notifications.

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, just when they need it.
  • Keep sentences simple. Aim for 5th-8th grade readability.
  • Use images to support content. Illustrations and graphs can clarify complex concepts.
  • 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.
  • Don’t give instructions before they’re needed.
  • Try not to have lines longer than 80 characters, or sentences longer than 30 words.
  • Don’t use form field ghost text in place of a field label.