Enkel tilgjengelighetstesting

Jeg begynte å innse hvor enkelt livet kunne være hvis man hadde en fast rutine å følge med fast timeplan, fast lønn, og svært få originale tanker å tenke. (Roald Dahl)

Skrevet av: Morten Tollefsen, 17.9.13

MTB: Dette er min personlige blogg, og artiklene er mer løse i stilen enn på f. eks medialt.no.

Jeg kan ikke dy meg! Aller først må jeg advare deg bittelitt. Alt som handler om universell utforming og tilgjengelighet å gjøre skal være billig, enkelt og kjapt på plass. Ikke rart det finnes mange eksperter på dette fagområdet: Det er jo ufattelig enkelt å lære seg. En artikkel av denne typen er med på å nøre opp under myten, men en av mine kjepphester er "sørg for å unngå opplagte tilgjengelighetsproblemer". Det kan alle lære, det kan uten videre tas inn i utviklingsprosjekter uten merkostnader og det er lett! Veldig lett, og slik testing bør bli en del av selvransakelsen til alle som publiserer på web! Testing tar tid, så jeg hjelper deg gjerne med de enkle tingene også, bare så det er sagt.

Mange ønsker seg i tillegg enkle tester som gir gode svar på hva som er brukervennlig. Steve Krug sier at slike svar ikke finnes for de fleste design spørsmål, i alle fall ikke de som er viktige. Det som fungerer for brukerne er bra. Skal du finne ut hva som fungerer må altså brukerne teste. Katharine Graham sier det slik: "Enkelte spørsmål har ingen svar. Akkurat det er en lekse det er forferdelig vanskelig å lære." Alle vet at brukertesting er bra (hipp, hipp, hipp - hurra), men hvorfor nedprioriteres dette nesten alltid da?

Min påstand er at testing av brukervennlighet ofte er useriøst. Det gjelder også testing av tilgjengelighet. Tilgjengelighetstesting er enklere, men desverre er slik testing som regel for dårlig. De som tester, hvis noen i det hele tatt gjør det,har liten eller mangelfull praktisk kunnskap om talegjenkjenning, skjermlesere, alternativt pekeutstyr og andre hjelpemidler (mange klarer ikke å bruke web med tastatur engang). Kompetanse om alternativ input/output er heller ikke strengt talt nødvendig hvis den eneste ambisjonen du har er at siden din skal være WCAG-kompatibel. Det er litt bedre enn ingen ambisjoner i det hele tatt, menn feigt.

Brukervennlighet for alle (universell utforming) er utfordrende og mye mer spennende. Slik testing er ikke tema i denne artikkelen. Men en ting er sikkert: brukervennlighet for flest mulig krever at nettsider og annen teknologi er tilgjengelig. Før du lar eksperter eller brukere teste er det derfor både lurt og bra at du kontrollerer mest mulig på egenhånd. Det er grunnen til at jeg oppsummerer de rådene W3C/WAI gir på norsk om enkel tilgjengelighetstesting. Les gjerne hele dokumentet:
Easy Checks - A First Review of Web Accessibility

Vær klar over at jeg har synset litt. For eksempel har jeg lagt til og fjernet lenker til mer informasjon. Denne artikkelen er derfor ikke en oversettelse. Når jeg skriver dette har jeg også rettet opp noen opplagte feil i WAI-dokumentet (som jeg selvsagt har gitt beskjed om).

WAI sier at testene er enkle og raske, men det presiseres at mer omfattende testing trengs for å sikre at nettsidene er tilgjengelige. Du kan benytte en vanlig nettleser. "Add ons" er imidlertid nyttige, og verktøylinjer for IE og Firefox anbefales:

OK, brett opp arma og sjekk sidene dine! Vil du deretter teste universell utforming og/eller tilgjengelighet kan du komme til meg. Jeg er nemlig ordentlig flink, hehe!

Sidetitler

Sidetitler vises gjerne i nettleserens tittellinje (eller som faner når flere sider er åpnet). Søker du på nettet er det sidetitlene som viser treffene, og de brukes også når du lagrer favoritter/bokmerker. Mange skjermlesere viser nettsider som en kolonne, og helt øverst finner du sidetittelen.

Kode: sidetittelen finnes i head og heter title:

<head>
...
<title>Kontakt oss: MittFantastiskeFirma</title>
...
</head>

Gode sidetitler forteller brukeren hvor han befinner seg. Sjekk at:

  1. Sidetittelen beskriver hvilken side som vises.
  2. Sidetitlene er forskjellige fra andre sidetitler på nettstedet.

Det viktigste bør stå først i en tittel. Eksempler på dårlige sidetitler er:

  • MittFantastiskeFirma - en side om vår historie
  • MittFantastiskeFirma våre kule og stilige produkter
  • ...

Bruk heller titler som:

  • Historikk: MittFantastiskeFirma
  • Produkter: MittFantastiskeFirma
  • ...

Slik ser du tittelen:

  • WAT: Structure | Heading structure.
  • Mange nettlesere viser sidetittelen i programmets tittellinje.

Mer informasjon:

Alternativ bildetekst (alt-attributt)

Alternativ tekst til grafikk er nødvendig for at sterkt synshemmede skal kunne "se" grafikken. Slike bildebeskrivelser er spesielt viktige når grafikken brukes som lenke eller dersom bilder, diagrammer osv. er nødvendige for å skjønne en side. Noen tips:

  • Beskriv funksjon, ikke utseende for grafiske lenker og knapper.
  • Grafisk pynt kan ha en tom alternativ tekst.
  • Alternative bildetekster skal være korte. Skal du forklare et diagram eller noe annet som trenger mye tekst bør du ha en kort alt-tekst og i tillegg benytte andre teknikker (lenke til en mer omfattende forklaring eller longdesc).
  • Unngå knapp, bilde av, illustrasjon osv. i den alternative bildeteksten (hvis ikkke typen grafikk av en eller annen grunn er viktig).

Validatorer kan fortelle deg at alternative bildetekster mangler. Skal du sjekke om beskrivelsene er brukbare må du imidlertid vurdere hver enkelt i den konteksten de brukes.

Kode: alternative bildetekster legges inn som et attributt i img-tag'en:

<img src="forstorrelsesglass.jpg" alt="Søk">

Vanligvis vil du ikke se den alternative teksten i nettleseren, men det er ikke så vanskelig likevel:

  • WAT: Images | Show Images. Du får vite om alternativ tekst mangler. Teksten vises i siden (inkludert grafikk som mangler alternativ tekst).
  • FF Toolbar: Images | Outline Images / Outline Images without Alt Attributes. Vil du se de alternative bildetekstene velger du: Images | Show Alt Attributes.
  • Nettleser: se i kildekoden eller bruk WAVE.

Mer informasjon:

Overskrifter (h-tag'er)

Riktige overskrifter er viktige for god navigering med hjelpemidler for synshemmede. Overskrifter kan også brukes for å navigere raskere med tastatur (i alle fall i noen nettlesere). Overskrifter må kodes som html-overskrifter, og strukturen bør være riktig.

Kode: bruk h-tag'en for å angi overskrifter.

<h1>...</h1>
  <h2>---</h2>
    <h3>,,,</h3>
  <h2>---</h2>
<h1>...</h1>
  <h2>---</h2>

Sjekk at:

  • Alle sider har minst en overskrift (ingen regel uten unntak, selvsagt). Som regel er det fornuftig å ha mer enn en overskrift.
  • All tekst som ser ut som overskrifter er merket riktig (h-tag).
  • Alt som er merket med h-tag er faktisk konseptuelle overskrifter.
  • Overskriftshierarkiet er meningsfult: H2 hører til h1, h3 hører til h2 osv.

Slik kan du sjekke overskrifter:

  • WAT: Structure | Heading structure / Headings.
  • FF Toolbar: Information | View Document Outline. Du kan også bruke Outline | Show Element Tags Names When Outlining / Outline Headings.
  • Nettleser: se i kildekoden eller bruk W3C HTML-validator og WAVE.

Kontrast

WCAG setter spesifikke krav til luminanskontrast (forskjellen mellom tekst og bakgrunn). For vanlig tekst kreves et kontrastforhold på 4,5 (nivå A) og 7 (nivå AAA). Min erfaring er at kontrast er et av de aller mest vesentlige kravene i Retningslinjer for tilgjengelig webinnhold.

Du kan sjekke kontraster automatisk med et verktøy (foreløpig litt unøyaktig), manuelt (nøyaktig, men du må teste ett element av gangen) eller du kan skru av farger. WAT har funksjoner for alle metoder:

  • Automatisk: Color | Juicy Studios Luminosity Analyser
  • Manuelt: Color | Contrast Analyser
  • Skru av farger: Color | Grey Scale

Mer informasjon:

Zoom

Noen må forstørre innholdet for å kunne lese/se. Nettlesere har innebygget funksjonalitet for å zoome, og noen nettlesere kan i tillegg forstørre bare tekst. Siden skal fortsatt være lesbar dersom innhold forstørres: bilder skal ikke legge seg over tekst, linjeavstanden skal være brukbar, ... Sjekk at:

  • All tekst blir større når kun tekst forstørres.
  • Alt blir større med zoom (navigering, annonser, ...).
  • Tekst forsvinner ikke eller kuttes av.
  • Innhold overlapper ikke.
  • Alle knapper, skjemafelt osv. er synlige og brukbare.

Selv om siden forstørres skal det ikke være nødvendig med horisontal rulling (vertikal rulling er OK).

Kun forstørring av tekst kan velges med blant annet Firefox og Safari (View | Zoom Text Only eller View | Zoom | Zoom Text Only). Forstørr med Ctrl++ (PC) og Command++ (Mac).

For å forstørre hele siden kan du velge View | Zoom | 200% (eller noe liknende).

Mer informasjon:

Tastatur og visuell fokus

Nettsider skal kunne brukes med tastatur, og de fleste nettlesere kan styres med tastetrykk. Dette er viktig for synshemmede som bruker skjermleser. Mange bevegelseshemmede bruker også tastatur eller hjelpemidler som simulerer tastekommandoer (for eksempel talegjenkjenning). Den aller enkleste bruken av tastaturet er slik:

  • Klikk i adressefeltet og legg deretter bort musen. Du kan selvsagt bruke tastaturet for eksempel trykker du Alt+d i Internet Explorer.
  • Trykk Tab for å flytte mellom elementene på siden.
  • Piltaster brukes i lister, alternativbokser etc.
  • Enter eller Mellomrom brukes for å velge i nedtrekkslister og menyer.

Det du skal sjekke er:

  • At du kan nå alle elementer med tastaturet inkludert kontrollene i mediespillere, klikkbar grafikk osv.
  • At det ikke finnes tastaturfeller. Det betyr at du ikke blir låst for eksempel i en medieavspiller eller Tab kun flytter deg rundt i en banner.
  • At Tab rekkefølgen er logisk. For norsk betyr det fra topp til bunn og fra venstre mot høyre.
  • Sjekk at Tab flytter deg til nettleserens kontroller (for eksempel adressefeltet) når du står på slutten av siden.
  • Sjekk at det er mulig å bruke nedtrekkslister. Ofte velges et valg så snart du bruker piltastene (og da er det umulig å velge andre alternativer).
  • Sjekk at grafiske lenker både har visuell fokus og at de kan aktiveres med tastaturet.

Visuell fokus er helt nødvendig for å kunne bruke tastaturet. Sjekk derfor også at:

  • Fokusindikatoren er synlig, for eksempel en ramme rundt aktiv lenke, utheving av aktiv lenke eller liknende.
  • Alle visuelle endringer som vises med mus (når muspekeren står på et element) er også synlige når du har tastaturfokus.

Mer informasjon:

Skjemaer

Ledetekster, tastaturstøtte, klare instruksjoner og god feilhåndtering er viktige egenskaper i tilgjengelige skjemaer.

Skjemafelt har som oftest en visuell ledetekst. Når ledeteksten merkes på riktig måte leses den opp med syntetisk tale, den kan brukes med talegjenkjenning og den blir klikkbar (enklere å treffe det aktuelle feltet).

Kode: Merk skjemafelt ved hjelp av tag'en <label>

<label for="fnavn">Fornavn:</label>
<input id="fnavn" type="text" name="txtFNavn" />

Finn alle skjemaene på siden. Et skjema kan være en frittstående tekstboks eller bestå av en mengde kontroller (tekstfelt, alternativknapper, avkryssingsfelt, ...). Sjekk at:

  • Alle kontroller, inkludert nedtrekkslister, kan brukes med tastatur (se over).
  • Sjekk at alle felt har label og at den er riktig plassert (til venstre for tekstfelt og nedtrekkslister og til høyre for radioknapper og avkryssingsfelt).
  • Obligatoriske felt skal merkes på en tydelig måte. Ikke bruk bare farger for å informere om at et felt er obligatorisk. Brukes stjerner skal den inkluderes i label (tekstbokser, nedtrekkslister) eller legend (radioknapper og avkryssingsfelt).
  • Instruksjoner som trengs for å fylle ut skjemaet skal legges inn før de trengs. Generell informasjon legges før skjemaet. Instruksjoner for et spesifikt felt inkluderes i label.
  • For skjemaer som har feilhåndtering skal du sjekke at det gis forståelige instruksjoner om hva som er feil (for eksempel datoformat eller ugyldig epost-adresse). Sjekk også at det er enkelt å finne feilene (instruksjoner skal som regel legges før skjemaet). Felt som ikke inneholder feil skal fortsatt inneholde brukerens valg/tekst (så ikke alt må fylles ut på nytt).

Både FF Toolbar og WAT kan brukes for å sjekke skjemaer. Disse verktøyene tester label, men vær klar over at det finnes andre måter å lage tilgjengelige skjemaer på. Et skjema kan derfor følge WCAG selv om verktøyene rapporterer feil:

  • WAT: Structure | FieldSet / Labels. En dialogboks med feil vises. Du kan så sjekke feil/mulige feil. WAT angir om label mangler eller om id'er er feil.
  • FF Toolbar: Du kan ssjekke felt med FF Toolbar, men det kreves installasjon av en Form Labels favelet.
  • Du kan selvsagt også sjekke kildekoden.

Mer informasjon:

Multimedia

Lyd (podcast, radio, ...) må vises i alternative formater for at mange hørselshemmede skal få med seg innholdet. Tilsvarende trenger synshhemmede alternative formater eller supplerende informasjon til video og bilder. Sjekk at:

  • Kontroller i medieavspillere kan brukes og at de er riktig merket (se over).
  • Lyd skal ikke starte automatisk. Hvis dette gjøres skal det finnes kontroller for å dempe eller pause lyden.
  • Video er tekstet. Sjekk også at teksten er synkronisert med det som sies, den som snakker identifiseres og at viktige lyder tekstes.
  • Transkribering (tekstversjon) trengs normalt ikke dersom en video er tekstet. Mangler teksting er en separat transkripsjon bedre enn ingenting, og den bør inneholde tilsvarende informasjon som for tekstingen.
  • Synstolking tilbys dersom det trengs. Viktige ting som ikke kan høres forklares, tekst som ikke leses opp blir lest osv.

Mer informasjon:

Vise bare tekstinnhold

Det kan være nyttig å vise siden uten stilark og bilder (slik skjermlesere gjør). I tillegg vil mange skjermlesere gjøre om siden til en kolonne (inkludert tabeller). Gjør følgende:

  • Skru av bildevisning og vis den alternative teksten.
  • Skru av stilark.
  • Gjør om siden til en kolonne.

Det du bør sjekke er at:

  • Informasjon kommer i fornuftig rekkefølge (for eksempel skal overskrifter komme før tilhørende informasjon).
  • Alternative bildetekster er gode.
  • Blokker med informasjon har en overskrift.

Slik sjekkes visning av bare tekst:

  • WAT: velg Images | Remove Images, CSS | Disable CSS, Tables | Linearize
  • FF Toolbar: velg Images | Disable Images | Disable All Images, CSS | Display Styles | Display All Styles, Miscellaneous | Linearize
  • Mange nettlesere kan også skru av stilark og vise alternativ tekst i steden for bilder.

Så da?

Som nevnt innledningsvis er ikke disse testene en garanti for tilgjengelige nettsider. Andre ting som må testes inkluderer:

  • Lenker
  • Merking av datatabeller
  • Redundant fargekoding
  • Unngå innhold som forårsaker epileptiske anfall
  • Sørge for at alle brukere får nok tid
  • ...
Del på Facebook Del på Twitter Del på e-post