Accessibility for content creators

Owned by Liam Tanner
Apr 29, 2021
2 min read

Creating accessible content is all about text: writing good text, using semantic HTML to give text meaning, and providing text alternatives for non-text content.

Writing good text

General guidance

These tips can help to write effective text:

  • Use clear and plain language throughout
  • Use simple sentences and bullets
  • Use UPPERCASE, bold, and italic sparingly

  • Explain unusual words and jargon

  • Explain abbreviations in the first instance

  • Do not rely on shape, size, or visual location to identify parts of a page

  • Use images and diagrams to support text

Interface elements

Follow this guidance to ensure that interfaces are easily understood:

  • Make sure there's a concise, descriptive, page title that's sufficiently different from other pages
    • The main heading of the page should be very similar (or identical to) the title of the page
  • Navigation is consistent and helpful, including any relative navigation (you are here, next and previous) and Tables of Contents
  • Link text describes where you go when you follow the link
    • The text is similar to the heading of the page it targets
    • Don't use "click here" because it doesn't make sense out of context
  • Button text describes the action that happens when you use the button
    • Don't use 'submit'

Use semantic HTML to give text meaning

Semantic HTML can also help to to make your content accessible. Here are some tips:

  • Use the right element for the thing (headings, lists, links, buttons).
  • Headings are used liberally and no heading levels are skipped. The text is clear and meaningful.

  • Tables have a caption. The rows and columns have headers, where appropriate.

Provide text alternatives for non-text content

Non-text content, such as images or video, can present challenges for users with accessibility requirements. Follow this guidance to create effective text alternatives:

  • All non-text information, such as images, audio, and video, has a text equivalent.
  • Images have alt text that succinctly conveys the function and meaning of the images. The alt text:
    • should not include "image of" or similar
    • should not repeat text that's next to the image
    • should be contextually appropriate (the same image in different contexts might have different alt text)
  • Pay attention to how elements are nested - when an image is the only content of a link, the alt text of the image will serve as the link text.
  • Empty alt text (alt="") should be used for decorative images.
  • Charts usually shouldn't have alt text on their image. Instead, they could have:
    • a table of the data
    • a long description in text
    • a link to a long description in text
  • Audio has captions (open or closed, not just subtitles (which are text of only the dialogue)).
  • Videos have a text or audio alternative that provides equivalent information.
  • There are no images of text unless absolutely necessary (and in that case, the image must have alt text).