Interactieve Elementen Intelligent Geleide Test

De Interactieve Elementen IGT ondersteunt het testen van meerdere staten zonder dat de IGT's opnieuw moeten worden uitgevoerd. Een interactief element is eenvoudigweg alles waarmee de gebruiker op de webpagina interacteert, zoals knoppen, links, invoer, menu's, enz.

Hoe het werkt

Het eerste dat je moet doen, is de pagina in de staat brengen die je wilt testen. Daarna zullen enkele eenvoudige vragen je begeleiden door de toegankelijkheidstests die vereist zijn voor elk van de interactieve elementen op de pagina.

Klik op „START“ wanneer je klaar bent om de test uit te voeren.

Stap 1: Missen

Eerst scant de IGT de pagina (of component) om alle interactieve elementen te vinden. Als Machine Learning is ingeschakeld (zie instellingenpagina), detecteert het elementen die niet zijn opgemaakt met interactieve attributen (rollen, tabindex, etc.) die feitelijk interactief kunnen zijn.

Bij deze eerste vraag word je gevraagd om alle interactieve elementen te selecteren die gemist zijn. Als er niets ontbreekt, klik je eenvoudig op „VOLGENDE“.

Vervolgens kun je kiezen welk element je wilt testen. Standaard worden deze elementen "intelligent" gegroepeerd met behulp van ons algoritme om vergelijkbare elementen te groeperen. Je kunt er echter voor kiezen om ze te groeperen op rol of ze zonder enige groepering te presenteren met behulp van de "Groepeer per"-controle.

Stap 2: Nauwkeurigheid

Voor de elementen die je kiest om te testen, wordt je gevraagd om de Toegankelijke Naam, Rol en Staat van het element te verifiëren. De Toegankelijke Naam wordt gebruikt om het doel van de interactieve elementen over te brengen, zoals een label op een formulier. De Rol geeft aan met welke bediening de gebruiker interacteert (knop, tab, link, enz.). De Staat vertelt de gebruiker die assistieve technologie gebruikt wat de huidige staat van de bediening is (zoals geselecteerd/niet geselecteerd, aangevinkt/niet aangevinkt).

Toegankelijke Naam

Je wordt gevraagd te bevestigen dat de Toegankelijke Naam het doel van de interactieve elementen nauwkeurig beschrijft.

Rol

Vervolgens, als de IGT de rol kan detecteren, wordt deze vooraf geselecteerd. Je kunt de standaardselectie overschrijven als de rol verschilt van wat wordt gedetecteerd uit een vervolgkeuzelijst met beschikbare rollen.

Staat(en)

Op dezelfde manier toont de IGT vooraf geselecteerde staten. Voor elementen waarvoor een staat niet relevant is, laat je de staat op "Niet van toepassing" staan. Nadat je hebt bevestigd dat de Toegankelijke Naam, rol en de staat correct worden overgebracht, kun je een andere staat van hetzelfde element testen! Plaats het Interactieve Element in de bijkomende staat die je wilt testen (zoals een selectievakje aanvinken, een tab selecteren, enz.). Zodra je klaar bent, klik je op „CONTROLEER DE STAAT VAN HET ELEMENT“. De IGT detecteert de nieuwe staat en je kunt bevestigen of de staat correct wordt overgebracht. Dit wordt herhaald voor alle elementen die je voor testen hebt geselecteerd. Zodra je klaar bent met het testen van alle geselecteerde elementen en hun staten die je wilt testen, selecteer je „VOLGENDE“.

Werken in Geautomatiseerde Modus

Wanneer geautomatiseerde IGT-modus is ingeschakeld, omvat de Interactieve Elementen IGT een elementselectiestap voordat AI met de analyse begint. Dit geeft je directe controle over de reikwijdte van je test.

Stap 1: Selecteer elementen om te testen

Voordat de AI-analyse begint, worden je alle interactieve elementen die op de pagina zijn gevonden gepresenteerd — zowel die automatisch gedetecteerd als eventuele extra elementen die onze AI identificeert als potentieel interactief maar niet zijn gemarkeerd met standaard interactieve attributen (rollen, tab, etc.).

Selecteer de elementen die je in je test wilt opnemen en klik vervolgens op Volgende om verder te gaan.

Stap 2: AI analyseert je geselecteerde elementen

AI beoordeelt automatisch de toegankelijke naam, rol en staat van elk geselecteerd element. Zodra de analyse is voltooid, word je naar het beoordelingsscherm gebracht om de bevindingen van AI te inspecteren, eventuele correcties aan te brengen en je test te voltooien. Zie Geautomatiseerde IGT's voor details over het beoordelen van resultaten, het aanbrengen van correcties en het voltooien van je test.

Wat het test

De Interactieve Elementen IGT test op:

• Geldige toegankelijke namen
• Geldige rollen
• Geldige staten

Veelgestelde Vragen

Wat betekenen elk van de beschikbare "Elementenstaten"?

Hieronder volgt een overzicht van elk van de beschikbare staten om te testen in de Interactieve Elementen IGT.

Uitgeschakeld

Geeft aan dat een element niet bewerkbaar of anderszins niet bedienbaar is. Als uitgeschakeld, is een element noch bewerkbaar noch focusbaar. Het uitschakelen van een element kan worden gedaan met behulp van de inheemse HTML disabled eigenschap (voorkeur) of aria-disabled="true".

Voorbeelden van Uitgeschakeld

Uitgeschakelde verzendknop:

<button type="submit" disabled>Submit</button>

Uitgeschakelde invoerveld:

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Ingedrukt

Geeft aan dat een schakelkast momenteel "ingedrukt" is. De ingedrukte staat van een element wordt beheerd via het aria-pressed attribuut. Er zijn 3 ondersteunde waarden voor aria-pressed:

• "true": geeft aan dat de schakelknop momenteel is ingedrukt
• "false": geeft aan dat de schakelknop momenteel niet is ingedrukt
• "mixed": geeft aan dat de waarden van meerdere items die door de schakelknop worden bediend niet allemaal dezelfde waarde hebben (tri-state)

Voorbeelden van ingedrukt

Een pauzeknop die momenteel niet is ingedrukt:

<button aria-pressed="false">Pause</button>

Een dempknop die momenteel is ingedrukt:

<button aria-pressed="true">Mute</button>

Uitgeklapt

Geeft aan dat een element, of een ander groeperingselement dat het beheert, momenteel is uitgeklapt. De uitgeklapte status van een element wordt beheerd via het aria-expanded-attribuut. De waarde van het aria-expanded-attribuut moet worden ingesteld op "true" wanneer het element (of het groeperingselement dat het beheert) is uitgeklapt en ingesteld op "false".

Voorbeelden van uitgeklapt

Een uitgeklapte knop:

<button aria-expanded="true">options</button>

Geselecteerd

Geeft aan dat een element momenteel in een „geselecteerde“ staat is. De geselecteerde status van een element wordt beheerd via het aria-selected-attribuut. De waarde van het aria-selected-attribuut moet worden ingesteld op "true" wanneer het element is geselecteerd, "false" wanneer het niet is geselecteerd en "mixed" voor tri-state aankruisvakjes in een gemengde gecontroleerde staat.

Voorbeelden van geselecteerd

A simple tab panel managing aria-selected on the role="tab" elements:

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

Gecontroleerd

Geeft aan dat een element momenteel in een „gecontroleerde“ staat is. Meestal gebruikt bij aankruisvakjes, keuzerondjes en andere widgets. De gecontroleerde staat van een element kan worden beheerd met behulp van het HTML checked-attribuut (gebruikt met native aankruisvakjes) of het aria-checked-attribuut. Als u aria-checked gebruikt, moet de waarde van het attribuut worden ingesteld op "true" wanneer het element is gecontroleerd en "false" wanneer het niet is gecontroleerd.

Voorbeelden van gecontroleerd

Een gecontroleerd native aankruisvak:

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

Een niet-gecontroleerd ARIA aankruisvak:

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Alleen-lezen

Geeft aan dat een element niet bewerkbaar is, maar verder wel bedienbaar en focusbaar is. De alleen-lezen status van een element kan worden beheerd met behulp van het HTML readonly-attribuut of het aria-readonly-attribuut. Als u aria-readonly gebruikt, moet de waarde van het attribuut worden ingesteld op "true" wanneer het element in een alleen-lezen staat is en "false" wanneer het dat niet is.

Voorbeelden van alleen-lezen

Een alleen-lezen invoer:

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />