Naslaginformatie over toegankelijkheidsfuncties

Kayce Basques

Sofia Emelianova

Deze pagina is een uitgebreid naslagwerk over toegankelijkheidsfuncties in Chrome DevTools. Het is bedoeld voor webontwikkelaars die:

• Zorg dat je een basiskennis hebt van DevTools, bijvoorbeeld hoe je het opent.
• Zijn bekend met toegankelijkheidsprincipes en best practices .

Het doel van deze handleiding is om u te helpen alle beschikbare tools in DevTools te ontdekken waarmee u de toegankelijkheid van een pagina kunt controleren.

Raadpleeg Navigeren in Chrome DevTools met ondersteunende technologie als u hulp nodig hebt bij het navigeren in DevTools met ondersteunende technologie, zoals een schermlezer.

Zie Toegankelijkheid leren als u wilt leren hoe u toegankelijke websites kunt ontwikkelen.

Overzicht van toegankelijkheidsfuncties in Chrome DevTools

In dit gedeelte wordt uitgelegd hoe DevTools past in uw algehele toolkit voor toegankelijkheid.

Bij het bepalen of een pagina toegankelijk is, moet je twee algemene vragen in gedachten houden:

1. Kan ik de pagina bedienen met een toetsenbord of schermlezer ?
2. Zijn de elementen van de pagina correct opgemaakt voor schermlezers?

Over het algemeen kan DevTools u helpen bij het oplossen van fouten die betrekking hebben op vraag 2, omdat deze fouten gemakkelijk automatisch te detecteren zijn. Vraag 1 is net zo belangrijk, maar helaas kan DevTools u daar niet bij helpen. De enige manier om fouten te vinden die betrekking hebben op vraag 1 is door zelf een pagina te gebruiken met een toetsenbord of schermlezer. Zie Hoe een toegankelijkheidscontrole uit te voeren voor meer informatie.

Controleer de toegankelijkheid van een pagina

Gebruik in het algemeen de toegankelijkheidscontroles in het Lighthouse- paneel om te bepalen of:

• Een pagina is correct opgemaakt voor schermlezers.
• De tekstelementen op een pagina hebben voldoende contrastverhoudingen. Zie ook Uw website beter leesbaar maken .

Om een ​​pagina te controleren:

1. Ga naar de URL die u wilt controleren.

2. Klik in DevTools op het Lighthouse- paneel. DevTools toont u verschillende configuratieopties.

   

   Opmerking: De schermafbeeldingen in dit gedeelte zijn gemaakt met Chrome 69. In de schermafbeeldingen heet het paneel nog steeds Audits , maar in Chrome 83 is de naam gewijzigd naar Lighthouse. U kunt controleren welke versie u gebruikt op chrome://version . De gebruikersinterface van het Audits- paneel kan er in sommige eerdere of latere versies van Chrome anders uitzien, maar de algemene workflow is hetzelfde.

3. Selecteer bij Apparaat de optie Mobiel als u een mobiel apparaat wilt simuleren. Deze optie wijzigt uw user agent-string en past de grootte van de viewport aan. Als de mobiele versie van de pagina er anders uitziet dan de desktopversie, kan deze optie een aanzienlijk effect hebben op de resultaten van uw audit.

4. Zorg ervoor dat in het Lighthouse- gedeelte de optie Toegankelijkheid is ingeschakeld. Schakel de andere categorieën uit als u deze wilt uitsluiten van uw rapport. Laat ze ingeschakeld als u andere manieren wilt ontdekken om de kwaliteit van uw pagina te verbeteren.

5. Met de optie 'Throttling ' kunt u het netwerk- en CPU-gebruik beperken, wat handig is bij het analyseren van de prestaties onder belasting. Deze optie is niet relevant voor uw toegankelijkheidsscore, dus u kunt gebruiken wat u zelf wilt.

6. Met het selectievakje 'Opslag wissen' kunt u alle opslag wissen voordat de pagina wordt geladen, of de opslag behouden tussen paginaweergaven. Deze optie is waarschijnlijk niet relevant voor uw toegankelijkheidsscore, dus u kunt gebruiken wat u zelf prettiger vindt.

7. Klik op Rapport genereren . Na 10 tot 30 seconden genereert DevTools een rapport. Dit rapport bevat diverse tips om de toegankelijkheid van de pagina te verbeteren.

   

8. Klik op een audit om er meer over te weten te komen.

   

9. Klik op Meer informatie om de documentatie van die audit te bekijken.

   

Zie ook: aXe-extensie

U kunt er de voorkeur aan geven om de aXe-extensie of de Lighthouse-extensie te gebruiken in plaats van het Lighthouse -paneel dat standaard in Chrome beschikbaar is. Ze bieden over het algemeen dezelfde informatie, aangezien aXe de onderliggende engine is die het Lighthouse- paneel aandrijft. De aXe-extensie heeft een andere gebruikersinterface en beschrijft audits op een iets andere manier.

Een voordeel van de aXe-extensie ten opzichte van het Audits- paneel is dat u hiermee defecte knooppunten kunt inspecteren en markeren.

Test de inhoudsweergave met de apparaatwerkbalk.

De WCAG-richtlijnen (Web Content Accessibility Guidelines) bevelen aan dat webinhoud zichtbaar blijft zonder informatieverlies, zelfs wanneer het weergavegebied wordt aangepast of de oriëntatie verandert. Door de inhoud in één kolom uit te lijnen, worden gebruikers die vergrote tekst gebruiken ondersteund. Om te testen hoe uw inhoud zich aanpast aan de nieuwe weergave, kunt u het weergavegebied dynamisch aanpassen met de werkbalk 'Apparaat' in het Lighthouse- paneel.

Om de viewport te vergroten of verkleinen, sleept u de handgrepen naar de gewenste afmetingen. Voor de specifieke afmetingen die u kunt testen, raadpleegt u het WCAG-criterium voor succesvolle herindeling .

Het tabblad Toegankelijkheid

Op het tabblad Toegankelijkheid kunt u de toegankelijkheidsstructuur, ARIA-attributen en berekende toegankelijkheidseigenschappen van DOM-elementen bekijken.

Om het tabblad Toegankelijkheid te openen:

1. Klik op het paneel Elementen .
2. Selecteer in de DOM-structuur het element dat u wilt inspecteren.
3. Klik op het tabblad Toegankelijkheid . Dit tabblad is mogelijk verborgen achter de knop Meer tabbladen (keyboard_double_arrow_right) .

Je kunt het tabblad Toegankelijkheid naar voren slepen voor snellere toegang in de toekomst.

Bekijk de positie van een element in de toegankelijkheidsstructuur.

De toegankelijkheidsboom is een subset van de DOM-boom. Deze bevat alleen elementen uit de DOM-boom die relevant en nuttig zijn voor het weergeven van de pagina-inhoud in een schermlezer.

Om de positie van een element in de toegankelijkheidsstructuur te controleren via het tabblad Toegankelijkheid , schakelt u Toegankelijkheidsstructuur weergeven in of uit.

Met deze schakelaar wordt de DOM-structuur in het paneel Elementen vervangen door een toegankelijkheidsstructuur voor de volledige pagina. Deze structuur helpt u beter te begrijpen hoe uw webinhoud wordt weergegeven voor ondersteunende technologie.

Om de toegankelijkheidsstructuur te bekijken, kunt u knooppunten uitvouwen en selecteren om hun details onder 'Berekende eigenschappen' te zien.

Je kunt op elk gewenst moment terugschakelen naar de DOM-structuur. Het bijbehorende DOM-knooppunt blijft geselecteerd. Dit is een uitstekende manier om de relatie tussen het DOM-knooppunt en het bijbehorende knooppunt in de toegankelijkheidsstructuur te begrijpen.

Bekijk de ARIA-attributen van een element.

ARIA-attributen zorgen ervoor dat schermlezers over alle benodigde informatie beschikken om de inhoud van een pagina correct weer te geven.

Bekijk de ARIA-attributen van een element in het tabblad Toegankelijkheid .

Bekijk de bronvolgorde van de elementen op het scherm.

De elementen op de pagina verschijnen niet altijd in dezelfde volgorde als in de broncode. Dit kan verwarrend zijn voor gebruikers die afhankelijk zijn van ondersteunende technologie om op het web te navigeren.

Om de broncodevolgorde op uw website te bekijken en te debuggen:

1. Inspecteer een element op de pagina.
2. Ga naar Elementen > Toegankelijkheid > Bronvolgordeweergave en vink het selectievakje 'Bronvolgorde weergeven' aan.

In de viewport omlijnt DevTools geneste elementen met randen en markeert ze met nummers die overeenkomen met hun volgorde in de broncode.

Bekijk de berekende toegankelijkheidseigenschappen van een element.

Opmerking: Als u op zoek bent naar berekende CSS-eigenschappen, raadpleeg dan het tabblad 'Berekend'.

Sommige toegankelijkheidseigenschappen worden dynamisch door de browser berekend. Deze eigenschappen kunt u bekijken in het gedeelte 'Berekende eigenschappen' van het tabblad 'Toegankelijkheid '.

Bekijk de berekende toegankelijkheidseigenschappen van een element op het tabblad Toegankelijkheid .

Het tabblad Weergave

Gebruik het tabblad 'Rendering' om bepaalde CSS-mediafuncties te emuleren zonder deze handmatig in uw code of testomgeving te hoeven specificeren. Deze mediafuncties wijzigen het uiterlijk van uw webpagina op basis van de apparaatvoorkeuren van de gebruiker. Om de visuele toegankelijkheid van uw pagina te testen, opent u het tabblad 'Rendering' en verkent u de volgende opties:

• Simuleer visuele beperkingen om uw pagina te bekijken met verschillende gesimuleerde visuele beperkingen.
• Gebruik de CSS-mediafunctie prefers-color-scheme om te zien hoe uw pagina eruitziet met de donkere of lichte modus ingeschakeld. Veel mensen beschouwen de donkere modus als een esthetische keuze, maar de donkere modus als hulpmiddel voor toegankelijkheid bewijst dat deze ook op andere manieren nuttig kan zijn.
• Emuleer het CSS-mediatype om uw pagina in een print- of schermstijl weer te geven.
• Gebruik de CSS-mediafunctie forced-colors om te zien hoe uw pagina eruitziet als de user agent de modus voor geforceerde kleuren heeft ingeschakeld.
• Gebruik de CSS-mediafunctie prefers-contrast om uw webinhoud met een hogere, lagere of specifieke contrastwaarde weer te geven.
• Emuleer de CSS-mediafunctie prefers-reduced-motion om uw webinhoud met minder beweging weer te geven. Sommige gebruikers ervaren afleiding of misselijkheid door geanimeerde inhoud. Gebruik deze optie om te zien hoe uw pagina eruitziet zonder animaties of functies zoals soepel scrollen.
• Gebruik de CSS-mediafunctie prefers-reduced-transparency om te zien hoe uw webinhoud eruitziet als de gebruiker de transparantie- of doorschijnende laageffecten van het apparaat wil verminderen.

Tekst met een laag contrast opsporen en corrigeren

DevTools kan automatisch problemen met een laag contrast opsporen en betere kleuren voorstellen om deze te verhelpen. Zie ' Maak uw website beter leesbaar' voor meer informatie.