Guide to accessible content

Text content

Page contents

Text content is important. For many websites, text is likely to make up the biggest chunk of page content, and for some screen reader users it may be the only content that they can consume.

Overview video: Five tips for formatting more readable and accessible text

Headings

Imagine a newspaper page without any headlines. How would you quickly identify which articles you are interested in?

Use clear, concise headings to add structure to your content

  • Breaking content into chunks introduced by headings makes it easier to scan.
  • Effective headings are ‘front-loaded’: they use the word(s) people are likely to be looking for, at or near the beginning.
  • Sentence case headings — A giant leap for mankind — are easier to read than title case headings — A Giant Leap for Mankind.
  • It’s easier to maintain consistent heading styles when using sentence case, because the rules on which words to capitalise are simple: just the first word, and any proper nouns or proper adjectives.

Make sure headings are labelled correctly

  • Use the toolbar options in your Content Management System (CMS) to format headings.
  • Don’t rely on using bold type and/or a larger font size; this isn’t sufficient for screen reader users.

The resulting HTML code for headings should look something like this:

<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

It’s fairly easy for sighted people to visually identify headings and subheadings compared to the surrounding text. When labelled correctly, screen reader users can quickly navigate a web page by skipping from heading to heading using their keyboard.

Companion video: Web Accessibility 101: Web Headings for Screen Readers

This also highlights why you shouldn’t use a heading for text that you want to emphasise visually without attaching any further meaning to it.

Check your heading hierarchy to make sure you don’t skip heading levels

  • In most cases your CMS will automatically give the main page title the H1 tag. This should be the only H1 on the page.
  • Headings introducing sections should use the H2 tag.
  • Sub-sections within a section should use the H3 tag, and so on.

A single H1 at the start of the main page content makes it easy for screen reader users to quickly jump to this point.

Avoid following a level 2 heading (H2) with a level 4 heading (H4). This can confuse screen reader users, who may think they have missed a portion of text.

Companion video: Demo of a skipped heading level using Mac's VoiceOver screen reader

How to check your heading hierarchy

Companion video: Check heading accessibility using the WAVE tool

Avoid empty headings

  • Empty headings are where the HTML code shows a heading without any text inside it, e.g. <h2></h2>
  • They are announced by screen readers, even though they are empty, which can be confusing for people.
  • To avoid adding them accidentally, enter text content as simple sentences/paragraphs first, then go back through the content selecting just those words that should be formatted as headings.
  • Remove any empty headings that are present in your content.

Paragraphs

Don’t use justified formatting for text

  • Use left-aligned-text for left-to-right languages like English.
  • For right-to-left languages, use right-aligned text.

Justified text uses varying amounts of space between words for a consistent line length, creating straight edges. This uneven spacing can create large gaps, or ‘rivers’, between some words, making the text harder to read for people with conditions such as dyslexia.

Centre-aligned text should be limited to short lines of text. When there are many lines of text that are of unequal length and centre-aligned, it makes it much harder to find the beginning of the next line.

Use hard returns to start new paragraphs

  • Hard returns are made using just the Enter key.
  • This creates a proper ‘paragraph break’.

You may have been taught to break text into sections using multiple ‘soft returns’ or ‘soft breaks’ with the Shift and Enter keys. This creates ‘line breaks’, but these are only visual indicators of a new line. To screen reader users the text on the new line may sound like a new sentence instead of the start of a new paragraph.

Using a hard return creates a ‘paragraph break’ with the same meaning for both sighted and visually impaired users.

Don’t use empty paragraphs, tabs or spaces to add white space

A classic example of this would be using a double space after a full stop. White space created in these sorts of ways may be read out by some screen readers and become errors when exporting a Word or Google document to a PDF.

Lists

A sequence of steps or series of items is easier to follow when presented as a list rather than in a paragraph.

Companion video: Introduction to accessible lists and a screen reader demo

Make sure lists and list items are labelled correctly

  • Use the toolbar options in your CMS to format lists and list items.
  • Don’t rely on using dashes, asterisks or manually typed numbers at the start of each line.

The resulting HTML code for an ordered (numbered) list should look something like this:

<ol>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ol>

An unordered (bulleted) list should look something like this:

<ul>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>

If you create a list by manually typing a random character — such as a number, hyphen or asterisk — at the start of each new line, it will only appear as a list visually and won’t be clear to screen reader users.

When lists and list items are correctly labelled, screen reader users will know how many items a list contains and which item in the list they are currently reading.

Copying and pasting text

Always paste external content as plain text into your CMS

  • Stops unnecessary code from being added to your web pages.
  • Prevents potential accessibility issues.

Text copied from e.g. Word documents, PDF files, or other web pages, may include non-visible formatting code. When you paste the text into your CMS this code is added to your web pages, making them less accessible for screen reader users and increasing the page weight.

If you don’t have a toolbar option in your CMS to paste as plain text, you can copy from the document and paste into a text editor on your computer — such as Notepad (Windows) or TextEdit (Mac) — then copy and paste from there into your CMS.

Emojis

Emojis can help communicate ideas or concepts very succinctly, but they can cause problems for people with low vision and/or cognitive issues and screen reader users.

Companion video: Testing emojis with screen-reader

Avoid using emojis, unless you are happy to edit HTML to ensure they are accessible

  • Never replace a word or letter with an emoji and never use an emoji in the middle of a word.
  • Only use emojis that are clearly visible in both light and dark screen modes.
  • Be aware of cultural differences in how an emoji may be interpreted.

Emojis are a type of Unicode character. To improve the accessibility of emojis, wrap the Unicode character inside a span element with the role attribute set to “img” and the aria-label attribute holding the text description. The resulting HTML code should look something like this:

<span role="img" aria-label="Ice cream cone">&#x1f366;</span>

Emojis appear differently across devices and operating systems, and may not display at all for some users. Check the Unicode emoji list to see how an emoji will display.