Skip to main content

Accessibility checklist for content designers

Last update: April 23, 2024

Code quality​

Good quality code is resilient which makes it compatible with a wider range of browsers and assistive technologies.

Language changes in the content should be identified.​

  • Identify language changes within the content and identify for developers to markup.

Content structure​

Structuring content helps people group information and work out what's important and what they need to read first. This structure must be shown visually and using code.

  • All content on the app should use plain language and avoid figures of speech, idioms, and complicated metaphors.
  • All buttons, links, and labels should be unique and descriptive of what a user will find on the following screen.

Headings should be descriptive.​

  • Write headings that are short and clear.
  • Put meaningful words or essential information at the start of the heading.
  • Make sure headings accurately describe the following content.

Headings should communicate content hierarchy.​

  • Introduce each content section with a heading.
  • Use heading levels to reflect a logical content hierarchy.
  • Begin the main body content with a heading level 1 that describes the page. Only one H1 should be used per screen and should make it clear to a user what information will be found on that screen.
  • Communicate the heading structure to developers, if it’s unclear.
  • Use numbered lists when the order of items matters.
  • Use bulleted lists where there is no clear order.

Forms​

Clear instructions for entering or fixing information will help a user complete a form quickly and correctly the first time. Using autocomplete and giving someone a chance to review information helps reduce the amount of typing.

  • Put information that relates to the whole form before the start of the form.
  • Check that all required fields are visually identified.
  • Check that each label makes the field’s purpose clear.
  • Offer clear help text to help people enter information correctly.

Messages should tell you what and how to fix an error.​

  • Identify where mistakes are and describe the issue in language people will understand.
  • Offer suggestions for fixing an input error, where you can.
  • Write error messages to be as specific as you can, rather than using generic messages.
  • Avoid putting links inside error message text.

Images​

Images, including icons, that are meaningful must have a text alternative (alt text) so that users who can’t see them, can still get the same visual information they contain.

Informative images need alt text, but decorative images don’t.​

  • Describe the meaningful information in informative images using alt text.
  • Identify decorative images so developers can code them correctly.
  • Avoid using images containing informative text unless it’s a logo or the information is available somewhere else.

Complex images should have alternatives.​

  • Provide alt text that briefly describes the image, and
  • Include a detailed text description of the complex image.

Links must clearly tell users where the link will take them and they must be easy to see.

  • Confirm that the link text describes the link’s destination.
  • Avoid using URLs as link text.
  • Use the same link text to describe links that go to the same destination.
  • Avoid using title attributes on links.
  • Include file format and size information in links to non-web pages.
  • Put essential information about the link destination at the front of the link text.

Multimedia​

Multimedia content can offer users an alternative to text. Everyone can watch or listen if you give them options to turn on captions, read a transcript, listen to a description of visual content, or watch a sign language translation of the content.

Pre-recorded audio-only content should have alternatives.​

  • Provide a transcript of audio information for pre-recorded audio-only content.

Pre-recorded video content should have alternatives.​

  • Provide captions for audio in video content.
  • Provide a descriptive transcript or audio description for visual information.
  • Provide audio description of visual information for video content.
  • Provide a descriptive transcript of audio and visual information for video content.

Live video content should have alternatives.​

  • Provide captions for live video content.
  • Ask presenters to describe all important visual information in their dialogue.
  • Ask presenters to use audio-described videos in their presentations.

Live audio-only content should have alternatives.​

  • Offer live captions or text streams for live audio-only content.

Users want to navigate around the app easily. A user’s confidence in an app will build when they know where they are and that layouts are applied consistently.

  • Provide a descriptive title for each page or view.
  • Provide a unique name for common page regions that are used more than once on a page.

Sensory​

Information that relies on sensory perceptions (like color or sound) to relay meaning, needs to consider users who won’t receive those sensory clues and offer another way to get the same meaning.

Communicate information using multiple accessible methods.​

  • Add another method if using color to communicate important information.
  • Add visual cues if you’re using auditory-only cues for notifications.
  • Write instructions that don’t rely on someone perceiving color, shape, size, location, or sound to be understood.

Tables​

Tables help users interpret information with a structural relationship between headings and data. Tables use visual styles and semantic code to make them easier to read.

Tables should be easy to read.​

  • Break up complex tables into smaller simple tables, where possible.
  • Include content in all header cells.

Tables should be easy to find and navigate.​

  • Identify a table using a caption.
  • Give complex tables a text summary.

Text styles​

Text on web pages must be easy to read, see and scan. Accessible text makes the reading experience better for everyone.

Text should be easy to scan and read.​

  • Avoid overusing text formatting, like underline, bold, italic and all caps.
  • Left-align text. Avoid using right-align, center, or justified text.

Note: Most of the current content was borrowed from the Accessibility Not-Checklist (altered for mobile apps). Content / tasks will be updated as these lists move forward.