Elementen selecteren
Verschillende functies van axe DevTools vragen je specifieke elementen op de pagina aan te wijzen. Je kunt elementen selecteren met je muis door erop te klikken, of met je toetsenbord en ondersteunende technologieën met de „Element Selector“. Beide methoden kunnen binnen dezelfde stap door elkaar worden gebruikt.
- Waar je elementen selecteert
- Selecteren met een muis
- Selecteren met de Element Selector
- Tussen gemarkeerde elementen springen
- Een selectie verwijderen
Waar je elementen selecteert
| Kenmerk | Wat je selecteert |
|---|---|
| Gedeeltelijke paginascanner | Eén element waarop de scan is beperkt |
| Handmatige problemen melden | Eén element waarop het probleem is gericht, plus een willekeurig aantal gerelateerde elementen |
| Intelligente begeleide tests | Hangt af van de vraag. Sommige vragen vragen één element (bijvoorbeeld een tabel of de trigger van een modal), andere voor een willekeurig aantal elementen (bijvoorbeeld koppen of tabbalken die nog niet gemarkeerd waren) |
Wanneer een stap slechts één element accepteert, kun je geen ander selecteren totdat je de huidige selectie verwijdert.
Selecteren met een muis
Muisselectie wordt geregeld door de „Muisselectie“ schakelaar, die aangeeft of deze momenteel „AAN“ of „UIT“ is. In de meeste stappen wordt muisselectie automatisch ingeschakeld.
Terwijl muisselectie aan staat:
- Zweef over de pagina. Het element onder je aanwijzer is omlijnd.
- Klik op het omlijnde element om het te selecteren. Het element blijft gemarkeerd op de pagina en de Element Selector breidt zich uit om het te tonen.
Klikken worden vastgelegd door axe DevTools terwijl muisselectie aan staat, zodat links en knoppen op de pagina niet worden geactiveerd. Om normaal met de pagina te communiceren (bijvoorbeeld om een modal te openen voordat je deze selecteert), schakel je de „Muisselectie“ uit en vervolgens weer aan wanneer je klaar bent om te selecteren.
In een paar stappen van Intelligente Begeleide Tests, zoals het selecteren van een modal nadat je deze hebt geopend, start de muisselectie uitgeschakeld zodat je eerst met de pagina kunt communiceren. Schakel de „Muisselectie“ in wanneer je klaar bent om te selecteren.
Selecteren met de Element Selector
De Element Selector is een toetsenbordtoegankelijke, schermlezer-vriendelijke manier om elementen zonder muis te selecteren. Deze verschijnt onderaan het paneel, onder de „Element Selector“ kop, en toont de DOM van de pagina als een uitbreidbare boom. Elk item toont de tagnaam van het element samen met zijn id, class, en role attributen, indien aanwezig.
Bij de meeste functies start de Element Selector ingeklapt. Activeer de „Bekijk elementselector“ knop naast de kop om het uit te breiden.
Toetsenbordnavigatie
| Toets | Actie |
|---|---|
| Pijltje omlaag | Ga naar het volgende zichtbare element |
| Pijltje omhoog | Ga naar het vorige zichtbare element |
| Pijltje naar rechts | Vouw een ingeklapt element uit, of ga naar het eerste kind als het al uitgevouwen is |
| Pijltje naar links | Klap een uitgevouwen element in, of ga naar de ouder als het al ingeklapt is |
| Spatie | Selecteer het gefocuste element, of deselecteer het als het al geselecteerd is |
Terwijl je je door de boom beweegt, wordt het gefocuste element op de pagina gemarkeerd en in beeld gebracht, zodat je kunt bevestigen dat je op het juiste element zit voordat je het selecteert.
Je kunt ook de knoppen onder de boom gebruiken:
- „Selecteer“ selecteert het gefocuste element
- „Verwijder“ verwijdert het gefocuste element uit je selectie
Een item in de boom aanklikken vouwt het uit of klapt het in; het selecteert het niet. Om een element uit de boom te selecteren met een muis, klik je op het item en daarna op „Selecteer“.
Ondersteuning voor schermlezers
Wanneer een item in de boom focus krijgt, kondigen schermlezers details aan over het element, zoals zijn toegankelijke naam en berekende rol. Items kondigen ook „Geselecteerd“ aan wanneer ze deel uitmaken van je selectie, en „Gemarkeerd“ (met hun positie, zoals „Gemarkeerd 2 van 5“) wanneer axe DevTools ze heeft gemarkeerd.
Voor de volledige lijst van eigenschappen en attributen van het gefocuste element, activeer je de „Meer Info“ knop ervan.
Tussen gemarkeerde elementen springen
In sommige stappen markeert axe DevTools elementen op de pagina voor je om te beoordelen, zoals de koppen of tabbalken die tijdens een Intelligente Begeleide Test zijn gevonden, of de problemen die zijn gemarkeerd bij het melden van een handmatig probleem. In plaats van door de boom te navigeren om ze te vinden, kun je direct tussen ze springen.
Wanneer er twee of meer gemarkeerde elementen zijn, gebruik dan de „Spring naar vorige markering“ en „Spring naar volgende markering“ knoppen in de Element Selector. Terwijl een gemarkeerd element is gefocust, toont een teller (bijvoorbeeld, „2 / 5“) zijn positie onder alle gemarkeerde elementen.
Je kunt ook sneltoetsen gebruiken terwijl de focus ergens in de Element Selector is, inclusief op een item in de boom:
| Sneltoets | Actie |
|---|---|
| Alt+Shift+N (Option+Shift+N op macOS) | Spring naar het volgende gemarkeerde element |
| Alt+Shift+P (Option+Shift+P op macOS) | Spring naar het vorige gemarkeerde element |
Springen gaat in een lus, dus voorbij het laatste gemarkeerde element ga je terug naar het eerste, en vice versa. Als er maar één gemarkeerd element is en je hebt ervan weg genavigeerd, brengt elke sneltoets je er weer naartoe.
Een selectie verwijderen
Om een geselecteerd element te verwijderen, doe een van de volgende dingen:
- In de Elementen Selector, focus op het element en druk op Spatie of activeer „Verwijderen“
- Activeer de verwijderknop (prullenbak) naast het element in de lijst van geselecteerde elementen
- In Intelligent Guided Tests, activeer „Verwijder alle selecties“ om elke selectie in de huidige stap te wissen
Bij het melden van een handmatig probleem is het eerste element dat je selecteert het „Geselecteerde Element“ waartegen het probleem wordt gemeld, en elk element daarna wordt vermeld onder „Gerelateerde Elementen“.