DONATE

Make your work accessible for all

Ensuring your work can be enjoyed by everyone, including people with disabilities or learning difficulties, should be an essential part of every project. Here’s how to do it.

April 2018
A variety of icons relating to accessibility on a yellow background

The aim of accessible, inclusive design is to make things easier for people, empathise with their needs and respect your audience.

The concept doesn’t just apply to people with permanent disabilities or learning difficulties. Everyone will have different needs at different times and in different circumstances. Someone could be affected by their health (they may be tired, recovering from a stroke or have a broken arm), their location (they could be in a noisy restaurant or an area with slow wifi) or their equipment (they may have forgotten their spectacles).

In Britain and the EU, it’s also the law: the UK Equality Act says people with disabilities should be able to access your work to the same standard as people without disabilities. This means making reasonable adjustments if needed.

Designing for accessibility doesn’t mean the aesthetic integrity of your work needs to suffer: many accessible elements are considered to be good design practice in the wider sense. Accessibility should never be optional, or an afterthought. It should be at the heart of the design process, every time.

Visual

Use large, clear fonts

Sans-serif fonts are often preferred for their legibility. Choose a font that has clear differences between each character (such as a capital i, a lower-case L and a number 1) to ensure they’re not confused. Avoid fonts with over-stylised characters and glyphs (keep an eye on ampersands and lower-case Gs).

A minimum point size of 12pt is recommended for print. Turning off ligatures also makes the font easier to read.

Avoid using too many typefaces

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

Check your text colour

Make sure your typography is visible to readers with low vision. Black on white is usually the first choice for maximum legibility. A cream or yellow background is often preferred by people with dyslexia, while people with very low vision may prefer to read yellow on black.

Use clearly contrasting colours

Avoid orange with red, for example: people with colour blindness may not be able to tell the difference between them. You can check the colour contrast of your work using a plugin such as Colour Contrast Analyser, which simulates different types of colour blindness, or view your work in greyscale. This is particularly important in graphs and tables.

Don’t rely on colour alone to convey a message

People with certain types of colour blindness may not be able to see a red error message, for example. If in doubt, use contrasting patterns and clear labels to differentiate your content.

 

And another thing...

Check your work: use these tools to see how your designs look to people with colour blindness, visual impairments and more.

Sim Daltonism
A simulator for Mac and iPhone that uses a coloured filter window to recreate different types of colour blindness.

Funkify
This Chrome extension helps you view web pages through the eyes of users with visual impairments, dyslexia, trembling hands, neurological conditions and more.

Colour Contrast Analyser
Recommended by the World Wide Web Consortium to simulate colour blindness and cataracts.

Text

Use clear, simple language

Unclear, flowery or confusing writing is a barrier to all readers, but can be particularly challenging for people with reading or processing difficulties. Keep paragraphs and sentences short, use familiar words and avoid jargon. Organise your writing into a logical order, then stick to the point. The aim isn’t to dumb down: it’s about saving people’s time and making sure they don’t have to re-read your writing to decipher what you mean.

Align text to the left

This makes it easier for people to see where each line begins. Avoid justifying text, as this creates uneven gaps between words, and try to keep lines to a maximum of 60 to 70 characters.

Use sentence case

Capitalising just the first letter of a sentence is much easier to read. Capitalisation can be problematic for people with dyslexia and visual impairments, particularly if whole words or sections are all in capitals. It can also prove tricky for screenreaders, which may interpret consecutive upper-case letters as acronyms (reading CONTACT US as ‘Contact U.S.’, for example).

Avoid multiple line breaks

Any extra spacing or paragraph breaks will be read out by screenreader as ‘space’ or ‘return’, which can be annoying for listeners.

Take care with symbols

Certain symbols won’t be recognised by every screenreader, so use ‘per cent’ instead of %, ‘and’ instead of ‘&’, and ‘number’ instead of ‘#’.

Avoid underlining and italics

These can be hard to read for people with visual impairments and dyslexia, as they can make words appear to run into each other.

And another thing…

Dyslexic readers often experience reversed characters, jumbled letters or distorted text jumping over the page, but specialist fonts can help to counteract this.

A study by graphics expert Dr Rob Hillier found people with dyslexia generally prefer fonts with light weights, long ascenders and descenders, perpendicular letters and uniform strokes. He then developed the Sylexiad typeface: each character is as distinct as possible to help readers distinguish between them.

Several fonts have followed this lead. Dyslexie has heavier lines at the base of each character to ‘anchor’ them to the line. OpenDyslexic is a free typeface that follows a similar style, while Lexie Readable aims to capture the clarity of Comic Sans without the negative design associations.

Digital

Structure your content in a logical, meaningful way

This enables people to adapt the content according to their needs and still understand it. Always use the appropriate HTML header tags for headings and subheads, and use the correct HTML for all structural elements – these will be picked up by screenreaders, for example. All pages should have clear, unique titles.

Provide text alternatives for non-text content

All images, graphs and tables should feature alt text – a simple text description of what the content depicts. This is read aloud by screenreading software, helping people with visual impairments to understand the content. You should also ensure the content can be changed into other forms people may need, such as large print, braille, symbols or simpler language.

Add captions and other alternatives for multimedia

Captions, text transcripts, audio description, sign language and audio-only formats all provide an alternative way to convey the information.

Use more than one sense to convey information

Don’t rely solely on shape, sound, position or size. For example, ‘Click the button on the right’ is no use to someone who cannot see. Instead, use clear copywriting to clarify all instructions. This will benefit everyone, not just people with disabilities.

Don’t rely solely on colour

Instructions such as ‘Click the green button’ may be meaningless to people with colour blindness, so back this up with some clarifying information. Also, watch out for graphics such as pie charts. Never rely on colour to differentiate the segments. Instead, add clear labels or patterns.

Make links easy to understand

All links should be clearly labelled with descriptive anchor text. People who use a screenreader can choose to hear all links on a page read out in a list, which isn’t much use if all links are labelled ‘Read more’ or ‘Click here’. Instead, try ‘Read more about our organisation’ or ‘Visit our blog’. Links that point to the same destination should have the same description.

Make it easy to hear content

Don’t use audio content that plays automatically: it may prevent screenreader users being able to navigate your site, as they do so by relying on sound.

Use a keyboard

All parts of your site should work using keyboard commands, including forms, menus and the shopping cart. Try unplugging your mouse to see if you can still navigate the site, for example by using the tab or arrow keys. Make sure this sequence is logical and meaningful.

Take care with moving content

Anything that moves, blinks or scrolls should have an option to pause, stop or hide it – ideally, you should remove these items completely. You should never add anything that flashes more than three times a second, as this could cause seizures.

And another thing…

Many of the design guidelines mentioned previously also apply to digital content. However, web accessibility has its own set of guidelines, known as the Web Content Accessibility Guidelines (WCAG). These international technical standards aim to provide a single shared set of guidelines for accessibility.

The guidelines are divided into different priority levels, with A being the most basic, ‘must-do’ level of accessibility, through to AA (‘should do’) and AAA ‘(can do’). The guidelines we’ve listed here are all level A. For more information, see www.w3.org

Learn why accessible design is so important to us

Perspectives
Hector Minto.

How Microsoft is championing inclusive technology

Microsoft’s Hector Minto shares groundbreaking accessibility features that aren’t just aimed at people with disabilities.

November 2017
Paralympian Georgie Bullen holds a yellow sign containing the words: 'Join us at www.sightsavers.org/campaign, #inthepicture'.

Paralympian Georgie Bullen shares her story

Georgie visited Sightsavers to discuss competing in London in 2012, and how the challenges of visual impairment inspired her to start her own business.

November 2017
Molly Watt.

“Assistive technology has changed my life”

Accessibility consultant Molly Watt, who has hearing and visual impairments, visited Sightsavers to explain how her iPhone helps her to live independently.

December 2017