Länktexter, rubriker och struktur i webbutiken

Det här är teknisk vägledning och inte juridisk rådgivning. Hur tillgänglighetslagen ska tolkas i ditt fall avgör Post- och telestyrelsen (PTS), så vänd dig dit vid osäkerhet.

Den som använder skärmläsare går sällan igenom en sida från topp till botten. Man hoppar mellan rubriker eller ber programmet läsa upp alla länkar som en lista. Då är det rubrikerna och länktexterna som avgör om sidan går att använda. Tänk dig en påhittad produktsida med tolv länkar i listan som alla heter ”Läs mer”. Listan säger ingenting om vad som finns bakom dem. Den här guiden går igenom fyra saker som gratistestet på AccessAudit flaggar: länktexter som inte säger något, sidor utan H1, dubbla id och iframe utan titel. Vill du testa hela butiken finns en arbetsgång i Så testar du din webbutik mot WCAG 2.1 AA själv.

Kriterienamnen kommer från W3C:s svenska översättning av WCAG 2.0. Kravbeskrivningarna bygger på W3C:s Understanding-sidor för WCAG 2.1 och är sammanfattade av oss.

Länkar som inte säger vart de går

Kriterium 2.4.4 Syftet med en länk (i sammanhanget), nivå A, innebär att syftet med varje länk ska kunna avgöras av länktexten ensam, eller av länktexten tillsammans med dess sammanhang som går att läsa ut ur koden. Som sammanhang räknar W3C bland annat samma mening, stycke, listpunkt eller tabellcell. En rubrik före länken är bara en rekommendation, inte ett sätt som räcker. Kravet gäller inte länkar där syftet är otydligt för alla användare.

Gratistestet flaggar länkar vars namn är något av dessa uttryck: ”läs mer”, ”klicka här”, ”här”, ”mer”, ”mer info”, ”mer information”, ”länk”, ”läs”, ”se mer” och ”visa mer”, samt de engelska ”read more”, ”click here”, ”here”, ”more” och ”link”. Namnet är aria-label eller aria-labelledby om länken har något av dem, annars länkens text tillsammans med alt-text på bilder i den. Versaler spelar ingen roll, och punkt, kolon, utropstecken, ellips och pilar i slutet räknas inte. Länkar som själva har aria-hidden="true" eller hidden hoppas över. Testet ser inte om en annan länktext är dålig, till exempel ”Produkt” på tolv olika länkar.

Före:

<h3>Returer och byten</h3>
<p>Du har 14 dagars ångerrätt. <a href="/returer">Läs mer</a></p>

Efter, med länktexten i meningen:

<p>Du har 14 dagars ångerrätt. <a href="/returer">Läs mer om returer och byten</a></p>

Kan texten inte ändras synligt kan du komplettera med ett tillgängligt namn. Ett aria-label ersätter länktexten för hjälpmedel, så det ska börja med den synliga texten:

<a href="/returer" aria-label="Läs mer om returer och byten">Läs mer</a>

W3C beskriver både aria-label och aria-labelledby som tekniker som kan räcka tillsammans med sammanhanget. Visuellt dold text i länken är ett tredje sätt, men det kräver CSS som är skrivet för ändamålet.

Sidan saknar en H1

Kriterium 1.3.1 Information och relationer, nivå A, kräver att information och struktur som visas på skärmen också går att läsa ut ur koden. För rubriker innebär det att de märks upp med h1 till h6, inte bara görs stora och feta. Kriterium 2.4.6 Rubriker och ledtexter/etiketter, nivå AA, handlar om något annat: att rubrikerna beskriver ämne eller syfte. W3C skriver att 2.4.6 inte kräver att rubriker är uppmärkta i koden; det hör till 1.3.1.

Gratistestet flaggar en sida om den helt saknar h1. WCAG kräver ingen h1 och inte heller att det bara finns en. Shopify skriver i sin dokumentation för teman att h1 identifierar sidans huvudämne. Vi rekommenderar en h1 per sida som beskriver sidan, eftersom det är det enklaste sättet att ge den en tydlig början.

Tre påhittade exempel på hur det kan se ut i ett tema:

• Loggan är h1 på varje sida, så alla sidor har samma huvudrubrik.
• Produktnamnet på produktsidan är h2 eller en div med stor text.
• Stora texter i en banner är h1, medan sidans egentliga rubrik är h3.

Rätta så att sidans rubrik är h1 och loggan blir en vanlig länk. Rubriknivåer styr du med CSS, inte med val av tagg.

Rubriknivåer som hoppar

Testet flaggar också när en rubriknivå hoppar över ett steg, till exempel h2 direkt följd av h4. W3C:s sida för 1.3.1 tar inte upp hopp över nivåer, så gratistestet ger det den lägsta allvarsgraden (mindre), samma som oklara länktexter och dubbla id. En saknad h1 räknas som måttlig och en iframe utan titel som allvarlig. Testet jämför varje rubrik med rubriken före, så en sida som börjar med h3 flaggas inte för det. Shopify skriver att rubriktaggar ska användas i ordning. Det är god praxis, eftersom den som navigerar via rubriker annars kan tro att ett avsnitt saknas.

I WordPress finns Heading-blocket med knappar för nivå 1 till 6, och Outline-fliken i Document Overview visar sidans rubriker. WordPress skriver att sidans titel oftast blir h1, men att det beror på tema och mall, så kontrollera i källan.

Dubbla id

Kriterium 4.1.1 Parsing, nivå A, kräver bland annat att id är unika. Det kriteriet är borttaget i WCAG 2.2 (W3C kallar det obsolet), men finns kvar i WCAG 2.1, som EN 301 549 version 3.2.1 hänvisar till enligt PTS. W3C skriver på sin sida att kriteriet i sig inte längre ger någon fördel för personer med funktionsnedsättning, och att problem som dubbla id kan ge, som fel namn eller tillstånd, hör till andra kriterier.

I en butik märks det där ett id används för att koppla ihop saker. En etikett pekar med for på ett id, och aria-labelledby och aria-describedby gör samma sak. Finns id två gånger kan kopplingen hamna på fel element, och ett fält får fel namn. Hur aria-labelledby och aria-describedby används rätt står i guiden ARIA i webbutiken.

<label for="epost">E-post</label>
<input id="epost" type="email">
...
<label for="epost">Prenumerera på nyhetsbrev</label>
<input id="epost" type="email">

Rättningen är unika id, till exempel epost-kassa och epost-nyhetsbrev. Det blir vanligt när samma tillägg eller block läggs in flera gånger på en sida. Testet rapporterar varje upprepat id en gång per sida.

Iframe utan titel

Kriterium 4.1.2 Namn, roll, värde, nivå A, kräver att namn och roll går att läsa ut ur koden för alla komponenter. För iframe nämner W3C tekniken H64, att använda title-attributet. Det gäller betalfönster, kartor och inbäddade videor.

<iframe src="https://example.com/karta" title="Karta till butiken i Göteborg"></iframe>

Titeln ska säga vad innehållet är, inte bara ”iframe” eller ”inbäddning”. Gratistestet flaggar en iframe som varken har title eller ett namn via aria-label eller aria-labelledby. Iframes som själva har aria-hidden="true" eller hidden hoppas över. Testet kontrollerar bara att ett namn finns, inte om det är bra.

Så rättar du på olika plattformar

Det här är vad vi har kunnat verifiera i leverantörernas dokumentation.

• Shopify. Dokumentationen för teman anger att rubriktaggarna ska användas i ordning och att h1 anger sidans huvudämne. Den säger inget om länktexter eller iframe. Se Shopifys riktlinjer för tillgänglighet i teman och vår guide Tillgänglighet i Shopify. Ändringar i temats kod görs bäst i en kopia av temat.
• WordPress och WooCommerce. Heading-blocket har knappar för nivå 1 till 6, se WordPress dokumentation. Länktexter skrivs i blockets länkfunktion. Mer finns i Tillgänglighet i WooCommerce.
• Wix. Vi hittade ingen sida i Wix egen dokumentation som beskriver rubrikernivåer eller titlar på inbäddningar, så vi kan inte ange stegen. Kontrollera resultatet i sidans källa och fråga Wix support. Se vår guide Tillgänglighet i Wix.

Vad gratistestet kontrollerar

Testet läser koden på upp till fem sidor (startsidan och högst fyra interna sidor som den länkar till) och gör bland annat de fyra kontrollerna ovan, plus rubrikhoppet. Det bedömer inte om en rubrik är begriplig, om en länktext utanför listan är dålig eller om en iframes titel stämmer. Det kräver att en människa läser sidan. WCAG-checklistan går igenom de punkterna.

Nästa steg

1. Öppna startsidan och en produktsida och sök i källan efter h1, iframe och ”Läs mer”.
2. Rätta mallarna först, eftersom ett fel i en mall finns på alla sidor som använder den.
3. Kör gratistestet igen och se om fynden försvinner.

Källor

• W3C: Understanding 2.4.4 Link Purpose (In Context)
• W3C: Understanding 2.4.6 Headings and Labels
• W3C: Understanding 1.3.1 Info and Relationships
• W3C: Understanding 4.1.1 Parsing
• W3C: Understanding 4.1.2 Name, Role, Value
• W3C: Nyheter i WCAG 2.2
• WCAG 2.0, svensk översättning, W3C
• PTS: WCAG och EN 301 549
• Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, riksdagen.se
• Shopify: Accessibility best practices for themes
• WordPress: Heading block