Accessible Content Checklist

Content creators ask us all the time how to make their content more accessible. From blog posts or product pages to Word documents, rules for accessible content are almost entirely universal. Using this content checklist, you can improve the accessibility of your content and make it more available to everyone.

Formatting

• Minimum font size SHOULD be no less than 12pt (16px)
  • Use this Pt to Px Converter for approximate conversions of point and pixel sizes.
• Minimum line heights:
  • Headings: 1.3
  • Body fonts: 1.5
• Underlining non-link text SHOULD be avoided
• Excessive emphasis/italics SHOULD be avoided
• Use semantically correct headings (h1, h2, h3, h4, h5, h6) and not Normal text made larger or bold to look like a heading
• There should be one and only one H1 on the page. This the page, post or product title.
• Long strings of ALL CAPS text SHOULD NOT be used (CAPS do not make good long headings, lengthy notices or warnings)
  • OK: IMPORTANT: The information in this document is time sensitive and should be submitted by July 1, 2022.
  • NOT OK: THE INFORMATION IN THIS DOCUMENT IS TIME SENSITIVE AND SHOULD BE SUBMITTED BY JULY 1, 2022.
• Use semantically correct elements (for example, for Lists, you would want to utilize included list functionality as opposed to hyphens or asterisks to make it look like a list)
• Tables MUST be used correctly, with correct headings. Heading labels CAN’T change in the middle of the table by using bold text as this creates a semantically incorrect table

Design

• Check color contrast: Any colors used MUST meet minimum contrast requirements:
  • Normal Text (12pt-18pt, standard weight): 4.5:1
  • Large Text (14pt, or larger, and bold; or, 18pt or larger, standard weight): 3:1
• Important information MUST NOT be conveyed through color alone
  • YES: Important notice: This meeting has been cancelled
  • NO: This meeting has been cancelled

Context

• Sensory instructions MUST be avoided (eg, “…at the top of this page…”)
• Link text MUST make sense out of context. A user would need to know where that link is going to take them from the link text alone
  • YES: You can find more information on AccessiCart’s Accessibility page.
  • NO: You can find out more information on our website.
  • NO: You can find out more by clicking here.
• If you’re directing people to the website via a printed document, the page SHOULD be specified
  • YES: You can find more information on the Accessibility page of AccessiCart’s website.
  • NO: You can find out more information on the AccessiCart’s website.
• If your post is intended to be used as digital and printed media (eg, if your organization maintains a physical mailing list), the wording MUST be adapted to fit either media.
  • For example, if the post is advertising event registration: Printed media may refer to a registration form as “an attached form,” while a digital web post would need to say something like “Please use our Event Registration Form [link] to reserve your spot.”
• Acronyms MUST be defined on their first instance (on the website, acronyms MUST be defined on their first instance on every page they appear on)
• If a section references a download, the download SHOULD appear within/next to that section, NOT at the bottom of the page
• References to other parts of a page SHOULD have an anchor link/bookmark to that section (especially if it was significantly earlier in the document)
  • YES: As shown in Table 1: Generic Data [anchor link to table], the results are very enlightening.
  • NO: As the table earlier showed, the results are very enlightening.

Images

• Non-decorative images MUST have alt text.
  • Examples of decorative images include: fleur de lis, pattern backgrounds, a swirl accent
• Alt text MUST describe the purpose of the image to a non-sighted user
  • YES: A water reservoir at about 24% capacity surrounded by dead grass
  • NO: A canal
• Graphs and charts MUST have alt text AND supportive text describing the purpose, results, and significance of the graph. For example, a standard pie graph may look like:
  • Graph alt text: Pie graph of favorite colors: 10% yellow, 40% blue, 30% red, 20% green
  • Graph supporting text: This graph reflects a user color preference of: 10% yellow, 40% blue, 30% red, 20% green. This was the result of 100 people being polled for their favorite color. The results of this polling were significant because blue is a very popular color and statistically has a positive impact on a person’s mood. Using these results, we could implement more blue in our design so users can have a more enjoyable experience.

We hope this checklist is helpful to content creators. If you have other suggestions about things that will help content creators meet Web Content Accessibility Guidelines (WCAG), please leave us a comment!

Download our Accessible Content Checklist (PDF, 277kb)

---