Creating more accessible

experience

Β 

for millions

Β 

meet.js Krk, 03.2023

before we start...

1,300,000,000

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

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

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

accessibility

usability

=

accessibility

better UX

=

become
an a11y

today!

Resources

Made with Slides.com