Saavutettavuus: ARIA-tila ja ilmoitukset

CSS

HTML

Javascript

/* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat
   käsittelijät liitettäisiin toistamiseen. Elementti korvataan kopiollaan:
   kopio ei peri tapahtumankäsittelijöitä. */
const puhdista = function (elementti) {
  const kopio = elementti.cloneNode(true);
  elementti.replaceWith(kopio);
  return kopio;
};

/* Kaikki tila kerrotaan kahdesti: silmälle CSS:llä ja apuvälineelle
   ARIA-attribuutilla. Jos vain toinen tehdään, osa käyttäjistä jää
   ilman tietoa. */

const nappi = puhdista(document.getElementById("valikkonappi"));
const valikko = document.getElementById("valikko");

nappi.addEventListener("click", function () {
  const auki = valikko.hidden;

valikko.hidden = !auki;

/* ARIAn arvot ovat merkkijonoja. Attribuutin puuttuminen ei tarkoita
     arvoa false vaan sitä, ettei tilaa ole kerrottu lainkaan - siksi
     molemmat tapaukset kirjoitetaan näkyviin. */
  nappi.setAttribute("aria-expanded", String(auki));

console.log("aria-expanded =", nappi.getAttribute("aria-expanded"));
});

const suosikki = puhdista(document.getElementById("suosikki"));

suosikki.addEventListener("click", function (e) {
  const paalla = e.target.getAttribute("aria-pressed") === "true";

e.target.setAttribute("aria-pressed", String(!paalla));
  e.target.textContent = paalla ? "Lisää suosikiksi" : "Poista suosikeista";

console.log("aria-pressed =", e.target.getAttribute("aria-pressed"));
});

/* role="status" vastaa arvoa aria-live="polite" ja role="alert" arvoa
   assertive. Kohtelias odottaa taukoa, kiireellinen keskeyttää.
   Kokeile ruudunlukijalla: eron huomaa vain silloin. */

const naytto = document.getElementById("naytto");
let laskuri = 0;

puhdista(document.getElementById("kohtelias"))
  .addEventListener("click", function () {
    laskuri += 1;
    const viesti = `Hakutuloksia ${laskuri} kappaletta`;

document.getElementById("status").textContent = viesti;
    naytto.textContent = viesti;
    console.log("polite:", viesti);
  });

puhdista(document.getElementById("kiireellinen"))
  .addEventListener("click", function () {
    const viesti = "Yhteys katkesi";

document.getElementById("alert").textContent = viesti;
    naytto.textContent = viesti;
    console.log("assertive:", viesti);
  });

Valikko ja ilmoitukset

Ilmoitusten ero

CSS

HTML

Javascript

Konsoli