Accelerating accessibility in a component-based world

g n t a r e l e c c A y t l b s s e acc in a componentb a s e d wor l d i i i i Hidde de Vries ・ hidde.blog ・ zeroheight DS Live ・ 2 September 2026, online

H , I’m H dde 👋 Standards at Netherlands government. Co-editor of WCAG 3, WCAG-EM, contributor to EN 301 549. i i i Here in personal capac ty. Recovering front-end + design systems developer

i i i i i Access b l ty: what s t?

Access b l ty: to ensure people w th d sab l t es can use your webs te. i i i – cognitive – speech i i i i i i – auditory – physical – visual

i i i i i i i i Access b l ty: to ensure people w th d sab l t es can buy your products.

i i i i i i i i Access b l ty: to ensure people w th d sab l t es can complete all steps.

i i i i i i i i i Access b l ty: to ensure people w th d sab l t es can use your serv ce.

1 5 out of people on the planet are disabled (eg 80 million in Europe) Data source: WHO World Report on Disability (2011), 44.

i D

50% of your mobile users have accessibility features turned on Data source: appt.org/en/stats

Access is a human right

“discrimination against any person on the basis of disability is a v i – UN Convention on the Rights of Persons with Disabilities , Annex I, h.

UNCRPD Web Accessibility Directive European Accessibility Act Directive (EU) 2016/2102 of the European Parliament and of the Council of 26 October 2016 on the accessibility of the websites and mobile applications of public sector bodies Directive (EU) 2019/882 of the European Parliament and of the Council of 17 April 2019 on the accessibility requirements for products and services

Performance on ‘core values’, including accessibility, impacts Apple executives’ bonus pay (+/-10%). Source: https://www.applevis.com/blog/apple-executives-bonuses-be-tied-their-performance-respect-accessibility-and-companys-other

T he web is full of barriers, getting in the way of people’s daily lives. We’ve GOT to smash those barriers!

“The power of the web i T –

Accessibility standards + Best practices + (You’ll need all of the above) User testing

Let’s talk components

Once upon a time…

i Components changed how we des gn, develop and create for the web.

i i i Components allow us to make some access b l ty reusable.

don’t repeat inaccessible patterns repeat accessible patterns

Pick any framework. It’s the markup that matters.

DOM tree htmlparser.info

i i i Access b l ty Tree

Access b l ty Tree Names, roles, states i i i ≈

Access b l ty tree Platform APIs Ass st ve Technolog es Microsoft Active Accessibility Microsoft User Interface Automation MSAA Mac OS X Accessibility Protocol text-to-speech i i i T i i i Linux/Unix Accessibility oolkit IAccessible2 screen magnifiers alternate pointing devices

Access b l ty tree Platform APIs Microsoft Active Accessibility Microsoft User Interface Automation MSAA Your markup DOM tree Mac OS X Accessibility Protocol i i T i Linux/Unix Accessibility oolkit IAccessible2 alt

Checks that work on every component

An access ble component… i Works without mouse

Works without mouse: people People who are blind People with low vision People with hand tremors cannot use a mouse, requires eye-hand coordination may have trouble tracking pointer indicator on screen sometimes find using a mouse very difficult, prefer keyboard Source: Understanding WCAG 2.1, “2.1.1 Keyboard”

Works without mouse: testing Is it clickable? It should also be AB -able T Links, buttons and other controls

Works without mouse: testing Is the active control highlighted? Override the browser default :focus and make it shine

Works without mouse: testing Does the order make sense? Ensure a “logical, usable source order” Source: Understanding WCAG 2.1, “2.4.3 Focus Order”

Works without mouse: testing Does the order make sense? Do the right elements get focus? Ensure a “logical, usable source order” Non-interactive elements probably shouldn’t Source: Understanding WCAG 2.1, “2.4.3 Focus Order”

Works without mouse: testing Does the order make sense? Do the right elements get focus? Can you press all keys? Ensure a “logical, usable source order” Non-interactive elements probably shouldn’t Single key presses should not trigger actions. Source: Understanding WCAG 2.1, “2.4.3 Focus Order”

An access ble component… i Has sufficient contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast

Has sufficient contrast: people People with low vision or colour blindness often find it difficult to read text with low contrast Source: Understanding WCAG 2.1, “1.4.3 Contrast”

Has sufficient contrast: what to do Text on backgrounds

Has sufficient contrast: what to do Text on backgrounds (take care if the component supports photos)

Has sufficient contrast: what to do Focus outl nes on any background (including photos) Double outlines ftw i Text on backgrounds

Has sufficient contrast: what to do Text on backgrounds Focus outl (including photos) Double outlines ftw UI elements i Check them all

Has sufficient contrast: testing Use a contrast checker i i i i i i i i i i T ↩ i ↩ in Dev ools, CI/CD F refox, Accesss b l ty Tab element p cker Edge, access b l ty nfo when nspect ng element

Has sufficient contrast: testing Use a contrast checker ↩ contrast-ratio.org ↩

Has sufficient contrast: testing whocanuse information about how well your colours work with common vision types

An access ble component… i Has tokens that support accessibility

Accessible tokens: what to do Color Add defaults with sufficient contrast, automatically test user tokens for contrast.

Accessible tokens: what to do Color Spacing Add defaults with sufficient contrast, automatically test user tokens for contrast. Make sure anything that needs pointer interaction is big enough.

Accessible tokens: what to do Color Spacing Breakpoints Add defaults with sufficient contrast, automatically test user tokens for contrast. Make sure anything that needs pointer interaction is big enough. Make sure users don’t need to scroll in two directions.

An access ble component… i Names all controls

Names all controls: people

role: link name: “World”

role: link name: “US politics”

role: button name: “Open menu”

“ “unlabelled l nks make t much harder to nav gate the webs te eas ly, qu ckly and ndependently” i i i i i T — Holly uke, Life of a Blind Girl i i Names all controls: people

Names all controls: people People with physical disabilities People who are blind may use voice recognition software to interact and use screenreaders

Names all controls: how to The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. i i i i 320 characters left

Names all controls: how to The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. i i i i / < 320 characters left <button> button>

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button> button> Role: button Accessible name: null i i i i / <

! 320 characters left

<

Names all controls: how to

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button>Send!1 button> Role: button Accessible name: Send!1 i i Send!1 i / i <

! 320 characters left

<

Names all controls: how to (text content)

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button>Send!1 <img alt=”airplane” button> Role: button Accessible name: Send!1 airplane i i i Send!1

/ i

/ ! 320 characters left

< <

Names all controls: how to (text + img + alt)

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button> <img alt=”airplane” button> Role: button Accessible name: airplane i i i

/ i

/ ! 320 characters left

< <

Names all controls: how to (image alt)

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button aria label=”Send it!” > <img alt=”airplane” button> Role: button Accessible name: Send it! i i i

/ i

/ ! 320 characters left

< <

Names all controls: how to (ARIA, option 1)

The Very Social Network Tell me when you f rst used the Web w thout g v ng a date. <button aria labelledby=”h” > <img alt=”airplane” button> <span id=”h”>Send! i i i Accessible name: Send!

/ / < i

/ ! span> Role: button 320 characters left

< <

Names all controls: how to (ARIA, option 2)

Names all controls You’ll want to ensure your component has useful names for all buttons and l nks. i For form fields, use <label>.

Some elements shall not be named

ext content in control including ::before/::after and alt text 2. aria-label 3. aria-labelledby See: https://www.w3.org/ R/accname-1.2/ T T Names all controls: how it is picked

Names all controls: testing Is there a name and what is it? Is the name meaningful? Check the accessibility tree in the browser Function not form, concise, no roles ↩ Edge, popup when you inspect element

<button type=”button”> <svg>…</svg> MENU </button> MENU

<button type=”button” aria-label= “Open my hamburger plz”> <svg>…</svg> MENU </button> MENU

<button type=”button” aria-label= “Open my hamburger plz”> <svg>…</svg> MENU </button> MENU mismatch between aria-label and visual fails “Label In Name”

Names all controls: testing Is there a name and what is it? Is the name meaningful? Do names match? Check the accessibility tree in the browser Function not form, concise, no roles Programmatic name should match visible name

Names all controls: descriptions with eld

fi fi aria describedby with eldset relates error messages to field(set)s

An accessible component… Allows for zoom

Allows for zoom: people People with low vision who use zoom so that they can read the content

Allow for zoom: testing Use browser zoom to 400% and verify nothing about your components breaks Previous image Next image

An access ble component… i Conveys states to assistive tech

Conveys states to assistive tech: what tech?

Conveys states to assistive tech: people People who use assistive technologies that are enabled by ARIA to provide a much better UI

Conveys states to assistive tech: how it works Roles States i Propert es

Conveys states to assistive tech: how it works Roles States i Propert es “semantics” — WAI-ARIA

Conveys states to assistive tech: how it works support i Propert es Roles support States

Conveys states to assistive tech: how it works Roles, states, propert es i T in our H ML

Conveys states to assistive tech: how it works Roles, states, propert es i T in our H ML (or SVG, XML, JSX etc)

Conveys states to assistive tech: how it works Roles, states, propert es i T in our H ML (or SVG, XML, JSX etc) (with or without ARIA attributes)

Conveys states to assistive tech: how it works Roles, states, propert es i T T in our H ML (or SVG, XML, JSX etc) (with or without ARIA attributes) (sometimes impacted by our H ML and/or CSS)

Conveys states to assistive tech: how it works Roles, states, propert in our H Interface affordances i T in our user’s screenreader (or switch, voice control, etc)

T Example of an Accessibility ree・ https://github.com/WICG/aom/blob/gh-pages/images/a11y-node.png

Conveys states to assistive tech: how to <input type=checkbox <input type=text disabled <details><summary> details>

<div hidden <input type=email> <button> > / > / / < <select><option> / < > / Is it checked? Is it disabled? Is it expanded? Is it hidden? Is it invalid? Is it pressed? Is it selected? select>

Conveys states to assistive tech: how to Is it checked? Is it disabled? Is it expanded? Is it hidden? Is it invalid? Is it pressed? Is it selected? aria checked aria disabled aria expanded Use HTML if you can! aria hidden aria invalid aria pressed aria selected

Source: https://www.w3.org/TR/wai-aria

Conveys states to assistive tech: testing ↩ Firefox, accessibility tab

An access ble component… i Honours all user settings

Honours user settings: people People with low vision who use high contrast and/or forced color modes Source: Understanding WCAG 2.1, “2.1.1 Keyboard”

Honours user settings: background Preferred color schemes Forced color palettes https://www.w3.org/TR/css-color-adjust-1/

Honours user settings: these can be overwritten accent-color, background-color, bordercolor, color, flood-color, fill, lightning-color, outline-color, rule-color, scrollbar-color, stopcolor, stroke, text-decoration-color, textemphasis-color, -webkit-tap-highlight-color https://www.w3.org/TR/css-color-adjust-1/

Honours user settings: these are reset box-shadow, text-shadow →none background-image → none color-scheme → light dark scrollbar-color → auto accent-color → auto (*unless url() is used) https://www.w3.org/TR/css-color-adjust-1/

Honours user settings: background box-shadow, text-shadow, background-image, color-scheme, scrollbar-color, accent-color if you use this for a focus outline and turn off outline, make sure outline is transparent not none https://twitter.com/alastc/status/1125681225828589569

Honours user settings: how to In SVG, use currentColor for fills and strokes hidde.blog/2018-12-24-making-single-color-svg-icons-work-in-dark-mode

Honours user settings: how to https://polypane.app/blog/forced-colors-explained-a-practical-guide/

Summary

Summary We’ve got to bu ld access ble components Markup rema ns essent al Use standards, best pract ces and user tests i i i i i Consider keyboard, contrast, names, zoom, states and user preferences

THANKS! @hdv@front-end.social / @hidde.blog talks.hiddedevries.nl