Web Accessibility tips for content authors and bloggers

Your web designer should have designed your website to be WCAG compliant because it’s legally and morally the right thing to do. However this is not a one-off effort and you need to be vigilant when you update pages on your website, publish new blog articles or post content to social media. You may have a web accessibility plugin installed on your WordPress site and while this is a good base, this is not sufficient to ensure that everything you publish will be universally accessible. Here are a few web accessibility tips for blog authors, content curators and website owners to make sure a website stays compliant with WCAG.

What is Web Accessibility?

The Web Content Accessibility Guidelines (WCAG) are an international standard developed by the Web Accessibility Initiative at the World Wide Web Consortium (W3C) to ensure that web technologies can be used by anyone regardless of their abilities.

Australia has ratified the Convention on the Rights of Persons with Disabilities which “asserts the right of people with a disability to participate fully and independently in all aspects of society, including the internet and access to information” (Australian Human Rights Commission, web access advisory notes). Therefore failing to provide full access to your website could be deemed a violation of human rights.

There are 78 success criteria in WCAG 2.1 but most of them should have been addressed by your web developer. Here are 9 tips to keep your web content accessible.

1. Set alternative text on your images

When you upload a new image make sure to describe the image in the Alternative text field.

In the screenshot below, the image title is “2019 Twilight Soiree”. The Alternative text (alt text) field describes the image a vision impaired visitor. In this example below, an appropriate alt text could be “Group of people singing”

If the image is purely decorative like an icon then do not set any alt text value.

Not sure when to use alt text? Check the WAI decision tree.

Reference: WCAG Success Criterion 1.1.1 Non-content text

2. Add text transcripts to your podcasts

You need to add a text transcript to audio content like podcasts. The transcript can be on same page or linked to a separate page. This also applies to videos with no audio track, unless it’s decorative.

Here’s an example of my favourite WooCommerce podcast called Do the Woo.

The page starts with a classic audio player:

Further down the page, there’s an edited transcript that can even be downloaded as a PDF file or opened in another tab:

Reference: WCAG Success Criterion 1.2.1 Prerecorded Audio-only and Video-only

3. Add captions to your videos

If your videos have people talking then you need to add closed captions, also known as subtitles, that are synchronised with the video. YouTube has a good tool that automates most of this task. It recognises most of the speech and it’s easy to correct.

Example of a video with closed captions:

Reference: WCAG Success Criterion 1.2.2 Captions (Prerecorded)

4. Formatting elements

Use headings, bullet point lists, bold text, etc to structure your content. Do not use them to style your content.

E.g. to emphasise a sentence, you can change the text colour, the font size or make the text bold. But don’t use a H1 heading. Using headings may be a shortcut for you but will confuse anyone with a screen reader.

For long articles, add subheadings with the appropriate heading number. This helps everyone including search engines to better understand your content.

Reference: WCAG Success Criteria 1.3.1 Info and relationships and 1.3.2 Meaningful sequence

5. Don’t rely only on colour to present content

1 in 12 men and 1 in 200 women in the world are colour blind.

E.g. Don’t ask your website visitors to “click on the blue button to register” but instead make sure sure the blue button says “register”.

Reference: WCAG Success Criterion 1.4.1 Use of colour

6. Don’t use images of text

The internet is full of ads or memes with text embedded in images. This is interesting or funny for sighted people. But for more than 500,000 Australians who are blind or visually impaired, these images may be difficult to understand. And animated GIF images can make people suffering from vestibular disorders very sick.

In the WordPress block editor you can use the Media & Text block. If your website has a page builder like Divi, it’s easy to add a text overlay on a picture. This way, anyone can understand the message.

Below is an example of a popular meme (author unknown) recreated with the Media & Text block in the WordPress block editor.

Exceptions: logos can contain text.

Reference: WCAG Success Criterion 1.4.5 Images of text

7. Use informative and helpful page titles

Don’t leave the page/post title with a default name (e.g. Untitled) or unclear name (e.g. Post 1234).

Examples of good page titles: Our services, 1kg jar of organic honey

Reference: WCAG Success Criterion 2.4.2 Page titled

8. Write clear link text

Avoid “click here” and “read more” links. This wording generally demonstrates poor writing skills and visitors with screen readers won’t have a clue what the links are.

Example: instead of “Click here to order our product”, use “Order product”.

Reference: WCAG Success Criterion 2.4.4 Link purpose (in context)

9. Avoid links that open in a new tab/window

When you link to external websites, it’s tempting to open links in a new tab or window so visitors don’t leave your website. But this can be disorienting for people with a visual or cognitive impairment.

There are exceptions like a form with links to help pages.

Reference: G200: Opening new windows and tabs from a link only when necessary