Kort forklaring av WCAG 2.1

Planen er at 17 nye suksesskriterier kommer sommeren 2018. Hovedfokus for det som er nytt er kognisjon og mobil. Den nye standarden får navnet WCAG 2.1. Retningslinjer og suksesskriterier fra WCAG2.0 er de samme, det vil si at standarden er bakover-kompatibel

Nedenfor brukes de engelske suksesskriterie-titlene. I denne artikkelen har jeg ikke lagt ned mye jobb med hensyn til å få alt perfekt på norsk. Tallet i parentes er WCAG-nivået (A, AA eller AAA).

Selvsagt har mange andre skrevet om de nye suksesskriteriene. Her er en artikkel med litt flere kodeeksempler, og denne er utgangspunktet for det jeg har skrevet (men, det er ikke en direkte oversettelse):
The new guidelines in WCAG 2.1 explained

Standarden finner du her:
Web Content Accessibility Guidelines (WCAG) 2.1

1.3.4 Identify Common Purpose (AA)

Det som skal inn i input-felt skal kunne finnes programmeringsmessig, det vil si at en maskin skal kunne skjønne hva ulike felt skal inneholde. Det gjør automatisk utfylling mulig og er en stor fordel for mennesker med nedsatt kognitiv funksjonsevne og de som skriver sakte.

Bruk autocomplete, som fungerer med: text, search, url, tel, email, password, datepickers, range, og color. Ulike verdier finner du her: HTML 5.2 Autofill field names. Det finnes også andre teknikker, men disse er så langt jeg vet ikke standardiserte enda.

Eksempel:
<form>
<label for="input-epost">Din epost-adresse</label>
<input id="input-epost" autocomplete="on" type="email">
</form>

Understanding Identify Common Purpose

1.3.5 Identify Purpose (AAA)

Det skal være mulig å identifisere meningen med ulike Elementer (ikke bare input) og informasjon ved hjelp av teknologi (programmeringsmessig). W3C sier at hensikten er personalisering, spesielt med tanke på nedsatt kognisjon, og viser blant annet til Personalization Semantics Content Module 1.0. Det å formidle «meningen» til knapper og kontroller vil også kunne gjøre nettsider mer effektive for skjermlesere, talegjenkjenning og annen hjelpeteknologi (for eksempel kan en standardisert talekommando brukes for å gå til startsiden på et nettsted).

Understanding Identify Purpose

1.4.10 Reflow (AA)

Det skal være mulig å bruke en dings med 320 piksler uten å måtte scrolle horisontalt. Unntaket er innhold som ofte krever horisontal scrolling: brede diagrammer, kart, tabeller med mange kolonner, … Sidene skal altså være responsive, noe som er en fordel for mange synshemmede (zoomer ofte opp til 400%) og selvsagt alle som bruker mobil.

Understanding Reflow

1.4.11 Non-text contrast (AA)

God kontrast mellom bakgrunn og tekst er et av de viktigste WCAG 2.0 suksesskriteriene. Det nye kravet innebærer at også ikoner, diagrammer og annen info-grafikk skal ha tilstrekkelig kontrast (3:1) også til omkringliggende farger.

Understanding Non-text Contrast

1.4.12 Text spacing (AA)

Avstanden mellom avsnitt, rader, ord og tegn skal kunne økes uten tap av innhold eller funksjonalitet. Dette er en fordel for mennesker med lesevansker og for svaksynte.

Understanding Text Spacing

1.4.13 Content on hover or focus (AA)

Hvis brukeren får opp innhold som modaler, verktøytips og liknende komponenter skal det være mulig å:

  • Få bort innholdet uten å flytte muspekeren eller tastaturfokuset (for eksempel ved å trykke Escape)
  • Bevege muspekeren over innholdet uten at det forsvinner.
  • Innholdet blir stående til hower/fokus triggeren fjernes, brukeren fjerner innholdet eller innholdet er uaktuelt.

Understanding Content on Hover or Focus

2.2.6 Timeouts (AAA)

Brukeren skal gis beskjed dersom innaktivitet kan føre til at data mistes. Unntaket er dersom dataene lagres i mer enn 20 timer.

Understanding Timeouts

2.2.7 Animation from Interactions (AAA)

Det skal være mulig å skru av animasjoner som er et resultat av brukerens interaksjon (hvis ikke animasjonen er viktig for funksjonaliteten eller innholdet).

Understanding Animation from Interactions

2.4.11 Character key shortcuts (A)

Hvis hurtigtaster med en bokstav eller tall brukes må et av disse kriteriene oppfylles:

  • Hurtigtastene kan skrues av.
  • Hurtigtastene kan endres slik at de må kombineres med for eksempel Alt, Cmd, Control.
  • Hurtigtasten fungerer kun når et gitt element har fokus.

Understanding Character-key Shortcuts

2.4.12 Label in Name (A)

Hvis knapper og andre komponenter har en visuell tekst skal denne være identisk med det tilgjengelige navnet (accessible name).

Understanding Label in Name

2.5.1 Pointer gestures (A)

Fingerbevegelser som krever flere fingre eller spesielle sveipebevegelser skal kunne erstattes med enkelttrykk, dobbelttrykk eller langt trykk med en finger. Dette er viktig for brukere som har nedsatt bevegelighet eller som mangler fingre.

Understanding Pointer Gestures

2.5.2 Pointer Cancellation (A)

Når klikking, tapping og lange trykk brukes til interaksjon skal minst et av følgende kriterier oppfylles:

  • Funksjonaliteten aktiveres ikke ved ned-trykk (down-event).
  • Funksjonaliteten aktiveres når fingeren løftes. Det skal være mulig å avbryte før fingeren løftes eller angre i etterkant.
  • Opp-hendelsen avbryter ned-hendelsen.
  • Funksjonalitet som aktiveres ved ned-hendelse er viktig.

Understanding Pointer Cancellation

2.5.3 Target Size (AAA)

Et klikkbart element skal ha minimum 44 x 44 pixler. Unntak:

  • Den samme funksjonaliteten kan velges ved å trykke på et annet element som er minimum 44 x 44 pixler.
  • Det inngår i en tekstblokk, for eksempel en vanlig understreket lenke.
  • Størrelsen bestemmes av brukerens enhet (dings/nettleser).
  • Størrelsen må være mindre på grunn av konteksten for å gi mening.

Understanding Target Size

2.5.4 Concurrent Input Mechanisms (AAA)

Det skal være mulig å velge og bytte mellom interaksjonsmetoder: touch, mus, stylus, tale, tastatur. Med andre ord skal du ikke hindre en interaksjonsmetode som supporteres av klienten.

Understanding Concurrent Input Mechanisms

2.6.1 Motion Actuation (A)

Funksjonalitet som aktiveres ved at telefonen flyttes skal også kunne velges med knapper, glidebrytere etc. Det skal være mulig å slå av funksjonaliteten ve uønsket flytting hvis ikke:

  • Bevegelsen kan velges med et tilgjengelig grensesnitt.
  • Bevegelsen er essensiell for funksjonaliteten.

Understanding Motion Actuation

2.6.2 Orientation (AA)

Innholdet på nettsiden skal ikke kreve at brukeren holder eller roterer den mobile enheten i en gitt retning (for eksempel. landskap eller portrett).

Understanding Orientation

3.2.6 Status changes (AA)

Hjelpeteknologi må få beskjed om innhold som oppdateres dynamisk uten at fokus endres.

I de fleste tilfeller betyr dette at aria-live brukes (eller roller med implisitt bruk av aria-live).

Understanding Status Changes