PresentationerSlide 1/1

Modul 7 · Kapitel 7.1

Tillgänglighetens fyra principer

Fler människor ska kunna förstå och använda sidan.

Mål

Efter kapitlet ska du kunna...

  • förklara varför tillgänglighet är en del av bra webbutveckling
  • känna igen WCAG:s fyra principer
  • koppla principerna till HTML, CSS och innehåll

Accessibility

Vad betyder tillgänglighet?

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 gäller fler än du tror

Olika behov och situationer

  • En användare kan behöva skärmläsare.
  • Låg kontrast kan vara svår att se i starkt solljus.
  • En skadad hand kan göra musen svår att använda.
  • Tydliga instruktioner hjälper många.
  • Långsam uppkoppling påverkar användningen.

Lag och riktlinjer

DOS-lagen, EN 301 549 och WCAG

DOS-lagen
offentlig digital serviceEN 301 549
europeisk standardWCAG 2.1
riktlinjer för webbinnehåll

Kapitlet fokuserar på viktiga grunder, inte varje enskilt krav.

WCAG

Fyra huvudprinciper

UppfattbartInformationen måste gå att uppfatta.
HanterbartSidan måste gå att använda.
BegripligtInnehållet måste gå att förstå.
RobustTekniken måste kunna tolka sidan.

POUR

Principerna på engelska

EngelskaSvenska
PerceivableUppfattbart
OperableHanterbart
UnderstandableBegripligt
RobustRobust

Princip 1

Uppfattbart

Användaren måste kunna uppfatta informationen på något sätt.

  • Viktiga bilder behöver en bra alt-text.
  • Text behöver tillräcklig kontrast mot bakgrunden.

Uppfattbart

Kontrasten påverkar läsningen

Svårt att uppfattaLjusgrå text på vit bakgrund.
Lättare att uppfattaMörk text på vit bakgrund.

Princip 2

Hanterbart

Användaren måste kunna använda sidan.

  • Länkar och knappar ska gå att nå med tangentbord.
  • Menyer och formulär får inte kräva mus.

Hanterbart

En meny får inte kräva hovring

Bara musMenyn öppnas endast när muspekaren hovrar.
Mus och tangentbordMenyn kan nås och öppnas utan mus.

Princip 3

Begripligt

Användaren måste förstå innehållet och gränssnittet.

Fel 113Vad ska användaren göra?
E-postadressen måste innehålla @Felet och lösningen är tydliga.

Begripligt

Beskriv både felet och lösningen

Vad blev fel?Var finns felet?Hur rättar jag det?

Tekniska felkoder räcker sällan för användaren.

Princip 4

Robust

Webbläsare, hjälpmedel och framtida teknik ska kunna tolka sidan.

  • Använd rätt HTML-element.
  • Koppla formulärfält till rätt label.
  • Skriv giltig och tydlig kod.

Robust

Använd ett riktigt button-element

Klickbar div
<div onclick="...">Spara</div>
Rätt element
<button>Spara</button>

button beskriver vad elementet är och har inbyggt tangentbordsstöd.

Kontrollfråga

Vilken princip passar?

Scenario: En viktig bild har ingen alt-text. Vilken princip påverkas tydligast?

Välj ett svar

Försök koppla problemet till en av de fyra principerna.

Från princip till val

Konkreta delar av sidan

ValHjälper till med
Alt-text och kontrastUppfattbart
TangentbordsnavigeringHanterbart
Tydliga instruktionerBegripligt
Semantisk HTML och labelsRobust

Grunden

Tillgänglighet byggs in från början

  • Semantisk HTML
  • Tydliga rubriker
  • Bra länktexter
  • Korrekt kopplade labels
  • Fungerande tangentbordsnavigering

Inte ett lager på slutet

Strukturen påverkar allt

Planera
tydligtBygg
semantisktTesta
flera sätt

Det är lättare att bygga rätt från början än att reparera hela sidan efteråt.

Sammanfattning

Kom ihåg

  • Tillgänglighet gör sidan användbar för fler.
  • Uppfattbart: informationen går att uppfatta.
  • Hanterbart: sidan går att använda.
  • Begripligt: innehållet går att förstå.
  • Robust: tekniken kan tolka sidan.
  • Tillgänglighet börjar med bra grundarbete.