Designing an Accessible Future


I spoke at WDC in Bristol, applying the principles of WCAG 3.0 to some current visions of the future.

If you prefer to read, here's the text šŸ‘‡

As an industry we measure accessibility using WCAG - the Web Content Accessibility Guidelines. Thereā€™s a huge update for WCAG on the horizon in the form of WCAG 3.0 which is going to completely change the way we test and measure the accessibility of our products.

I used this talk to dig into the WCAG 3.0 draft, to see what the future of accessibility might hold and have a think about what we can all do now to get ahead.

I then took the principles of WCAG 3.0 and applied them to some of the current visions of the future. Theyā€™re saying itā€™s a good 5 years till WCAG 3.0 is rolled out - what will the state of the internet be by then?


So ā€¦ whatā€™s wrong with WCAG 2.x?

In design I always like to start with a problem statement and it looks like the Silver Community Group who are shaping WCAG 3.0 do too - high on their list are:

ā˜ž Usability

WCAG 2.x reads a bit like a legal document so itā€™s really daunting for beginners or to sell into your boss.

ā˜ž Conformance model

WCAG 2.x guidelines are a binary pass or fail. But humans are complicated and messy and often donā€™t fit this model.

ā˜ž Maintenance

The WCAG 2.x guidelines we are currently using were published in 2008. That was the year Apple released the first iPhone.

Read the Silver Community Group's WCAG problem statements.

Whatā€™s new in WCAG 3.0?

  • Itā€™s easier to read and understand.
  • It includes the needs of people with a wider range of disabilities - particularly the needs of people with cognitive disabilities or low vision who often donā€™t fit the pass/fail success criteria of WCAG 2.x.
  • Itā€™s flexible to keep up with new technologies and will have a more agile approach to updates.
  • And finally it includes guidelines that reflect ā€˜real-worldā€™ accessibility. Itā€™s no longer about just checking a box. The important bit is ensuring that people with disabilities can use your product.

The WCAG 3.0 working draft has a goals explainer here.

Key changes

Guidelines

The WCAG 3.0 draft shows 6 example guidelines and itā€™s clear these arenā€™t finished, theyā€™re there to serve as initial examples to allow folks to feed back on the format. Within each guideline you have functional categories showing which disabilities this guideline supports, critical errors and a rating scale.

How-to guide

The guidelines link off to a how-to guide. This is the bit I think Iā€™ll find really handy - it tells you why this guideline is important, how it solves the user needs and how to implement the guideline for new and existing products. These how-to guides link to a methods doc which explains how to test with a list of acceptance criteria to work through.

Critical errors

Each guideline defines critical errors. Say, for text alternatives if there are any images without a text alternative which prevents a user from completing a task that is a critical error. A website can have a small number of accessibility errors and still be WCAG 3.0 compliant, but if it has any critical errors itā€™s a 100% fail.

Testing

The working draft proposes two types of test ā€“

  • Atomic tests: largely automated tests of code
  • Holistic tests: usability tests with assistive tech

It looks like testing and scoring is still being worked out so it's not really worth getting into detail on it yet as it's likely to change. The takeaway is scoring moves from a pass/fail - to a rating system where you can see where you sit on a scale. Each outcome is rated on a scale of 0 to 4.

Conformance level

Finally, the conformance levels have changed. Instead of levels A, AA and AAA, WCAG 3.0 has bronze, silver, and gold. Bronze looks to be a rough equivalent of an AA in WCAG 2. To score a Silver or Gold rating you will have to perform holistic usability testing with assistive technologies, ideally testing with people with disabilities.

Terms

WCAG 2.x WCAG 3.0
Non-interference requirements Critical errors
Success Criteria Outcomes
Techniques Methods
Understanding How to
Level A, AA, AAA Bronze, Silver, Gold

Sources: WCAG 3.0 draft mapping, Deque blog

Putting it all together

A diagram showing how WCAG 3.0 puts all the different sections together. Starting with guidelines that link to a how-to doc, then outcomes that link to a methods doc. From here you get a score for each guideline, then an overall score which gives you the conformance rating of bronze, silver or gold.

Adapted from: WCAG 3.0 explainer

Other notable changes

User generated content

This is the first time weā€™ve seen a mention of user generated content like social media posts, images and video uploads.

Clear Words

Thereā€™s a new outcome being proposed called Clear Words, which covers using plain, jargon free language. The focus is on making content usable for people with cognitive and learning disabilities - though ultimately plain language helps everyone.

Improved colour contrast measure

As a designer, the most interesting aspect of WCAG 3.0 for me is Accessible Perceptual Contrast Algorithm (APCA) - the new proposal for how we measure colour contrast.

The current measurement comes under a lot of scrutiny because you get a lot of issues in the midrange oranges and blues.

A button showing legible text with good colour contrast which fails WCAG 2.0 colour contrast ratio guidelines, alongside a button with more legible text and good contrast that passes WCAG 2.0 colour contrast ratio guidelines.

Under WCAG 2.0 contrast guidelines, many people can see the text that fails more clearly than the text that passes.

Hereā€™s what need to know -

  • It works off a different scoring system. The current ratios are replaced by a level out of 100. The higher the number, the higher the contrast.
  • The new measurement takes spatial properties into account like the weight and size of the type. Lightweight fonts have less contrast so need to be a larger size to pass.
  • The measure is context dependent so swapping the text and the background colour changes to the result.

Dan Hollick tweeted a helpful explainer of APCA here.


Once Iā€™d read the draft a few times I got to thinking about the future. If we assume WCAG 3.0 is five plus years away, what will the digital landscape look like when it drops?

One vision we might be applying WCAG 3.0 to is Web3

Thereā€™s a lot of chatter about Web3 and as someone who designs for the web, I thought if this is potentially the next evolutionary leap for the internet then Iā€™d better put some time into understanding what Web3 actually means and how I can do my best to approach this future in most inclusive possible way for my users.

So I started reading blogs and articles on Web3 and what immediately stood out for me was two things. The first was the common terms and principles that are used to describe Web3 are all words we associate with accessibility and inclusion. Words like -

  • open
  • inclusive
  • democratic...thereā€™s talk of
  • equity and community

Who wouldnā€™t want this future? These are all principles I totally vibe with - the future of the internet should be for everyone šŸ¤˜

The second thing I learned is how far from all these terms Web3 actually is.

Web3 words with a meme cat - dApps, DeFi, HODL, gas, IEO, DAO, IPFS, token, DAI, NFT, CEX, buidl, DEX, EIP, GameFi, mint, ape, PoW, eth, DEX, EIP, GameFi, mint, fungible, rug pull, TVL, airdrop, gwei, cold wallet, CeFi, PoS, vaporware, SHA-256, ICO.

Web3 is really complicated! There were so many terms I didnā€™t understand, many hidden behind acronyms.

Googling for a definition of Web3, you get definitions like this from the Harvard business review.

ā€œWeb3 is being touted as the future of the internet. The vision for this new, blockchain-based web includes cryptocurrencies, NFTs, DAOs, decentralized finance, and more. It offers a read/write/own version of the web, in which users have a financial stake in and more control over the web communities they belong to. ā€

Harvard Business Review - What is Web3?

Lots of terms in here I didnā€™t understand when I started but the gist is Web3 is the future of the internet, which believers say will be decentralized and based on blockchain technology. This shifts power from the big tech companies back to individuals making it more fair and egalitarian.

I read an interview in Wired magazine with Gavin Wood, founder of crypocurrency Ethereum which touched on inclusion and Web3. The interviewer says itā€™s hard to imagine anyone, outside of a small subset of people with high technical literacy, understanding Web3 and being able to participate. Gavin Woodā€™s reply is that all the information about Web3 is in the public domain, itā€™s there for free if you ā€œbothered educating yourselfā€ .

So I thought Iā€™d take up this challenge to learn enough about Web3 to be able to talk about it confidently and to have an opinion.

My reading might have been free and in the public domain but it took me around 20 hours.

šŸ‘‹ If you have the luxury of a spare 20 hours to learn about Web3, Iā€™ve pasted all the articles I read and videos I watched here gerireid.com/web3/

At the end of my 20 hours my main learning was:

Web3 has a serious accessibility problem

One of the new guidelines I mentioned in the WCAG 3.0 draft is Clear Words. The main aim of this outcome is to make content usable for people with cognitive and learning disabilities. It awards a score of 0 to a website that uses uses ā€œundefined technical or jargon wordsā€.

Thereā€™s also a huge financial and technical barrier to engaging with Web3. Right now only a small minority of the community is seeing the majority of the financial gains, and this is exactly the type of inequality we are trying to leave behind. For me, this is sort of the irony of this Web3 future - weā€™re keen to shift power from the big tech companies to a decentralised model but this doesnā€™t automatically equal equity.

To put this into perspective every member of Forbesā€™s 2021 cryptobillionaires list is a man. A third of them attended Stanford or Harvard. Out of the 12, only one isnā€™t white. Thereā€™s a similar story around NFT sales - the Arttactic NFT art market report said for the period 2020 and 2021 - 55% all of the capital generated by NFT artists went to 16 people with women making up just 16% of overall sales. The NFT market is not particularly inclusive!

Web3 seems like our chance to correct our previous mistakes, to remake the foundations of the internet to build up again as more inclusive place. Itā€™s up to us to give web3 a better purpose and direction if we want this technology to help us evolve both society and culture. A future that takes onboard the needs of all humans and wider society sounds a lot more like a future where I want to live. ā¤ļø


Humanity Centred Design

Linking on from this and looking towards the future in a more inclusive way, a methodology Iā€™ve been exploring is Humanity-Centered Design. Weā€™re all familiar with the concept of Human Centred Design. Donald Norman has a new book due out from MIT press early next year called Design for a Better World that moves the concept on from humans to humanity.

Principles of Humanity Centred Design

  • Solve the core, root issues, not just the problem as presented.
  • Focus on the entire ecosystem of people, all living things, and the physical environment.
  • Take a long-term, systems point of view.
  • Continually test and refine the proposed designs to ensure they truly meet the concerns of the people.
  • Design with the community.

This design approach considers wider than the individual direct user by taking into account how our decisions are affecting broader society and our physical environment. Rather than looking for immediate gratification - the ā€œmove fast and break thingsā€ startup ideology, we, as people who make the web, have a responsibility to consider the longer term consequences our actions might have.

Through an accessibility lens, design and engineering teams are well-positioned to lead this evolution. Weā€™ve been striving for so long to get influence or our seat at the table - we have the ear of stakeholders and weā€™re trained to emphasise with people and to reframe problems. Accessibility and inclusion is often a corporate priority but itā€™s down to us to make sure itā€™s put on roadmaps and is part of the product design process.

One aspect of WCAG 3.0 that really plays into this broader sort of thinking is considering the needs of people with much wider range of disabilities. WCAG 3.0 is striving to reflect real world accessibility, itā€™s about real people in their real environments and how our products can serve their needs which I think really plays into a Humanity Centred Design ethos.

If you're interested in this evolution of design thinking, there's a thoughtful course on interaction-design.org. This excellent post by Rob Girling also helped shape my thinking.


Is an accessible future a future without screens?

Then I got to thinkingā€¦ perhaps in a post WCAG 2 world, some of the barriers our current screen based technology puts up for people with disabilities, may no longer be as relevant.

Consider voice assistants like Amazon Alexa and Google Home that allow you interact with a system through speech commands - no screen. Voice interfaces can take away the barriers that screen based media puts up and for many people with a disability they offer an opportunity to engage with a digital environment they may have been excluded from previously.

Voice interfaces are proving a real help to people who are blind and who have low vision.

The RNIB have worked with Amazon to offer various services, including a tool called Show and Tell where you hold up common household groceries to the Echoā€™s camera and Alexa announces it.

I read an article about smart speakers that interviewed an Amazon Echo user who is blind who described smart speakers as "life changing". He claimed when it came to ordering things online and getting information, speaking voice commands to Alexa was "ten times faster" than accessing content on the internet via his screenreader. Writer and presenter Holly from the website Life of a Blind Girl wrote a piece about smart speakers on her blog, detailing twenty ways Amazon Echo helps her day-to-day.

The wearable tech industry is also working to keep up with the needs of people with disabilities. The Apple Watch has some excellent accessibility features including a gesture-based screen reader that can talk you through the navigation options. I also recently discovered a cool accessibility feature where you can train your watch to recognise your hand gestures and give it commands based on pinching and clenching your hand which takes away the reliance on screen input.

Taking away the need for a desktop or phone screen really limits the role of UI.

And you remove the need for large sections of WCAG - no colour contrast requirements, alt tags, proximity, sensory characteristics.

Everything becomes UX: the user journey and meaningful words.

Over time, I do feel like dedicated UI roles will become less important. If youā€™re new to the biz in a WCAG 3.0 world my advice would be become a UX or a content designer.


So to wrap up. Sadly weā€™re not going to get the hoverboard and the powerlaces just yet so what are the things you can do today to get a headstart on WCAG 3.0?

Get a headstart on WCAG 3.0

Watch the draft evolve

Testing firms like Deque always write about these things, get on their mailing lists.

Prioritise critical errors

It looks like critical errors are deal breakers in WCAG 3.0. Keep an eye on these and prioritise them, youā€™ll be ahead of the game but more importantly have happier users.

Test with people with disabilities

WCAG 3.0 covers a much broader range of disabilities and will require holistic testing with assistive technology to meet a Silver or Gold level.

Use industry events to raise awareness

I mark Global Accessibility Awareness Day in the calendar and use it as an opportunity to do a workshop or a talk to bring together stakeholders.

Donā€™t just follow accessibility advocates

If you really want to know how to design for people with disabilities, follow them on social media and read their stuff. I often hear designers say theyā€™ve never experienced anyone using a screen reader or a zoom tool. Just Google it - there are whole YouTube channels of folks showing you how they use assistive tech.

Most importantlyā€¦choose to prioritise accessibility.

Bake accessibility testing into your product design process - automated testing will get you 59% of the way, and any effort is better than no effort.


As the people building products and services for the internet, you have the power to shape the future for the better.

Whatever the future holds for us, whether itā€™s a future of dApps, DeFi or DAOs, a future of a unified humanity or something in between the two - every small action or incremental accessibility improvement you make counts.

I finished with this great quote from Sheri Byrne-Haber from her excellent publication Giving a Damn About Accessibility
Geri Reid on stage at WDC in front of a slide that reads Good accessibility is about compliance, great accessibility is about empathy.

Good accessibility is about compliance, great accessibility is about empathy. Photo from legendary live tweeter Josh Tumath ( thank you Josh šŸ™ )

Itā€™s useful to have guidelines, we need something to measure against but never forget the real humans you are designing and building products for and the impact your decisions and actions have on their everyday lives.

You are the internet makers, and with that comes great responsibility - you have the power to make the future of the internet something thatā€™s accessible to everyone.


Links from this talk

ā˜ž Official stuff from W3C

ā˜ž Blogs and articles on WCAG 3.0

ā˜ž Web3

ā˜ž Colour

ā˜ž Humanity Centred Design

ā˜ž Voice and no screen user interfaces

šŸ“– Slides from my talk are here

Feel free to reuse and repurpose if you need to explain WCAG 3.0 ā¤ļø


Continue reading

How to write an Accessibility Statement

Prev project

Running design thinking workshops for teenagers

Next project
Headshot of Geri Reid, a white woman with long dark hair, wearing a blue and white striped top, looking off to the side

About me


I've designed digital products for the past two decades.

As design and accessibility lead on NewsKit design system, I helped some of the UK's largest media and broadcast brands to design at scale. I was design lead on the Constellation design system at Lloyds Banking Group and set up design system foundations at Checkout.com and BPP. Way back, I designed digital products at UBS and Bank of America.

Over time, my design roles have become more strategic: planning, training and writing technical specs and docs. My work on systems has also made me a keen accessibility advocate. Through care and attention, I've learned how a design system can provide a solid foundation for product accessibility.