Our guidelines for accessibility are driven by four principles. They spell out the acronym POUR:
Here are notes about what these principles mean for content design.
All our users need to be able to process what’s on the screen. Is there anything in our product or on our site that a blind, deaf, low-vision, or color-blind user can’t perceive?
Make content perceivable
- Don’t refer to color, or where elements are on a screen.
- Make sure videos have captions.
- Include meaningful alt text for images, icons, and controls. If the text is meant to be read, don’t put it in an image.
- When a label is used multiple times on the same screen (Edit, Learn, more), provide screen-reader-only text to clarify.
- Create text alternatives for charts and graphs. A cool way to do this is to include a data table near the chart.
Color and contrast
- Check your contrast. Is there enough between foreground text and background color?
- Linked text should stand out from body text.
- Don’t use color alone to indicate status (such as on and off or paid and unpaid).
- Include icons with text to make things clear.
- Focus indicators should be visible on fields and all interactions.
- Font face, size, and weight are all elements to consider when designing for readability and legibility. Some low-vision people use screen magnifiers or zoom in to enlarge text and make things easier to read.
- Make sure interactions and targets are well separated and easy to hit.
- Keep screens feeling “light” – don’t make them overly dense. Be aware of how longer content can appear on a screen.
- Especially in mobile screens, touch targets should be visually identifiable. Is it clear what to do next?
Make forms accessible
- Make sure field labels persist and are visible when the focus is inside the field.
- Labels, tooltips, and input fields should appear in a logical keyboarding tab order.
- Be aware of when the system validates the fields and when and where error messages might appear.
- Present errors clearly. Use an element in addition to color and guide users to the field that needs their attention.
Make content readable
- Keep content clear and easy to read–and listen to. Remember that when someone is using a screen reader, the content is spoken aloud.
- Present only the info users need, and only when they need it.
- Keep sentences simple. Aim for 5th to 8th grade readability.
- Use images to support copy. Illustrations and graphs can clarify complex concepts.
Information hierarchy and layout
- Make page titles unique and informative.
- Keep heading styles consistent. Use typography and styles to provide meaning and structure.
- Make sure the correct HTML is used (H1, H2, etc.), so that screen readers can easily interact with the page structure. (Search engines also use these to analyze your content.)
- Use headings, subheadings, and bullet points to make content easy to scan.
- Make sure things work well across platforms, browsers, and devices–different assistive technologies work better in some areas than others.
- Try to be platform agnostic. For instance, in instruction copy don’t say tap or click; say select instead.
- Don’t dictate the technologies a user has to use.