# data[].attributes.title
Accelerating accessibility in a component-based world

# data[].attributes.blurb.html
Components have revolutionised the way we work, as they allow us to invent wheels only once. Executed well, they can save all of the team time. This provides an opportunity for broadening the impact of accessibility, too. This practical talk will go into some strategies for baking accessibility into components, so that more people can use them.

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
i i i i i Access b l ty: what s t?

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
1 5 out of people on the planet are disabled (eg 80 million in Europe) Data source: WHO World Report on Disability (2011), 44.

# data[].attributes.slidedeck.data[].slides[].desc.html
i D

# data[].attributes.slidedeck.data[].slides[].desc.html
50% of your mobile users have accessibility features turned on Data source: appt.org/en/stats

# data[].attributes.slidedeck.data[].slides[].desc.html
Access is a human right

# data[].attributes.slidedeck.data[].slides[].desc.html
“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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
T he web is full of barriers, getting in the way of people’s daily lives. We’ve GOT to smash those barriers!

# data[].attributes.slidedeck.data[].slides[].desc.html
“The power of the web i T –

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility standards + Best practices + (You’ll need all of the above) User testing

# data[].attributes.slidedeck.data[].slides[].desc.html
Let’s talk components

# data[].attributes.slidedeck.data[].slides[].desc.html
Once upon a time…

# data[].attributes.slidedeck.data[].slides[].desc.html
i Components changed how we des gn, develop and create for the web.

# data[].attributes.slidedeck.data[].slides[].desc.html
i i i Components allow us to make some access b l ty reusable.

# data[].attributes.slidedeck.data[].slides[].desc.html
don’t repeat inaccessible patterns repeat accessible patterns

# data[].attributes.slidedeck.data[].slides[].desc.html
Pick any framework. It’s the markup that matters.

# data[].attributes.slidedeck.data[].slides[].desc.html
DOM tree htmlparser.info

# data[].attributes.slidedeck.data[].slides[].desc.html
i i i Access b l ty Tree

# data[].attributes.slidedeck.data[].slides[].desc.html
Access b l ty Tree Names, roles, states i i i ≈

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Checks that work on every component

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Works without mouse

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
Works without mouse: testing Is it clickable? It should also be AB -able T Links, buttons and other controls

# data[].attributes.slidedeck.data[].slides[].desc.html
Works without mouse: testing Is the active control highlighted? Override the browser default :focus and make it shine

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Has sufficient contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: what to do Text on backgrounds

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: what to do Text on backgrounds (take care if the component supports photos)

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: what to do Focus outl nes on any background (including photos) Double outlines ftw i Text on backgrounds

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: what to do Text on backgrounds Focus outl (including photos) Double outlines ftw UI elements i Check them all

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: testing Use a contrast checker ↩ contrast-ratio.org ↩

# data[].attributes.slidedeck.data[].slides[].desc.html
Has sufficient contrast: testing whocanuse information about how well your colours work with common vision types

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Has tokens that support accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible tokens: what to do Color Add defaults with sufficient contrast, automatically test user tokens for contrast.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Names all controls

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: people

# data[].attributes.slidedeck.data[].slides[].desc.html
role: link name: “World”

# data[].attributes.slidedeck.data[].slides[].desc.html
role: link name: “US politics”

# data[].attributes.slidedeck.data[].slides[].desc.html
role: button name: “Open menu”

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “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

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: people People with physical disabilities People who are blind may use voice recognition software to interact and use screenreaders

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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>

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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>.

# data[].attributes.slidedeck.data[].slides[].desc.html
Some elements shall not be named

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button”> <svg>…</svg> MENU </button> MENU

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button” aria-label= “Open my hamburger plz”> <svg>…</svg> MENU </button> MENU

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button” aria-label= “Open my hamburger plz”> <svg>…</svg> MENU </button> MENU mismatch between aria-label and visual fails “Label In Name”

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: descriptions with eld

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

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Allows for zoom

# data[].attributes.slidedeck.data[].slides[].desc.html
Allows for zoom: people People with low vision who use zoom so that they can read the content

# data[].attributes.slidedeck.data[].slides[].desc.html
Allow for zoom: testing Use browser zoom to 400% and verify nothing about your components breaks Previous image Next image

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Conveys states to assistive tech

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: what tech?

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: people People who use assistive technologies that are enabled by ARIA to provide a much better UI

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how it works Roles States i Propert es

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how it works Roles States i Propert es “semantics” — WAI-ARIA

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how it works support i Propert es Roles support States

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how it works Roles, states, propert es i T in our H ML

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how it works Roles, states, propert es i T in our H ML (or SVG, XML, JSX etc)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
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)

# data[].attributes.slidedeck.data[].slides[].desc.html
T Example of an Accessibility ree・ https://github.com/WICG/aom/blob/gh-pages/images/a11y-node.png

# data[].attributes.slidedeck.data[].slides[].desc.html
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>

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: testing ↩ Firefox, accessibility tab

# data[].attributes.slidedeck.data[].slides[].desc.html
An access ble component… i Honours all user settings

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user settings: background Preferred color schemes Forced color palettes https://www.w3.org/TR/css-color-adjust-1/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user settings: how to https://polypane.app/blog/forced-colors-explained-a-practical-guide/

# data[].attributes.slidedeck.data[].slides[].desc.html
Summary

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
THANKS! @hdv@front-end.social / @hidde.blog talks.hiddedevries.nl

# data[].attributes.resources.data[].title
43% of your users have accessibility features turned on

# data[].attributes.resources.data[].title
Apple executives get 10% increase/decrease in  bonus for performance around ‘core values’,  including accessibility.

# data[].attributes.resources.data[].title
 Idiosyncrasies of the HTML parser: the book

# data[].attributes.resources.data[].title
43% of your mobile users have accessibility features turned on

# data[].attributes.resources.data[].title
Understanding WCAG 2.1, “2.1.1 Keyboard”

# data[].attributes.resources.data[].title
Understanding WCAG 2.1, “2.4.3: Focus Order”

# data[].attributes.resources.data[].title
Understanding WCAG 2.1, “1.4.3 Contrast”

# data[].attributes.resources.data[].desc.html
information about how  well your colours work with common vision types

# data[].attributes.resources.data[].title
Holly Tuke: 5 most annoying website features I face as a blind person every single day

# data[].attributes.resources.data[].title
Spec: Accessible Name and Description Computation 1.1

# data[].attributes.resources.data[].title
Alastair Campbell: “Box shadow gets removed in high-contrast mode, best to make the outline transparent instead.”

# data[].attributes.resources.data[].title
 Making single color SVG icons work in dark mode

# data[].attributes.resources.data[].title
Microsoft Edge Team - Styling for Windows high contrast with new standards for forced colors

# data[].attributes.resources.data[].title
What’s new in web accessibility (Domenic Mizzoni, Google I/O ‘18)

# data[].attributes.resources.data[].desc.html
in which Domenic Mizzoni talks about AOM