A blog post accessibility & optimization checklist

by

This checklist covers some major accessibility items to check when writing a high quality blog post.

Major areas to check:

Images

Do all of your images have alternative text descriptions?

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load.

See the Adding alternative text to images in a WordPress post for details of how to add alt text to an iamge in your Blog.

Have your images uploaded to your post been sized / optimized for the web?

Today’s digital cameras take high resolution photos with larger file sizes. But in a blog post you don’t need high res photos. You can work with your web developer or graphic designer to resize your images to an optimal size or use an application like Photoshop. Then the images will load faster for people on mobile connections and won’t eat up their data-plan bandwidth.

Headings

Are your headings structuraly nested correctly?
A post should have only one H1 heading at the top that is usually the same as the post title. The post title you enter in WordPress becomes the page’s H1. Be sure your H2 headings and H3 headings underneath them are nested properly. Never skip to a lower heading level without nesting it under a higher heading. In the past some designers have thought of heading levels as font sizes and skipped to a lower level because they like the font size of that level. Actually headings are semantic elements for creating a structural hierarchy in the page. This aids screen readers in navigating the page and has SEO (search engine optimization) benefits.

Colors and Typography

If you’ve added colors, do they have the right contrast?

For WCAG 2.1 level AA: have a 4.5:1 ratio for normal text and a 3:1 ratio for large text (bold and 18px or higher or normal and 24px or higher)

Use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool.
The WCAG 2.1 guidelines related to color contrast is: 1.4.3

Are you using a standard font that’s easily readable?

You should use standard serif (Times Roman) or sanserif fonts (Arial or Helvetica) for maximum legibility. Novelty fonts with unusual letter-forms might be harder to read for people with low vision. Also you should avoid setting long lines of text in All-Caps because capital letter forms can be harder to read and process as words.

Are your links descriptive and not just ‘click here’?
This can help give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.

See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.

Tables

If you have tables, are they only used for tabular data?

Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice.

Do you have a header row specified in your data table?
Each label on a column should be a true header cell TH instead of a regular cell. In WordPress you can tell that something is a header cell clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tage tree it’s a header cell. For example the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is just above where it says “Word count”.

Are you using any complex tables with multiple header rows or both vertical and horizontal heading cells?

You should avoid using complex table because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.

Testing

Can you tab keyboard your way through the web page?

A lot of assistive technology uses a form of tabbing to go through a page. If you
can’t tab through your page, you’ve got some issues.

Have you tested your page with an accessibility checker tool?
You can use a tool like the WAVE tool, Axe by Deque or Google Lighthouse from the inspect code developer’s tools in Chrome to check your page for accessibility issues.

Have you tested your webpage with a free screen reader like NVDA?

If you don’t have a screen reader installed you could contact your organization’s digital accessibility expert to ask if they could test it. Screen readers use keyboard tabbing & other key shortcuts to navigate through a webpage. For non-visual users, they know where they are in the page through audio announcements. Headings and other semantic elements become audio landmarks when navigating a page non-visually. Screen readers have key shortcuts that jump between headings and other landmarks so non-visual users can jump around in a non-linear fashion. The location where the Screen reader has navigated to is called the keyboard focus.

Some other good screen readers include:

You may already have a free screen reader installed in your OS.

References and Resources

Blog Post/Web Page Accessibility Checklist from Jacob Martella Web Development.

How to write an accessible blog from the University of Edinburgh.

Introduction to Links and Hypertext guidance from WebAIM.

Understanding the WCAG 2.1 guidelines related to color contrast from WAI (the web accessibility initiative).

Narrated PowerPoint presenation about blog post accessibility 13:21 – covering accessibility for images, headings, colors, typography hyperlinks, and tables.

WordPress accessibility course in LinkedIn Learning – covering creating accessible themes, plugin accessibility, authoring accessible content, and testing.

How to Make Your WordPress Website Accessible video 14:16 – covering how images, colors, and text should be accessbible and how plugins can help.