Creating more accessible

experience

for millions

meet.js Krk, 03.2023

before we start...

1,300,000,000

estimated number of people with disabilities

8% of men

and 4.5% of the whole population is color blind

3% of the population

has a significant mental disability

over 5% of the population

has a disabling hearing loss

over 27% of the population

has a form of visual impairment

. . .

it's also about

each of us

PS. Grandmas, I love you

you are the best

color blindness,

significant mental disability,

disabling hearing loss,

broken limb,

having full hand,

impairments following surgery,

permanent

amputated limb

temporary

eye or ear infection

situational

loud venue

excessive fatigue,

Web Content Accessibility Guidelines

WCAG

no-mouse navigation
contrasts and color usage
hints for screen readers
zooooooming-in rules

Testable guidelines for making web content accessible to everyone

state of web accessibility

what's the

?

state of web accessibility

according to WebAIM report (2022) based on 1,000,000 sites:

96.8% of home pages have major accessibility violations

on average, every 19th element on a page doesn't meet accessibility standards

the average number of home page elements increased by 22% over last 3 years

state of web accessibility

💩

you know what?

find your allies

don't make it a one-person crusade!

find your allies

👩🏽‍💻 - engineering standards

👨🏼‍🎨 - inclusive design

🧑🏻‍💼 - customer advocacy

👨🏾‍💼 - product growth

find your allies

and learn together!

for bottom-to-top, and top-to-bottom changes

business case

we operate in the

💰 revenue-driven world 💰

find supporting data for your case and focus on the impact

business case

industry reports:

In the UK alone, £17.1 billion consumer spend was estimated to be driven away by inaccessible websites (2019)
2% of e-commerce spent was already driven by blind people (2019)

where do I start?

💡 pricing, sign up page, main search

💡code impact (e.g., Design System)

💡what types of issues are the most impactful in your case?

Video captions? Keyboard nav?

self reminder

to drink 🧋

testability

and

code quality

testability

it('deselects the chosen option', async () => {
    renderFilter({currentValue: [DEVICE_TYPE.TABLET]});
    
    userEvent.click(screen.getByRole('combobox', {
        name: 'Device type filter'
    }));
    
    await screen.findByRole('listbox');

    userEvent.click(screen.getByRole('option', {
        name: 'tablet'
    }));
    // ... 
});

it('deselects the chosen option', async () => {
    renderFilter({currentValue: [DEVICE_TYPE.TABLET]});
    
    userEvent.click(screen.getByText('Device'));
    
    await screen.findByText('desktop');

    userEvent.click(screen.getByText('tablet'));
    // ...
});

// woops, multiple elements found!

testability

code reviews

make accessibility a part

of your checklist

code reviews

👩🏼‍💻

🧑🏾‍💻

code reviews

👩🏼‍💻

🧑🏾‍💻

👨🏻‍💻

👩🏽‍💻

code reviews

👩🏼‍💻

🧑🏾‍💻

👨🏻‍💻

👩🏽‍💻

👨🏿‍💻

🧑🏼‍💻

👨🏽‍💻

👩🏻‍💻

👩🏽‍💻

tools

only detect 30-50% of all issues

...but automate whatever you can!

😎

tools

auditing - extensions (e.g., Wave), dev-tools (e.g., ARC toolkit)
dev-time analysis (e.g., eslint plugin, Axe for React)
automated tests (e.g., Axe for Jest, Cypress)
CI-integrable tools (e.g., pa11y, Lighthouse)
use your product as people with disabilities would (e.g., screen reader - Voice Over, JAWS)

tools

more resources for testing web accessibility

at the end

audits

🧑‍🦯

audits

it's us, trying to develop
accessible experience

🧑‍🦯

and then we did the same 🙈

1

2

3

🧐

1

2

3

audits

let's help each other

on that mission 🙌

self reminder

to breathe 🌬

👩🏽‍⚖️

law regulations

Americans with Disabilities Act (ADA) - ensures people with disabilities are not discriminated
- companies sued include: Nike, Amazon, Netflix, Domino's
- 11,000+ law suits in 2021 on federal level and it keeps counting
EU Web Accessibility Directive - public sector websites and apps must meet AA standard
other regulations in Canada, Australia, UK, ...

European Accessibility Act

EU directive, national laws should be active starting with June 2025
no Polish application yet
but directive already outlines high level requirements and sectors, e.g., e-commerce, banking
we can expect more explicit laws referring to WCAG standard

. . .

accessibility

usability

=

accessibility

better UX

=

become
an a11y

today!

Resources

accessibility checklist - https://webaim.org/standards/wcag/checklist
testing web accessibility blog - https://www.adrianbolonio.com/blog
accessibility-focused newsletter - https://ashton.codes/subscribe-to-frequent11y/
state of web accessibility report - https://webaim.org/projects/million/
e-commerce share driven by blind people - https://cdn2.hubspot.net/hubfs/153358/Nucleus-The%20Internet%20is%20unavailable.pdf
lost revenue in UK by inaccessible sites - https://www.clickawaypound.com/downloads/cap19final0502.pdf
no-mouse days - https://www.a11yproject.com/posts/no-mouse-days/
European Accessibility Act summary - https://eur-lex.europa.eu/legal-content/EN/LSU/?uri=CELEX%3A32019L0882
ADA law suits - https://www.adatitleiii.com/2023/02/ada-title-iii-federal-lawsuits-numbers-are-down-but-likely-to-rebound-in-2023/