Kap 7.1 - Tillgänglighetens fyra principer

Mål

• Förstå varför tillgänglighet är en del av bra webbutveckling.
• Känna igen de fyra principerna i WCAG.
• Koppla principerna till konkreta val i HTML, CSS och innehåll.

Vad betyder tillgänglighet?

Tillgänglighet heter accessibility på engelska. På webben betyder det att så många som möjligt ska kunna ta del av innehållet och använda sidan, oavsett funktionsnedsättning, hjälpmedel, enhet eller situation.

Det handlar inte bara om personer som använder skärmläsare. Tillgänglighet hjälper också användare som har svårt att se låg kontrast, inte kan använda mus, sitter i starkt solljus, har långsam uppkoppling, har tillfälligt skadad hand eller behöver tydliga instruktioner.

Lag, standarder och riktlinjer

I Sverige finns lagen om tillgänglighet till digital offentlig service, ofta kallad DOS-lagen. Den gäller digital service från offentliga aktörer, till exempel myndigheter, kommuner och regioner. Företag och privatpersoner omfattas inte på samma sätt, men många försöker ändå följa riktlinjerna eftersom det gör webbplatser bättre för fler användare.

För att uppfylla kraven används den europeiska standarden EN 301 549. För webbsidor hänvisar den i stor utsträckning till WCAG 2.1 på nivå A och AA. WCAG står för Web Content Accessibility Guidelines och är riktlinjer från W3C för att göra webbinnehåll mer tillgängligt.

Det här läromedlet kommer inte att gå igenom alla krav i detalj. Men om du bygger med semantisk HTML, tydliga rubriker, fungerande tangentbord, bra kontrast, alt-texter och tydliga formulär uppfyller du redan många viktiga grunder.

Vill du läsa mer finns Diggs översikt om EN 301 549 och WCAG och WebAIMs WCAG-checklista.

Fyra principer

WCAG beskriver tillgänglighet genom fyra huvudprinciper. På engelska kallas de ibland POUR: perceivable, operable, understandable och robust. På svenska kan du tänka: uppfattbart, hanterbart, begripligt och robust.

• Uppfattbart: användaren måste kunna uppfatta informationen på något sätt. En bild som bär viktig information behöver till exempel en bra alt-text. Text behöver också ha tillräcklig kontrast mot bakgrunden.
• Hanterbart: användaren måste kunna använda sidan. Det betyder till exempel att länkar, knappar, menyer och formulär ska gå att nå med tangentbord, inte bara med mus.
• Begripligt: användaren måste förstå innehåll och gränssnitt. Ett felmeddelande som bara säger Fel 113 hjälper inte. Skriv hellre vad som är fel och hur användaren kan rätta det.
• Robust: sidan ska vara byggd så att webbläsare, hjälpmedel och framtida teknik kan tolka den. Rätt HTML-element, korrekta formulärkopplingar och giltig kod gör sidan mer robust.

Exempel på principerna

• Uppfattbart: ljusgrå text på vit bakgrund kan vara svår att läsa. Bättre kontrast gör texten lättare att uppfatta.
• Hanterbart: en meny som bara öppnas när muspekaren hovrar över den kan bli omöjlig för den som använder tangentbord.
• Begripligt: ett formulär bör säga E-postadressen måste innehålla @ istället för ett tekniskt felmeddelande.
• Robust: en knapp bör vara ett riktigt <button>-element när den gör något, inte en klickbar <div> utan tydlig roll.

Det börjar i grunden

Tillgänglighet är inte ett lager man lägger på sist. Semantisk HTML, tydliga rubriker, bra länktexter, korrekt label-koppling och fungerande tangentbordsnavigering gör sidan bättre från början.