Page content

Best Practice Accessible Content

The way content is presented is just as important as the writing itself. It's important that content is structured with logical headings and a consistent layout.

A good test for this is using the 'table of contents' in Word. If that is easy to understand then the document is generally created properly.

This will help all users navigate through the content and understand it better.

Perceivable

Make sure everyone can perceive your content even if they access information in a non-typical way.

Use text alternatives for non-text content and alternatives for audio and video content.

Operable

Make sure people can use your application or platform through a variety of methods and forms of technology. This includes keyboard navigation and navigating and finding content using voice.

Understandable

All content should be understandable, clear and concise. People should be able to explore it at their own pace.

This might include:

logical and consistent content
helping users avoid mistakes
definitions for jargon, abbreviations or unusual words

Robust

You should make sure anything you create can be used by reasonably outdated, current and anticipated tech standards and assistive technology. This might mean making sure your offering is compatible with other products.

How to write better content for people with dyslexia

Dyslexia is a common learning difficulty that affects the skills a person uses to learn how to read and write. It's estimated up to 1 in 10 people in the UK has some degree of dyslexia. Tailoring your writing to this audience makes your content more accessible to everyone.

Everyone's experience with dyslexia is different. It is often associated with having trouble with reading, writing and spelling but if can also affect:

how you process and remember information
how you recognise the different sounds that make up a word and match these to the letters on a page or screen
concentration span
your ability to focus on lines of text for a long time, makes quickly understanding long passages of text difficult

People with dyslexia can experience what's called the 'river effect' when they see large gaps in long lines of text. The spacing between words moves the visual focus onto the white space, which looks like a river flowing down the page.

People may also experience visual distortions that make letters jump around the page. Like many other conditions, dyslexia affects people to different degrees. Victor Widell has developed a virtual simulator depicting the visual distortions people with dyslexia may experience.

The following best practice tips can help make your writing more accessible to people with dyslexia, but they can also improve readability for a larger number of users.

Using readable fonts

Fonts can have an impact on our ability to read and get information quickly. Whether that's on a website, in documents or in the graphics shared on social media. They are an essential part of visually accessible information.

How font choice affects accessibility

The more readable your font is, the more likely it is that people reading your content can understand your message and get the information they need quickly.

Font choice can particularly affect people who have:

a visual impairment
dyslexia
low literacy
learning difficulties
conditions like Irlen Syndrome that affect the way the brain processes visual information
migraines

Users can experience a type of visual distortion which makes the words appear to run together. This is more likely to happen if the font is highly stylized, or there's not enough spacing between the letters.

Serif versus Sans Serif fonts

Serif fonts have decorative strokes at the end of each letter. These are sometimes called 'feet'. An example of a serif font is Times New Roman.

Sans Serif fonts do not have ornate, decorative strokes. They are simpler and more stripped back. An example of a sans serif font is Arial.

What makes a font accessible?

Fonts with simple, familiar shapes are generally easier to read. This is because most people scan through text quickly when they read without needing to read individual letters of words.

Fonts that are very elaborate or ornate can be difficult to read or see clearly, even if you're using them sparingly as headings. This is because the letter shapes are not well-defined or regular in shape and size. These irregularities mean we must pause to examine and process the characters. This particularly applies to handwriting and script-style fonts.

When certain characters look similar, the brain must work harder to distinguish between them. This can affect reading speed and comprehension.

Some font families use practically identical letter shapes for different characters. These are sometimes called 'imposter' letter shapes. An example of a font that does this is Gill Sans. The upper case 'i', lower case 'l' and the number '1' look the same next to one another. This can also occur with 'e', 'c' and 'o' characters. Depending on the font, and how narrow the openings are in the 'e' and 'c' letter shapes, these can all look very similar.

Similarly, some characters look the same when you flip them horizontally. For example, 'd' and 'b' and 'p' and 'q'. This is known as 'mirroring'.

Enough spacing between characters

Letter spacing is another important factor in font accessibility. Every font has difficult widths and some fonts have less spacing between characters by default.

Choosing a tightly packed font can cause letters to overlap and words to look squashed. This can create barriers for certain readers. It can cause letters to blur together and become confused with other letter shapes.

For example, 'r' and 'n' next to ne another can easily look like an 'm' without enough spacing. Similarly, too much spacing between letters can also make text hard to read.

You can manually edit the spacing between letters (known as "tracking"), but for usability, it's easier to choose a font that has adequate spacing between as default.

This is especially a problem with narrow, condensed fonts.

Consider different colour combinations

Many people with dyslexia are sensitive to the high contrast of pure black text on a pure white background. This can trigger a visual distortion where the text blurs together. This sharp contrast can produce a glare that makes words harder to read and can make reading long pages of text tiring.

Use dark coloured text on a light coloured (but not white) background for readability. Instead of using pure black for your text colour, use dark grey.

Using background with patterns or photos can make the text harder to read for non-dyslexic users too. Instead, use a simple, single colour background such as:

off-white
cream
light grey
soft pastel colours

Whatever colour you choose, make sure that there is still enough contrast between the background and text colours. Remember not to only rely on colour as the way to explain or identify things.

Tools like the WebAIM Colour Contrast Checker are useful for testing your colour combinations against accessibility standards.

Font styling and accessibility best practice

The University encourages staff to adopt the following practices in line with their Style Guide.

Use Arial font as standard.
Make sure you have a good colour contrast between the text and background colours.
Avoid italics. This can make text very difficult to read, particularly for people with dyslexia.
Avoid using all capital letters. This makes text much harder to read.
Try to use bold sparingly.
Use font size 12pt or 14pt as standard.
Don't use underline unless it's a link. Most users think underlined text is clickable, and this can cause confusion.
Larger line spacing improves readability. Line height (line spacing) should be at least 1.5 times the font size.
Don't fully justify text. Use left-aligned text instead.

Accessible writing

Content is often overlooked when talking about accessibility, but your writing style and the words you choose are really important.

Your audience won't engage with your content if they don't understand your information, descriptions, instructions and so on.

For example:

Don't use the @ symbol in straplines or headings. This can confuse people with cognitive impairments and neurodiverse conditions who may think the strapline or heading is an email address.
Don't use 'e.g.' or 'i.e.' - instead write 'for example' and 'such as', as this is easier for screen readers to communicate as some can pronounce 'e.g.' as 'egg'.
Don't use the term 'FAQ'. When being read aloud by certain screen readers, this can sound like a swear word. Instead, refer to 'Frequency Asked Questions'.

WebAim's guidance on designing for screen reader compatibility explains