Deze pagina is een uitgebreid overzicht van de toegankelijkheidsfuncties in Chrome DevTools. Het is bedoeld voor webontwikkelaars die:
- Zorg voor een basiskennis van DevTools, zoals hoe u het kunt openen.
- Bent bekend met toegankelijkheidsprincipes en best practices .
Het doel van deze referentie is om u te helpen alle tools te ontdekken die beschikbaar zijn in DevTools en waarmee u de toegankelijkheid van een pagina kunt onderzoeken.
Zie Navigeren door Chrome DevTools met ondersteunende technologie als u hulp zoekt bij het navigeren door 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 in uw algehele toegankelijkheidstoolkit past.
Bij het bepalen of een pagina toegankelijk is, moet u twee algemene vragen in gedachten houden:
- Kan ik door de pagina navigeren met een toetsenbord of schermlezer ?
- Zijn de elementen van de pagina correct gemarkeerd voor schermlezers?
Over het algemeen kan DevTools u helpen bij het oplossen van fouten die verband houden met vraag nr. 2, omdat deze fouten eenvoudig op geautomatiseerde wijze kunnen worden gedetecteerd. Vraag #1 is net zo belangrijk, maar helaas kan DevTools je daar niet helpen. De enige manier om fouten met betrekking tot vraag #1 te vinden, is door zelf een pagina met een toetsenbord of schermlezer te gebruiken. Zie Een toegankelijkheidsbeoordeling uitvoeren voor meer informatie.
Controleer de toegankelijkheid van een pagina
Over het algemeen gebruikt u de toegankelijkheidscontroles onder het Lighthouse -paneel om te bepalen of:
- Een pagina is correct gemarkeerd voor schermlezers.
- De tekstelementen op een pagina hebben voldoende contrastverhoudingen. Zie ook Maak uw website beter leesbaar .
Een pagina controleren:
- Ga naar de URL die u wilt controleren.
Klik in DevTools op het Lighthouse -paneel. DevTools toont u verschillende configuratieopties.
Selecteer bij Apparaat Mobiel als u een mobiel apparaat wilt simuleren. Deze optie wijzigt de tekenreeks van uw user-agent op een andere manier en past de grootte van de viewport aan. Als de mobiele versie van de pagina anders wordt weergegeven dan de desktopversie, kan deze optie een aanzienlijk effect hebben op de resultaten van uw audit.
Zorg ervoor dat in het gedeelte Vuurtoren 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.
In het gedeelte Throttling kunt u het netwerk en de CPU beperken, wat handig is bij het analyseren van de belastingsprestaties. Deze optie zou niet relevant moeten zijn voor uw toegankelijkheidsscore, dus u kunt gebruiken wat u maar wilt.
Met het selectievakje Opslag wissen kunt u alle opslagruimte wissen voordat u de pagina laadt, of de opslagruimte vrijhouden tussen het laden van pagina's. Deze optie is waarschijnlijk ook niet relevant voor uw toegankelijkheidsscore, dus u kunt gebruiken wat u maar wilt.
Klik op Rapport genereren . Na 10 tot 30 seconden geeft DevTools een rapport. Uw rapport geeft u verschillende tips over hoe u de toegankelijkheid van de pagina kunt verbeteren.
Klik op een audit voor meer informatie.
Klik op Meer informatie om de documentatie van die audit te bekijken.
Zie ook: bijlverlenging
Misschien geeft u er de voorkeur aan om de bijlverlenging of Lighthouse-extensie te gebruiken in plaats van het Lighthouse- paneel dat standaard beschikbaar is in Chrome. Ze bieden over het algemeen dezelfde informatie, aangezien Axe de onderliggende motor is die het Lighthouse- paneel aandrijft. De ax-extensie heeft een andere gebruikersinterface en beschrijft audits iets anders.
Een voordeel van de ax-extensie ten opzichte van het paneel Audits is dat u falende knooppunten kunt inspecteren en markeren
Het tabblad Toegankelijkheid
Op het tabblad Toegankelijkheid kunt u de toegankelijkheidsstructuur, ARIA-attributen en berekende toegankelijkheidseigenschappen van DOM-knooppunten bekijken.
Het tabblad Toegankelijkheid openen:
- Klik op het paneel Elementen .
- Selecteer in de DOM-structuur het element dat u wilt inspecteren.
- Klik op het tabblad Toegankelijkheid . Dit tabblad is mogelijk verborgen achter de knop Meer tabbladen keyboard_double_arrow_right .
U kunt het tabblad Toegankelijkheid naar voren slepen voor snellere toegang in de toekomst.
Bekijk de positie van een element in de toegankelijkheidsboom
De toegankelijkheidsboom is een subset van de DOM-boom. Het bevat alleen elementen uit de DOM-structuur die relevant en nuttig zijn voor het weergeven van de inhoud van de pagina in een schermlezer.
Inspecteer de positie van een element in de toegankelijkheidsstructuur vanaf het tabblad Toegankelijkheid .
Met deze weergave kunt u slechts één knooppunt en zijn voorouders verkennen. Volg de onderstaande stappen om de hele toegankelijkheidsboom te verkennen.
(Voorbeeld) Verken de toegankelijkheidsstructuur van de volledige pagina
Met de volledige paginaweergave van de toegankelijkheidsstructuur kunt u de hele structuur verkennen en krijgt u een beter inzicht in de manier waarop uw webinhoud wordt blootgesteld aan ondersteunende technologie.
De toegankelijkheidsstructuur verkennen:
- Wetenschap controleren Toegankelijkheidsboom op volledige pagina inschakelen .
Klik op de actiebalk bovenaan op DevTools opnieuw laden .
In de rechterbovenhoek van het Elementenpaneel schakelt u de knop toegankelijkheid_new Schakelen naar toegankelijkheidsstructuurweergave in.
Blader door de toegankelijkheidsboom. U kunt knooppunten uitvouwen of klikken om details te zien onder Berekende eigenschappen .
Selecteer een knooppunt en klik op de knop toegankelijkheid_nieuw Overschakelen naar DOM-structuurweergave om terug te schakelen naar de DOM-structuur.
Het corresponderende DOM-knooppunt is nu geselecteerd. Dit is een goede manier om de mapping tussen het DOM-knooppunt en het toegankelijkheidsboomknooppunt te begrijpen.
Bekijk de ARIA-attributen van een element
ARIA-kenmerken zorgen ervoor dat schermlezers over alle informatie beschikken die ze nodig hebben om de inhoud van een pagina correct weer te geven.
Bekijk de ARIA-attributen van een element op het tabblad Toegankelijkheid .
Bekijk de bronvolgorde van elementen op het scherm
De elementen op de pagina verschijnen niet altijd in de volgorde waarin ze in de bron staan. Dit kan gebruikers in verwarring brengen die afhankelijk zijn van ondersteunende technologie om op internet te navigeren.
De bronvolgorde op uw website bekijken en fouten opsporen:
- Inspecteer een element op de pagina.
- In Elementen > Toegankelijkheid > Bronvolgordeviewer vinkt u het selectievakje Bronvolgorde weergeven aan.
In de viewport schetst DevTools geneste elementen met randen en markeert ze met nummers die overeenkomen met hun bronvolgorde.
Bekijk de berekende toegankelijkheidseigenschappen van een element
Sommige toegankelijkheidseigenschappen worden dynamisch berekend door de browser. Deze eigenschappen kunnen worden bekeken in de sectie Berekende eigenschappen van het tabblad Toegankelijkheid .
Bekijk de berekende toegankelijkheidseigenschappen van een element op het tabblad Toegankelijkheid .
Ontdek en corrigeer tekst met laag contrast
DevTools kan automatisch problemen met een laag contrast vinden en betere kleuren voorstellen om u te helpen deze op te lossen. Zie Uw website leesbaarder maken voor meer informatie.