useAriaLive

Käyttötarkoitus

Käytä useAriaLive-hookia, kun haluat toteuttaa ruudunlukijalle luettavan ilmoituksen, jota ei välttämättä näytetä muuten ruudulla. Toteutus perustuu aria-live(Avautuu uuteen välilehteen)-attribuuttiin.

Ilmoitus voi olla esimerkiksi hakutulosten lukumäärä, tietojen järjestyksen vaihtumisesta ilmoittaminen tai muu vastaava tieto, joka helpottaa ruudunlukijan käyttäjää ymmärtämään mitä palvelussa tapahtuu.

Ilmoitus poistetaan hetken kuluttua sen asettamisesta, jolloin siihen ei pääse navigoimaan näppäimistöllä.

Oletusarvot

Oletuksena asetetaan alla olevat attribuutit ja ilmoitus poistetaan puolen minuutin kuluttua.

<div aria-live="polite" class="kds-sr-only"></div>

Toimintaa voi muokata välittämällä hookille seuraavat parametrit:

const { ariaLiveProps, announce } = useAriaLive(ref, {
  ariaAtomic: true,
  ariaLive: "assertive",
  cleanupTimeout: 750,
  shouldCleanup: true,
  suppressError: true,
});

Esimerkit

Ilmoituksen toteuttaminen

Esimerkki ei tee mitään näkyvää, vaan ainoastaan lisää ilmoituksen ruudunlukijan luettavaksi.

Ilmoituksen toteuttaminen React-komponentin ulkopuolella

React-komponenttien ulkopuolella voi käyttää announceAriaLive-funktiota.

announceAriaLive(document.querySelector("[aria-live]"), "Tämä on ruudunlukijalle luettava ilmoitus");