The Web, as we know it today, is in its infancy. A medium with 40 years of history, it was designed by sighted designers — and so it has an inherent bias toward sighted users.

More than 97% of the top 1 million Web sites have accessibility issues, making it difficult for 300 million blind and low-vision readers to access and enjoy online content. Even something as simple as catching up on daily news headlines is a challenge for some.

To raise awareness about this issue, Google, the Royal National Institute of Blind People (RNIB), and The Guardian got together, united by the belief that everybody should have equal access to the vital news and storytelling that helps us all make sense of our world and participate fully in society.

The result was Auditorial, an experimental storytelling Web site featuring content from the Guardian that can adapt to suit each reader’s personal sensory needs.

Readers can choose how they’d like to experience a story — reading it, listening to it, or watching it — and can customise visual and audio features to suit them. So, if they’re blind and have sensitive hearing, they can remove ambient background noise and focus on the narrator’s voice.

Those with light sensitivity can flip the Web site into dark mode. If they have motion sensitivity, they can turn motion graphics into static keyframes. It allows users to adjust the size of buttons and text, tweak the playback speed, enhance imagery, add button sounds, or call up a transcript to support them at any moment.

This experimental, adaptive Web site is intended to spark a broader discussion about how the Web at large might be designed more flexibly to become a more inclusive place for people with disabilities.

Reinventing the Web 

As a group, the project partners were unsatisfied with the status quo. The best experience people with sight loss could hope to have online was one where they must labouriously navigate around the disruptive features of a Web that wasn’t made with them in mind, using assistive devices. It was the digital equivalent of expecting wheelchair users to bring their own ramps to a building full of steps instead of encouraging building designers to ensure equitable access.

Experiences of the Web for blind and low-vision users are often labourious, confusing, dull, uncomfortable, sometimes even actively unsafe — say in instances where motion graphics start flashing automatically with no quick, easy way for users with motion sensitivities to turn them off.

The Auditorial team wondered: “What would the Web be like if it was redesigned from scratch, with people with sight loss in mind?”

To ensure that question was answered successfully, and to overcome the biased design processes that led us to this point in the first place, blind and low-vision collaborators were included in Auditorial’s design team from the inception. They offered ideas, validated concepts, and posed challenges the team would never have considered on their own. It allowed them to address bias from the inside out.

The result is a template of ideas made to be stolen, repurposed, and reimagined by Web site creators everywhere.

The Accessibility Notebook that supports the project offers all the inspiration and instruction needed to build inclusive Web sites and have some creative fun doing it. While one site may never cater perfectly to the endlessly diverse range of human abilities — we are a complicated species — the more modes of interaction you build into a Web site, the more readers you open your work up to.

The internet is in its infancy. But what it becomes next is up to us.

For inclusive tips to try on your own Web site, play with the adaptive story written by The Guardian, at Auditorial.withgoogle.com, and see the full list of techniques used in the Accessibility Notebook.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .