Guide to accessible content

Text content

Page contents

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

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

Copying and pasting text

Be careful when copying text from a digital document (e.g. Word document, PDF file) or another web page and pasting it into a new web page

Always paste external content as plain text

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

Text that has been copied from another source will often include extra code that you can't see. If you paste the text directly into your Content Management System (CMS), this code gets added to your web pages, making them less accessible for screen reader users and making the file size of the web page larger than necessary.

If you don’t have a toolbar option to paste as plain text, copy the text and paste it into a plain text editor first, e.g. Notepad (Windows) or TextEdit (Mac). Then, copy and paste from the plain text editor into your CMS.

Text alignment

How text is aligned can make a huge difference to how readable it is.

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-alignment is best limited to short lines of text. When longer passages are centred, with lots of lines of unequal length, it’s much harder to find the start of the next line.

Headings

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

Use clear, concise headings to organise your content

  • It’s easier to scan content when it’s broken into chunks with headings.
  • Effective headings are ‘front-loaded’: using the word(s) people are likely to be looking for at or near the start.

Headings written in sentence case — e.g. A giant leap for mankind — are easier to read than title case headings — e.g. A Giant Leap for Mankind. Using sentence case also makes it easier to write headings consistently across pages, because the rules about which words to start with a capital letter are simple: just the first word, and any proper nouns or proper adjectives.

Make sure headings are properly formatted

  • Use the heading tools provided by your Content Management System (CMS) to format headings.
  • Don’t rely on using bold type and/or larger font sizes; this isn’t sufficient for screen reader users.

Headings are numbered from 1 to 6. 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 formatted 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 use H1 for the main page title. This should be the only H1 on the page.
  • Headings introducing sections should use H2.
  • Sub-sections within a section should use H3, 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>
  • Remove any empty headings that are present in your content.

Empty headings are still announced by screen readers, which can be confusing for people. To avoid accidentally adding them, enter your text content as regular text first, then review what you have entered and select just those words that should be formatted as headings.

Paragraphs

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 formatted correctly

  • Use the tools provided by your Content Management System (CMS) to create lists.
  • Don’t rely on manually adding dashes, asterisks or numbers to 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 formatted, screen reader users will know how many items a list contains and which item in the list they are currently reading.

Accessible instructions

Provide clear instructions and error messages

  • Be specific and upfront about what people need to do, e.g. password requirements.
  • If something goes wrong, explain the problem and how to fix it.

Clear instructions and error messages are helpful for everybody, especially people with neurodivergence.

Avoid relying on sensory characteristics in instructions

It’s more inclusive to refer to items by their name and function. Examples of poor instructions would include:

  • “Available seats are indicated with a green circle.”
  • “When you hear the beep…”
  • “Select from the options in the right-hand sidebar.”

As well as being unhelpful to visually impaired people, directional instructions assume that everyone is looking at a screen with exactly the same size, orientation and zoom level, which isn’t guaranteed. That sidebar might not always be where you think it is.