Toegankelijkheidsreferentie

deze pagina is een uitgebreide referentie van toegankelijkheidsfuncties in Chrome DevTools.It is bedoeld voor webontwikkelaars die:

• heb een basiskennis van DevTools, zoals hoe het te openen.
• vertrouwd zijn met toegankelijkheidsbeginselen en beste praktijken.

het doel van deze referentie is om u te helpen alle beschikbare inDevTools te ontdekken die u kunnen helpen de toegankelijkheid van een pagina te onderzoeken.

zie navigeren met Chrome DevTools met ondersteunende technologie als u hulp zoekt bij het navigeren met DevTools met een ondersteunende technologie zoals een schermlezer.

overzicht van toegankelijkheidsfuncties in Chrome DevTools

in deze sectie wordt uitgelegd hoe DevTools past in uw algemene toegankelijkheidstoolkit.

om te bepalen of een pagina toegankelijk is, moet u 2 algemene vragen in gedachten hebben:

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

in het algemeen kan DevTools u helpen bij het oplossen van fouten gerelateerd aan vraag #2, omdat deze fouten gemakkelijk geautomatiseerd te detecteren zijn. Vraag # 1 is net zo belangrijk, maar DevToolscan je daar helaas niet bij helpen. De enige manier om fouten met betrekking tot Vraag #1 te vinden is door zelf een pagina te gebruiken met een toetsenbord of schermlezer. Zie hoe u een Toegankelijkheidsbeoordeling uitvoert voor meer informatie.

controleer de toegankelijkheid van een pagina

in het algemeen, gebruik het Auditpanel om te bepalen of:

• een pagina is correct gemarkeerd voor schermlezers.
• de tekstelementen op een pagina hebben voldoende contrastverhoudingen. Zie ook Bekijk de contrastverhouding van een tekstelement in de kleurenkiezer.

om een pagina te controleren:

1. Ga naar de URL die u wilt controleren.

2. Klik in DevTools op het tabblad Audits. DevTools toont u verschillende configuratieopties.

   

3. voor apparaat selecteert u mobiel als u een mobiel apparaat wilt simuleren. Deze optie wijzigt verschillend uw user agent string en de grootte van de viewport. Als de mobiele versie van de pagina anders wordt weergegeven dan de desktopversie, kan deze optie een significant effect hebben op de resultaten van uw audit.

4. Controleer In het gedeelte Audits of toegankelijkheid is ingeschakeld. Schakel de andere categorieën uit als u ze wilt uitsluiten van uw rapport. Laat ze ingeschakeld als u wilt ontdekken andere manieren om de kwaliteit van uw pagina te verbeteren.

5. de Throttling sectie kunt u throttle het netwerk en de CPU, wat handig is bij het analyseren van de prestaties. Deze optie zou irrelevant moeten zijn voor je toegankelijkheidsscore, zodat je kunt gebruiken wat je maar wilt.

6. met het selectievakje opslag wissen kunt u ALLE opslagruimte wissen voordat u de pagina laadt, of opslagruimte Bewaren tussen paginaladen. Deze optie is waarschijnlijk ook niet relevant voor je toegankelijkheidsscore,dus je kunt gebruiken wat je wilt.

7. Klik Op Audits Uitvoeren. 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.

   

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

   

9. klik op Meer informatie om de documentatie van die controle weer te geven.

   

zie ook: aXe extension

u kunt de voorkeur geven aan de aXe extension in plaats van het Audit panel.Ze geven over het algemeen dezelfde informatie, omdat aXe de onderliggende motor is die het controlepaneel aandrijft. De aXe extensie heeft een andere gebruikersinterface en beschrijft audits iets anders.Een voordeel dat de aXe extensie heeft ten opzichte van de audit paneel is dat het laat u inspecteren enhighlight falende knooppunten.

Het toegankelijkheidsdeelvenster

het toegankelijkheidsdeelvenster is waar u de toegankelijkheidsstructuur, ARIA-attributen en berekende toegankelijkheidseigenschappen van DOM-knooppunten kunt bekijken.

om het toegankelijkheidsvenster te openen:

1. klik op het tabblad elementen.
2. selecteer in de Dom-boom het element dat u wilt inspecteren.
3. klik op het tabblad toegankelijkheid. Dit tabblad kan verborgen zijn achter de knop meer tabbladen.

de positie van een element weergeven in de toegankelijkheidsstructuur

de toegankelijkheidsstructuur is een subset van de DOM-structuur. Het bevat alleen elementen uit de Dom-boom die relevant en nuttig zijn voor het weergeven van de inhoud van de pagina in een schermlezer.

de positie van een element in de toegankelijkheidsstructuur inspecteren vanuit het Toegankelijkheidsvenster.

bekijk de ARIA-attributen van een element

ARIA-attributen zorgen ervoor dat schermlezers alle informatie hebben die ze nodig hebben om de inhoud van een pagina correct weer te geven.

de ARIA-attributen van een element weergeven in het deelvenster Toegankelijkheid.

bekijk de berekende toegankelijkheidseigenschappen van een element

sommige toegankelijkheidseigenschappen worden dynamisch berekend door de browser. Deze eigenschappen kunnen worden bekeken in het gedeelte berekende eigenschappen van het deelvenster Toegankelijkheid.

de berekende toegankelijkheidseigenschappen van een element weergeven in het Toegankelijkheidsvenster.

Toon de contrastverhouding van een tekstelement in de kleurenkiezer

sommige mensen met slecht zicht zien gebieden niet als zeer helder of zeer donker. Alles lijkt op ongeveer dezelfde helderheid te verschijnen, waardoor het moeilijk is om contouren en randen te onderscheiden.De contrastverhouding meet het verschil in helderheid tussen de voorgrond en de achtergrond van de tekst. Als uw tekst een lage contrastverhouding heeft, kunnen deze gebruikers met weinig zicht uw site literair ervaren als een leeg scherm.

de kleurenkiezer kan u helpen ervoor te zorgen dat uw tekst voldoet aan de aanbevolen contrastwaarden:

1. klik op het tabblad elementen.

2. selecteer in de Dom-boom het tekstelement dat u wilt inspecteren.

   

3. klik in het deelvenster Stijlen op het kleurenvierkant naast de waarde color van het element.

   

4. controleer het gedeelte contrastverhouding van de Kleurkiezer. Een vinkje betekent dat het element voldoet aan de minimumaanbeveling.Twee vinkjes betekent dat het voldoet aan de verbeterde aanbeveling.

   

5. klik op het gedeelte contrastverhouding voor meer informatie. Er verschijnt een regel in de visualpicker bovenaan de kleurenkiezer. Als de huidige kleur voldoet aan aanbevelingen, danalthing aan dezelfde kant van de lijn voldoet ook aan aanbevelingen. Als de huidige kleur niet aan aanbevelingen voldoet, voldoet iets aan dezelfde kant ook niet aan aanbevelingen.

   

Feedback