Accessibility guidelines for websites

Capitalise just the first letter of a sentence.

Words in block capitals can be problematic for people with dyslexia and visual impairments, particularly if sections of text are in capitals. It can also prove tricky for screen readers, which may interpret consecutive uppercase letters as acronyms and read them out letter by letter.

Words that are in italic type or underlined are difficult to read. Use regular for your main text, and bold for titles and to highlight key words if necessary.

Large passages of bold text are hard to read, and some screen readers will shout out words in bold, so use them sparingly.

Handwritten and decorative typefaces are best avoided. Choose a simple font that allows letters in words to be easily distinguishable from one another and with adequate spacing between them.

Designs that use only one or two typefaces, weights and styles are usually easier on the eye – too many can create a confusing visual layout, particularly for people with reading difficulties such as dyslexia.

Good colour contrast between text and the background will make your content legible and easy to identify.

Black text on a white background is usually the first choice for maximum legibility. Coloured text on a bright background will be difficult to read.

Aligning all text to the left in left-to-right reading languages, including in tables and blocks of text in diagrams, makes it easier for people to see where each line begins.

People with reading difficulties can struggle to follow long lines of text, so keep them to a maximum of 60 to 70 characters.

Justified text leads to uneven spacing, which can be hard to read. Centred text can make it difficult to see where each line begins.

It is important to have adequate line spacing between each line of text to ensure it is readable.

Lines of text that are too cramped are much more difficult to read.

Confusing writing is an accessibility barrier to all readers, and is particularly difficult for non-native English speakers and people with dyslexia, autism or other cognitive conditions.

When writing, think about the words you use when having a conversation, remembering that our brains take in information more easily when it’s broken into small chunks. It’s also good practice to read your writing line by line, removing unnecessary words. Avoid large blocks of text and think about breaking up key pieces of information with bullet points to help your audience read and digest it quickly.

Instead of writing:
There are three main things to consider when deciding if you need to include alt text: the context of an image, the value that the image adds to the text, and the amount of description that is appropriate for the format.

Try:
There are three main things to consider when deciding if you need to include alt text:

• The context of the image.
• The value that the image adds to the text.
• The amount of description that is appropriate for the format.

Put yourself in your audience’s shoes and make your language as clear as possible.

Avoid jargon, slang and idioms, as they may only make sense to people who live in a particular region or work in a specific industry. A glossary can help if you are mentioning a lot of organisations, phrases and words that can be abbreviated.

Instead of:
The IOC is the governing body of the NOCs.

Try:
The International Olympic Committee is the governing body of the National Olympic Committees.

Use shorter, simpler words instead of longer, more complex ones.

Instead of: Commence
Try: Start

Instead of: Discontinue
Try: Stop

Instead of: Facilitate
Try: Help

Instead of: Adjacent to
Try: Next to

Hyperlinks and buttons should convey clear and accurate information, describing where people will go if they click the link.

People who use screen readers may scan for the links, so avoid using link texts such as ‘click here’, ‘learn more’ and ‘link’. Instead, use descriptive link text such as ‘Read our accessibility guidelines’.

Use a differ colour to highlight the hyperlink text and underline it so that people who are colourblind can recognise that the text is linked.

Error messages can be frustrating for users, especially if they are ambiguous, so provide a clear description and instructions to help visitors correct their mistakes.

Instead of:
Login failed

Try:
Login failed: please enter a valid email address

Cluttered layouts with information scattered across a page can be overwhelming and hard to follow.

It is best to use a logical, linear design. Separating sections with headings and white space will help to make the information easier to read.

Flashing content in videos and animations can provoke seizures in people who suffer from photosensitive epilepsy.

Use animations sparingly as they can be confusing for people with low vision, and always include captions with videos.

A lot of assistive technology depends on a keyboard to navigate a website. For a website to be considered accessible, users should be able to access and move between elements of a site without a mouse.

Ensure all links, buttons and pages of a website can be accessed with the Tab key. Websites should also be fully optimised for mobile and touchscreen devices, which can be achieved by following the Web Content Accessibility Guidelines.

Charts and graphs must be clearly labelled and should not solely rely on contrasting colours.

Use additional patterns or data labels to make it easier for readers to differentiate each piece of data.

People with low vision or colour blindness find it easier to differentiate segments of a chart or graph with contrasting tones and shades.

If graphs have legends and axis labels, make sure the text is large enough to read.

Select crisp, clear images with good resolution and ensure they accurately convey the message of the poster.

Check that photos have been cropped appropriately and that they tell the whole story.

When placing text over a picture, ensure the background offers sufficient contrast to make it legible. Avoid low-resolution, blurry images.