"Läs mer"-länkar och tillgänglighet

2016.09.05

På Internet är det inte ovanligt att man använder fraser som "läs mer" eller "klicka här" för att visa på att en artikel eller nyhet går att läsa i sin helhet någon annanstans. Jag brukar säga att den typen av länktexter är dåliga ur ett tillgänglighetsperspektiv. Men hur är det egentligen? Stämmer det?

Vad är problemet?

För en användare med bra syn är det sällan ett problem att förstå den kontext där en "läs mer"-länk förekommer. Problemet uppstår för användare som inte kan se, eller ser dåligt och som använder en skärmläsare. En skärmläsare är ett program som bland annat, med syntetiskt tal, kan läsa upp informationen på en webbplats för användaren. Användare av skärmläsarverktyg kan välja att navigera på webbplatser genom att "tabba" sig genom länkarna på en sida i syfte att hitta en specifik länk. Med den kunskapen är det lätt att se varför en "läs mer"-länk blir svår att förstå och vad som gör den otillgänglig.

Tänk en sida som listar korta sammanfattningar av nyheter med en "läs mer"-länk i anslutning till varje nyhet. En användare av en skärmläsare som väljer att navigera på sidan genom att hoppa mellan länkar skulle då enbart få ett antal "läs mer" uppläst för sig.

Man har alltså ingen aning om vad det är man kommer läsa mer om om man följer länken.

WCAG 2.0 - Riktlinje 2.4.4

The World Wide Web Consortium (W3C) har i sina riktlinjer, Web Content Accessibility Guidelines (WCAG) utifrån detta problem tagit fram riktlinjen 2.4.4 - Link Purpose (In Context), som gör gällande:

"The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general."

Vilket betyder att en användare utifrån den informationen som en länk ger (i länktext eller sitt automatiskt tydliggjorda länksammanhang) ska kunna avgöra om han eller hon vill följa länken eller inte. En länk med länktext av typen "läs mer" eller "klicka här" uppfyller alltså inte i sig riktlinjen. Vi behöver något mer för att göra en sådan länk tillgänglig.

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) är instruktioner framtagna av W3C som specificerar hur man kan öka tillgängligheten på webbplatser. Specifikationerna tillhandahåller bland annat information om HTML-attribut som kan användas i HTML-kod för att öka tillgängligheten där HTML-standarden inte räcker till. Ett av dessa attribut kan hjälpa oss att uppnå riktlinjen 2.4.4

aria-labelledby

Med hjälp av aria-labelledby kan ett, eller flera andra HTML-element användas som "label" eller etikett till en "läs mer"-länk. Ett vanligt scenario är att man använder en nyhetsrubrik och ingress som etikett till länken.

De HTML-element som ska användas som etiketter pekas ut med hjälp av dess IDn och refereras som värden till attributet.

<h2 id="header">Winston söker en digital AD</h2>
<p id="description">Vi söker dig som är en digital AD med användarnytta i fokus.</p>
<a aria-labelledby="header description" href="ledigajobb.html">läs mer...</a>
Ett exempel på hur aria-labelledby kan användas för att göra en annars obegriplig länk begriplig för en användare med skärmläsare

I exemplet ovan skulle en skärmläsare istället för "läs mer" läsa upp "Winston söker en digital AD. Vi söker dig som är en digital AD med användarnytta i fokus." Noterbart är att "läs mer" inte inkluderas i den upplästa texten utan de refererade elementens innehåll ersätter helt länktexten.

På World Wide Web Consortiums (w3c) webbplats beskriver teknik ARIA7 mer i detalj hur aria-labelledby kan användas för att öka tillgängligheten.

Så hur var det nu med tillgängligheten och "läs mer"-länkar.

Vi kan alltså konstatera att länktexter av typen "läs mer" eller "klicka här" inte behöver vara otillgängliga. Genom att komplettera länkelementet med aria-attributet, aria-labelledby, går det att ge mening till länkar där sådan saknas.

Rent tekniskt går detta att lösa på två sätt.

  1. En redaktör skriver in de IDn och attribut som behövs i redaktörsgränssnittets HTML-läge
  2. Det hela sköts programmatiskt

Om redaktörer ska hantera detta krävs det viss kunskap om hur man skriver HTML. Om det istället ska skötas programmatiskt så bör det definieras ordentligt hur det ska fungera – t.ex. vilka element som ska användas som etiketter. Det finns risk för att lösningen inte blir så flexibel som man önskar.

Så; även om det går att göra länkar med icke beskrivande länktexter tillgängliga så kommer nog min rekommendation även fortsättningsvis vara att undvika detta om inte alldeles speciella skäl föreligger.