Navigeer door Chrome DevTools met ondersteunende technologie

Rob Dodson

Deze handleiding is bedoeld om gebruikers die voornamelijk gebruikmaken van ondersteunende technologie (AT), zoals schermlezers, te helpen bij de toegang tot en het gebruik van Chrome DevTools . Chrome DevTools is een suite van webontwikkelaarstools die zijn ingebouwd in de Google Chrome-browser. Raadpleeg de Toegankelijkheidsreferentie als u op zoek bent naar DevTools-functies die te maken hebben met het verbeteren van de toegankelijkheid van een webpagina.

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

Overzicht

DevTools is onderverdeeld in een reeks panelen die georganiseerd zijn in een ARIA- tablist . Bijvoorbeeld:

  • Met het paneel Elementen kunt u DOM-knooppunten of CSS bekijken en wijzigen.
  • Met het consolepaneel kunt u JavaScript-logboeken lezen en objecten live bewerken.

Binnen het inhoudsgebied van elk paneel bevinden zich verschillende tools, die in de documentatie vaak tabs of vensters worden genoemd. Het paneel Elementen bevat bijvoorbeeld extra tabs om gebeurtenislisteners, de toegankelijkheidsstructuur en nog veel meer te inspecteren. Het onderscheid tussen tabs en vensters is enigszins arbitrair. De enige reden waarom u de ene of de andere term ziet, is om consistentie te bewaren met de rest van de officiële DevTools-documentatie.

Toetsenbord sneltoetsen

De handleiding met sneltoetsen voor DevTools is een handig spiekbriefje. Voeg deze toe aan je bladwijzers en raadpleeg hem regelmatig wanneer je de verschillende panelen verkent.

Open DevTools

Om te beginnen, lees eerst 'Chrome DevTools openen' . Er zijn verschillende manieren om DevTools te openen, via sneltoetsen of menu-items.

Navigeer tussen panelen

Je kunt tussen panelen navigeren met het toetsenbord, het opdrachtmenu of met een muis of trackpad.

Navigeren met toetsenbord

  • Met DevTools geopend, drukt u op Control + ] of Command + ] (Mac) om het volgende paneel te selecteren.
  • Druk op Control + [ of Command + [ (Mac) om het vorige paneel te selecteren.
  • Je kunt ook Shift + Tab gebruiken om de focus naar tablist van een paneel te verplaatsen en de pijltjestoetsen gebruiken om tussen panelen te wisselen, hoewel het wellicht sneller is om de eerder genoemde sneltoetsen te gebruiken.

Bekende problemen

  • Sommige panelen, zoals de Console- en Prestatiepanelen , kunnen de focus naar hun inhoudsgebied verplaatsen zodra ze worden geactiveerd. Dit kan navigeren met de pijltjes toetsen lastig maken.
  • De naam van het geselecteerde paneel wordt weliswaar voorgelezen, maar pas nadat een schermlezer de geselecteerde inhoud van het paneel heeft voorgelezen. Hierdoor kan het paneel gemakkelijk over het hoofd worden gezien.

Navigeren via het opdrachtmenu

Om een ​​specifiek paneel te selecteren, gebruikt u het opdrachtmenu :

  1. Met DevTools geopend, druk je op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen. Het opdrachtmenu is een keuzelijst met automatische aanvulling voor een zoekopdracht met een vage zoekterm.
  2. Typ de naam van het paneel dat u wilt openen en gebruik vervolgens de pijltoetsen omlaag om naar de juiste optie te navigeren.
  3. Druk op Enter om een ​​opdracht uit te voeren.

Om bijvoorbeeld het paneel Elementen te openen:

  1. Open het opdrachtmenu .
  2. Typ E en vervolgens L. De optie Paneel > Elementen weergeven wordt 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 gericht op de inhoud van het paneel zelf. In het geval van het paneel 'Elementen ' verschuift de focus naar de DOM-structuur .

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 rechtermuisklik op het element om het contextmenu te openen.
  3. Kies de optie 'Inspecteren' . Hiermee opent u het paneel ' Elementen' en wordt het element in de DOM-structuur geselecteerd.

De DOM-structuur is opgebouwd als een ARIA- tree . Zie een voorbeeld in Navigeren door de DOM-structuur met een toetsenbord .

Kopieer de code voor een element in de DOM-structuur.

  1. Wanneer je de focus op een knooppunt in de DOM-structuur richt, open je het contextmenu dat verschijnt wanneer je met de rechtermuisknop klikt.
  2. Vouw de optie 'Kopiëren' uit.
  3. Selecteer 'OuterHTML kopiëren' .

Bekende problemen

  • Bij het kopiëren van outerHTML wordt vaak het bovenliggende knooppunt geselecteerd in plaats van het beoogde knooppunt. De inhoud van het element moet echter wel in het gekopieerde element binnen outerHTML aanwezig zijn.

De attributen van een element in de DOM-structuur wijzigen

  • Selecteer een knooppunt in de DOM-structuur en druk op Enter om het bewerkbaar te maken.
  • Druk op Tab om tussen attribuutwaarden te schakelen. Wanneer u 'spatie' hoort, bevindt u zich in een leeg tekstinvoerveld 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 beluisteren.

Bekende problemen

  • Als je iets typt in het tekstinvoerveld, krijg je geen feedback. Als je een typefout maakt en de pijltjes toetsen gebruikt om je invoer te verkennen, krijg je ook geen feedback. De makkelijkste manier om je werk te controleren is door de wijziging te accepteren en vervolgens te wachten tot het hele element wordt aangekondigd.

Bewerk de HTML van een element in de DOM-structuur.

  • Selecteer een knooppunt in de DOM-structuur en druk op Enter om het bewerkbaar te maken.
  • Druk op Tab om tussen attribuutwaarden te schakelen. Wanneer je de naam van het element hoort, bijvoorbeeld h2 , bevind je je in een tekstinvoerveld en kun je het type van het element wijzigen.
  • Druk op Control + Enter of Command + Enter (Mac) om de wijziging te accepteren.

Als je 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 je zaken kunt inspecteren zoals de CSS die op een element is toegepast of de positie ervan in de toegankelijkheidsstructuur.

  • Selecteer een knooppunt in de DOM-structuur en druk op Tab totdat u hoort dat het deelvenster Stijlen is geselecteerd.
  • Gebruik de pijltoetsen naar rechts om andere beschikbare tabbladen te verkennen.

De DOM-structuur zet elementen met href attributen om in focusseerbare links, waardoor je mogelijk meerdere keren op Tab moet drukken om het deelvenster Stijlen te bereiken.

Bekende problemen

De tabbladen DOM-breakpoints en -eigenschappen zijn niet via het toetsenbord te bedienen.

Stijlenpaneel

In het deelvenster Stijlen vindt u bedieningselementen voor het filteren van stijlen, het wijzigen van de status van elementen (zoals :active en :focus ), het wijzigen van klassen en het toevoegen van nieuwe klassen. Er is ook een krachtige stijlinspectietool waarmee u de stijlen kunt bekijken en wijzigen die zijn toegepast op het element dat in de DOM-structuur is geselecteerd.

Het belangrijkste concept van het deelvenster Stijlen is dat het alleen stijlen toont voor het momenteel geselecteerde knooppunt in de DOM-structuur . Stel bijvoorbeeld dat u klaar bent met het bekijken van de stijlen van een <header> -knooppunt en nu de stijlen van een <footer> -knooppunt wilt bekijken. Om dat te doen, moet u het <footer> -knooppunt in de DOM-structuur selecteren.

Het kan sneller zijn om de Inspect- workflow te gebruiken om een ​​knooppunt te inspecteren dat zich in de buurt van het footer bevindt (zoals een link in de voettekst), waardoor de DOM-structuur wordt gefocust, en vervolgens met je toetsenbord naar het exacte knooppunt te navigeren waarin je geïnteresseerd bent.

Navigeer naar het deelvenster Stijlen.

Omdat alle stijltools op de een of andere manier verbonden zijn met het deelvenster Stijlen, is het verstandig om eerst expert te worden in deze tool.

  • Selecteer het deelvenster Stijlen en druk op Tab om de focus naar binnen te verplaatsen en de inhoud ervan te bekijken.
  • Druk op Tab totdat de eerste stijl actief wordt. Als je een schermlezer gebruikt, wordt deze eerste stijl aangekondigd als " element.style {} ".
  • Druk op de pijl-omlaag om door de lijst met stijlen te navigeren, gesorteerd op specificiteit. Een schermlezer spreekt elke stijl uit, 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 ligt op een bewerkbare versie van de stijlnaam.
  • Druk op Tab om te schakelen tussen de 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.
  • Je kunt op Tab blijven drukken om door de lijst met stijlen te bladeren, of op Escape drukken om deze modus te verlaten en terug te keren naar navigeren met de pijltjes toetsen.

Raadpleeg de toetsenbordreferentie in het deelvenster Stijlen voor aanvullende sneltoetsen.

Bekende problemen
  • Als je het bewerkbare tekstveld 'Filter' gebruikt, kun je niet door de lijst met stijlen navigeren.

Elementstatus wisselen

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

  1. Ga naar het deelvenster Stijlen en druk op Tab totdat de knop Elementstatus wisselen de focus heeft.
  2. Druk op Enter om de verzameling elementstatussen uit te breiden. 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 het in te schakelen. Als het momenteel geselecteerde element in de DOM-structuur de stijl :active heeft, wordt deze nu toegepast.
  5. Blijf op Tab drukken om alle beschikbare staten te bekijken.

Voeg een bestaande klasse 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 verschuift naar een tekstveld met het label '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 de punt . in het bewerkingsveld drukken om een ​​lijst met suggesties voor klassen te bekijken en vervolgens met de pijl-omlaag de suggestie .clearfix ' selecteren. Of u kunt de klassenaam 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 hiernaartoe door op Tab te drukken en vervolgens op Enter . De focus verschuift naar een bewerkbaar tekstveld in de stijlinspector. De initiële tekstinhoud van het veld is de tagnaam van het element dat in de DOM-structuur is geselecteerd. U kunt elke gewenste klassenaam in dit veld typen en vervolgens op Tab drukken om er CSS-eigenschappen aan toe te wijzen.

Berekend tabblad

Selecteer het tabblad 'Berekend' en druk op Tab om de focus naar het betreffende gedeelte te verplaatsen en de inhoud ervan te bekijken. In het tabblad 'Berekend' vindt u opties om te onderzoeken welke CSS-eigenschappen daadwerkelijk op een element zijn toegepast, in volgorde van specificiteit.

Ontdek alle computergestuurde 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 georganiseerd op specificiteit.

Een schermlezer kondigt de berekende waarde aan, de CSS-selector die ermee overeenkomt, de bestandsnaam van het stylesheet dat de selector bevat en het regelnummer van de selector.

Bekende problemen

  • Als je het filtertekstveld gebruikt, kun je de stijlen niet meer inspecteren.

Tabblad gebeurtenisluisteraars

Vanuit het paneel Elementen kunt u de gebeurtenislisteners die op een element zijn toegepast, bekijken via het tabblad Gebeurtenislisteners . Selecteer het paneel Stijlen en druk op de rechterpijltoets om naar het tabblad Gebeurtenislisteners te navigeren.

Ontdek luisteraars van het evenement

Gebeurtenislisteners worden weergegeven als een ARIA- tree . U kunt de pijltjestoetsen gebruiken om erdoorheen te navigeren. Een schermlezer kondigt de naam aan van het DOM-object waaraan de gebeurtenislistener is gekoppeld, evenals de bestandsnaam waarin de gebeurtenislistener is gedefinieerd en het bijbehorende regelnummer.

Toegankelijkheidspaneel

Selecteer het deelvenster Toegankelijkheid en druk op Tab om de focus naar binnen te verplaatsen en de inhoud ervan te verkennen. In het deelvenster Toegankelijkheid vindt u bedieningselementen om de toegankelijkheidsstructuur, de ARIA-kenmerken die op een element zijn toegepast en de berekende toegankelijkheidseigenschappen ervan te bekijken.

Toegankelijkheidsboom

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

Bekende problemen

  • Het type ARIA-structuur dat wordt gebruikt in het toegankelijkheidsvenster is mogelijk niet beschikbaar in Chrome voor schermlezers voor macOS, zoals VoiceOver. Abonneer u op Chromium-issue #868480 om op de hoogte te blijven van de voortgang van dit probleem.
  • De secties ARIA-attributen en berekende eigenschappen zijn opgemaakt als ARIA-bomen, maar ze bevatten geen focusbeheer. Dit betekent dat deze secties niet met het toetsenbord te bedienen zijn.

Auditpanel

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

Een audit configureren en uitvoeren

  1. Wanneer het paneel Audits voor het eerst wordt geopend, staat de knop Audit uitvoeren onderaan het formulier centraal. Standaard is het formulier geconfigureerd om audits uit te voeren voor elke categorie met behulp van mobiele emulatie op een gesimuleerde 3G-verbinding.
  2. Gebruik Shift + Tab of ga terug in de Bladeren-modus om de auditinstellingen te wijzigen.
  3. Wanneer u klaar bent om de audit uit te voeren, gaat u terug naar de knop 'Audit uitvoeren' en drukt u op Enter .
  4. De focus verschuift naar een modaal venster met een annuleerknop waarmee u de audit kunt verlaten. Mogelijk hoort u een aantal waarschuwingssignalen terwijl de audit wordt uitgevoerd en de pagina meerdere keren wordt vernieuwd.

Bekende problemen

  • De verschillende onderdelen van het configuratieformulier zijn niet gemarkeerd met een fieldset element. Het is wellicht handiger om ze in de bladermodus te bekijken om te zien welke besturingselementen bij elk onderdeel horen.
  • Er wordt geen melding via Earcon of Live Region weergegeven wanneer de audit is voltooid. Dit duurt doorgaans ongeveer 30 seconden, waarna u de resultaten kunt bekijken. Gebruik de bladerfunctie om snel bij de resultaten te komen.

Navigeer door het auditrapport

Het auditrapport is opgedeeld in secties die overeenkomen met de verschillende auditcategorieën. Het rapport begint met een lijst van scores voor elke categorie. Deze scores fungeren ook als links waarmee direct naar de betreffende sectie kan worden gesprongen. Binnen elke sectie bevinden zich uitklapbare 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.

Om een ​​nieuwe audit uit te voeren, gebruikt u Shift + Tab om het rapport te verlaten en zoekt u naar de knop ' Een audit uitvoeren' .