Naslaginformatie over toegankelijkheidsfuncties

Sofia Emelianova
Sofia Emelianova

Deze pagina is een uitgebreid overzicht van de toegankelijkheidsfuncties in Chrome DevTools. Het is bedoeld voor webontwikkelaars die:

Het doel van deze naslag 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:

  1. Kan ik door de pagina navigeren met een toetsenbord of schermlezer ?
  2. Zijn de elementen van de pagina correct gemarkeerd voor schermlezers?

Over het algemeen kan DevTools u helpen bij het oplossen van fouten met betrekking tot 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:

  1. Ga naar de URL die u wilt controleren.
  2. Klik in DevTools op het Lighthouse -paneel. DevTools toont u verschillende configuratieopties.

    Een toegankelijkheidsscan configureren in het Lighthouse-paneel.

  3. Selecteer bij Apparaat Mobiel als u een mobiel apparaat wilt simuleren. Deze optie verandert 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.

  4. 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.

  5. 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.

  6. Met het selectievakje Opslag wissen kunt u alle opslagruimte wissen voordat u de pagina laadt, of de opslagruimte behouden tussen het laden van pagina's. Deze optie is waarschijnlijk ook niet relevant voor uw toegankelijkheidsscore, dus u kunt gebruiken wat u maar wilt.

  7. Klik op Rapport genereren . Na 10 tot 30 seconden levert DevTools een rapport. In uw rapport vindt u diverse tips over hoe u de toegankelijkheid van de pagina kunt verbeteren.

    Een rapport.

  8. Klik op een audit voor meer informatie.

    Meer informatie over een audit.

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

    Documentatie van een audit 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.

De bijlverlenging.

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

Test het opnieuw plaatsen van inhoud met de Apparaatwerkbalk

Het reflow-criterium van de Web Content Accessibility Guidelines (WCAG) beveelt aan dat webcontent zichtbaar blijft zonder verlies van informatie, zelfs als het formaat van de viewport wordt gewijzigd of de richting verandert. Door inhoud uit te lijnen op één enkele kolom worden gebruikers die vergrote tekst gebruiken ondersteund. Als u wilt testen hoe uw inhoud opnieuw wordt geplaatst, wijzigt u het formaat van de viewport dynamisch met de apparaatwerkbalk in het Lighthouse -paneel.

Apparaatwerkbalk in het Lighthouse-paneel.

Om het formaat van het venster te wijzigen, sleept u de handvatten naar de gewenste afmetingen. Zie het WCAG-succescriterium voor het opnieuw plaatsen van de specifieke dimensies die u wilt testen.

Het tabblad Toegankelijkheid

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

Het tabblad Toegankelijkheid 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 .

Een h1-element van de DevTools-startpagina inspecteren op het tabblad Toegankelijkheid.

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 .

Het gedeelte Toegankelijkheidsboom.

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 toegankelijkheidsboom verkennen:

  1. Wetenschap controleren Toegankelijkheidsboom op volledige pagina inschakelen .
  2. Klik op de actiebalk bovenaan op DevTools opnieuw laden .

    Schakel de toegankelijkheidsstructuur van de volledige pagina in.

  3. In de rechterbovenhoek van het Elementenpaneel schakelt u de knop toegankelijkheid_new Schakelen naar toegankelijkheidsstructuurweergave in.

    Volledige paginaweergave van de toegankelijkheidsstructuur

  4. Blader door de toegankelijkheidsboom. U kunt knooppunten uitvouwen of klikken om details te zien onder Berekende eigenschappen .

  5. 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 .

De sectie ARIA-attributen.

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:

  1. Inspecteer een element op de pagina.
  2. 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.

Bronvolgorde-optie aangevinkt.

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 .

Het gedeelte Berekende eigenschappen (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.