Accelerating accessibility in a component-based world

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

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!

What is accessibility? @hdv

Accessibility: to ensure people with disabilities can use your website. @hdv

Accessibility: to ensure people with disabilities can buy your products. @hdv

Accessibility: to ensure people with disabilities can complete all steps. @hdv

Accessibility: to ensure people with disabilities can use your service. @hdv

1 5 in people on the planet are disabled @hdv Data source: WHO World Report on Disability (2011), 44.

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

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

Let’s talk components @hdv

Once upon a time… @hdv

Components changed how we design, develop and create for the web. @hdv

Reusability is key. With components, we can make some accessibility reusable. @hdv

don’t repeat inaccessible patterns repeat accessible patterns @hdv

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

DOM tree htmlparser.info @hdv

Accessibility Tree @hdv

Accessibility Tree Names, roles, states @hdv

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

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

Some checks for each component @hdv

An accessible component… Works without mouse @hdv

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”

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

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

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”

An accessible component… Has suf cient contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast fi @hdv

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”

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

Has suf cient contrast: testing whocanuse information about how well your colours work with common vision types fi @hdv

An accessible component… Names all controls @hdv

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

Names all controls: people @hdv 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 rst used the Web without giving a date. 320 characters left fi @hdv

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

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>

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

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

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 —>

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

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

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

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

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

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

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

An accessible component… Allows for zoom @hdv

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

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

An accessible component… Conveys states to assistive tech @hdv

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

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

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

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

An accessible component… Honours user preferences @hdv

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”

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

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/

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/

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

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

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/

Accessibility Object Model @hdv

“ “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

“ “[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

const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Setting semantics without mark-up @hdv

<my-custom-element role=”button” aria-disabled=”false” … /> Avoids “sprouting” @hdv

Relationships without IDREFs @hdv

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

Events from Assistive Technologies Serious privacy concerns @hdv

// 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

Reading accessibility tree through JavaScript

Summary @hdv

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

THANKS!