This is a checklist for site editors/content creators to make sure they are following accessibility best practices when authoring content in the CMS.
Images
- Avoid text in images (and make sure there is alt text if any do have text). In cases where important text must be included in images, make sure the same information in conveyed in the written copy so everyone regardless of their visual acuity is able to access the information.
- All images should have an alt attribute, either with alt text or blank so screen readers know it is purely decorative.
- Meaningful alt text which calls out the reason that the image was included in this context (explain diagrams and graphs).
- Upload high resolution images, and have the system size and crop them for different uses (banner/card/content photo). Uploading multiple versions of the same image in different sizes increases the likelihood of display and alt text mistakes that could make the image less clear to users.
Text
- No underlines (since may be confused as links).
- Keep things consistent (don’t apply random colors and styles to the text for emphasis).
- Do not type in all-caps, because it can create issues with some screenreaders and is more difficult to read.
- Use tel: and mailto: for telephone numbers and email addresses.
- Do not use empty paragraphs or line breaks for spacing.
Headings
- Maintain proper heading hierarchy:
- Do not use Heading 1 (h1) except for the page title.
- Do not skip levels. Heading 2 (h2) should be followed by Heading 3 (h3) then Heading 4 (h4). i.e., do not use Heading 4 (h4) unless you've already used Heading 3 and Heading 2 in the page.
- Do not use headings just for emphasis or aesthetics.
Lists
- Use the list buttons in the WYSIWYG to create html ordered and unordered lists (ol and ul tags) instead of just typing numbers and dashes, so screenreaders can properly navigate them.
Tables
- Use the table button in the WYSIWYG to create html tables to show sets of data.
- Tables need to have headings for columns (and ideally rows)(th tags) at the top of all columns and ideally at the start of all rows.
- Do not use tables to create columns layoutsjust for layout purposes, to place things side-by-side.
Links
- Use meaningful text for links, instead of “read more” or “click here”.
- No adjacent links going to the same place. For example, don’t link to the same page/website twice in the same paragraph or in two adjacent paragraphs.
- Do not open links in a new tab unless your site can display an icon next to it, and usually only use for external links.
- When creating paths/urls, use dashes between the words so screen readers can read the individual words, for example: www.example.com/specific-page-name
- If an external url does not have dashes between words, use camel case when displaying visible urls. For example if you would like include this url (www.example.com/specificpagename) in the text, then type the url like so (www.example.com/specificPageName).
- When posting hashtags to your site and social media, use camel case for screenreaders support, such as #specificHashTag.
- Do not rely on PDFs to convey important information, because by default they are not terribly accessible to screen readers.
Colors
- If you can set custom colors within the site content make sure the foreground and background colors have enough contrast. You can use this color contrast checker.
...
Video / Audio
- Videos should have captions and should not autoplay.
- Video and audio should have transcripts.
- Be careful when embedding video players or other widgets in the site, which may not be accessible using keyboard navigation or screenreaders.
CMS
- When changing the url for a page, make sure redirects are automatically or manually create from the old location to the new one, so links do not break within and from without your site.
- Try not to delete pages, since that may break links and hurt SEO.
Navigation/Menu Structure
- Good menu structure
- Try to have less than seven links at each level
- If you have more than one or two levels to your menu, make sure your system shows breadcrumbs so people know where they are in the site.
- Do not have multiple links to the same place in the menu structure.
- Put pages into your menu system whenever possible so they are part of the navigation, instead of just having stand-alone pages at the top level of your site that are not properly connected to the other content.
Additional Resources
https://ux.princeton.edu/accessibility/accessibility-checklist Link to a post on meaningful alt text?
https://accessibility.huit.harvard.edu/describe-content-images