ARIA (Accessible Rich Internet Applications) on joukko attribuutteja, jotka lisäävät saavutettavuuden semantiikkaa — rooleja, tiloja ja ominaisuuksia — joita nativi HTML ei voi ilmaista. Mutta tärkein ARIA-sääntö on: suosi natiivi HTML ensin.
Save
Save
Natiivit elementit tulevat oikeiden roolien, näppäimistöjen käyttäytymisen ja fokuksen kanssa ilmaiseksi. Turvaudu ARIA:aan vain silloin, kun mikään nativi elementti ei tee työtä.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Tämä on todella hyödyllistä ARIA:a: näytönlukijoiden kertominen sisällöstä, joka muuttuu ilman sivun uudelleenlataamista (hakutulokset, ilmoitukset, vahvistusvirheet).
Virheellinen ARIA on parempi kuin ei mitään — se antaa näytönlukijan käyttäjille väärää tietoa. Ja ARIA muuttaa vain semantiikkaa, ei koskaan toimintaa: role="button" <div>-elementille ei tee sitä fokusointikelpoiseksi tai klikattavaksi; sinun on lisättävä tabindex ja näppäinkäsittelijät itse.
Käytä semanttista HTML:ää 95 %:n tapauksessa; käytä ARIA:a rakkojen täyttämiseen mukautetuille widgeteille (välilehdet, yhdistelmälaatikot, valikot) ja dynaamisten päivitysten ilmoittamiseen live-alueiden kautta.
Noudata sääntöjä — suosi natiiveja, älä muuta natiiveja semantiikkaa tarpeettomasti, pidä tilat synkronisoidussa ja älä koskaan käytä roolia, jota et täysin toteuta.