This page provides a full text transcript for the Fix the Web project’s “Make Technology Work for Everyone: introducing digital accessibility” animated video. A speech-only transcript is also available. You can also find more information about the video and an expanded script with references and more elsewhere on our website.
The below transcript is divided into:
- An introduction to Digital Accessibility and why it is important
- 15 tips to help people creating websites, apps, software and documents improve accessibility
- The conclusion to the film
An introduction to Digital Accessibility and why it is important
The text “An introduction to Digital Accessibility” is shown as a title slide as a cheerful soundtrack with a guitar strumming and synthesized xylophone-style sounds begins. The music continues throughout the video.
Beneath the title, symbols representing cognitive difficulties, visual impairments, a smartphone, hearing impairments, a pop-up advert, and an inaccessible CAPTCHA are shown
The script is read by James Beecher from the Fix the Web project.
- Digital technology has created amazing opportunities for communicating, sharing information, and banking and shopping.
- Two stylised people at either side of the screen stand facing each other at a distance. Satellite dishes located behind the people send out beams between them. Symbols appear to represent communication, sharing, and commerce.
- But users of your digital technologies have different needs.
- The satellite dishes fade away and two new characters appear. There are now four 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. A circle, triangle, rounded oblong and square appear behind these characters, as a way to represent variety.
- Keep this variety in mind, otherwise millions of people will find it hard or impossible to use your content – people you want to reach.
- A computer screen inside an 8-sided ‘no entry’-style sign appears in the centre of the screen, and even more stylised ‘people’ that look more like bottles in different colours bounce from the left and right towards the computer screen, only to be knocked over by the stop sign
- Accessibility is important to at least 60% of your audience and getting it right means you’ll build something that is better for everyone, so it’s good for business!
- The stop sign fades away, but the computer screen remains. The word ‘Accessibility’ appears as two blocks appear on the left and right of the screen that look like stands at a stadium. These are full of the bottles that represent people, and streamers appear to be set off by the crowds. A line that is reminiscent of a representation of performance on a line-graph appears on the computer screen and rises slowly, and then very quickly and out through the top of the screen.
- Digital accessibility is also a regulatory requirement.
- Representations of an official document and a judge’s gavel appear.
- There have been legal cases launched against websites that exclude users, who may be colour blind, or have impaired use of arms or hands, cognitive differences, or visual or hearing impairments.
- Symbols appear to represent these different disabilities.
- It’s best to think about accessibility from the start of a project. Here are some tips:
15 tips to help people creating websites, apps, software and documents improve accessibility
- A ‘To do’ list on lined paper is show, together with a pencil, pencil sharpener and the word “Tips” on a post-it note
If you are commissioning an app, software or website, make accessibility part of the contract – refer to the Web Content Accessibility Guidelines v. 2 (WCAG 2.0) and British Standard 8878.
- A smartphone, computer screen and CD with a box are shown. The titles of the standards appear on the computer screen in large text.
- Ideally, include disabled users in your testing.
- A person is shown prodding at digital devices as they pass him on a conveyer belt as if in a quality control test
If you are using an online platform to create your website, use ‘accessible’ themes and plugins, and keep the following in mind:
- A set of stylised ‘themes’ made up of different shapes are shown, and a cursor hovers over them. They turn red (for inaccessible) and the final one turns green and the word “accessible” appears.
Design pages so that users may customise their experience of them, changing colours, the size of text, or buttons. Use responsive layouts that will work on different devices
- Different devices are shown. The animation focuses in on a tablet, and shows a hand dragging a square box containing the text “100%” to make it larger. As it increases in size, the number rises to “200%”
Always let users know where they are and how they get to somewhere else.
- A stylised “You are here” sign appears at the bottom of a page. This turns into an arrow which points upwards. The animation scrolls to the top of the page.
- Create alternative routes to suit different requirements, like a ‘skip to main content’ link.
- A “skip to main content” button is depicted at the top of a page, above a stylised set of menu options. An arrow appears beside this, and the animation scrolls to the main content of the page, which changes colour.
Make sure that every action that can be performed using a mouse can be achieved using the keyboard alone.
- The screen splits to show the screen of the tablet and a keyboard. A cursor selects a button on the screen and clicks it. A hand is then shown tapping the “Enter” button to activate the same button (which pulses).
- 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.
- Maintaining the split screen, the display on the tablet moves upward to the menu options shown earlier. The Keyboard is shown tabbing through the different options, which are selected by a box moving between them.
- Test how easy it is to navigate using only the TAB, ENTER, SPACE and ARROW keys.
- The animation focuses on the keyboard, and each of these keys is highlighted, with text displayed on each.
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.
- Pop-up boxes with lots of shapes and colours slowly appear, and move around. 3 contain the text “frustrating” “annoying” and “distractions” written in large text.
- Give the user control – provide a pause button, and don’t set audio or video to play automatically.
- A Play/Pause button is displayed in a new box, alongside a box containing a still from a video, which is visually shown to be stopped. When a finger presses the play button, the video starts playing
Choose a video player that allows you to add captions, and provide a text transcript, to make audio and video content accessible. Include descriptions of any important visual information as well as speech.
- A stylised version of a Media player is shown and the words “Captions and text transcripts allow users to read what is happening if they cannot hear or understand the video.” Appear in a box representing the system of adding captions.
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.
- A stylised image of a bird and a call appears on a screen. Next to it, lines of text appear to be written. This text then moves ‘behind’ the image, and is shown to exist behind the image via ‘cut-away’. As this is shown, speakers appear, and beam out symbols representing sound.
Is your text in easy to understand language?
- The text “Is your text suitably comprehensible?” is displayed. The words “suitably comprehensible” are crossed out and replaced with “easy to understand”
- Use short, simple sentences to aid readability and engage a wider audience.
- The crowds in a stadium that appeared earlier reappear beneath the words “Is your text easy to understand?”
Give each page a title, and organise the text using headings, paragraphs and lists. Add ‘mark up’ to enable easier navigation and explain features to people who can’t see them – this applies to documents in Word or PDFs as well as webpages.
- A screen is shown in which a basic recipe for soup is shown. A cursor selects text and assigns it a ‘heading 2’ status’. HTML code then appears. The example depicts ordered and unordered lists, emphasis and strong tags, and a heading.
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. Links need to be concise and descriptive so that if they are read on their own, people will still know where they go.
- Example text with hyperlinks is shown, based on text about the film. First, links are underlined and changed to red to contrast with the black text. But the four links say “(learn more)” “(website)” “(website)” and “(read more)”. These links are crossed out and the text preceding them is underlined and becomes red – showing links to “Global Accessibility Awareness Day”, “Citizens Online”, “Dig Inclusion”, and “the Digital Accessibility Centre”.
The text fades away leaving only a link to “Accessibility” – a cursor clicks this link
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.
- A stylised version of a colour contrast checker is shown, and a red cross turns to a green tick as one colour is changed relative to another.
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.
- A person with a tablet is shown looking frustrated while a stopwatch ticks. The words “Let users extend their session” appear like a button, and when this is selected the stopwatch restarts.
Explain accessibility improvements you’ve made and why, in an accessibility statement.
- A cursor is shown selecting a ‘tab’ in a stylised browser window and the text “Accessibility Statement” appears
Provide easy ways for people to contact you if they are having difficulty.
The words “form”, “email” and “call” are shown with stylised versions of a form, keyboard and smartphone.
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 confirmations.
- The animation focuses on the form, scrolls down and displays a CAPTCHA in a box at the end. The captcha relies on the user interpreting a picture of distorted words. A ‘space invader’ spam-robot and person appear and both bounce off the captcha box. The captcha changes to present the question “What colour is grass?” and the person looks pleased, the answer “Green” appears and the person celebrates by waving their arms in the air. Meanwhile, the spam-robot looks unhappy and then disappears.
The conclusion to the film
- Let’s make sure digital technologies are as usable and inclusive as possible – we will all benefit!
- The captcha is replaced by a wide ‘pathway’ which takes the person to a new screen with the other three characters and the different digital devices. The ‘pathway’ then moves on like a piece of string, and circles one of the stadium stands with a crowd in it – and streamers appear again.
- 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
- The text “citizensonline.org.uk/accessibilitytips” is displayed in large text.
- Thanks to the Digital Accessibility Centre, DIG Inclusion, and the Fix the Web Steering group for this animation, made by Tinmouse.
- The logos of the different organisations appear below the words “Thank you”. The music slowly draws to a conclusion.