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
A presentation at zeroheight DS Live in September 2026 in by Hidde de Vries
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
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
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>
Names all controls: how to
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
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
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
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!
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
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>
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
