Deze handleiding is bedoeld om gebruikers die voornamelijk afhankelijk zijn van ondersteunende technologie, zoals schermlezers, toegang te geven tot Chrome DevTools en deze te gebruiken. Chrome DevTools is een reeks webontwikkelaarstools die zijn ingebouwd in de Google Chrome-browser. Zie Toegankelijkheidsreferentie als u op zoek bent naar DevTools-functies die verband houden met het verbeteren van de toegankelijkheid van een webpagina.
De toegankelijkheid van DevTools is een werk in uitvoering. Sommige panelen en tabbladen werken beter met ondersteunende technologie dan andere. Deze gids leidt u door de panelen die het meest toegankelijk zijn en belicht specifieke problemen die u onderweg kunt tegenkomen.
Overzicht
Voordat u begint, helpt het om een mentaal model te hebben van hoe de gebruikersinterface van DevTools is gestructureerd. DevTools is onderverdeeld in een reeks panelen die zijn georganiseerd in een ARIA- tablist . Bijvoorbeeld:
- In het Elementenpaneel kunt u DOM-knooppunten of CSS bekijken en wijzigen.
- In het consolepaneel kunt u JavaScript-logboeken en live bewerkingsobjecten lezen.
Binnen het inhoudsgebied van elk paneel bevinden zich een aantal verschillende hulpmiddelen, in de documentatie vaak tabbladen of deelvensters genoemd. Het paneel Elementen bevat bijvoorbeeld extra tabbladen om gebeurtenislisteners, de toegankelijkheidsboom en nog veel meer te inspecteren. Het onderscheid tussen tabbladen en deelvensters is enigszins willekeurig. De enige reden dat u de ene of de andere term tegenkomt, is om de consistentie met de rest van de officiële DevTools-documentatie te behouden.
Sneltoetsen
De verwijzing naar DevTools-toetsenbordsnelkoppelingen is een handig spiekbriefje. Zorg ervoor dat u er een bladwijzer van maakt en ernaar terugkijkt terwijl u de verschillende panelen verkent.
Open DevTools
Lees Open Chrome DevTools om aan de slag te gaan. Er zijn een aantal manieren om DevTools te openen, via sneltoetsen of menu-items.
Navigeer tussen panelen
Navigeer via het toetsenbord
- Terwijl DevTools geopend is, drukt u op Control + ] of Command + ] (Mac) om de focus op het volgende paneel te zetten.
- Druk op Control + [ of Command + [ (Mac) om de focus op het vorige paneel te zetten.
- Het is ook mogelijk om Shift + Tab te gebruiken om de focus naar de
tablistvan een paneel te verplaatsen en de pijltoetsen te gebruiken om van paneel te wisselen, hoewel het wellicht sneller is om de eerder genoemde sneltoetsen te gebruiken.
Bekende problemen
- Sommige panelen, zoals de panelen Console en Prestaties , kunnen de focus naar hun inhoudsgebied verplaatsen zodra ze worden geactiveerd. Dit kan het navigeren met de pijltjestoetsen lastig maken.
- De naam van het geselecteerde paneel wordt aangekondigd, maar pas nadat het de gerichte inhoud in het paneel heeft gelezen. Hierdoor kun je het heel gemakkelijk missen.
Navigeer via het Commandomenu
Om een specifiek paneel scherp te stellen, gebruikt u het Commandomenu :
- Terwijl DevTools geopend is, drukt u op Control + Shift + P of Command + Shift + P (Mac) om het Commandomenu te openen. Het Commandomenu is een combobox voor automatisch aanvullen van fuzzy search.
- Typ de naam van het paneel dat u wilt openen en gebruik vervolgens het toetsenbord met de pijl-omlaag om naar de juiste optie te navigeren.
- Druk op Enter om een opdracht uit te voeren.
Om bijvoorbeeld het paneel Elementen te openen:
- Open het Commandomenu .
- Type E en vervolgens L. De optie Paneel > Elementen tonen is geselecteerd.
- 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 op de inhoud van het paneel zelf gelegd. In het geval van het Elementenpaneel verplaatst de focus zich naar de DOM-structuur .
Elementen paneel
Inspecteer een element op de pagina
- Navigeer naar het element dat u wilt inspecteren met behulp van de cursor van de schermlezer.
- Simuleer een rechtermuisknop op het element om het contextmenu te openen.
- Kies de optie Inspecteren . Hierdoor wordt het paneel Elementen geopend en wordt het element in de DOM-structuur gefocust.
De DOM-boom is opgemaakt als een ARIA- tree . Zie Navigeren door de DOM-structuur met een toetsenbord voor een voorbeeld.
Kopieer de code voor een element in de DOM-structuur
- Met de focus op een knooppunt in de DOM-structuur opent u het contextmenu door met de rechtermuisknop te klikken.
- Vouw de optie Kopiëren uit.
- Selecteer OuterHTML kopiëren .
Bekende problemen
- Copy outsideHTML selecteert vaak niet het huidige knooppunt, maar selecteert in plaats daarvan het bovenliggende knooppunt. De inhoud van het element moet echter nog steeds in de gekopieerde outsideHTML staan.
Wijzig de attributen van een element in de DOM-structuur
- Met de focus op een knooppunt in de DOM-structuur drukt u op Enter om het bewerkbaar te maken.
- Druk op Tab om tussen attribuutwaarden te schakelen. 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 de tekstinvoer typt, krijgt u geen feedback. Als u een typfout maakt en de pijltjestoetsen gebruikt om uw invoer te onderzoeken, krijgt u ook geen feedback. De eenvoudigste manier om uw werk te controleren, is door de wijziging te accepteren en vervolgens te luisteren totdat het hele element wordt aangekondigd.
Bewerk de HTML van een element in de DOM-structuur
- Met de focus op een knooppunt in de DOM-structuur drukt u op Enter om het bewerkbaar te maken.
- Druk op Tab om tussen attribuutwaarden te schakelen. Wanneer u de naam van het 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 voor het inspecteren van zaken zoals de CSS die op een element is toegepast of de plaats ervan in de toegankelijkheidsboom.
- Met de focus op een knooppunt in de DOM-structuur drukt u op Tab totdat u hoort dat het deelvenster Stijlen is geselecteerd.
- Gebruik de pijl-rechts om andere beschikbare tabbladen te verkennen.
De DOM-structuur verandert elementen met href attributen in focusbare links, dus het kan zijn dat u meerdere keren op Tab moet drukken om het deelvenster Stijlen te bereiken.
Bekende problemen
De tabbladen DOM Breakpoints en Properties zijn niet via het toetsenbord toegankelijk.
Deelvenster Stijlen
In het deelvenster Stijlen vindt u bedieningselementen voor het filteren van stijlen, het wisselen van elementstatussen (zoals :active en :focus ), het wisselen van klassen en het toevoegen van nieuwe klassen. Er is ook een krachtige tool voor stijlinspectie om stijlen te verkennen en aan te passen die momenteel worden toegepast op het element dat in focus is in de DOM-structuur .
Het belangrijkste concept dat u moet begrijpen over het deelvenster Stijlen is dat het alleen stijlen toont voor het momenteel geselecteerde knooppunt in de DOM-structuur . Stel 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-structuur selecteren. Mogelijk vindt u het sneller om de werkstroom Inspecteren te gebruiken om een knooppunt te inspecteren dat zich in de algemene omgeving van het footer bevindt (zoals een link in de voettekst), waardoor de DOM-structuur wordt gefocust, en vervolgens uw toetsenbord gebruikt 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 aansluiten op het deelvenster Stijlen , is het logisch om eerst een expert in dit gereedschap te worden.
- Met de focus op het deelvenster Stijlen drukt u op Tab om de focus naar binnen te verplaatsen en de inhoud ervan 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 kondigt elke stijl aan, beginnend met de naam van het CSS-bestand, het regelnummer waarop de stijl verschijnt 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 tussen bewerkbare versies van elke CSS-eigenschap en de bijbehorende waarden te schakelen. Aan het einde van elk stijlblok bevindt zich een leeg bewerkbaar tekstveld dat u kunt gebruiken om extra CSS-eigenschappen toe te voegen.
- U 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 het navigeren met de pijltoetsen.
Zorg ervoor dat u de toetsenbordreferentie van het deelvenster Stijlen doorleest voor aanvullende sneltoetsen.
Bekende problemen
- Als u het veld Bewerkbare tekst filteren gebruikt, kunt u niet langer door de lijst met stijlen navigeren.
Schakel de elementstatus in
Om de status van een element te wijzigen, zoals :active of :focus :
- Navigeer naar het deelvenster Stijlen en druk op Tab totdat de knop Elementstatus wisselen de focus heeft.
- Druk op Enter om de verzameling elementstatussen uit te vouwen. De elementstatussen worden weergegeven als een groep selectievakjes.
- Druk op Tab totdat de eerste status,
:active, focus heeft. - Druk op de spatiebalk om dit in te schakelen. Als het momenteel geselecteerde element in de DOM-structuur de
:activestijl heeft, wordt deze nu toegepast. - Blijf op Tab drukken om alle beschikbare statussen te verkennen.
Voeg een spannende 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 wordt verplaatst naar een bewerkingstekstveld met de naam Nieuwe klas 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 bewerkingstekstveld om een suggestielijst met klassen te zien en gebruik de pijl-omlaag om de .clearfix suggestie te vinden. Of typ zelf de klassenaam en druk op Enter om deze toe te passen.
Voeg een nieuwe stijlregel toe
Naast de knop Elementklassen bevindt zich de knop Nieuwe stijlregel . Verplaats de focus ernaartoe door op Tab te drukken en op Enter te drukken. De focus wordt verplaatst naar een bewerkbaar tekstveld binnen de stijlinspecteur. De initiële tekstinhoud van het veld is de tagnaam van het element dat is geselecteerd in de DOM-structuur . 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 drukt u op Tab om de focus naar binnen te verplaatsen en de inhoud ervan te verkennen. Op het tabblad Berekend zijn er besturingselementen waarmee u kunt onderzoeken welke CSS-eigenschappen feitelijk op een element worden toegepast, in volgorde van specificiteit.
Ontdek alle computerstijlen
Druk op Tab totdat u de verzameling berekende stijlen bereikt. Deze worden gepresenteerd als een ARIA- tree . Als u een keuzelijst uitbreidt, wordt zichtbaar welke CSS-selectors de berekende stijl toepassen. Deze selectors zijn georganiseerd op specificiteit. Een schermlezer kondigt de berekende waarde aan, welke CSS-selector momenteel overeenkomt, de bestandsnaam van het stylesheet dat de selector bevat, en het regelnummer voor de selector.
Bekende problemen
- Als u het veld Filtertekst gebruikt, kunt u de stijlen niet langer inspecteren.
Tabblad Gebeurtenisluisteraars
Vanuit het paneel Elementen kunt u de gebeurtenislisteners inspecteren die op een element zijn toegepast via het tabblad Gebeurtenislisteners . Met de focus op het deelvenster Stijlen drukt u op de pijl-rechts om naar het tabblad Gebeurtenislisteners te navigeren.
Ontdek gebeurtenislisteners
Gebeurtenislisteners worden gepresenteerd als een ARIA- tree . U kunt de pijltjestoetsen gebruiken om er doorheen 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 regelnummer ervan.
Toegankelijkheidsvenster
Met de focus op het deelvenster Toegankelijkheid drukt u op Tab om de focus naar binnen te verplaatsen en de inhoud ervan te verkennen. In het deelvenster Toegankelijkheid bevinden zich bedieningselementen voor het verkennen van de toegankelijkheidsboom, de ARIA-attributen die op een element zijn toegepast en de berekende toegankelijkheidseigenschappen ervan.
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 structuur aangekondigd als "GenericContainer". Gebruik de pijltoetsen om door de boom te bladeren en de relaties tussen ouders en kinderen te verkennen.
Bekende problemen
- Het type ARIA-structuur dat door het deelvenster Toegankelijkheid wordt gebruikt, wordt mogelijk niet correct weergegeven in Chrome voor macOS-schermlezers zoals VoiceOver. Abonneer u op Chromium-nummer 868480 om op de hoogte te blijven van de voortgang van dit probleem.
- De secties ARIA Attributen en Computed Properties zijn gemarkeerd als ARIA-bomen, maar hebben momenteel geen focusbeheer en zijn dus niet via het toetsenbord te bedienen.
Auditpaneel
In 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.
Configureer en voer een audit uit
- 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 uit te voeren voor elke categorie met behulp van mobiele emulatie op een gesimuleerde 3G-verbinding.
- Gebruik Shift + Tab of navigeer terug in de bladermodus om de auditinstellingen te wijzigen.
- Wanneer u klaar bent om de audit uit te voeren, navigeert u terug naar de knop Audit uitvoeren en drukt u op Enter .
- De focus wordt verplaatst naar een modaal venster met een knop Annuleren waarmee u de audit kunt afsluiten. Mogelijk hoort u een reeks oorsignalen 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 kan gemakkelijker zijn om er in de bladermodus doorheen te navigeren om erachter te komen welke besturingselementen aan elke sectie zijn gekoppeld. - Er is geen oorcon- of liveregioaankondiging wanneer de audit is voltooid. Over het algemeen duurt het ongeveer 30 seconden, waarna u naar de resultaten zou moeten kunnen navigeren. Het gebruik van de bladermodus kan de gemakkelijkste manier zijn om de resultaten te bereiken.
Navigeer door het auditrapport
Het auditrapport is onderverdeeld in secties die overeenkomen met elk van de auditcategorieën. Het rapport wordt geopend met een lijst met scores voor elke categorie. Deze partituren zijn tevens links waarmee u naar de betreffende secties kunt gaan. Binnen elke sectie bevinden zich uitvouwbare details , die informatie bevatten over geslaagde of mislukte audits. Standaard worden alleen falende audits getoond. Elke sectie eindigt met een laatste details dat alle geslaagde audits bevat.
Om een nieuwe audit uit te voeren, gebruikt u Shift + Tab om het rapport af te sluiten en zoekt u naar de knop Een audit uitvoeren .