Krönika

Juli månads tips (två månader kvar) Landmarks och ARIA

För att en skärmläsaranvändare ska kunna hitta på en websida, förstå olika funktioner eller veta när något på en sida har ändrats så behöver de allra flesta webbplatser vara kodade med någon typ av aria.

Christer Janzon

Titel: Utvecklare

Många utvecklare vet inte om att webbläsaren tar HTML DOM och ändrar det till ett så kallat tillgänglighetsträd (accessibility tree) vilket är det som skärmläsaren hämtar det mesta av informationen ifrån.

När vi på Funka granskar webbplatser märks det tydligt att många områden och funktioner saknar aria, eller ännu värre, har kodat det på ett felaktigt sätt. Det betyder att tillgänglighetsträdet inte alls speglar informationen som det är tänkt. För att undvika den här typen av problem behövs det lite grundläggande kunskap om aria och landmarks. Som utvecklare behöver du såklart testa din kod med en skärmläsare lite då och då, men framför allt behöver du testa med personer som använder skärmläsare dagligen.

Vad handlar det här om?

För att hjälpa en skärmläsaranvändare kan du till exempel använda några av de grundläggande strukturella HTML 5 element som finns, exempelvis ”header”, ”main”, ”footer” och ”nav”, det är en bra början.

Om du märker upp sökfunktionen med attributet role=search och om du använder aria-expanded="true/false" på knappar som expanderar områden, så har webbplatsen kommit en liten bit på vägen.

Landmarks

Använd aldrig ett landmark eller en role som du inte vet konsekvensen av. Allt för många gånger ser vi komponenter som är korrekt kodade i sig, men som tillsammans med andra komponenter skapar problem.

De exempel på landmarks som nämns ovan kallas för strukturella HTML 5 element och de fyller sitt syfte. Även attributet ”role=värde” är en typ av landmark och det finns drygt 80st olika värden att använda, varav 75% nästan aldrig är aktuella.

I exemplet nedan visas html kod som jag anser är grunden för en webbplats:

<body>
   <header>
      <div role=search>
      Sökfunktion
      </div>
   </header>
   <nav>Navigationen</nav>
   <main>Innehåll</main>
   <footer>Upprepande innehåll</footer>
</body>

ARIA

Ett exempel på när det är viktig att använda aria är om det finns flera olika navigeringar på en sida. En skärmläsare hittar dessa områden om de är kodade med elementet ”nav" eller med attributet ”role=navigation” men det kan vara svårt att särskilja dessa områden åt.

Attributet aria-label kan på ett enkelt sätt användas för att märka upp respektive navigation. Skärmläsaren får då reda på att det finns en navigation som heter ”main” och en annan som heter ”local”.

<nav aria-label="main">
   <ul>
      <li><a href="url1">Landing page 1</a></li>
      <li><a href="url2">Landing page 2</a></li>
   </ul>
</nav>

<nav aria-label="local">
   <ul>
      <li><a href="url1">Page 1</a></li>
      <li><a href="url2">Page 2</a></li>
   </ul>
</nav>

Ett annat exempel på när det är viktigt att använda aria är när ett område på sidan är expanderbart. Ett typiskt sådant område brukar vara mobilnavigeringen. Om en skärmläsaranvändare klickar på den här typen av knappar så händer ingenting. Rent visuellt visas området men skärmläsaren säger ingenting. Det som borde hända är att skärmläsaren säger något i stil med ”expanderad” eller ”ihopfälld” vilken den faktiskt skulle göra om knappen var uppmärkt med ”aria-expanded ” och att värdet sedan växlar mellan ”true” och ”false”. I exemplet nedan är mobilnavigeringen ihopfälld och syns därmed inte.

<button id="m-trigger" aria-expanded="false">Meny</button>
<nav aria-label="mobile" hidden>
   <ul>
      <li><a href="url1">Landing page 1</a></li>
      <li><a href="url2">Landing page 2</a></li>
   </ul>
</nav>

I det här exemplet är mobilnavigeringen expanderad och fullt synlig.

<button id="m-trigger" aria-expanded="true">Meny</button>
<nav aria-label="mobile">
   <ul>
      <li><a href="url1">Landing page 1</a></li>
      <li><a href="url2">Landing page 2</a></li>
   </ul>
</nav>

WCAG 2.1:

1.3.1
2.4.3
2.5.3
4.1.2
4.1.3

Bara månader kvar tills din webbplats måste vara tillgänglig!