Navigeer door Chrome DevTools met ondersteunende technologie

Rob Dodson

Deze handleiding is bedoeld om gebruikers die voornamelijk afhankelijk zijn van ondersteunende technologie zoals schermlezers te helpen bij het openen en gebruiken van Chrome DevTools . Chrome DevTools is een reeks tools voor webontwikkelaars die zijn ingebouwd in de Google Chrome-browser. Raadpleeg de Toegankelijkheidsreferentie als u op zoek bent naar DevTools-functies die de toegankelijkheid van een webpagina kunnen verbeteren.

De toegankelijkheid van DevTools is nog in ontwikkeling. Sommige panelen en tabbladen werken beter met ondersteunende technologie dan andere. Deze handleiding leidt je door de panelen die het meest toegankelijk zijn en belicht specifieke problemen die je onderweg kunt tegenkomen.

Overzicht

Voordat u begint, is het handig om een ​​mentaal model te hebben van hoe de DevTools-gebruikersinterface is gestructureerd. DevTools is verdeeld in een reeks panelen die zijn georganiseerd in een ARIA- tablist . Bijvoorbeeld:

• Met het Elementenpaneel kunt u DOM-knooppunten of CSS bekijken en wijzigen.
• Via het consolepaneel kunt u JavaScript-logs lezen en objecten live bewerken.

Binnen het inhoudsgebied van elk paneel bevinden zich een aantal verschillende tools, die in de documentatie vaak tabbladen of deelvensters worden genoemd. Zo bevat het Elementenpaneel extra tabbladen om event listeners, de toegankelijkheidsboom en nog veel meer te bekijken. Het onderscheid tussen tabbladen en deelvensters is enigszins willekeurig. De enige reden waarom u de ene of de andere term tegenkomt, is om consistentie met de rest van de officiële DevTools-documentatie te behouden.

Sneltoetsen

De DevTools-sneltoetsenhandleiding is een handige spiekbrief. Sla hem op in je favorieten en raadpleeg hem regelmatig terwijl je de verschillende panelen verkent.

Open DevTools

Lees om te beginnen Chrome DevTools openen . Er zijn verschillende manieren om DevTools te openen, via sneltoetsen of menu-items.

Navigeren tussen panelen

Navigeren via toetsenbord

• Open DevTools en druk op Control + ] of Command + ] (Mac) om de focus naar het volgende paneel te verplaatsen.
• Druk op Control + [ of Command + [ (Mac) om de focus naar het vorige paneel te verplaatsen.
• U kunt ook Shift + Tab gebruiken om de focus te verplaatsen naar de tablist van een paneel en de pijltjestoetsen gebruiken om van paneel te wisselen. Het kan echter sneller zijn om de eerder genoemde sneltoetsen te gebruiken.

Bekende problemen

• Sommige panelen, zoals de Console- en Prestatiepanelen , kunnen de focus direct naar hun inhoudsgebied verplaatsen zodra ze worden geactiveerd. Dit kan het navigeren met de pijltjestoetsen bemoeilijken.
• De naam van het geselecteerde paneel wordt aangekondigd, maar pas nadat de focus op het paneel is gelegd. Dit kan het gemakkelijk missen.

Navigeren via het opdrachtmenu

Om een ​​specifiek paneel te focussen, gebruikt u het Commandomenu :

1. Met DevTools open, druk op Control + Shift + P of Command + Shift + P (Mac) om het menu 'Opdrachten' te openen. Het menu 'Opdrachten' is een keuzelijst met invoervak ​​voor fuzzy search en automatisch aanvullen.
2. Typ de naam van het paneel dat u wilt openen en gebruik vervolgens de pijl-omlaag op het toetsenbord om naar de juiste optie te navigeren.
3. Druk op Enter om een ​​opdracht uit te voeren.

Om bijvoorbeeld het Elementenpaneel te openen:

1. Open het opdrachtmenu .
2. Typ E en vervolgens L. De optie Paneel > Elementen weergeven is geselecteerd.
3. Druk op Enter om de opdracht uit te voeren waarmee het paneel wordt geopend.

Door een paneel op deze manier te openen, wordt de focus naar de inhoud van het paneel zelf verplaatst. In het geval van het Elementenpaneel wordt de focus verplaatst naar de DOM-boom .

Elementenpaneel

Een element op de pagina inspecteren

1. Navigeer met de cursor van de schermlezer naar het element dat u wilt inspecteren.
2. Simuleer een rechtermuisknopklik op het element om het contextmenu te openen.
3. Kies de optie Inspecteren . Dit opent het paneel 'Elementen' en plaatst de focus op het element in de DOM-boom .

De DOM-boom is opgebouwd als een ARIA- tree . Zie 'Navigeren door de DOM-boom met een toetsenbord' voor een voorbeeld.

Kopieer de code voor een element in de DOM-boom

1. Open het contextmenu dat u met de rechtermuisknop opent, terwijl de focus op een knooppunt in de DOM-boom ligt.
2. Vouw de optie Kopiëren uit.
3. Selecteer Kopieer outerHTML .

Bekende problemen

• Kopieer outerHTML selecteert vaak niet het huidige knooppunt, maar het bovenliggende knooppunt. De inhoud van het element zou echter nog steeds in de gekopieerde outerHTML moeten staan.

De kenmerken van een element in de DOM-boom wijzigen

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Enter om het bewerkbaar te maken.
• Druk op Tab om tussen attribuutwaarden te navigeren. Wanneer u "spatie" hoort, bevindt u zich in een lege tekstinvoer en kunt u een nieuwe attribuutwaarde typen.
• Druk op Control + Enter of Command + Enter (Mac) om de wijziging te accepteren en de volledige inhoud van het element te horen.

Bekende problemen

• Wanneer u tekst invoert, krijgt u geen feedback. Als u een typefout maakt en de pijltjestoetsen gebruikt om uw invoer te controleren, krijgt u ook geen feedback. De eenvoudigste manier om uw werk te controleren, is door de wijziging te accepteren en vervolgens te luisteren naar de aankondiging van het hele element.

De HTML van een element in de DOM-boom bewerken

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Enter om het bewerkbaar te maken.
• Druk op Tab om tussen attribuutwaarden te navigeren. Wanneer u de naam van een element hoort, bijvoorbeeld "h2", bevindt u zich in een tekstinvoer en kunt u het type van het element wijzigen.
• Druk op Control + Enter of Command + Enter (Mac) om de wijziging te accepteren.

Als u bijvoorbeeld h3 typt en op Control + Enter of Command + Enter (Mac) drukt, worden de begin- en eindtags van het element gewijzigd in h3 .

Tabbladen van het elementenpaneel

Het paneel Elementen bevat extra tabbladen waarmee u zaken kunt bekijken, zoals de CSS die op een element is toegepast of de plaats ervan in de toegankelijkheidsboom.

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Tab totdat u hoort dat het deelvenster Stijlen is geselecteerd.
• Gebruik de rechterpijl om andere beschikbare tabbladen te verkennen.

De DOM-structuur zet elementen met href -kenmerken om in focusbare koppelingen. Mogelijk moet u daarom meerdere keren op Tab drukken om bij het deelvenster Stijlen te komen.

Bekende problemen

De tabbladen DOM Breakpoints en Eigenschappen zijn niet toegankelijk met het toetsenbord.

Stijlenpaneel

In het deelvenster Stijlen vindt u bedieningselementen voor het filteren van stijlen, het in- en uitschakelen van elementstatussen (zoals :active en :focus ), het in- en uitschakelen van klassen en het toevoegen van nieuwe klassen. Er is ook een krachtige stijlinspectietool om stijlen te verkennen en aan te passen die momenteel zijn toegepast op het element dat in de DOM-structuur de focus heeft.

Het belangrijkste concept om te begrijpen over het deelvenster Stijlen is dat het alleen stijlen toont voor het momenteel geselecteerde knooppunt in de DOM-boomstructuur . Stel bijvoorbeeld dat u klaar bent met het inspecteren van de stijlen van een <header> -knooppunt en nu de stijlen voor een <footer> -knooppunt wilt bekijken. Om dat te doen, moet u eerst het <footer> -knooppunt in de DOM-boomstructuur selecteren. Mogelijk vindt u het sneller om de workflow Inspecteren te gebruiken om een ​​knooppunt te inspecteren dat zich in de buurt van het footer knooppunt bevindt (zoals een link in de footer), wat de DOM-boomstructuur focust. Gebruik vervolgens uw toetsenbord om naar het exacte knooppunt te navigeren waarin u geïnteresseerd bent.

Navigeer door het deelvenster Stijlen

Omdat alle stijlgereedschappen op de een of andere manier gekoppeld zijn aan het deelvenster Stijlen , is het verstandig om eerst een expert te worden in dit gereedschap.

• Terwijl de focus op het deelvenster Stijlen staat, drukt u op Tab om de focus hierin te verplaatsen en de inhoud te verkennen.
• Druk op Tab totdat de eerste stijl actief wordt. Als u een schermlezer gebruikt, wordt deze eerste stijl aangekondigd als "element.style {}".
• Druk op de pijl-omlaag om door de lijst met stijlen te navigeren in volgorde van specificiteit. Een schermlezer geeft elke stijl aan, beginnend met de naam van het CSS-bestand, het regelnummer waarop de stijl voorkomt en de stijlnaam zelf. Bijvoorbeeld: "main.css:233 .card__img {}"
• Druk op Enter om een ​​stijl gedetailleerder te bekijken. De focus begint op een bewerkbare versie van de stijlnaam.
• Druk op Tab om te schakelen tussen bewerkbare versies van elke CSS-eigenschap en de bijbehorende waarden. Aan het einde van elk stijlblok bevindt zich een leeg, bewerkbaar tekstveld waarin u extra CSS-eigenschappen kunt toevoegen.
• U kunt op Tab blijven drukken om door de lijst met stijlen te bewegen, of op Escape drukken om deze modus af te sluiten en terug te gaan naar navigeren met de pijltjestoetsen.

Lees de toetsenbordreferentie voor het deelvenster Stijlen voor meer sneltoetsen.

Bekende problemen

• Als u het bewerkbare tekstveld Filter gebruikt, kunt u niet meer door de lijst met stijlen navigeren.

Elementstatus wisselen

Om de status van een element te veranderen, bijvoorbeeld :active of :focus :

1. Ga naar het deelvenster Stijlen en druk op Tab totdat de knop Elementstatus in-/uitschakelen de focus heeft.
2. Druk op Enter om de verzameling elementstatussen uit te vouwen. De elementstatussen worden weergegeven als een groep selectievakjes.
3. Druk op Tab totdat de eerste status, :active , de focus heeft.
4. Druk op de spatiebalk om deze optie in te schakelen. Als het momenteel geselecteerde element in de DOM-boom de stijl :active heeft, wordt deze nu toegepast.
5. Blijf op Tab drukken om alle beschikbare statussen te bekijken.

Voeg een bestaande klas toe

Naast de knop Elementstatus wisselen bevindt zich de knop Elementklassen . Verplaats de focus ernaartoe door op Tab en vervolgens op Enter te drukken. De focus wordt verplaatst naar een tekstveld met de naam Nieuwe klasse toevoegen .

De knop Elementklassen wordt voornamelijk gebruikt om bestaande klassen aan een element toe te voegen. Als uw stylesheet bijvoorbeeld een helperklasse met de naam .clearfix bevat, kunt u op . drukken in het tekstbewerkingsveld om een ​​suggestielijst met klassen te bekijken en de pijl-omlaag gebruiken om de suggestie .clearfix te vinden. U kunt de klassenaam ook zelf typen en op Enter drukken om deze toe te passen.

Voeg een nieuwe stijlregel toe

Naast de knop Elementklassen bevindt zich de knop Nieuwe stijlregel . Verplaats de focus hiernaar door op Tab en Enter te drukken. De focus wordt verplaatst naar een bewerkbaar tekstveld in de stijlinspector. De oorspronkelijke tekstinhoud van het veld is de tagnaam van het element dat is geselecteerd in de DOM-boom . U kunt elke gewenste klassenaam in dit veld typen en vervolgens op Tab drukken om er CSS-eigenschappen aan toe te wijzen.

Berekend tabblad

Met de focus op het tabblad Berekend , druk op Tab om de focus naar binnen te verplaatsen en de inhoud te verkennen. Binnen het tabblad Berekend vind je bedieningselementen waarmee je kunt ontdekken welke CSS-eigenschappen daadwerkelijk op een element worden toegepast, in volgorde van specificiteit.

Ontdek alle berekende stijlen

Druk op Tab totdat u de verzameling berekende stijlen bereikt. Deze worden weergegeven als een ARIA- tree . Door een keuzelijst uit te vouwen, ziet u welke CSS-selectors de berekende stijl toepassen. Deze selectors zijn geordend op specificiteit. Een schermlezer meldt de berekende waarde, welke CSS-selector momenteel overeenkomt, de bestandsnaam van het stylesheet dat de selector bevat en het regelnummer van de selector.

Bekende problemen

• Als u het tekstveld Filter gebruikt, kunt u de stijlen niet meer inspecteren.

Tabblad Gebeurtenisluisteraars

Vanuit het deelvenster Elementen kunt u de gebeurtenislisteners die op een element zijn toegepast, bekijken via het tabblad Gebeurtenislisteners . Met de focus op het deelvenster Stijlen drukt u op de pijl naar rechts om naar het tabblad Gebeurtenislisteners te gaan.

Ontdek gebeurtenisluisteraars

Event listeners worden weergegeven als een ARIA- tree . U kunt de pijltjestoetsen gebruiken om er doorheen te navigeren. Een schermlezer meldt de naam van het DOM-object waaraan de event listener is gekoppeld, evenals de bestandsnaam waarin de event listener is gedefinieerd en het bijbehorende regelnummer.

Toegankelijkheidspaneel

Met de focus op het deelvenster Toegankelijkheid drukt u op Tab om de focus naar binnen te verplaatsen en de inhoud te verkennen. In het deelvenster Toegankelijkheid vindt u bedieningselementen voor het verkennen van de toegankelijkheidsboom, de ARIA-kenmerken die op een element zijn toegepast en de berekende toegankelijkheidseigenschappen.

Toegankelijkheidsboom

De toegankelijkheidsboom wordt gepresenteerd als een ARIA- tree , waarbij elk treeitem overeenkomt met een element in de DOM. De boom kondigt de berekende rol voor het geselecteerde knooppunt aan. Generieke elementen zoals div en span worden in de boom aangekondigd als "GenericContainer". Gebruik de pijltjestoetsen om door de boom te navigeren en de ouder-kindrelaties te verkennen.

Bekende problemen

• Het type ARIA-boom dat door het paneel Toegankelijkheid wordt gebruikt, wordt mogelijk niet goed weergegeven in Chrome voor macOS-schermlezers zoals VoiceOver. Abonneer u op Chromium-probleem #868480 om op de hoogte te blijven van de voortgang van dit probleem.
• De secties ARIA-kenmerken en berekende eigenschappen zijn gemarkeerd als ARIA-bomen, maar beschikken momenteel niet over focusbeheer en kunnen daarom niet met het toetsenbord worden bediend.

Auditpanel

Met het paneel Audits kunt u een reeks tests uitvoeren op een site om te controleren op veelvoorkomende problemen met betrekking tot prestaties, toegankelijkheid, SEO en een aantal andere categorieën.

Een audit configureren en uitvoeren

1. Wanneer het paneel Audits voor het eerst wordt geopend, wordt de focus gelegd op de knop Audit uitvoeren aan het einde van het formulier. Standaard is het formulier geconfigureerd om audits voor elke categorie uit te voeren met behulp van mobiele emulatie op een gesimuleerde 3G-verbinding.
2. Gebruik Shift + Tab of ga terug naar de bladermodus om de auditinstellingen te wijzigen.
3. Wanneer u klaar bent om de audit uit te voeren, navigeert u terug naar de knop Run Audit en drukt u op Enter .
4. De focus wordt verplaatst naar een modaal venster met een knop Annuleren , waarmee u de audit kunt afsluiten. U hoort mogelijk een reeks earcons terwijl de audit wordt uitgevoerd en de pagina meerdere keren wordt vernieuwd.

Bekende problemen

• De verschillende secties van het configuratieformulier zijn momenteel niet gemarkeerd met een fieldset -element. Het is mogelijk makkelijker om er in de bladermodus doorheen te navigeren om te zien welke besturingselementen aan elke sectie zijn gekoppeld.
• Er is geen earcon of live regio-aankondiging wanneer de audit is voltooid. Over het algemeen duurt het ongeveer 30 seconden, waarna u naar de resultaten zou moeten kunnen navigeren. De bladermodus is mogelijk de gemakkelijkste manier om de resultaten te bereiken.

Navigeren door het auditrapport

Het auditrapport is onderverdeeld in secties die overeenkomen met elk van de auditcategorieën. Het rapport opent met een lijst met scores voor elke categorie. Deze scores zijn tevens links waarmee u direct naar de relevante secties kunt gaan. Elke sectie bevat uitvouwbare details met informatie over geslaagde of mislukte audits. Standaard worden alleen mislukte audits weergegeven. Elke sectie eindigt met een laatste details met alle geslaagde audits.

Als u een nieuwe audit wilt uitvoeren, sluit u het rapport met Shift + Tab en zoekt u naar de knop Audit uitvoeren .

Rob Dodson

Deze handleiding is bedoeld om gebruikers die voornamelijk afhankelijk zijn van ondersteunende technologie zoals schermlezers te helpen bij het openen en gebruiken van Chrome DevTools . Chrome DevTools is een reeks tools voor webontwikkelaars die zijn ingebouwd in de Google Chrome-browser. Raadpleeg de Toegankelijkheidsreferentie als u op zoek bent naar DevTools-functies die de toegankelijkheid van een webpagina kunnen verbeteren.

De toegankelijkheid van DevTools is nog in ontwikkeling. Sommige panelen en tabbladen werken beter met ondersteunende technologie dan andere. Deze handleiding leidt je door de panelen die het meest toegankelijk zijn en belicht specifieke problemen die je onderweg kunt tegenkomen.

Overzicht

Voordat u begint, is het handig om een ​​mentaal model te hebben van hoe de DevTools-gebruikersinterface is gestructureerd. DevTools is verdeeld in een reeks panelen die zijn georganiseerd in een ARIA- tablist . Bijvoorbeeld:

• Met het Elementenpaneel kunt u DOM-knooppunten of CSS bekijken en wijzigen.
• Via het consolepaneel kunt u JavaScript-logs lezen en objecten live bewerken.

Binnen het inhoudsgebied van elk paneel bevinden zich een aantal verschillende tools, die in de documentatie vaak tabbladen of deelvensters worden genoemd. Zo bevat het Elementenpaneel extra tabbladen om event listeners, de toegankelijkheidsboom en nog veel meer te bekijken. Het onderscheid tussen tabbladen en deelvensters is enigszins willekeurig. De enige reden waarom u de ene of de andere term tegenkomt, is om consistentie met de rest van de officiële DevTools-documentatie te behouden.

Sneltoetsen

De DevTools-sneltoetsenhandleiding is een handige spiekbrief. Sla hem op in je favorieten en raadpleeg hem regelmatig terwijl je de verschillende panelen verkent.

Open DevTools

Lees om te beginnen Chrome DevTools openen . Er zijn verschillende manieren om DevTools te openen, via sneltoetsen of menu-items.

Navigeren tussen panelen

Navigeren via toetsenbord

• Open DevTools en druk op Control + ] of Command + ] (Mac) om de focus naar het volgende paneel te verplaatsen.
• Druk op Control + [ of Command + [ (Mac) om de focus naar het vorige paneel te verplaatsen.
• U kunt ook Shift + Tab gebruiken om de focus te verplaatsen naar de tablist van een paneel en de pijltjestoetsen gebruiken om van paneel te wisselen. Het kan echter sneller zijn om de eerder genoemde sneltoetsen te gebruiken.

Bekende problemen

• Sommige panelen, zoals de Console- en Prestatiepanelen , kunnen de focus direct naar hun inhoudsgebied verplaatsen zodra ze worden geactiveerd. Dit kan het navigeren met de pijltjestoetsen bemoeilijken.
• De naam van het geselecteerde paneel wordt aangekondigd, maar pas nadat de focus op het paneel is gelegd. Dit kan het gemakkelijk missen.

Navigeren via het opdrachtmenu

Om een ​​specifiek paneel te focussen, gebruikt u het Commandomenu :

1. Met DevTools open, druk op Control + Shift + P of Command + Shift + P (Mac) om het menu 'Opdrachten' te openen. Het menu 'Opdrachten' is een keuzelijst met invoervak ​​voor fuzzy search en automatisch aanvullen.
2. Typ de naam van het paneel dat u wilt openen en gebruik vervolgens de pijl-omlaag op het toetsenbord om naar de juiste optie te navigeren.
3. Druk op Enter om een ​​opdracht uit te voeren.

Om bijvoorbeeld het Elementenpaneel te openen:

1. Open het opdrachtmenu .
2. Typ E en vervolgens L. De optie Paneel > Elementen weergeven is geselecteerd.
3. Druk op Enter om de opdracht uit te voeren waarmee het paneel wordt geopend.

Door een paneel op deze manier te openen, wordt de focus naar de inhoud van het paneel zelf verplaatst. In het geval van het Elementenpaneel wordt de focus verplaatst naar de DOM-boom .

Elementenpaneel

Een element op de pagina inspecteren

1. Navigeer met de cursor van de schermlezer naar het element dat u wilt inspecteren.
2. Simuleer een rechtermuisknopklik op het element om het contextmenu te openen.
3. Kies de optie Inspecteren . Dit opent het paneel 'Elementen' en plaatst de focus op het element in de DOM-boom .

De DOM-boom is opgebouwd als een ARIA- tree . Zie 'Navigeren door de DOM-boom met een toetsenbord' voor een voorbeeld.

Kopieer de code voor een element in de DOM-boom

1. Open het contextmenu dat u met de rechtermuisknop opent, terwijl de focus op een knooppunt in de DOM-boom ligt.
2. Vouw de optie Kopiëren uit.
3. Selecteer Kopieer outerHTML .

Bekende problemen

• Kopieer outerHTML selecteert vaak niet het huidige knooppunt, maar het bovenliggende knooppunt. De inhoud van het element zou echter nog steeds in de gekopieerde outerHTML moeten staan.

De kenmerken van een element in de DOM-boom wijzigen

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Enter om het bewerkbaar te maken.
• Druk op Tab om tussen attribuutwaarden te navigeren. Wanneer u "spatie" hoort, bevindt u zich in een lege tekstinvoer en kunt u een nieuwe attribuutwaarde typen.
• Druk op Control + Enter of Command + Enter (Mac) om de wijziging te accepteren en de volledige inhoud van het element te horen.

Bekende problemen

• Wanneer u tekst invoert, krijgt u geen feedback. Als u een typefout maakt en de pijltjestoetsen gebruikt om uw invoer te controleren, krijgt u ook geen feedback. De eenvoudigste manier om uw werk te controleren, is door de wijziging te accepteren en vervolgens te luisteren naar de aankondiging van het hele element.

De HTML van een element in de DOM-boom bewerken

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Enter om het bewerkbaar te maken.
• Druk op Tab om tussen attribuutwaarden te navigeren. Wanneer u de naam van een element hoort, bijvoorbeeld "h2", bevindt u zich in een tekstinvoer en kunt u het type van het element wijzigen.
• Druk op Control + Enter of Command + Enter (Mac) om de wijziging te accepteren.

Als u bijvoorbeeld h3 typt en op Control + Enter of Command + Enter (Mac) drukt, worden de begin- en eindtags van het element gewijzigd in h3 .

Tabbladen van het elementenpaneel

Het paneel Elementen bevat extra tabbladen waarmee u zaken kunt bekijken, zoals de CSS die op een element is toegepast of de plaats ervan in de toegankelijkheidsboom.

• Terwijl de focus op een knooppunt in de DOM-boom ligt, drukt u op Tab totdat u hoort dat het deelvenster Stijlen is geselecteerd.
• Gebruik de rechterpijl om andere beschikbare tabbladen te verkennen.

De DOM-structuur zet elementen met href -kenmerken om in focusbare koppelingen. Mogelijk moet u daarom meerdere keren op Tab drukken om bij het deelvenster Stijlen te komen.

Bekende problemen

De tabbladen DOM Breakpoints en Eigenschappen zijn niet toegankelijk met het toetsenbord.

Stijlenpaneel

In het deelvenster Stijlen vindt u bedieningselementen voor het filteren van stijlen, het in- en uitschakelen van elementstatussen (zoals :active en :focus ), het in- en uitschakelen van klassen en het toevoegen van nieuwe klassen. Er is ook een krachtige stijlinspectietool om stijlen te verkennen en aan te passen die momenteel zijn toegepast op het element dat in de DOM-structuur de focus heeft.

Het belangrijkste concept om te begrijpen over het deelvenster Stijlen is dat het alleen stijlen toont voor het momenteel geselecteerde knooppunt in de DOM-boomstructuur . Stel bijvoorbeeld dat u klaar bent met het inspecteren van de stijlen van een <header> -knooppunt en nu de stijlen voor een <footer> -knooppunt wilt bekijken. Om dat te doen, moet u eerst het <footer> -knooppunt in de DOM-boomstructuur selecteren. Mogelijk vindt u het sneller om de workflow Inspecteren te gebruiken om een ​​knooppunt te inspecteren dat zich in de buurt van het footer knooppunt bevindt (zoals een link in de footer), wat de DOM-boomstructuur focust. Gebruik vervolgens uw toetsenbord om naar het exacte knooppunt te navigeren waarin u geïnteresseerd bent.

Navigeer door het deelvenster Stijlen

Omdat alle stijlgereedschappen op de een of andere manier gekoppeld zijn aan het deelvenster Stijlen , is het verstandig om eerst een expert te worden in dit gereedschap.

• Terwijl de focus op het deelvenster Stijlen staat, drukt u op Tab om de focus hierin te verplaatsen en de inhoud te verkennen.
• Druk op Tab totdat de eerste stijl actief wordt. Als u een schermlezer gebruikt, wordt deze eerste stijl aangekondigd als "element.style {}".
• Druk op de pijl-omlaag om door de lijst met stijlen te navigeren in volgorde van specificiteit. Een schermlezer geeft elke stijl aan, beginnend met de naam van het CSS-bestand, het regelnummer waarop de stijl voorkomt en de stijlnaam zelf. Bijvoorbeeld: "main.css:233 .card__img {}"
• Druk op Enter om een ​​stijl gedetailleerder te bekijken. De focus begint op een bewerkbare versie van de stijlnaam.
• Druk op Tab om te schakelen tussen bewerkbare versies van elke CSS-eigenschap en de bijbehorende waarden. Aan het einde van elk stijlblok bevindt zich een leeg, bewerkbaar tekstveld waarin u extra CSS-eigenschappen kunt toevoegen.
• U kunt op Tab blijven drukken om door de lijst met stijlen te bewegen, of op Escape drukken om deze modus af te sluiten en terug te gaan naar navigeren met de pijltjestoetsen.

Lees de toetsenbordreferentie voor het deelvenster Stijlen voor meer sneltoetsen.

Bekende problemen

• Als u het bewerkbare tekstveld Filter gebruikt, kunt u niet meer door de lijst met stijlen navigeren.

Elementstatus wisselen

Om de status van een element te veranderen, bijvoorbeeld :active of :focus :

1. Ga naar het deelvenster Stijlen en druk op Tab totdat de knop Elementstatus in-/uitschakelen de focus heeft.
2. Druk op Enter om de verzameling elementstatussen uit te vouwen. De elementstatussen worden weergegeven als een groep selectievakjes.
3. Druk op Tab totdat de eerste status, :active , de focus heeft.
4. Druk op de spatiebalk om deze optie in te schakelen. Als het momenteel geselecteerde element in de DOM-boom de stijl :active heeft, wordt deze nu toegepast.
5. Blijf op Tab drukken om alle beschikbare statussen te bekijken.

Voeg een bestaande klas toe

Naast de knop Elementstatus wisselen bevindt zich de knop Elementklassen . Verplaats de focus ernaartoe door op Tab en vervolgens op Enter te drukken. De focus wordt verplaatst naar een tekstveld met de naam Nieuwe klasse toevoegen .

De knop Elementklassen wordt voornamelijk gebruikt om bestaande klassen aan een element toe te voegen. Als uw stylesheet bijvoorbeeld een helperklasse met de naam .clearfix bevat, kunt u op . drukken in het tekstbewerkingsveld om een ​​suggestielijst met klassen te bekijken en de pijl-omlaag gebruiken om de suggestie .clearfix te vinden. U kunt de klassenaam ook zelf typen en op Enter drukken om deze toe te passen.

Voeg een nieuwe stijlregel toe

Naast de knop Elementklassen bevindt zich de knop Nieuwe stijlregel . Verplaats de focus hiernaar door op Tab en Enter te drukken. De focus wordt verplaatst naar een bewerkbaar tekstveld in de stijlinspector. De oorspronkelijke tekstinhoud van het veld is de tagnaam van het element dat is geselecteerd in de DOM-boom . U kunt elke gewenste klassenaam in dit veld typen en vervolgens op Tab drukken om er CSS-eigenschappen aan toe te wijzen.

Berekend tabblad

Met de focus op het tabblad Berekend , druk op Tab om de focus naar binnen te verplaatsen en de inhoud te verkennen. Binnen het tabblad Berekend vind je bedieningselementen waarmee je kunt ontdekken welke CSS-eigenschappen daadwerkelijk op een element worden toegepast, in volgorde van specificiteit.

Ontdek alle berekende stijlen

Druk op Tab totdat u de verzameling berekende stijlen bereikt. Deze worden weergegeven als een ARIA- tree . Door een keuzelijst uit te vouwen, ziet u welke CSS-selectors de berekende stijl toepassen. Deze selectors zijn geordend op specificiteit. Een schermlezer meldt de berekende waarde, welke CSS-selector momenteel overeenkomt, de bestandsnaam van het stylesheet dat de selector bevat en het regelnummer van de selector.

Bekende problemen

• Als u het tekstveld Filter gebruikt, kunt u de stijlen niet meer inspecteren.

Tabblad Gebeurtenisluisteraars

Vanuit het deelvenster Elementen kunt u de gebeurtenislisteners die op een element zijn toegepast, bekijken via het tabblad Gebeurtenislisteners . Met de focus op het deelvenster Stijlen drukt u op de pijl naar rechts om naar het tabblad Gebeurtenislisteners te gaan.

Ontdek gebeurtenisluisteraars

Event listeners worden weergegeven als een ARIA- tree . U kunt de pijltjestoetsen gebruiken om er doorheen te navigeren. Een schermlezer meldt de naam van het DOM-object waaraan de event listener is gekoppeld, evenals de bestandsnaam waarin de event listener is gedefinieerd en het bijbehorende regelnummer.

Toegankelijkheidspaneel

Met de focus op het deelvenster Toegankelijkheid drukt u op Tab om de focus naar binnen te verplaatsen en de inhoud te verkennen. In het deelvenster Toegankelijkheid vindt u bedieningselementen voor het verkennen van de toegankelijkheidsboom, de ARIA-kenmerken die op een element zijn toegepast en de berekende toegankelijkheidseigenschappen.

Toegankelijkheidsboom

De toegankelijkheidsboom wordt gepresenteerd als een ARIA- tree , waarbij elk treeitem overeenkomt met een element in de DOM. De boom kondigt de berekende rol voor het geselecteerde knooppunt aan. Generieke elementen zoals div en span worden in de boom aangekondigd als "GenericContainer". Gebruik de pijltjestoetsen om door de boom te navigeren en de ouder-kindrelaties te verkennen.

Bekende problemen

• Het type ARIA-boom dat door het paneel Toegankelijkheid wordt gebruikt, wordt mogelijk niet goed weergegeven in Chrome voor macOS-schermlezers zoals VoiceOver. Abonneer u op Chromium-probleem #868480 om op de hoogte te blijven van de voortgang van dit probleem.
• De secties ARIA-kenmerken en berekende eigenschappen zijn gemarkeerd als ARIA-bomen, maar beschikken momenteel niet over focusbeheer en kunnen daarom niet met het toetsenbord worden bediend.

Auditpanel

Met het paneel Audits kunt u een reeks tests uitvoeren op een site om te controleren op veelvoorkomende problemen met betrekking tot prestaties, toegankelijkheid, SEO en een aantal andere categorieën.

Een audit configureren en uitvoeren

1. Wanneer het paneel Audits voor het eerst wordt geopend, wordt de focus gelegd op de knop Audit uitvoeren aan het einde van het formulier. Standaard is het formulier geconfigureerd om audits voor elke categorie uit te voeren met behulp van mobiele emulatie op een gesimuleerde 3G-verbinding.
2. Gebruik Shift + Tab of ga terug naar de bladermodus om de auditinstellingen te wijzigen.
3. Wanneer u klaar bent om de audit uit te voeren, navigeert u terug naar de knop Run Audit en drukt u op Enter .
4. De focus wordt verplaatst naar een modaal venster met een knop Annuleren , waarmee u de audit kunt afsluiten. U hoort mogelijk een reeks earcons terwijl de audit wordt uitgevoerd en de pagina meerdere keren wordt vernieuwd.

Bekende problemen

• De verschillende secties van het configuratieformulier zijn momenteel niet gemarkeerd met een fieldset -element. Het is mogelijk makkelijker om er in de bladermodus doorheen te navigeren om te zien welke besturingselementen aan elke sectie zijn gekoppeld.
• Er is geen earcon of live regio-aankondiging wanneer de audit is voltooid. Over het algemeen duurt het ongeveer 30 seconden, waarna u naar de resultaten zou moeten kunnen navigeren. De bladermodus is mogelijk de gemakkelijkste manier om de resultaten te bereiken.

Navigeren door het auditrapport

Het auditrapport is onderverdeeld in secties die overeenkomen met elk van de auditcategorieën. Het rapport opent met een lijst met scores voor elke categorie. Deze scores zijn tevens links waarmee u direct naar de relevante secties kunt gaan. Elke sectie bevat uitvouwbare details met informatie over geslaagde of mislukte audits. Standaard worden alleen mislukte audits weergegeven. Elke sectie eindigt met een laatste details met alle geslaagde audits.

Als u een nieuwe audit wilt uitvoeren, sluit u het rapport met Shift + Tab en zoekt u naar de knop Audit uitvoeren .