Five ways to improve the accessibility of your content

  • Author: Clarizza Fernandez
  • Date: 28 Nov 2012

It's a common misconception that web accessibility is the sole responsibility of web designers and developers, and that content authors play little to no role in the accessibility of a website.

The reality is that content authors have more control over a website's accessibility than most people think. In fact, the way content is presented has a direct impact on the accessibility of a website.

Many of the general rules that writers apply to their work also apply to creating accessible web content. Planning page structure and grouping content into logical chunks, or ensuring the language you use is clear and concise are not only examples of web writing best practice, but also improve the accessibility of your website for people with a disability.

Before we get into how you can improve the accessibility of your content, it's important to note that understanding how your content management system (CMS) works is vital in implementing these techniques. If you are familiar with the inner workings of your CMS, you have better control of the HTML elements that help make content accessible.

CMS's vary between organisations but many of these techniques can be applied across different systems. The important thing is to understand how your CMS (or WYSIWYG editor) interprets your content. For example, some page titles are automated using article headings, which can result in an inaccessible webpage. If you are familiar with how your CMS treats elements such as headings, you are better equipped to fix errors that arise and by hand-coding elements in your CMS or WYSIWIG editor.

These techniques will also help you comply with the Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

1. Headings

Headings and subheadings help to give your content structure. A common mistake content authors make is to increase the text size or apply a bold style to a heading or subheading instead of using the <h1> element.

While increasing the text size or applying a bold style to headings or subheadings is visually sufficient, a person who is blind or vision impaired and using a screen reader to navigate between blocks of content on a page won't receive this same information.

Using the <h1> element is important for screen reader users for several reasons:

  • It allows screen readers to interpret text as headings.
  • It is important for screen reader users who use keyboard shortcuts. On most commercial screen readers, including JAWS and NVDA, the 'h' key allows users to move between headings so they can get to different sections of content.
  • The different heading levels (<h1> to <h6>) allow screen readers to interpret the hierarchy of your content.

More information on how to provide structure to your content through the <h1> element can be found in Headings: accessibility for content authors.

2. Page titles

A page title is displayed at the top of your browser window and is represented by the <title> element in HTML. It allows the user to differentiate between different pages of a website.

Perhaps the most important function of page titles is that they provide a navigational description for screen reader users that helps them understand where they are on a website.

At this point, knowing how your CMS treats page titles is important. Often, a CMS will automatically generate a page titles using the heading of the article on that page. If your CMS does this, you need to understand how to correct it because often the heading of an article does not provide a meaningful description of the content. This means the purpose of the page title, which is to identify where the user is on is on a website, is lost.

Page titles are also used in search engine rankings. If your page titles are meaningful, users will be able to determine whether or not the content is relevant to them. Similarly, when users share links or content on social networking sites, page titles are often the only descriptive text that is shared, along with the URL.

Find out how screen readers use the <title> element and how it affects the search engine optimisation (SEO) of your content in Page titles: accessibility for content authors.

3. Links

'Click here', 'Read more', 'More' — sound familiar? This kind of link text is used in abundance on many news websites and blogs. However, all of these links are inaccessible to people who use a screen reader.

In good web writing, scannable words are favoured due to the nature with which users treat text or information on a page. Similarly, link text should be indicative of where it will lead or what information will be found once the link is activated.

Meaningful links are even more important for screen reader users because most commercial screen readers allow you to pull up a list of links that are found on the page. A list full of 'Click here' or 'Read more' links isn't useful to anyone who wants to quickly find a link to a document or the page with a company's contact information, for example.

Links: accessibility for content authors provides more examples of how to create meaningful links for documents, audio files and more.

4. Images

The internet is saturated with images, or 'non-text' content. Many content authors use images because they allow you to communicate an idea or message in an engaging or provocative way. The ability of images to be shared is often cited as contributing to the success of infographics, which can also be images.

However, the accessibility of your content or website can be hindered if text alternatives are not provided for images. In particular, if the information communicated in an image is pertinent to the overall meaning of the webpage, it is important to make text alternatives for images available for people who cannot see them, and for those who use screen readers.

Text alternatives are used within the alt attribute in HTML and allow a screen reader to interpret the information communicated by an image.

Most CMS's allow you to include a text alternative when you upload an image. When you provide a text alternative, you should consider whether the text alternative describes the function of the image.

Complex images like graphs or infographics will require a longer text alternative. In this case, you can provide the text alternative directly following the image.

Images: accessibility for content authors explains how to provide text alternatives for both simple and complex images.

5. Acronyms and abbreviations

When writing for the web, it is best practice to provide the expanded version of any acronym or abbreviation on first mention. While a sighted user is able to scroll up and down the content to reference the expanded version, it is more difficult for screen reader users or people who have cognitive disabilities to navigate content in order to reference what each acronym stands for.

Abbreviations and initialisms can also be challenging for people who have a disability. A content author can provide an explanation of these to assist in them being understood.

You can provide this information in several different ways:

  • Provide the explanation within your content.
  • Use the title attribute within the abbr element. This will allow screen readers to describe the abbreviation.
  • Provide a link to a glossary.

Of course not every acronym or abbreviation needs to be explained, particularly if it has become so ingrained in everyday language that the use of the extended version has diminished in favour of the acronym or abbreviation.

Find out how screen readers use the title attribute and abbr element, and the potential impact acronyms and abbreviations have on accessibility in Acronyms and abbreviations: accessibility for content authors.