Valintaikkunoiden nimet

Silktide tarkistaa, että valintaikkunat – sivun päälle avautuvat ponnahdusikkunat – määrittävät nimen, jonka voi lukea ääneen, jotta ihmiset tietävät, mitä juuri avautui.

Valintaikkuna merkitään antamalla elementille -rooli dialog. Rooli kertoo avustavalle teknologialle, että erillinen ikkuna on avautunut, mutta se ei yksinään kerro, mihin ikkunaa käytetään.

<!-- Ongelma: valintaikkunalla ei ole saavutettavaa nimeä -->
<div role="dialog">
  <p>Istuntosi on vanhenemassa.</p>
</div>

Miksi tämä on tärkeää

Kun valintaikkuna avautuu, ilmoittaa siitä ja siirtää vierailijan kohdistuksen sen sisälle. Jos valintaikkunalla on nimi, kuuntelija kuulee esimerkiksi "Istunnon aikakatkaisu, valintaikkuna" ja ymmärtää keskeytyksen heti. Ilman nimeä hän kuulee vain "valintaikkuna" – hänet on siirretty pois tekemästään asiasta ilman selitystä, ja hänen on tutkittava sisältöä selvittääkseen syyn.

Näin korjaat sen

Anna jokaiselle valintaikkunalle käyttämällä jotakin seuraavista:

aria-labelledby, joka viittaa valintaikkunan näkyvän otsikon id-tunnisteeseen – tämä on paras vaihtoehto, koska näkevät vierailijat näkevät saman nimen:

<!-- Korjattu: valintaikkuna on nimetty otsikollaan -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Istunnon aikakatkaisu</h2>
  <p>Istuntosi on vanhenemassa.</p>
</div>

aria-label, jossa nimi annetaan tekstinä, kun valintaikkunalla ei ole näkyvää otsikkoa:

<div role="dialog" aria-label="Istunnon aikakatkaisu">
  ...
</div>

Näin Silktide testaa tämän

Etsi jokaiselta sivulta kaikki elementit, joiden role on dialog.
Selvitä kunkin valintaikkunan saavutettava nimi esimerkiksi aria-label- ja aria-labelledby-attribuuteista.
Raportoi jokainen valintaikkuna, jonka saavutettava nimi puuttuu tai on tyhjä.

Vianmääritys

Valintaikkunani näkyy vasta käyttäjän toiminnan jälkeen

Silktide tutkii jokaisen sivun sen latautuessa. Valintaikkunaa, joka lisätään sivulle vasta myöhemmin – esimerkiksi painiketta napsautettaessa – ei ehkä testata, mutta se tarvitsee silti nimen sitä käyttäville vierailijoille.

Käytän natiivia dialog-elementtiä

Tämä tarkistus tutkii elementtejä, jotka määrittävät role="dialog"-roolin nimenomaisesti. Natiivia <dialog>-elementtiä ilman kyseistä roolia ei testata, mutta ohje pätee silti: anna sille saavutettava nimi käyttämällä aria-labelledby- tai aria-label-attribuuttia.