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.

Looking at bright screens gives me headaches. By the end of the day I feel exhausted.

— Collaborator with photophobia (light sensitivity)

Sometimes I have to zoom in so far that the page design just breaks. You end up swimming in white space, scrubbing back and forth to find things, and losing your place.

— Collaborator with blurred vision

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.

It’s horrible. A blind person [on a screen reader] is typically met with a barrage of ‘graphic graphic graphic,’ some numbered file name, or gibberish like that from that hyperactive mechanical voice.

— Collaborator who is blind

Screen readers mispronounce things, the cadence is off, they strip all the humanity out of an emotional piece of storytelling.

— Collaborator who is blind

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.

A toggle from the Auditorial experience shows the switch between audio mode and article mode.

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?

A screenreader focus state passes over as design layout, checking it for accessibility.

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.

The play bar from the Auditorial experience demonstrates the inclusion of a press play moment.

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.

The ambient sound control from the Auditorial experience shows background noise being removed.

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.
The welcoming page of the Auditorial experience. A settings prompt reads ‘This storytelling experience can be adapted to suit your preferences.‘
Note intentional use of “preferences” over “disabilities/abilities” to avoid stigmatising people as being outside the norm. We acknowledge that everyone viewing this platform will have unique preferences.

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.

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.

Two buttons beside each other show the Dos and Don’ts of link labelling. The do button, has a descriptive label saying ‘Explore project background’. The Don’t button has a non-descriptive label saying ‘click here’.

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.

The Colour Mode control is seen changing the colours of the Auditorial experience.

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.

Closed Captions being turned on and off.

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.

Two toggles beside each other show the Dos and Donts. The ‘Do’ toggle, uses clear text labelling, saying on and off. The ‘Don’t’ toggle, tunes green when switched on, and relies on colour alone.

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.
The zoom control from the auditorial experience changes the size of some text as the button is clicked.

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.

A focus state that breaks the convention of a standard one line box, and instead matches the design stylings of the website.

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.

The auditorial playback speed control.

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.

A reduced motion control turns on, and transforms a video into a static key frame.

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.

A button sounds toggle, showing the option to turn on audio feedback if necessary.

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.

A striking image of a dried up river bed bending through a mountain range. The image is clear and bright, with a singular focal point to the photograph. The simplicity of the image means you can layer it against background textures without it becoming too overwhelming for the viewer.

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.

Side by side examples of a high legibility font and a low legibility font. The high legibility font has clear, distinct characters. The low legibility option has similar forms, so characters could be confused for each other.

Useful Tools

Check for inclusivity as you work, with these trusty tools :

All inclusive design practises and UI elements designed for the Auditorial platform by Google are free to use, adapt and build upon in your own work.