# 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 i t a r e l e Acc y t i l i b i s s e acc c o m p o n e n t in a based world Hidde de Vries ・ @hdv ・ Git Commit Show ・ 27 November 2021, online

# data[].attributes.slidedeck.data[].slides[].desc.html
Hi, I’m Hidde. Freelance accessibility and front-end consultant for organisations like the Dutch Government, Mozilla & W3C. I write at hidde.blog. @hdv LIKE AND SUBSCRIBE!

# data[].attributes.slidedeck.data[].slides[].desc.html
What is accessibility? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility: to ensure people with disabilities can use your website. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility: to ensure people with disabilities can buy your products. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility: to ensure people with disabilities can complete all steps. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility: to ensure people with disabilities can use your service. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
1 5 in people on the planet are disabled @hdv Data source: WHO World Report on Disability (2011), 44.

# data[].attributes.slidedeck.data[].slides[].desc.html
People with disabilities face barriers on the web. Even for simple tasks like transferring money and making a vaccin appointment. We’ve @hdv T to smash those barriers! O G

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

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Components changed how we design, develop and create for the web. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Reusability is key. With components, we can make some accessibility reusable. @hdv

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

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility Tree @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility Tree Names, roles, states @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility tree Platform APIs Assistive Technologies Microsoft Active Accessibilit Microsoft User Interface Automatio MSAA Mac OS X Accessibility Protoco Linux/Unix Accessibility Toolki IAccessible2 text-to-speec screen magni er n l t y s h fi

alternate pointing devices

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility tree Platform APIs Microsoft Active Accessibilit Microsoft User Interface Automatio MSAA Your markup DOM tree Mac OS X Accessibility Protoco Linux/Unix Accessibility Toolki IAccessible2 n t l y s h fi

alte

# data[].attributes.slidedeck.data[].slides[].desc.html
Some checks for each component @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Works without mouse @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Works without mouse: people @hdv 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 TAB -able Links, buttons and other controls @hdv

# 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 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Works without mouse: testing Does the order make sense? Ensure a “logical, usable source order” @hdv Source: Understanding WCAG 2.1, “2.4.3 Focus Order”

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Has suf cient contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Has suf cient contrast: people People with low vision or colour blindness often find it difficult to read text with low contrast @hdv fi Source: Understanding WCAG 2.1, “1.4.3 Contrast”

# data[].attributes.slidedeck.data[].slides[].desc.html
Has suf cient contrast: testing Use a(n automated) contrast checker fi Firefox, Accesssibility Tab element picker ↩ @hdv ↩ in Dev Tools, CI/CD Edge, accessibility info when inspecting element

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

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Names all controls @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: people “ “unlabelled links make it much harder to navigate the website easily, quickly and independently” — Holly Tuke, Life of a Blind Girl @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: people @hdv 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 rst used the Web without giving a date. 320 characters left fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to The Very Social Network Tell me when you rst used the Web without giving a date. 320 characters left fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to The Very Social Network Tell me when you rst used the Web without giving a date. 320 characters left fi @hdv <button></button>

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to The Very Social Network Tell me when you rst used the Web without giving a date. <button></button> <!-Role: button Accessible name: null —> 320 characters left fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to (text content) The Very Social Network Tell me when you rst used the Web without giving a date. <button>Send!1</button> <!-Role: button Accessible name: Send!1 —> 320 characters left fi @hdv Send!1

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to (text + image alt) The Very Social Network Tell me when you rst used the Web without giving a date. <button>Send!1 <img alt=”airplane” /> </button> <!-Role: button Accessible name: Send!1 airplane 320 characters left fi @hdv Send!1 —>

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to (image alt) The Very Social Network Tell me when you rst used the Web without giving a date. <button> <img alt=”airplane” /> </button> <!-Role: button Accessible name: airplane —> 320 characters left fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to (ARIA, option 1) The Very Social Network Tell me when you rst used the Web without giving a date. <button aria-label=”Send it!” > <img alt=”airplane” /> </button> <!-Role: button 320 characters left Accessible name: Send it! —> fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how to (ARIA, option 2) The Very Social Network Tell me when you rst used the Web without giving a date. <button aria-labelledby=”h” > <img alt=”airplane” /> </button> <span id=”h”>Send!</span> <!— 320 characters left Role: button Accessible name: Send! —> fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls You’ll want to ensure your component has useful names for all buttons and links. For form fields, use <label>. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: how it is picked

1. Text content in control including ::before/::after and alt text

2. aria-label 3. aria-labelledby See: https://www.w3.org/TR/accname-1.1/ @hdv

# 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 ↩ @hdv Edge, popup when you inspect element

# data[].attributes.slidedeck.data[].slides[].desc.html
Names all controls: testing @hdv 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

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

# 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 @hdv

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

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Conveys states to assistive tech @hdv

# 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 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how to <input type=checkbox /> Is it checked? Is it disabled? <input type=text disabled /> Is it expanded? <details><summary></details> <div hidden /> Is it hidden? <input type=email> Is it invalid? Is it pressed? <button> Is it selected? <select><option></select> @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Conveys states to assistive tech: how to aria-checked Is it checked? Is it disabled? aria-disabled Is it expanded? aria-expanded aria-hidden Is it hidden? aria-invalid Is it invalid? Is it pressed? aria-pressed Is it selected? aria-selected @hdv Use HTM L if you ca n! Source: https://www.w3.org/TR/wai-aria

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

# data[].attributes.slidedeck.data[].slides[].desc.html
An accessible component… Honours user preferences @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: people People with low vision who use high contrast and/or forced color modes @hdv Source: Understanding WCAG 2.1, “2.1.1 Keyboard”

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: background color, fill, stroke, text-decoration-color, textemphasis-color, border-color, outline-color, column-rule-color, scrollbar-color, -webkit-tabhighlight-color, background-color, caret-color, flood-color, lighting-color, stop-color @hdv https://www.w3.org/TR/css-color-adjust-1/

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: background box-shadow, text-shadow, background-image, color-scheme, scrollbar-color, accent-color @hdv https://www.w3.org/TR/css-color-adjust-1/

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: 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 @hdv https://twitter.com/alastc/status/1125681225828589569

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: how to In SVG, use currentColor for fills and strokes @hdv hidde.blog/2018-12-24-making-single-color-svg-icons-work-in-dark-mode

# data[].attributes.slidedeck.data[].slides[].desc.html
Honours user preferences: how to “web developers can now use new web standards to style their content for forced color modes like Windows high contrast” — Melanie Richards & Alison Maher @hdv https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility Object Model @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “develop additions to the web platform to allow developers to provide information to assistive technology APIs, and to understand what information browsers provide to those APIs” — The AOM explainer document @hdv The Accessibility Object Model (AOM) ・ https://github.com/WICG/aom

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “[AOM] lls the gaps in ARIA (…) is an API to provide your own accessibility (…) lets authors test them from JavaScript” — Domenic Mizzoni, Google @hdv fi What’s new in web accessibility (Google I/O ‘18) ・ https://www.youtube.com/watch?v=wkvslBGkhZY

# data[].attributes.slidedeck.data[].slides[].desc.html
const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Setting semantics without mark-up @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
<my-custom-element role=”button” aria-disabled=”false” … /> Avoids “sprouting” @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Relationships without IDREFs @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage @hdv aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize

# data[].attributes.slidedeck.data[].slides[].desc.html
Events from Assistive Technologies Serious privacy concerns @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
// Implementing a canvas-based // spreadsheet’s semantics canvas.attachAccessibleRoot(); let table = canvas.accessibleRoot .appendChild(new AccessibleNode()); table.role = “table”; table.colCount = 10; table.rowcount = 100; Non-DOM nodes in the Accessibility Tree Will not happen, due to concerns including privacy, may be solved in ARIA let headerRow = table.appendChild( appendChild(new AccessibleNode()) ); @hdv Example from: AOM explainer ・ https://wicg.github.io/aom/ explainer.html#the-accessibility-object-model

# data[].attributes.slidedeck.data[].slides[].desc.html
Reading accessibility tree through JavaScript

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Summary We’ve got to build accessible components It’s the markup that matters Use standards, best practices and user tests Consider keyboard, contrast, names, zoom, states and user preferences @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
THANKS!

# 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