Writing Accessible Content

Good start for accessible site is using accessibility ready themes and plugins. I have written technical overview how to build accessible themes. But that alone is not enough. Writing accessible content is big part of having accessible site.

In this article I summarise good and bad practises about writing accessible content. It’s mostly for WordPress but same tips can be applied to any platform.

Write easy to read text

People have hard time reading on the web. They might quickly scan the page and pick sentences here and there. How to design words article have excellent tips how to write easy to read text.

• Trim it down: Keep your sentences short and to the point. Use simple words, and then trim the text again. And again.
• Use headings: Headings helps scanning your text. They give structure to your page.
• Use lists: Lists are usually easier to read and scan than paragraphs.
• Give readers a break: It can be hard to read long text. Headings, lists, images,  and short  paragraphs are good way of giving a break to readers.

Now go back and read more details how to design words. There are couple of extra points about prioritizing words and the slow reveal of content.

Headings hierarchy

Headings defines the structure and hierarchy of a page. Sighted users can scan your text faster and get the idea of the structure and content of the page. I’m pretty sure search engines like headings too.  🙂

Also screen reader and other assistive technology (AT) users can navigate the content by heading structure.

In WordPress visual editor you can add headings under Paragraph dropdown. In there you have choices to select headings hierarchy:

• Heading 1 (H1).
• Heading 2 (H2).
• Heading 3 (H3).
• And so on.

There are couple of important notes how to use headings correctly.

• Do not use Heading 1. In most cases Heading 1 comes from your theme template file automatically. It’s not the end of the world use two Heading 1 in the same page but this is my recommendation.
• You can use Heading 2 and Heading 3 as a sub heading. In most cases there is no need for heading 4, 5, or 6.
• Do not skip heading levels. After H2 comes H3. After that H4 and so on. This is important for semantic hierarchy of a page. Screen reader users can scan the content by using headings hierarchy.
• Do not use text formatting to replace actual headings, like font size, colour or bold. They are not structural elements. Search engines and assistive technology users can’t read them in the same way as headings.

Read article Semantic Structure from WebAIM for more information. You can check your page heading structure with these tools:

• Headings Map toolbar for Chrome
• Headings Map toolbar for Firefox

How about other editor tools than headings? Which one are good and which one not so good.

Emphasizing content

Screen readers and search engines don’t understand bold, italic, underline, or colour. Therefore don’t use them as only way to indicate importance or hierarchy of your text. Here is my list what you should avoid and why.

• Do not underline text. Most people think that underlined text is a link. Underlined text doesn’t have semantic meaning for screen reader users.
• Do not justify text. This can result big gaps between the words and bad reading experience. Luckily Underline and Justify buttons was removed from the WordPress editor.
• Do not change text colour. This can lead to inconsistency design in your site. Leave all the colour styling for the theme you’re using.
• Do not capitalize text. In general CAPITALIZED TEXT is difficult to read and some screen readers read capitalized text letter by letter. Who wants to shout at their readers anyways. 🎧 🙃
• Be also careful when aligning text to center, right, or left. For example if you end up centering all the headings you’re in trouble. Also that styling should be done in theme styles for consistency.

Making accessible links

Links are the back bone of the web. Sitepoint have good article about creating accessible links. I highlight some of them here.

• Link text should provide clear information about the meaning of a link.
• Avoid repetitive link text like “Click here” or “Learn more”.
  • That’s just bad language.
  • Screen reader users can navigate your page using links only. For them repetitive “Click here” link doesn’t give any information what the link is about.
• Avoid using URLs as link text.
  • Some screen readers read URL links letter by letter.
  • Bad example: https://foxland.foxnet.fi/busting-myths-accessibility/ 
  • Good example: Busting the Myths of Accessibility.
• Don’t use Title attributes in links. Screen readers and touch devices don’t see them. Title attribute fields is also removed from the WordPress link modal box.
• Avoid opening links in new window or tab.
  • Assistive technology users might get confused what just happened.
  • Can be problematic in mobile browsers to go back where you started.
  • Users can open links in new window or tab if they want.
  • If you want to open external links in new window, always notify users about that. Such as additional text “opens in new window”.

Image alternative text

Screen readers and search engines can’t really know what the images presents. Alternative text provides a textual information or functionality of images:

• It’s read by screen readers and search engines in place of images.
• It’s displayed in place of the image if the user have chosen not to show images or images are not loaded.

But what is alternative text?

1. It’s alt attribute of the image. In WordPress image modal this is called alt text.
2. It’s the context or surroundings of the image, like caption.

I have to admit that I struggle to write good alt attribute or caption for images. That’s why I always read WebAIM wonderful article of appropriate use of alternative text over and over again. There are examples about alt attribute usage.

• Alt attribute depends on the context. That why it’s so hard!
• Every image must have an alt attribute. If you remove alt attribute all together screen readers try to read “something”, like filename.
• But alt attribute can be empty (alt="") for decorative images.

Other media like videos and PDFs

For videos it’s good to have captions or transcript available. Not all people can  see or hear. Note that captions are not the same thing as subtitles.

• Subtitles are a direct translation of the speech.
• Captions are a text version of the speech and sound on the video.

From my understanding PDF files are not very accessible. I have read about PDF tags which provides a hidden structured, textual representation of the PDF content that is presented to screen readers.

For more information here is fantastic overview of PDF inaccessibility, what PDF files actually are, and what’s going on behind the scenes.

Edit April 7, 2021: PDF files can be made accessible but that would need separate post. In general it’s more accessible to add content to web as regular content though, not as PDF.

Talk in Jyväskylä WordPress meetup

This article was written for my talk in Jyväskylä WordPress meetup. That’s why the article is more like “slides” of my talk with lot’s of bullet points, sorry about that. But I do hope you got some tips how to write accessible content. Let me know if something important is missing.

As always I had great time in beautiful Jyväskylä.