Sneller toegankelijk met herbruikbare front-end componenten - (Accelerating accessibility in a component-based world)
A presentation at Design Systems Week - Gebruikers Centraal by Hidde de Vries
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
- Text content in control inclusief ::before/::after en alt text
- 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
Componenten zijn een revolutie gebleken voor onze manier van werken, omdat het wiel uitvinden nu nog meer één keer hoeft. Met een succesvolle aanpak scheelt het teams veel tijd. Samenwerken aan componenten maakt ook mogelijk een positieve impact te hebben op toegankelijkheid. Deze presentatie verkent praktische strategieën om toegankelijke componenten te maken, zodat meer mensen je digitale dienstverlening goed kunnen gebruiken.
