Accessibility Notebook
In the process of building Auditorial, we learnt a lot about the things we could all be doing to make the web a more inclusive place for people with visual disabilities.
We created this notebook to share the learnings from our collaborations with the blind and low vision community, to help other creative storytellers do the same.
Understanding the Blind and Low Vision Community
People experience our world in different ways
There are many different forms of sight loss that may affect the way someone experiences the world, and in turn, your website.
Readers with significantly reduced vision may be using one of a number of assistive technologies to navigate your web page, from screen readers to braille readers to screen magnifiers and beyond.
These technologies fundamentally change the way someone explores the internet, relying on a step-by-step, linear navigation, rather than the free-flowing nature of a computer mouse. Non-visual users may not be able to quickly scan a layout to get a sense of what’s on the page. Instead they have to meticulously navigate through every object.
Navigating web pages that weren’t designed with assistive technologies in mind, like this example was, can be an especially laborious and frustrating experience.
The question is, how do you solve for one user, without disrupting things for another?
The answer, it seems, lies in offering people options for how they would like to interact with your story, based on their own personal sensory needs and preferences.
General Advice
Offer multiple formats
Inclusive design is about never assuming ‘one size fits all’, and never relying on one medium alone to deliver information.
When you abide by this core logic, you remain free to design in adventurous, creative ways, as long as you provide accessible alternatives for those who need them. At the very least, one audio and one visual format.
Accessibility is everyone’s job
Every creative person should consider how their work will be experienced by those with sensory needs different to their own. Whether you are a writer, designer, audio producer, filmmaker or something else entirely, set yourself the challenge of closing your eyes, or using a screen reader while reviewing your work. Does it still tell the story you intended?
Tips for Writers
Record an audio version
Something as simple as recording your article being read aloud, can significantly enhance the humanity of the storytelling for screen reader users. Screen reader technology relies on synthetic speech which will mispronounce words, mess up the cadence of your writing, and flatten the emotion of a sensitive piece of storytelling. A human narrator can deliver the story the way the writer intended.
Enrich your storytelling sonically
Adding rich audio, such as interview clips, voice memos, ambient sounds or music, is a great way to bring all users deeper into the context and emotion of a story.
“Traditional print pieces use quotes sparingly - often with little hint of who the people behind them are. But when a story is presented via audio, it livens it up to transition more often between narrator and clips of the characters. And creates a more immersive experience that allows us to transport listeners to faraway places and allow characters to tell their story in their own words” - Collaborator from The Guardian
But be mindful. If opting for a full cinematic soundscape, ensure that you also offer a stripped back narrator only version, for blind users with sensitive hearing.
Don’t rely on the visual
“Bear in mind that similar sounds can be confused if context isn’t set clearly; a kettle boiling and heavy rainfall. An avalanche and traffic.” - Collaborator from The RNIB
Few films explain themselves well if you can’t see them.
Try to make sure your story doesn’t rely on being seen, by either producing the audio in a way that explains itself entirely, or layering in an audio description option.
For Auditorial, we wrote all visual descriptions right into the heart of the narrative, with subtlety, and found it made the story clearer for all, not just blind readers.
Make introductions
“Interview subjects in documentary films are rarely introduced audibly — so you often have no idea who is talking.” - Collaborator who is blind.
When interviewing subjects, remember either the narrator, presenter or interviewee will need to introduce the characters audibly for blind users, as graphic labelling is inaccessible for those with sight loss.
Write narrative alt tags
Alt Tags are the labels written to describe images for assistive technologies.
Common accessibility advice is to treat them as succinct labels.
But in a storytelling setting, objective labelling of inline imagery simply obstructs the flow of the story.
“Try writing your alt tags into the flow of your article at the exact moment you wish to introduce an image. This will help you to write visual descriptions that genuinely move the story forwards.” - Collaborator from Google.
Consider binaural
Binaural sound can enhance the excitement of the storytelling for audiences reliant on audio.
Consider creating an opportunity within your story for a 360 degree aural space; a busy city street / a rainforest etc. and position objects from the storytelling below them on the floor, above them in the tree canopies, or moving around them as the story unfolds.
Use binaural sparingly to accentuate key moments, as making these sections too long can make people dizzy.
Watch out for ableist language
A few pitfalls to be mindful of, when it comes to writing for low vision audiences.
- Don’t assume your reader has a visual knowledge base. Eg - ‘Picture a Cadillac cruising down Highway 47.‘
- Avoid instructional language like ‘see’, ‘look’ or ‘watch’ where not all users will be able to.
- Avoid terminology that assumes disability is a negative experience, to avoid stigmatising.
- Be mindful of not falling back on ableist idioms like ‘Falling on deaf ears’ or ‘Turn a blind eye’.
- If describing people with disabilities, define them as people, not through their disability. Even simple shifts from ‘the blind’ to ‘people who are blind’ show more respect.
- When telling stories about individuals, work with them to make sure you’re portraying their truth, their way.
Add an introduction for screen readers
Some pre-experience introductory text for screen reader users can help to give people who can’t get a quick visual overview of your site, a better sense of what to expect from a webpage.
Translate foreign language segments
Don’t rely on being able to subtitle. Consider users who will only be able to experience the story through their ears, and either dub the interview, or use narrative explanation.
Include context in hyperlinks
Navigation can be laborious for people using assistive technologies, so be sure to give people a clear understanding of what to expect if they commit to clicking a link.
Tips for Designers
Offer alternative colourways
Enabling users to change the colour of the experience, makes it more comfortable on the eye for those with light or colour sensitivities.
Black and white, yellow and black, and blue and white are popular go-to combinations. But even introducing one simple dark-mode is a game changer for people who struggle with bright screens.
Provide text-based alternatives
Image-heavy experiences will exclude those who struggle with imagery that is too complex, dark, bright, out of focus, abstract, or doesn’t have clear contrast and focal points.
Whatever medium you’re producing your story in, try to include at least one written version, whether an article, transcript, or via closed captions.
Avoid colour confusion
People who experience color blindness will struggle to differentiate between ‘problem colours’. For example, red and green, or blue and yellow.
Ensure you aren't relying on colour alone to convey key information, such as completed/incomplete states within your UI.
Add contrast controls
Being able to affect the contrast levels of imagery can help people who experience low vision, to gain a clearer view.
Be mindful that every image is unique, so there won’t be a ‘one size fits all’ filter that works across every image. As such, keeping controls easy to access throughout an experience can be helpful.
Don’t be afraid to go large
Some users have to zoom into web pages up to 500%+ on a regular basis to check out small details, often to the point where page designs break and become virtually unusable. This means they are forever zooming in to see details, and then back out to continue navigating.
Bear in mind these top tips :
- Simpler layouts break less easily at high zoom.
- If including small details, giving the user the ability to magnify saves hassle.
- Grouping key UI together, means even if users zoom all the way in, they aren’t scrubbing around in negative space looking for controls.
Make the most of focus states
Focus states are the boxes that appear around each object as a screen reader tabs through a webpage ─ they are important for helping screenreader users with low vision to know where they are on a page.
They need to be clearly visible. But also present an opportunity for creativity. There’s no reason you can’t design them in ways that compliment your design.
Don’t be afraid to have fun.
Add a speed control
Being able to affect the speed of the storytelling can help to make it more comfortable.
Blind users that navigate via screen reader, often set their readers to high speeds to improve efficiency. This means that natural speech, while more palatable than synthetic speech, can feel slow by comparison.
On the flipside, users who are newly blind and may still be learning to train their attention in a new way, via their hearing, can find the option to slow the speed down helpful.
Offer reduced motion
The holy grail of web design for visual designers is often thought to be whizzy websites with acrobatic transitions. But fast paced transitions and flashing content can cause issues for users with motion sensitivity, epilepsy, or degenerative eye conditions.
Plan a static version of your website, alongside the more adventurous experience, so that users who require reduced motion also have a quality experience.
Add sonic feedback
Simple sonic feedback, such as button noises, button voicing or haptic feedback helps blind users to know they’ve made a selection correctly.
“Anything that lets you know you’ve hit the button okay is like - BOOM - you’ve got it”. — a collaborator who is blind.
A simple toggle that enables users to turn button sounds on and off, means they’re there for those who need them, but uninvasive for those who don’t.
Create clear focal points
Create clear focus areas within your designs, and select images with clear focal points. This makes it easier for people with reduced vision to know where to look, and take in details.
Select a high legibility font
Sans serif fonts are generally easier to read for people with low vision; Arial, Helvetica, Calibri, Century Gothic, Tahoma and Verdana are all recommended by the RNIB. But even sans serif fonts aren’t perfect - many have letters with similar forms that get confused by those who can only see part of the word, or have blurred vision.
For Auditorial, we used high legibility fonts with distinct letterforms; ‘Inter’ for platform UI and ‘Guardian Text Sans’ for editorial.
Where possible, avoid block capitals, italics, underlining or breaking lines with hyphens, as these can all interrupt reading flow.
Further Training
If you want to dive deeper and learn more about designing inclusively for a range of disabilities, check out these resources :
Designer’s resources
Developer’s resources
Useful Tools
Check for inclusivity as you work, with these trusty tools :
Chromevox / Google Chrome Browser Screen Reader (Find under Edit > Speech > Start speaking) - Free screen readers that will enable you to check what your web design is like for screen reader users.Tota11y - An accessibility visualisation toolkit from the Khan Academy, which inserts a small button in the bottom corner of any webpage. The button unpacks a drawer of “annotations” pointing out exactly where accessibility could be improved.Who Can Use - An online test that enables you to check two colours against each other for contrast levels ─ to ensure they will be easy to see when used in conjunction.Stark - A free plugin for XD, Sketch or Figma, which includes a contrast checker and a colour blindness simulation.