How we make our work inclusive

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.

Return to Sightsavers’ main brand book page

Use large, clear fonts

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.

Avoid using too many typefaces

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.

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 so they’re easier to read.

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.

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).

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 ‘#’. The exception is currencies (£, $, €), which always use a symbol.

Avoid underlining and italics

These can be hard to read, as they can make words appear to run into each other.

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 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.

Use text styles

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.

Make sure all elements are tagged

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.

Add alt text

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.

Microsoft Word templates

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.

Microsoft PowerPoint templates

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.

Video captions

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.

Text transcripts

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.

Voiceover

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

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.

Signed versions

Sightsavers does not routinely produce signed versions of its videos, although these can be created on request, dependent on budget.

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.

• Create an accessible transcript of your PowerPoint slides in both digital (PDF) and printed formats. You can share this in advance or afterwards. Have printed copies on hand to give out on request.
• Check the venue to see if a hearing loop system is available, which can broadcast an amplified signal directly to a user’s hearing aid. Test it prior to the event to make sure it’s working.
• Think about having a sign language interpreter attending who can sign speeches, together with a palantypist (who converts speech to text) for attendees who have hearing impairments.

Creating slides

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.

• Do use the predefined text styles and sizes within the PowerPoint template. All text should be in Arial font, at least  18pt in size, and should usually be black on a white background.
• Don’t use italic or underlined text. Most of the text on your slide should be in standard, regular typeface. Use bold for titles and for emphasis if needed.
• Do keep content to a minimum. Your slides should contain top-line information and bullet points, which you can then explain in more detail as you speak.
• Don’t overload your slides with too much text: your audience will have trouble reading it while also listening to you speak. Also, if you put all your information on the slides and simply read it out, the audience will soon lose interest.

Images, graphs and videos

• Do keep charts and graphs as simple as possible, using contrasting colours so different data sets are easy to distinguish.
• Don’t use tiny fonts for graph labels. As with the rest of the text, they should be at least 18pt so they can be read from a distance.
• Do make sure images are good quality, high resolution and large enough to be seen from the back of the room.
• Don’t take images from Google or another source without checking the copyright.
• Do make sure any videos are fully captioned and have a voiceover if needed (see pages 72-73). Alternatively, have a text transcript available on request.
• Don’t include too many animations or videos: they may be confusing for people with visual or hearing impairments.

Speaking guidelines

• Do speak at a normal pace, clearly and without rushing. Use a microphone if one is provided, even if you have a loud voice.
• Don’t cover your face and mouth, or turn away from the audience while speaking. This can make it difficult for lipreaders to follow what you’re saying.
• Do briefly describe out loud what’s on each slide (remember that some people may not be able to read the text).
• Don’t forget about tables and graphs. Clearly describe what they’re showing, and avoid vague references such as ‘as you can see’ without explaining what you’re referring to.
• Do give people time to digest the information by pausing between topics and asking if anyone has questions.
• Don’t stand in front of the projector or obscure your slides, if you’re planning to move around during the presentation.

If you’re planning a larger-scale event and would like more information or support, contact the events team: [email protected].

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 writing 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.