Tilgængelige brugergrænseflade-komponenter til Internettet

For at være tilgængelig skal UI-komponenter arbejde på tværs af flere enheder med forskellige skærmstørrelser og forskellige typer input. Desuden skal komponenter kunne bruges af den bredeste gruppe af brugere, herunder handicappede.

Når man designer for tilgængelighed, er der fire nøgleområder for handicap, man skal overveje: visuel, hørsel, mobilitet og kognition.

Visuelle problemer kan variere fra en manglende evne til at skelne farver til overhovedet ingen vision.

  • Sørg for, at en minimumsgrænse for kontrastforhold overholdes for tekstindhold.
  • Undgå at kommunikere information ved hjælp af udelukkende farve, og sørg for, at al tekst kan ændres til størrelse.
  • Sørg for, at alle brugergrænsefladekomponenter kan bruges med hjælpesteknologier, såsom skærmlæsere, forstørrelsesglas og braille-skærme. Dette indebærer at sikre, at UI-komponenter er markeret, så tilgængeligheds-API'er kan programmatisk bestemme rollen, tilstanden, værdien og titlen på ethvert element.

Høringsproblemer betyder, at en bruger kan have problemer med at høre lyd fra en side.

  • Gør indholdet forståeligt ved hjælp af tekstalternativer til alt indhold, der ikke er strengt tekst.
  • Sørg for at teste, at dine UI-komponenter stadig fungerer uden lyd.

Mobilitetsproblemer kan omfatte manglende evne til at betjene en mus, et tastatur eller berøringsskærm.

  • Gør indholdet af dine UI-komponenter funktionelt tilgængeligt fra et tastatur til alle handlinger, som du ellers ville bruge en mus til.
  • Sørg for, at brugergrænsefladekomponenter er korrekt markeret til hjælpemidler. disse brugere bruger muligvis teknologier såsom stemmestyringssoftware og fysiske switch-kontroller, som har en tendens til at bruge de samme API'er som andre hjælpesteknologier som skærmlæsere.

Kognitive problemer betyder, at en bruger kan have brug for hjælpemidler til at hjælpe dem med at læse tekst, så det er vigtigt at sikre, at der findes tekstalternativer.

  • Undgå en visuel præsentation, der er gentagen eller blinkende, da dette kan medføre nogle brugerproblemer.
  • Undgå interaktioner, der er tidsbaserede.

Dette kan virke som en masse baser at dække, men vi vil gennemgå processen til vurdering og derefter forbedre tilgængeligheden af ​​din UI-komponent.

Er din UI-komponent tilgængelig?

Resume (tl; dr)

Når du reviderer din ansøgning om tilgængelighed, skal du spørge dig selv:

  • Kan du kun bruge din UI-komponent med tastaturet? Klarer det at fokusere og undgå fokusfælder? Kan den svare på de relevante tastaturbegivenheder?
  • Kan du bruge din UI-komponent med en skærmlæser? Har du leveret tekstalternativer til oplysninger, der præsenteres visuelt? Har du tilføjet semantisk information ved hjælp af ARIA?
  • Kan din UI-komponent arbejde uden lyd? Sluk for dine højttalere, og gå igennem dine brugssager.
  • Kan det arbejde uden farve? Sørg for, at din UI-komponent kan bruges af nogen, der ikke kan se farver. Et nyttigt værktøj til at simulere farveblindhed er en Chrome-udvidelse kaldet SEE (prøv alle fire tilgængelige former for fargeblindsimulering). Du er muligvis også interesseret i Daltonize-udvidelsen, som er lignende nyttig.
  • Kan din UI-komponent arbejde med høj kontrasttilstand aktiveret? Alle moderne operativsystemer understøtter en høj kontrasttilstand. Høj kontrast er en tilgængelig Chrome-udvidelse, der kan hjælpe her.

Indfødte kontroller (f.eks. og ) har adgang til indbygget browser. De kan fokuseres ved hjælp af tabulatortasten, reagere på tastaturhændelser (som Enter, mellemrum og piletaster) og har semantiske roller, tilstande og egenskaber, der bruges af tilgængelighedsværktøjer. Standard stylingen skal også opfylde tilgængelighedskravene, der er anført ovenfor.

Brugerdefinerede brugergrænseflade-komponenter (med undtagelse af komponenter, der udvider oprindelige elementer som ) har ikke nogen indbygget funktionalitet, inklusive tilgængelighed, så dette skal leveres af dig. Et godt sted at starte, når du implementerer tilgængelighed, er at sammenligne dine komponenter med et analogt native element (eller en kombination af flere native elementer, afhængigt af hvor kompleks din komponent er).

Følgende er en liste over spørgsmål, du kan stille dig selv, når du prøver at gøre dine UI-komponenter mere tilgængelige.

Kan din UI-komponent bruges med tastaturet alene?

Sørg ideelt for, at al funktionalitet i din UI-komponent kan nås med et tastatur. I løbet af dit UX-design skal du tænke på, hvordan du vil bruge dit element med tastaturet alene, og finde ud af et konsistent sæt tastaturinteraktioner.

For det første skal du sikre dig, at du har et fornuftigt fokusmål for hver komponent. For eksempel kan en kompleks komponent som en menu være et fokusmål på en side, men skal derefter styre fokus i sig selv, så det aktive menupunkt altid tager fokus.

Styring af fokus inden for et komplekst element

Brug af tabindex

Tabindex-attributten gør det muligt at fokusere elementer / UI-komponenter ved hjælp af tastaturet. Brugere af kun tastatur og hjælpemidlerne har brug for at være i stand til at placere tastaturfokus på elementer for at interagere med dem. Indfødte interaktive elementer er implicit fokusable, så de behøver ikke en tabindex-attribut, medmindre vi ønsker at ændre deres placering i fanebladet.

Der er tre typer tabindex-værdier:

  • tabindex = ”0” er den mest almindelige og placerer elementet i fanebladet “naturlig” (defineret af DOM-rækkefølgen).
  • en tabindex-værdi større end 0 vil placere elementet i en manuel fanerekkefølge - alle elementer på siden med en positiv tabindex-værdi besøges i numerisk rækkefølge før elementer i den naturlige fanebestilling.
  • en tabindex-værdi, der er lig med -1, får elementet til at være programmatisk fokuseret, men ikke i fanebladet.

Ved brugertilpassede brugergrænseflade-komponenter skal du altid bruge tabindex-værdier på 0 eller -1, da du ikke vil være i stand til at bestemme rækkefølgen af ​​elementer på en given side forud for tiden - og selvom vi gjorde det, kan de muligvis ændres. En tabindex-værdi på -1 er især nyttig til styring af fokus inden for komplekse komponenter som beskrevet ovenfor.

Sørg også for, at fokus altid er synligt, hvad enten det er ved at tillade standard fokusringstil, eller anvende en markant fokusstil. Husk ikke at fælde tastaturbrugeren - fokus skal kunne flyttes væk fra et element ved kun at bruge tastaturet.

Du er muligvis også interesseret i den roving tabindex eller aria-aktivedescendant tilgang, dækket af på MDN.

Brug af autofokus

HTML-autofokusattributten giver en forfatter mulighed for at specificere, at et bestemt element automatisk skal tage fokus, når siden indlæses. Det understøttes allerede på alle webformkontroller, inklusive . For at autofokusere elementer i dine egne brugerdefinerede brugergrænsefladekomponenter, skal du kalde metoden fokus () understøttet af alle HTML-elementer, der kan fokuseres (f.eks. Document.getElementById ('myButton'). Fokus ()).

Tilføjelse af tastaturinteraktion

Når din UI-komponent er fokuserbar, kan du prøve at give en god historisk tastaturinteraktion, når en komponent er fokuseret, ved at håndtere passende tastaturhændelser - for eksempel give brugeren mulighed for at bruge piletasterne til at vælge menupunkter og mellemrum eller indtaste for at aktivere knapper. ARIA-designmønsterguiden giver nogle vejledninger her.

Endelig skal du sikre dig, at dine tastaturgenveje er synlige. For eksempel er en almindelig praksis at have en tastaturgenvejslegende (tekst på skærmen) for at informere brugeren om, at der findes genveje. For eksempel “Tryk på? til tastaturgenveje ”. Alternativt kan et tip, sådan en værktøjstip bruges til at informere brugeren om den eksisterende genvej.

Betydningen af ​​at styre fokus kan ikke undervurderes. Et eksempel er en navigationsskuffe. Hvis du tilføjer en UI-komponent til siden, er du nødt til at rette fokus til et element inde i det, ellers kan brugere muligvis gå gennem hele siden for at komme dertil. Dette kan være en frustrerende oplevelse, så sørg for at teste fokus for alle navigerbare tastaturkomponenter på din side.

Kan du bruge din UI-komponent med en skærmlæser?

Cirka 1-2% af brugerne bruger en skærmlæser. I slutningen af ​​denne artikel viser vi nogle skærmlæsere, der er gratis at bruge: prøv at bruge din komponent med mindst en af ​​disse skærmlæsere. Kan du bestemme alle vigtige oplysninger og interagere med komponenten ved hjælp af skærmlæser og tastatur alene?

Følgende spørgsmål skal hjælpe dig med at adressere skærmlæserens tilgængelighed:

Har alle komponenter og billeder meningsfulde tekstalternativer?

Uanset hvor information om navnet eller formålet med en interaktiv komponent overføres visuelt, skal der gives et tilgængeligt tekstalternativ.

For eksempel, hvis din UI-komponent kun viser et ikon som f.eks.

Ikon for indstillinger menu

for at indikere, at det er en indstillingsmenu, har det brug for et tilgængeligt tekstalternativ såsom “indstillinger”, der formidler de samme oplysninger. Afhængig af kontekst kan dette bruge en alt-attribut, en aria-label-attribut, en aria-mærket attribut eller almindelig tekst i Shadow DOM. Du kan finde generelle tekniske tip i WebAIM-hurtigreference.

Enhver UI-komponent, der viser et billede, skal tilvejebringe en mekanisme til at tilvejebringe alternativ tekst til dette billede, analogt med alt-attributten.

Leverer dine komponenter semantiske oplysninger?

Hjælpemiddelteknologi formidler semantisk information, der ellers udtrykkes for seende brugere via visuelle signaler såsom formatering, markørstil eller placering. Indfødte elementer har denne semantiske information indbygget i browseren, men til brugerdefinerede komponenter skal du bruge ARIA til at tilføje disse oplysninger i.

Som en tommelfingerregel skal enhver komponent, der lytter til et museklik eller en musepekhændelse, ikke kun have en slags tastaturhændelseslytter, men også en ARIA-rolle og potentielt ARIA-stater og attributter.

For eksempel kan en brugerdefineret UI-komponent tage en ARIA-rolle som skyderen, som har nogle relaterede ARIA-attributter: aria-valuenow, aria-valuemin og aria-valuemax. Ved at binde disse attributter til de relevante egenskaber på din brugerdefinerede komponent, kan du tillade brugere af hjælpemidler at interagere med elementet og ændre dets værdi og endda få den visuelle præsentation af elementet til at ændre sig i overensstemmelse hermed.

En række glider-komponent
 

Kan brugerne forstå alt uden at stole på farve?

Farve bør ikke bruges som det eneste middel til at formidle information, såsom at indikere en status, bede om et svar eller skelne en visuel brugerdefineret komponent. For eksempel, hvis du oprettede en -komponent ved hjælp af farve til at skelne mellem tung, moderat og let trafik, bør et alternativt middel til at skelne trafikniveauer også gøres tilgængeligt: ​​en løsning kan være at holde musepekeren over et element for at få vist oplysninger i en værktøjstip.

Er der tilstrækkelig kontrast mellem teksten / billederne og baggrunden?

Alt tekstindhold, der vises i din komponent, skal opfylde minimum (AA) kontrastlinjen. Overvej at tilbyde et tema med høj kontrast, der opfylder den højere (AAA) bjælke, og sørg også for, at brugeragent-stilark kan anvendes, hvis brugerne har brug for ekstrem kontrast eller forskellige farver. Du kan bruge denne farvekontrastkontrol som hjælpemiddel, når du laver design.

Er det bevægelige eller blinkende indhold i dine komponenter stopbart og sikkert?

Indhold, der bevæger sig, ruller eller blinker, der varer mere end 5 sekunder, skal kunne stoppes, stoppes eller skjules. Generelt skal du prøve at blinke højst tre gange i sekundet.

Værktøj til tilgængelighed

Der er et antal værktøjer til rådighed, der kan hjælpe med fejlfinding af tilgængeligheden af ​​dine visuelle komponenter. Disse inkluderer:

  • øks - automatiseret test af tilgængelighed for dit valg eller den valgte browser
  • Fyrtårns tilgængelighedsrevisioner for Chrome giver nyttige indsigter til at opdage tilgængelighedsproblemer.
Inspektion af indbygget tilgængelighed i DevTools
  • Tenon.io - nyttigt til test af almindelige tilgængelighedsproblemer. Tenon har stærk integrationssupport på tværs af buildværktøjer, browsere (via udvidelser) og endda tekstredigerere.
  • Du kan undersøge, hvordan hjælpeteknologier ser webindhold ved hjælp af Accessibility Inspector (Mac) eller Windows Automation API Testing Tools og AccProbe (Windows). Derudover kan du se det fulde tilgængelighedstræ, som Chrome opretter ved at navigere til chrome: // tilgængelighed.
  • Den bedste måde at teste for understøttelse af skærmlæser på en Mac er at bruge VoiceOver-værktøjet. Du kan bruge ⌘F5 til at aktivere / deaktivere, Ctrl + Option → → for at flytte gennem siden og Ctrl + Shift + Option + ↑ ↓ for at flytte op / ned træ. For den mere detaljerede vejledning, se den fulde liste over VoiceOver-kommandoer og listen over VoiceOver Web-kommandoer.
  • tota11y er en nyttig visualiserer til hjælpemiddelprojekter bygget af Khan Academy. Det er et script, der tilføjer en knap til dit dokument, der udløser flere plugins til at kommentere ting som utilstrækkeligt kontrastforhold og andre krænkelser på 11 år
  • ally.js (af Rodney Rehm) er et bibliotek, der forsøger at forenkle at tilføje et par tilgængelighedsfunktioner til din app. Det hjælper med at forespørge DOM for alle elementer, der kan fokuseres eller kan tabelleres, fælder fokus til specifikke DOM-under træer, hjælper med at bestemme, hvordan fokus er ændret og kommer med flere andre hjælpere.
  • På Windows er NVDA en gratis open source skærmlæser, der er fuldt udstyret og hurtigt vinder i popularitet. Bemærk dog, at det har en meget stejlere læringskurve for seende brugere end VoiceOver.
  • ChromeLens hjælper med at udvikle sig til svaksynede. Det har også stor støtte til visualisering af tastaturnavigeringsstier http://chromelens.xyz/
ChromeLens DevTools-udvidelse med flere indstillinger til emulering af forskellige former for blindhed, fanebladsporing og tilgængelighedsrevision.
  • ChromeVox er en skærmlæser, der er tilgængelig som en Chrome-udvidelse og indbygget på ChromeOS-enheder.

Bemærk: Stor tak til Alice Boxhall og Rob Dodson for at hjælpe med artiklen.

PS: Hvis du er interesseret i at lære mere, kan du lære om grundlæggende tilgængelighed på dette gratis Udacity-kursus https://bit.ly/web-a11y