Posted on

Writing Accessible Content

a11y text on blur background

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:

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.
  • 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.

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ä.

Had fun time in Jyväskylä.

A post shared by Sami Keijonen (@samikeijonen) on

3 comments Writing Accessible Content

  1. Thank you for this good article, Sami, but I would like to make a comment about your statement: “From my understanding PDF files are not very accessible…”

    I think your statement is inaccurate and more of a “urban myth” at this point. There was a time, many years ago, when this was true. But with current software and techniques, PDFs can be fully accessible. The problem comes from the fact nearly all PDF are created/converted from some other digital document and many – if not most – of those documents are NOT accessible.

    If you create a word processed, presentation (e.g., PowerPoint) or spreadsheet document, that is fully accessible, and convert it to a PDF, it will almost always be fully accessible. So the problem is not the PDF or the PDF conversion process, it is the content creators’ lack of skill and knowledge about how to make accessible digital documents.

    If your readers do the things you recommend in this article for all of their digital content (including word processed, presentations and the like) before they convert to PDF, we will all be better off!

    Thanks again.

    ~j

    1. Thanks John for the comment!

      I have to admin that I know nothing about PDF accessibility. If you have good articles about the subject, I’m more than happy to learn.

      Also good to hear that PDFs that are converted from Word document are accessible.

      Perhaps my main point is that if you can put content on a web page why put it in PDF file.

Leave a Reply

Your email address will not be published. Required fields are marked *