Sneller toegankelijk met herbruikbare front-end componenten - (Accelerating accessibility in a component-based world)

r e l l Sne k j i l e k n a g e to met herbruikbare front-end componenten Hidde de Vries ・ @hdv@front-end.social・ Design Systems Week ・ 15 november 2022, online

Hi, ik ben Hidde. Webontwikkelaar, toegankelijkheidsspecialist, developer relations bij sanity.io Blogger op hidde.blog. @hdv LIKE AND SUBSCRIBE!

Sanity is een platform voor structured content, geoptimaliseerd voor redacteuren en ontwikkelaars @hdv

Wat is toegankelijkheid? @hdv

Toegankelijkheid: zorgen dat je site geen barrières heeft voor mensen met een beperking @hdv

Toegankelijkheid: zorgen dat je dienst geen barrières heeft voor mensen met een beperking @hdv

1 5 op mensen op de wereld heeft een beperking @hdv Bron: WHO World Report on Disability (2011), 44.

Mensen met beperkingen komen op het web barrières tegen, zelfs voor eenvoudige taken als geld overmaken of het maken van een afspraak. Die barrières moeten we weghalen! @hdv

Standaarden (zoals WCAG) + Concrete voorbeelden + Gebruikerstesten (Je hebt ze alledrie nodig) @hdv

Hoe zit het met componenten? @hdv

Lang, lang geleden… @hdv

Componenten hebben veranderd hoe we ontwerpen, bouwen en maken voor het web. @hdv

Herbruikbaarheid is essentieel. Met componenten maken we toegankelijkheid herbruikbaar. @hdv

herhaal geen ontoegankelijke patronen herhaal toegankelijke patronen @hdv

Het framework maakt niet uit. Het gaat om de markup. @hdv

DOM tree htmlparser.info @hdv

Accessibility Tree @hdv

Accessibility Tree Names, roles, states @hdv

Accessibility tree Platform APIs Hulptechnologieën Microsoft Active Accessibility Microsoft User Interface Automation MSAA Mac OS X Accessibility Protocol text-to-speech Linux/Unix Accessibility Toolkit IAccessible2 schermvergroters stembediening alternate pointing devices

Accessibility tree Jouw markup Platform APIs Microsoft Active Accessibility Microsoft User Interface Automation MSAA DOM tree Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 fi alte

Checks voor elk component @hdv

Een toegankelijk component… Werkt zonder muis @hdv

Werkt zonder muis: mensen @hdv Mensen die blind zijn Mensen die slechtziend zijn Mensen met tremors kunnen geen muis gebruiken, vereist oog-hand coördinatie kunnen soms niet goed cursors volgen op het scherm kunnen soms lastig met een muis werken, liever toetsenbord Bron: Understanding WCAG 2.1, “2.1.1 Keyboard”

Werkt zonder muis: testen Is het klikbaar? Dan moet het ook TAB -baar zijn Links, buttons en andere controls @hdv

Werkt zonder muis: testen Is het actieve item gemarkeerd? Overschijf de browser default :focus en maak het veel beter @hdv

Werkt zonder muis: testen Is de volgorde logisch? Zorg voor een logische, bruikbare volgorde van de broncode @hdv Bron: Understanding WCAG 2.1, “2.4.3 Focus Order”

Een toegankelijk component… Heeft genoeg contrast @hdv contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast contrast

Heeft voldoende contrast: mensen Mensen die slechtziend of kleurenblind zijn vinden het vaak lastig om tekst met laag contrast te lezen @hdv Source: Understanding WCAG 2.1, “1.4.3 Contrast”

Heeft voldoende contrast: testen Gebruik een contrastchecker Firefox, Accesssibility Tab element picker ↩ @hdv ↩ in Dev Tools, CI/CD Edge/Chrome, accessibility info als je een element inspecteert

Heeft voldoende contrast: testen whocanuse informatie over hoe goed je kleuren werken met verschillende soorten kleurenblindheid @hdv

Een toegankelijk component… Geeft namen aan alle controls @hdv

Geeft namen aan alle controls: mensen “ “unlabelled links make it much harder to navigate the website easily, quickly and independently” — Holly Tuke, Life of a Blind Girl @hdv

Geeft namen aan alle controls: people @hdv Mensen met fysieke beperkingen Mensen die blind zijn gebruiken soms stemherkenning om hun computer te bedienen en gebruik maken van schermlezers

Geeft namen aan alle controls: hoe Een Zeer Sociaal Netwerk Tell me when you rst used the Web without giving a date. Nog 320 karakters over fi @hdv

Geeft namen aan alle controls: hoe The Very Social Network Tell me when you rst used the Web without giving a date. 320 characters left fi @hdv

Geeft namen aan alle controls: hoe The Very Social Network Tell me when you rst used the Web without giving a date. 320 characters left fi @hdv <button></button>

Geeft namen aan alle controls: hoe The Very Social Network <button></button> <!— Tell me when you rst used the Web without giving a date. Role: button Accessible name: null —> 320 characters left fi @hdv

Geeft namen aan alle controls: hoe (text content) The Very Social Network <button>Send!1</button> <!— Tell me when you rst used the Web without giving a date. Role: button Accessible name: Send!1 —> 320 characters left fi @hdv Send!1

Geeft namen aan alle controls: hoe (text + image alt) The Very Social Network <button>Send!1 <img alt=”airplane” /> </button> Tell me when you rst used the Web without giving a date. <!-Role: button Accessible name: Send!1 airplane —> 320 characters left fi @hdv Send!1

Geeft namen aan alle controls: hoe (image alt) The Very Social Network <button> <img alt=”airplane” /> </button> Tell me when you rst used the Web without giving a date. <!-Role: button Accessible name: airplane —> 320 characters left fi @hdv

Geeft namen aan alle controls: hoe (ARIA, optie 1) The Very Social Network <button aria-label=”Send it!” > Tell me when you rst used the Web without giving a date. <img alt=”airplane” /> </button> <!-Role: button Accessible name: Send it! 320 characters left fi @hdv —>

Geeft namen aan alle controls: hoe (ARIA, optie 2) The Very Social Network <button aria-labelledby=”h” > Tell me when you rst used the Web without giving a date. <img alt=”airplane” /> </button> <span id=”h”>Send!</span> <!-Role: button 320 characters left fi @hdv Accessible name: Send! —>

Geeft namen aan alle controls Je moet ervoor zorgen dat je alle buttons en links in je component bruikbare namen hebben. Gebruik voor formuliervelden een <label>. @hdv

Geeft namen aan alle controls: de beslisboom

1. Text content in control inclusief ::before/::after en alt text
2. aria-label 3. aria-labelledby Zie ook: https://www.w3.org/TR/accname-1.1/ @hdv

Geeft namen aan alle controls: testen 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 als je een element inspecteert

Geeft namen aan alle controls: testen @hdv Is er een naam en wat is die? Is het een nuttige naam? Bekijk de accessibility tree in de browser Functie niet vorm, houd het kort, geen roles

Een toegankelijk component… Werkt met zoom @hdv

Werkt met zoom: mensen Mensen die slechtziend zijn zoomen in zodat ze de content beter kunnen lezen @hdv

Werkt met zoom: testen Probeer naar 400% in te zoomen en check of er niks breekt in je component @hdv Previous image Next image

Een toegankelijk component… @hdv Communiceert states naar assistive tech

Communiceert states naar assistive tech: mensen Mensen die hulptechnologieën gebruiken die bij goed gebruik van ARIA een veel betere ervaring kunnen bieden @hdv

Communiceert states naar assistive tech: hoe <input type=checkbox /> Is het checked? Is het disabled? <input type=text disabled /> Is het expanded?<details><summary></details> Is het hidden? <div hidden /> Is het invalid? <input type=email> Is het pressed? <button> Is het selected? <select><option></select> @hdv

Communiceert states naar assistive tech: hoe aria-checked Is het checked? Is het disabled? aria-disabled Is het expanded?aria-expanded Is het hidden? aria-hidden Is het invalid? aria-invalid Is het pressed? aria-pressed Is het selected? aria-selected @hdv Gebruik HTML als je ku nt! Bron: https://www.w3.org/TR/wai-aria

Communiceert states naar assistive tech: hoe ↩ @hdv Firefox, accessibility tab

Een toegankelijk component… Luistert naar instellingen @hdv

Luistert naar instellingen: mensen Mensen die slechtziend zijn en gebruik maken van hoogcontrastmodus of “forced color modes” @hdv Source: Understanding WCAG 2.1, “2.1.1 Keyboard”

Luistert naar instellingen: achtergrond Preferred color schemes Forced color palettes @hdv https://www.w3.org/TR/css-color-adjust-1/

Luistert naar instellingen: achtergrond 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/

Luistert naar instellingen: achtergrond box-shadow, text-shadow, background-image, color-scheme, scrollbar-color, accent-color @hdv https://www.w3.org/TR/css-color-adjust-1/

Luistert naar instellingen: achtergrond 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

Luistert naar instellingen: hoe Gebruik in SVGs currentColor voor fills en strokes @hdv hidde.blog/2018-12-24-making-single-color-svg-icons-work-in-dark-mode

Luistert naar instellingen: hoe “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/

Samenvatting @hdv

Samenvatting Componenten moeten toegankelijk zijn Het gaat om de markup Combineer standaarden, best practices en gebruikerstesten Test toetsenbord, contrast, namen, zoom, states en gebruikersinstellingen @hdv

BEDANKT! @hdv / talks.hiddedevries.nl