Interactieve Elementen Intelligente Geleid Test

De Interactieve Elementen IGT ondersteunt het testen van meerdere staten zonder de IGT's opnieuw te hoeven uitvoeren. Een interactief element is simpelweg alles waarmee de gebruiker op de webpagina interacteert, zoals knoppen, links, invoervelden, menu's, enzovoort.

Hoe het werkt

Het eerste wat je moet doen, is de pagina in de staat brengen die je wilt testen. Daarna begeleiden een paar eenvoudige vragen je door de toegankelijkheidstests die nodig zijn voor elk van de interactieve elementen op de pagina.

De Interactieve Elementen IGT maakt screenshots van elk interactief element. Terwijl de screenshots worden gemaakt, verzoeken wij je om niet te scrollen of te interacteren met de pagina.

Stap 1: Missend

Eerst zal de IGT de pagina (of component) scannen om alle interactieve elementen te vinden. Als Machine Learning is ingeschakeld (zie instellingenpagina), worden elementen gedetecteerd die niet zijn gemarkeerd met interactieve attributen (rollen, tab index, enz.) die mogelijk interactief zijn.

Stap 2: Nauwkeurigheid

Next, you can choose which element you would like to test. By default, these elements are grouped "intelligently" using our algorithm to group similar elements. However, you can choose to group them by role or have them presented with no grouping at all using the "Group by" control.

Step 2: Accuracy

Voor de elementen die je kiest om te testen, word je gevraagd om de Toegankelijke Naam, Rol en Status 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, tabblad, link, etc.). De Status vertelt de gebruiker met hulpmiddelen voor assistieve technologie wat de huidige status van de bediening is (zoals geselecteerd/niet geselecteerd, aangevinkt/uitgevinkt).

Toegankelijke Naam

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

Rol

Vervolgens, als de IGT de rol kan detecteren, wordt deze vooraf geselecteerd. Je kunt de standaardselectie overschrijven als de rol anders is dan wat wordt gedetecteerd vanuit een dropdown van beschikbare rollen.

Statussen

Uitvoeren in Geautomatiseerde Modus

Running in Automated Mode

Wanneer geautomatiseerde IGT-modus is ingeschakeld, bevat 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 alle interactieve elementen op de pagina aan je gepresenteerd — zowel die automatisch gedetecteerd zijn als eventuele extra elementen die onze AI identificeert als potentieel interactief maar niet gemarkeerd met standaard interactieve attributen (rollen, tab index, enz.).

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

Stap 2: AI analyseert je geselecteerde elementen

AI beoordeelt automatisch de toegankelijke naam, rol en status van elk geselecteerd element. Zodra de analyse voltooid is, word je naar het beoordelingsscherm gebracht om de bevindingen van AI te inspecteren, eventuele correcties aan te brengen en je test af te ronden. 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 statussen

Veelgestelde Vragen (FAQ)

Hieronder volgt een opsomming van elke beschikbare status om in de Interactieve Elementen IGT te testen.

Below is a breakdown of each of the available states to test in the Interactive Elements IGT.

Uitgeschakeld

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

Uitgeschakelde Voorbeelden

Uitgeschakelde verzendknop:

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

Uitgeschakeld invoerveld:

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

Ingedrukt

attribuut. Er zijn 3 ondersteunde waarden voor aria-pressed attribute. There are 3 supported values for aria-pressed:

• "true": geeft aan dat de keuzeknop momenteel ingedrukt is
• "false": geeft aan dat de keuzeknop momenteel niet ingedrukt is
• "mixed": geeft aan dat waarden van meer dan één item die door de keuzeknop worden bestuurd niet allemaal dezelfde waarde hebben (tri-state)

Ingedrukte voorbeelden

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 bestuurt, 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 bestuurt) is uitgeklapt en ingesteld op "false".

Uitgeklapte voorbeelden

Een uitgeklapte knop:

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

Geselecteerd

attribuut. De waarde van het aria-selected attribute. The value of the aria-selected attribuut moet worden ingesteld op "true" wanneer het element is geselecteerd, "false" wanneer het niet is geselecteerd en "mixed" voor driekeuze-vakjes in een gemengde gecontroleerde staat.

Selected examples

Een eenvoudig tabbladpaneel dat aria-selected beheert op de role="tab" elementen:

<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

attribuut (gebruikt bij native keuzevakjes) of het checked attribute (used with native checkboxes) or the aria-checked attribuut. Als je aria-checkedgebruikt, moet de waarde van het attribuut worden ingesteld op "true" wanneer het element is gecontroleerd en "false" wanneer het niet is gecontroleerd.

Gecontroleerde voorbeelden

Een gecontroleerd native keuzevakje:

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

Een niet-gecontroleerd ARIA-keuzevakje:

<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 ", "context": "paragraph aria-readonly attribuut. Wanneer je ", "context": "paragraph aria-readonlygebruikt, moet de waarde van het attribuut worden ingesteld op ", "context": "paragraph "true" wanneer het element in een alleen-lezen staat is en ", "context": "paragraph "false" wanneer het dat niet is.", "context": "paragraph

Alleen-lezen voorbeelden", "context": "heading level 5

Een alleen-lezen invoer:", "context": "paragraph

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