lillbra.se

Kom igång med WAI-ARIA

WAI-ARIA (Accessible Rich Internet Applications) är en standard från W3C för ökad tillgänglighet på javascript-tunga webbplatser. Den beskriver hur man ska hantera innehåll i html som är dynamiskt och ändras, till exempel genom AJAX.
Standarden har två huvuddelar: roller (roles) och tillstånd & egenskaper (states & properties).

Roller

Roller kan användas för att beskriva vilken roll (duh!) en viss del eller visst element har på sidan eller i applikationen. Du använder roller genom att lägga till attributet role i din html-kod, t.ex:

<div role="banner">

Det finns 61 stycken roller, mer eller mindre självförklarande, som t.ex. alertdialog, tabpanel, progressbar.
De mest övergripande rollerna kallas landmarks och kan användas av skärmläsare för att navigera runt till huvuddelarna av dokumentet, d.v.s. samma användning som en “Hoppa till innehållet”-länk. Landmarks-rollerna är följande:

  • application – del av sidan som anses vara mer applikation än dokument
  • banner – t.ex. sidhuvud som beskriver webbplatsen
  • complementary – stödmaterial till huvudinnehållet som även är meningfullt om det skulle vara fristående
  • contentinfo – metadata om huvudinformationen
  • main – huvudinnehållet på sidan
  • navigation – navigationsmeny
  • search – sökfunktion

Som synes har några av rollerna stora likheter med betydelsen av vissa html5-element. Steve Faulkner har en bra jämförelsetabell mellan landmark roles och html-taggar där du kan se förhållandet mellan dem (via Bruce Lawson).
För samtliga roller bör man tänka på att inte sätta ut roller som konkurrerar med html-elementets semantiska betydelse (via html5doctor). Till exempel ska ett button-element inte ha något annat än en button-roll.

Egenskaper och tillstånd

Egenskaper och tillstånd används för att meddela en skärmläsare eller annat hjälpmedel när förändringar görs på sidan. Egenskaper och tillstånds sätts genom attribut med formatet aria-*. Till exempel:

<div aria-hidden="true">

Man kan använda flera attribut på samma element och de ska med fördel kombineras med roll-attributet. T.ex:

<a role="button" aria-haspopup="true" aria-owns="minPopup">

Skillnaden mellan egenskaper och tillstånd är att egenskaperna (t.ex. aria-labelledby) oftast inte ändras för ett element, medan tillstånd (t.ex. aria-checked) ändras löpande då användaren interagerar på sidan.
Det finns totalt 35 stycken egenskaper och tilstånd. Några av de, i mina ögon, viktigaste är:

  • aria-live – Indikerar att ett område eller element kommer att uppdateras. Värde: off/polite/assertive, beroende på om användaren ska meddelas vid en uppdatering eller ej.
  • aria-describedby – Hänvisning till ett annat element som innehåller mer information som användaren kan behöva för att använda elementet. Värde: element-id.
  • aria-hidden – Om ett element är gömt eller inte. Värde: true/false.
  • aria-selected – Om ett element är valt eller inte. Värde: true/false.
  • aria-owns – Visar att ett element hör ihop med ett annat element, även om DOM-trädet inte avspeglar denna relation. Värde: element-id.
  • aria-expanded – Om ett element, eller annat element som det kontrollerar, betraktas som utfällt eller inte. Värde: true/false.
  • aria-haspopup – Om ett element har en popup-/dropdown-meny kopplad till sig. Värde: true/false.

Verktyg för utvecklare

Om du använder WAI-ARIA och vill testa resultatet för användaren kan du använda dessa verktyg (via eutveckling.se):

Läs mer om hur du kommer igång med WAI-ARIA i artikeln Introduction to WAI ARIA på dev.opera.com. Lycka till!

Mer på lillbra.se om: , , , ,

Andra bloggar om om: , html, html5, tillgänglighet, wai-aria

Kommentera

Rullar på Wordpress med modifierat Guerrilla-tema