Accessibility

Learn how to maintain an accessible WordPress blog. All websites at TMU are required to be made accessible — it’s also the right thing to do!

Select an accessibility-ready theme

We highly recommend selecting any of the accessibility-ready themes from Twenty Nineteen to Twenty Twenty-Three. These themes are the most up-to-date, accessible, and easy to customize. 

Learn the basics of content accessibility

Self-describing links

Ensure hyperlinks are self-describing. Avoid links like “click here” or “learn more” because they do not provide any useful information to someone using a screen reader. These links do not make sense out of context either! For best practice, hyperlinks should be descriptive and link to nouns that are specific in context. 

Effective use of headings

Semantic headings do not only act as visual cues, but also as an outline as to how a page is structured and how sections relate to one another. Proper heading structure can be especially useful for people who use screen readers, as they can be used as navigational aids to jump from heading to heading. Add headings using the Heading block type.

  • Heading 1 is the most important heading in terms of rank or hierarchy. Within modern WordPress themes, the title of your post or page is usually a Heading 1 already. Therefore, you should most likely use Heading 2 when creating new subheadings on the page. 
  • Make sure all of your headings are structured in a logical order that conveys hierarchy, ensuring that all headings have a proper parent/child relationship.
  • Different levels of subheadings should be underneath main headings, for example a H3 would be nested under a H2. Skipping heading ranks can be confusing and should be avoided.

Ensure text has good contrast

Most of the accessibility-ready themes have good contrast by default. If changing theme defaults, ensure the text has at least a sufficient contrast ratio of at least 4.5:1 for normal size text, or 3:1 for large text (like headings). 

We do not recommend manually styling most of the text in your post, as it may introduce contrast issues if you change your theme colours at a later date. If you change your theme, consider doing a quick audit of your website to make sure no contrast issues were introduced.

Add alternative text to images

Alternative (alt) text is used to convey meaning and provide context in place of an image, graph and other media. Blind and low vision users rely on the alt text attribute to understand the equivalent meaning of images, figures or other graphics in textual form. Alt text should provide a concise description conveying essential information about the image.

  • Alt text should be concise and meaningful.
  • Usually, around one hundred characters or less.
  • Use punctuation, as it can help make information easier to understand.
  • Avoid phrases such as “image of…” or “graphic of…”
  • Consider the context of the surrounding information when writing.

View some examples of good alt text. If an image is decorative in nature (doesn’t convey any meaningful context), just leave the Alt Text field blank.

Where to add Alt Text in WordPress

There are two ways to add alt text to images:

  1. Go to the Media Library, select your image to open the Attachment details and enter your alt text in the Alternative Text field.
  2. When embedding an image within your post, toggle the Settings sidebar. You can add alt text within the Block settings within the Alternative Text field. 

Other formatting tips

  • Avoid underlining text that is not a link. Underlined text is most commonly used to identify a link to another web page. If you’d like to add emphasis to text, use bold instead.
  • Avoid using bold text as a heading. Use the appropriate heading level via the Heading block type instead.
  • Avoid using ALL CAPS. It gives the impression that you’re yelling, and some assistive technologies may interpret short words as acronyms.

Use Sa11y to identify accessibility issues

Sa11y is a free content accessibility checker that visually highlights content issues at the source with a simple tooltip on how to fix them. This plugin is available to all TMU blog editors, and can be accessed by logged-in users that have permissions to edit a page. View an overview and demo of Sa11y.

Further reading

For more information, please visit TMU’s Web Accessibility page or WebAim’s Introduction to Web Accessibility.

Contact

If you have any questions or need accessibility help, please contact us.