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.
It is crucial that public health and COVID-19 information is available and able to be understood by everyone, including people with disabilities. Our guide will help you make sure your communications are as inclusive as possible.
Visit the website of the International Disability Alliance to learn more about the campaign to ensure public health information around the world is accessible to everyone, or read the statement from our CEO to find out how we are responding to the pandemic.
Avoid orange with red, for example: people with some types of colour blindness may not be able to tell the difference between them, and they will be hard to differentiate in low light. You can check the colour contrast of your work using a plugin (see the box), or view your work in greyscale. This is particularly important in graphs and tables.
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.
Choose the colour of text carefully to ensure there is sufficient contrast between the text and the background, ensuring it is legible and easy to read. Black on white is usually the first choice for maximum legibility.
You can use the following tools to see how your designs look to people with colour blindness, visual impairments and more.
A simulator for Mac and iPhone that uses a coloured filter window to recreate different types of colour blindness.
Colour Contrast Analyser
Recommended by the World Wide Web Consortium to simulate colour blindness and cataracts.
All text for all publications must be at least 12pt in size. If this is not possible, an accessible PDF must be created and made available to download from our website, and the publication must contain details of how users can access the PDF.
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. This is bad for everyone, particularly people with reading difficulties such as dyslexia. Stick to Lato (Sightsavers’ brand font), or use Arial in Microsoft documents.
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 so they’re easier to read.
Any extra spacing or paragraph breaks will be read out by screenreader as ‘space’ or ‘return’, which can be annoying for listeners.
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).
Certain symbols won’t be recognised by every screenreader, so use ‘per cent’ instead of %, ‘and’ instead of ‘&’, and ‘number’ instead of ‘#’. The exception is currencies (£, $, €), which always use a symbol.
These can be hard to read, as they can make words appear to run into each other.
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 over-simplify the content: it’s about saving people’s time and making sure they don’t have to re-read your writing to decipher what you mean.
For more information about writing style and brand voice, see ‘How we speak’. For guidelines on how we write specific words and phrases, refer to Sightsavers’ writing style guide.
Sightsavers uses Lato as its brand font. Sans-serif fonts such as this are often preferred for their legibility. It 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, and avoids over-stylised characters and glyphs.
See the 'How we look' section for more about our brand font.
When designing layouts, always use style sheets or paragraph styles for headlines, standfirsts, body text and captions. This helps with legibility and will also tag the headings (see below), enabling screenreaders to navigate from headline to headline, instead of reading the whole document word by word.
Tagging will tell a screenreader what kind of element it’s looking at – a headline, text, a picture, or something that doesn’t need to be read at all. All styles can be linked to a certain tag, so the only manual step is to define ‘figures’ (pictures) and ‘artifacts’ (elements that don’t need to be read out). For example, it’s good practice to remove page numbers from tags so they’re not picked up by screenreaders.
Use alt text on all logos, photographs, graphs and illustrations: this ensures a description of the content can be read by screenreaders. For more information, see the Alt Text entry in the Sightsavers style guide.
Sightsavers’ Word templates are set up to be accessible for screenreaders. Make sure you use the preset heading styles to create a logical structure, and ensure all images have alt text. For information, see the ‘Brand in action’ section.
Sightsavers’ PowerPoint templates are designed to be as easy to read as possible, with large fonts, contrasting colours and clear images. For information about the templates, see the ‘Brand in action’ section. For tips to make your presentation accessible, see the Presentations section.
There are a variety of commonly used screenreader programmes such as JAWS, NVDA and Read&Write Gold, and built-in screenreaders such as Microsoft Narrator and Apple Voiceover. Software is regularly updated so it's important to check your work remains compatible with how these function.
All Sightsavers videos should contain captions throughout. These are text versions of the audio synchronised with the video, and should describe spoken words and all important sounds (unlike subtitles, which only display spoken words).
Captions are invaluable for people with hearing impairments, those who find it easier to process information visually, and viewers who prefer to watch with the volume muted. They also provide clarity when interviewees are speaking with an accent that may otherwise be difficult to understand.
If captions cannot be added to a video for any reason, a text transcript of the video must be produced in PDF format using the Sightsavers Word template.
The transcript should contain descriptions of the spoken words, actions and information on the screen, and must be made available alongside the video. This could be as a download on the Sightsavers website, or as a link in the YouTube description, for example.
Any video that contains on-screen text or graphics should also include a voiceover to ensure it is accessible for people who may not be able to read the text. If you’ve produced a video and would like a voiceover to be added, this can often be done in-house: submit a Service Desk ticket for ‘Communications, Design and Events’.
Audio description, also referred to as a video description or described video, is a form of narration used to provide information about key visual elements in a video for the benefit of people with visual impairments. Sightsavers does not routinely produce audio-described versions of its videos, although these can be created on request, dependent on budget.
Sightsavers does not routinely produce signed versions of its videos, although these can be created on request, dependent on budget.
For more information about caption style, font sizes, positioning and timing, see the 'How we look' section.
When giving a presentation, ask attendees in advance if they have any accessibility requirements. This will enable you to prepare in advance and cater for their needs.
Sightsavers’ PowerPoint templates are designed to be as easy to read as possible, with large fonts, contrasting colours and clear images. Your slides should follow Sightsavers’ main guidelines for type, text and layout, including colour contrast, alignment etc.
If you’re planning a larger-scale event and would like more information or support, contact the events team: [email protected].
If you don’t have a live typist available and you’re using Office 365, consider using PowerPoint’s automatic captions function, which creates live text captions of your voice as you speak (note that you’ll need to use a microphone connected to your laptop).
In PowerPoint’s Slide Show tab, select ‘Subtitle settings’. Alternatively, toggle the subtitles on or off while presenting by right-clicking, or by pressing the shortcut key J.
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.
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.
Captions, text transcripts, audio description, sign language and audio-only formats all provide an alternative way to convey the 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 writing to clarify all instructions. This will benefit everyone, not just people with disabilities.
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.
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.
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.
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.
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.
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