Accessibility Tips to accompany our “Make Technology Work for Everyone” video
What’s on this page?
Our new “Make Technology Work for Everyone” animated video introduction to Digital Accessibility is available on YouTube and is embedded later in this page.
Because the video can’t cover everything, and technology and best practice are always evolving, this page accompanies the video. Here you can find:
- Information about Global Accessibility Day and the people behind the video
- A short description of the overall visual style of the animation, and
- The link to a full transcript that includes description of the visual content
- The link to a speech-only transcript of a script
- An expanded version of the script which provides links to navigate to additional explanation, references and links to organisations providing further guidance on each of the tips
- Video case studies that help to convey accessibility issues disabled people face
- Links to tools you can use to audit digital accessibility
- Acknowledgements: a list of people without whom the film wouldn’t have been possible.
Global Accessibility Awareness Day
Thursday May 21st 2015 is the 4th annual Global Accessibility Awareness Day.
To help promote the day and digital accessibility, Citizens Online collaborated with the Digital Accessibility Centre, DIG Inclusion, and members of our Fix the Web project‘s steering group to create a short animated video about digital accessibility, containing 15 tips to help people creating websites, apps, software and documents improve the accessibility of their technology.
Text description of the visual style of the Video
Hello Screen reader users! This text description of the Video will hopefully help you create an image of it before you listen to the soundtrack. The animated visuals depict and express what’s said in the soundtrack and complement the music. The video uses a distinctive style, with bright colours and sharp lines to create a modern and digital feel, softened up a little so it’s friendly and encouraging. There are four stylised characters sporting highly simplified features, their faces leave the viewer to imagine their eyes, ears and mouths, rather than depict them explicitly. One character has dark glasses and a white stick, one has a wheelchair, another is short and stocky, and one is tall and thin. Rather than attempt to show all possible impairments, we chose to symbolically represent the “differences” and use symbols when the different broad categories are mentioned. There’s also a space invader character to represent a spam-bot! There are captions to accompany the key messages and the tips are displayed in clear and large text. You can read these in the full transcript. Sometimes we hint at how to achieve a tip, for instance showing what adding headings or mark up in code looks like – see the transcript with descriptions of the visuals for more details. The overall animation is designed with high-contrast and with sequences that minimise difficulties for those affected by fast changing images.
Video: “Make Technology Work for Everyone! Introducing Digital Accessibility”
An embedded YouTube link to the video is displayed below.
Help us publicise the animation with a tweet:
“Make Technology Work for Everyone: introducing digital accessibility. Animated #a11y video from @fixtheweb: https://www.youtube.com/watch?v=8Ik_LHmZx8Y”
An expanded version of the script
This expanded version of the script provides additional explanation, references and links to organisations providing further guidance.
This version of the script is divided into:
- The film’s introduction to digital accessibility,
- 15 tips to help creators of websites, apps, software or documents make their technology more accessible
- The film’s conclusion
The film’s introduction to digital accessibility
“Digital technology has created amazing opportunities for communicating, sharing information, and banking and shopping.”
Digital technology includes a broader list of activities than the ones we highlighted in the script, of course. Gaming is a particular area of interest. Check out this resource list of articles on disabilities and gaming, for instance.
“But users of your digital technologies have different needs. Keep this variety in mind, otherwise millions of people will find it hard or impossible to use your content – people you want to reach.”
At least 11 million people in the UK – over 15% of population – are disabled in some way (according to government figures). When aging-related disability is included, this rises to 20% or more. Across Europe the number of people with disabilities is estimated at 80 million (according to figures from the European Disability Forum), globally over a billion (according to the World Health Organisation).
These disabilities significantly affect the level of online task success and satisfaction experienced by disabled people. In the UK, only 41% of disabled people use the Internet, compared to 75% of non-disabled people (figures from research cited in a speech by Former UK Disability Minister Maria Miller in October 2010 – link is to pdf). A detailed study of 100 blind web users (link is to a PDF) found they reported losing on average 30.4% of their time online due to web access issues. To get an idea of some of the issues, try the case studies in these videos from the Digital Accessibility Centre.
Some disabilities can be perceived by others visually. Some are relatively rare and some are relatively common. For instance, it is estimated that around 10% of the UK population is dyslexic. In addition, society is not divided into two clear groups – disabled and non-disabled people. Everyone is likely to journey from relative disability in childhood, through periods of greater ability and then in later life back to relative disability again, as for instance eyesight, memory or dexterity deteriorate. We are all, at the very least, not-yet-disabled, and it is the ‘standard web user’ – adult, fully-able-bodied, and literate which is really the minority group.
“Accessibility is important to at least 60% of your audience”
This figure comes from research for Microsoft conducted by Forrester Research – available as a downloadable Word document.
“Getting accessibility right means you’ll build something that is better for everyone, so it’s good for business!”
According to AbilityNet, disabled people in the UK have an estimated spending power of £120 billion; 73% are heads of households, while 48% are principal shoppers – according to research by the Business Disability Forum. An accessibility overhaul of insurance firm Legal & General’s web presence in 2005/6 resulted in a 50% increase in search engine traffic, £200k per annum savings in maintenance, and a 135% increase in completed product applications. Legal & General are now supported by Dig Inclusion to keep their content accessible. You can read more about the Legal & General case study on the Web Accessibility Initiative website.
“Digital accessibility is also a regulatory requirement”
In the UK, digital accessibility is covered by the Equality Act (2010) and the associated Code of Practice (2011). The Act creates a duty on both public and private service providers to make anticipatory adjustments to their services to ensure that people are not discriminated against. Coolfields Consulting provide an introduction to the application of the Equality Act to digital accessibility.
“There have been legal cases launched against websites that exclude users”
A recent summary of legal cases in the USA is available from Lainey Finegold. In brief, users
“may be colour blind, or have impaired use of arms or hands, cognitive differences, or visual or hearing impairments.”
Coolfields Consulting provide a summary of types of disability and their impact on use of digital technology
“It’s best to think about accessibility from the start of a project.”
15 tips to help creators of websites, apps, software or documents make their technology more accessible
- Make accessibility part of the contract when commissioning apps, software or websites
- Use themes and plugins deemed ‘accessible’ when using Content Management Sites
- Allow users to customise their experience of pages, and use responsive layouts
- Always let users know where they are and how they get to somewhere else
- Make sure that every action can be completed using the keyboard alone
- Give the user control over moving content
- Provide captions and transcripts for audio and visual content
- Add ‘Alternative Text’ to images
- Make your text easy to understand
- Organise your text and add ‘mark up’ to make structure and features perceivable
- Make links stand out clearly from surrounding text
- Test text and background colour combinations
- Let visitors extend their sessions
- Provide an accessibility statement
- Use alternatives to CAPTCHA
Make accessibility part of the contract when commissioning apps, software or websites
“refer to the Web Content Accessibility Guidelines version 2 (WCAG 2.0) and British Standard 8878”
You can find an overview of WCAG 2.0 online, and British Standard 8878 is available to purchase in hard copy. WCAG 2.0 is the International ISO standard (ISO /IEC 40500), and the full text is freely available online. Other national jurisdictions have their own additional standards, such section 508 in the USA and the Canadian Standard on Web Accessibility. The Web Accessibility Initiative provides a reference page on “How to Meet WCAG 2.0”, and Jonathan Hassell provides an introduction to the benefits of BS 8878, summaries, and information on how to access and incorporate it.
“Ideally, include disabled users in your testing”
Testing is important because complying with standards does not ensure users of your digital technology will have an enjoyable experience. The Web Accessibility Initiative has a guide to accessibility testing, and there are lots of organisations that offer full testing for a fee, including Dig Inclusion and the Digital Accessibility Centre. Testing with disabled users is recommended, but you can get a rough idea of basic issues on websites by exploring online accessibility evaluation tools, listed by the Web Accessibility Initiative.
“If you are using an online platform to create your website, use ‘accessible’ themes and plugins.”
Websites where you add text and other content into a structure provided by a third party are called ‘content management systems’ (CMS). The most popular CMS, WordPress, provides a list of 10 accessibility-ready themes, and allows tagging of plugins that have been rated as accessible. Using these themes alone does not mean your website will be accessible, only that the structure will not prevent it being so. You will also need to…
“keep the following [tips] in mind:”
“Design pages so that users may customise their experience of them, changing colours, the size of text, or buttons”
Rather than fixed or pixel based sizes, use percentages or ‘em’ sizes.
“Use responsive layouts that will work on different devices”
Devices include desktop or laptop computers, tablets, mobile smartphones, and televisions.
Magus Digital provide a useful document explaining layout accessibility, which includes the following: “The content of a document should follow a logical sequence from beginning to middle to end in a linear fashion. This is sometimes referred to as content being ‘linearized’, simply meaning that each item of content follows another in an ordered sequence. Content constructed like this behaves like a liquid and ‘flows’ into whatever it is put into, taking on its shape, just like water in a glass. So, the end-user’s screen size, or the capabilities of their device, or the media channel they are using and many other obstacles to access become irrelevant”
“Always let users know where they are and how they get to somewhere else. Create alternative routes to suit different requirements, like a ‘skip to main content’ link.”
A ‘Skip to main content’ link creates a mechanism to bypass blocks of material that are repeated on multiple Web pages – such as menu navigation – by skipping directly to the main content of the Web page. So, the first interactive item in each Web page should be a link to the beginning of the main content. The Web Accessibility Initiative provide instructions on skip links.
“Make sure that every action that can be performed using a mouse can be achieved using the keyboard alone. Keyboard only users need to see where they are at all times when they navigate using the TAB key, and tabbing should follow a logical order. Test how easy it is to navigate using only the TAB, ENTER, SPACE and ARROW keys.”
Navigating without a mouse is a really simple way to begin accessibility testing of your own digital technology. Once you’ve tried this, check out WebAIM’s page on potential problems and best practice for keyboard navigation.
“Do you ever get frustrated by moving objects, adverts popping up…? It isn’t just annoying – flashing content can cause seizures, while some people with cognitive impairments find it really hard to concentrate if there are distractions. Give the user control [over any moving objects] – Provide a pause button, and don’t set audio or video to play automatically”
If you’re using a screen-reader, it’s really confusing to hear auto-playing audio over information about navigating the website structure. Rather than trying to figure out how to turn an element set to auto-play over the noise, users are more likely to just leave your site.
“Choose a video player that allows you to add captions”
Media Access Australia provide a guide to captioning by uploading transcripts to YouTube, editing their automated captions, or using the captioning service Amara. These are the links to information of captioning with Vimeo and adding captions to Facebook videos.
“Provide a text transcript, to make audio and video content accessible. Include descriptions of any important visual information as well as speech”
UI Access provide further information on best practice for transcripts.
“If an image is important, contains text or is a link, explain this with ‘alternative text’ that screen reader software can read out to users with visual impairments.”
Web Accessibility In Mind (WebAIM) provide a useful introduction to Alternative Text, and the important of context to ensuring the alternative provided is most useful.
“Is your text in easy to understand language? Use short, simple sentences to aid readability and engage a wider audience.”
It isn’t just people with disabilities who will benefit from easier to understand language. Those for whom the language you are writing in is a second language and younger people will find simpler language easier to read as well. WebAIM have a guide on writing clearly and simply.
“Give each page a title [link is to a W3C guide], and organise the text using headings, paragraphs and lists [link is to a W3C guide]. Add ‘mark up’ to enable easier navigation [link is to a W3C guide] and explain features to people who can’t see them – this applies to documents in Word or PDFs as well as webpages”
In other words, as Magus Digital put it:
- “Structure the document well, so that its organisation reflects its content:
- This means the hierarchical use of headings
- The proper use of paragraphs
- The correct use of different types of list
- Nesting these together in a way that relates items of connected content
- All of this could be described as making sure the document has a logical flow”
Other basic rules (also from Magus Digital) include:
- “Always make it clear what is happening, particularly in interactive or transactional systems, or what the content is about
- Say what something does when that is important, not what it is, or looks like (for example “return to home page” versus “company logo”)
- Add hidden navigation and explanations to help users of assistive technology—very easily done with a style-sheet”
Dig Inclusion’s case study on ebook and PDF accessibility at BT is useful, and Magus Digital provide introductory guides to Digital Accessibility that include further insights into making content accessible in well-designed webpages, as well as ePUB3 eBooks, and Word and PDF documents.
“Make sure that links stand out clearly from surrounding text and let users know if the link will open in a new window or download a document.”
Describing the destination of links assists users in making navigation decisions. For example, people with limited data download on mobile devices may be frustrated by unmarked links to large PDFs that will be very difficult to read on their device. Further information on describing links is provided by WebAIM.
“Links need to be concise and descriptive so that if they are read on their own, people will still know where they go.”
A video with Jamie from the Digital Accessibility Centre provides a demonstration of how screen-reader software works. When people like Jamie are using a website, they get screen-reader software such as JAWS to read them a list of all the links on the page. If each link says ‘Read more’ or ‘click here’, or is left as a long ‘URL’ (a full web address), it’s impossible to tell where they’re going to go.
“Test text and background colour combinations and contrast online to ensure text can be easily read by people who are colour-blind or have impaired vision.”
There are a number of freely available tools to test colour combinations, such as the online Colour Contrast Checker from WebAIM, and the downloadable Colour Contrast Analyser from the Paciello Group.
“If your webpage ‘times out’ before people are able to complete forms, this can be a very frustrating experience. Give visitors time to extend their session if they wish”
“Explain accessibility improvements you’ve made and why, in an accessibility statement.”
Nomensa provide an explanation of why and how to write an accessibility statement.
“Provide easy ways for people to contact you if they are having difficulty.”
“Spam protection like CAPTCHA may shut out potential customers not just spam robots. Please use alternatives – such as text-based logic problems, or simple human user confirmation.”
If filling in a spam-protection Captcha form relies on visual clues, it isn’t just robots that won’t be able to see them. The same applies to audio alternatives – people won’t necessarily be able to hear these.
The film’s conclusion
“Let’s make sure digital technologies are as usable and inclusive as possible – we will all benefit!
This video can’t cover everything, and technology and best practice are always evolving. For more help and information go to citizensonline.org.uk/accessibilitytips [you’re here!]
The “Make Technology Work for Everyone: introducing digital accessibility” video was inspired by a talks by Gill Whitney (from Middlesex University) and Graham Armfield of Coolfields Consulting at the e-access15 conference. It would not have been possible without generous financial support and extensive advice from our friends Laura Player and Grant Broome at Dig Inclusion, and Gavin Evans, Cam Nicoll, and Dan Jolley at the Digital Accessibility Centre. We are of course indebted to the excellent work, and patience, of film-makers Tom Sanders and Michael Julings at Tinmouse Animation. Ben Jarlett recorded the narration, spoken by James Beecher at Fix the Web. Jonathan Stephenson of Magus Digital provided extensive guidance on the script and this webpage. EA Draffan (at Southampton University) and Steve Lee at Open Directive provided suggestions and some much needed encouragement! Hugh Huddy at RNIB, Leonie Watson, and Anthony Hodgetts provided crucial support.