Universell utforming etter lansering: Bygg en publiseringsrutine som varer

Kategori: Universell utforming

En nettside kan være godt universelt utformet på lanseringsdagen og likevel bli vanskeligere å bruke over tid. Nye kampanjesider kommer til, redaktører legger tekst oppå bilder, skjemafelt endres, og lenker får navn som «Les mer». Hver enkelt endring virker liten, men summen kan skape reelle hindringer.

Derfor bør universell utforming ikke bare være en kontroll som utviklere gjennomfører før lansering. Det må være en del av den løpende publiseringsrutinen. Målet er ikke at alle redaktører skal bli WCAG-eksperter, men at organisasjonen skal vite hvilke valg som påvirker tilgjengeligheten, hva som må kontrolleres, og hvem som håndterer feil.

WCAG må oversettes til arbeidsoppgaver

WCAG beskriver krav og prinsipper for tilgjengelig innhold på nett. Retningslinjene dekker blant annet tekstalternativer, kontrast, tastaturbetjening, struktur, feilmeldinger og forståelig navigasjon. For en innholdsredaktør kan selve kravspråket likevel bli for teknisk til å fungere som daglig sjekkliste.

En praktisk publiseringsrutine bør derfor oversette kravene til konkrete spørsmål:

• Har siden en tydelig og logisk overskriftsstruktur?
• Beskriver lenketekstene hvor lenkene fører?
• Har meningsbærende bilder et nyttig tekstalternativ?
• Kan innholdet forstås uten å skille mellom farger?
• Er tekst og viktige grensesnittelementer lette å se?
• Kan siden brukes med tastatur?
• Er skjemaets felter, instruksjoner og feilmeldinger forståelige?

Dette gjør WCAG operativt. Redaktøren får en håndterbar kontroll, mens designere og utviklere kan eie de mer tekniske delene.

Fordel ansvaret mellom system, mal og innhold

Mange tilgjengelighetsfeil oppstår fordi ingen vet hvem som har ansvaret. En god modell skiller mellom tre nivåer.

Systemnivået

Utviklere har normalt ansvar for kode, tastaturrekkefølge, synlig fokusmarkering, semantiske komponenter og støtte for hjelpemidler. En redaktør skal ikke måtte rette HTML for at en knapp skal fungere med tastatur.

Mal- og komponentnivået

Designere og utviklere bør bygge komponenter som gjør riktige valg enkle. Et skjemafelt bør ha plass til etikett, hjelpetekst og feilmelding. En kortkomponent bør kreve en forståelig lenketekst. Fargepaletten bør begrense kombinasjoner som gir dårlig kontrast.

Innholdsnivået

Redaktøren eier overskrifter, lenketekster, bildebeskrivelser, tabeller, videoopplysninger og tydelig språk. Publiseringsløsningen kan støtte arbeidet, men kan ikke avgjøre om et tekstalternativ faktisk formidler bildets funksjon.

Denne fordelingen hindrer at redaksjonen får ansvar for tekniske feil den ikke kan løse, samtidig som utviklerne slipper å kvalitetssikre hvert ord som publiseres.

Gjør en rask tastaturkontroll

Tastaturnavigasjon er en enkel og nyttig manuell test. Den avdekker problemer som automatiske verktøy ofte ikke kan vurdere fullt ut. Bruk tabulatortasten for å bevege deg gjennom interaktive elementer, og prøv å utføre sidens viktigste oppgave uten mus.

Kontroller særlig at:

• det er synlig hvilket element som har fokus
• rekkefølgen følger en forståelig vei gjennom siden
• menyer, knapper, dialogvinduer og skjemaer kan betjenes
• fokus ikke blir sittende fast i en komponent
• skjult innhold ikke mottar fokus
• brukeren kommer videre etter at en melding eller dialog er lukket

Test den faktiske oppgaven, ikke bare om tabulatortasten flytter seg. På en kontaktside betyr det å åpne eventuelle valg, fylle ut skjemaet, håndtere en feil og sende inn. På en produktside kan det bety å velge en variant og legge varen i handlekurven.

Dersom fokusmarkeringen mangler eller rekkefølgen er ulogisk, er det vanligvis en teknisk feil som bør sendes videre til utvikler.

Kontroller kontrast der innholdet faktisk brukes

Kontrast handler ikke bare om svart tekst på hvit bakgrunn. Problemer oppstår ofte i bannere, tekst oppå fotografier, lyse grå hjelpetekster, knapper med diskrete kanter og informasjon som bare vises ved musepeker.

Fargekombinasjoner bør være kvalitetssikret i designsystemet. Likevel må redaktøren kontrollere resultatet når bakgrunnen varierer. Hvit tekst kan være tydelig over én del av et bilde og nesten forsvinne over en annen.

Unngå også å bruke farge som eneste informasjonsbærer. Et obligatorisk felt bør ikke bare få rød kant. Legg til en tydelig tekst som forklarer hva som mangler. I en graf bør serier kunne skilles med etiketter, mønstre eller symboler, ikke bare farger.

En fornuftig redaksjonell regel er å bruke godkjente kombinasjoner og unngå fri plassering av tekst over bilder. Da reduseres behovet for manuelle kontrastvurderinger.

Skriv og strukturer for skjermlesere

En skjermleser formidler innhold gjennom tale eller punktskrift. Brukeren kan navigere etter blant annet overskrifter, lenker, felter og landemerker. Visuell plassering alene er derfor ikke nok til å vise hva som hører sammen.

Start med en logisk overskriftsstruktur. Overskrifter skal beskrive innholdet og danne en forståelig disposisjon. Ikke velg overskriftsnivå etter ønsket skriftstørrelse. Utseendet skal styres av designet, mens nivået skal uttrykke struktur.

Lenketekster må gi mening uten teksten rundt. Flere lenker som bare heter «Klikk her» eller «Les mer», er lite informative når de leses som en samlet lenkeliste. Skriv heller «Se priser for bedriftsavtalen» eller «Last ned årsrapporten».

For bilder må tekstalternativet bestemmes ut fra funksjonen. Et bilde som viser et viktig trinn i en veiledning, trenger en beskrivelse av informasjonen brukeren skal få. Et rent dekorativt bilde bør normalt ikke skape unødvendig opplesning. Ikke gjenta bildeteksten ordrett dersom den samme informasjonen allerede står ved bildet.

En kort kontroll med skjermleser kan gi verdifull innsikt, men verktøyet krever øvelse. Start med noen sentrale sidetyper og faste oppgaver. Lytt etter uforståelige knappenavn, gjentakelser, manglende feltetiketter og overskrifter som ikke beskriver innholdet.

Skjemaer må hjelpe brukeren både før og etter feil

Skjemaer er ofte stedet der tilgjengelighetsproblemer får størst konsekvens. Hvis brukeren ikke kan sende en forespørsel, søke jobb eller fullføre et kjøp, har nettsiden sviktet i en sentral oppgave.

Hvert felt bør ha en synlig og presis etikett. Plassholdertekst inne i feltet er ikke en god erstatning, fordi den forsvinner når brukeren skriver og ofte har svak kontrast. Instruksjoner bør stå før brukeren trenger dem. Hvis et passord eller organisasjonsnummer må følge et bestemt format, må dette forklares på forhånd.

Ved feil bør skjemaet:

• forklare hva som er feil med tekst
• peke ut hvilket felt feilen gjelder
• fortelle hvordan feilen kan rettes
• bevare opplysninger som allerede er fylt ut
• flytte eller styre oppmerksomheten slik at feilen blir oppdaget

«Ugyldig verdi» er sjelden tilstrekkelig. «Skriv telefonnummeret med åtte sifre» er mer konkret. Test også at feilmeldingen blir oppfattet med tastatur og skjermleser, ikke bare at den ser riktig ut på skjermen.

Lag en publiseringskontroll som faktisk blir brukt

En sjekkliste med mange titalls punkter blir lett hoppet over. Del heller kontrollen i to nivåer.

Kontroll ved vanlig publisering

1. Les siden og kontroller overskriftsrekkefølgen.
2. Se gjennom lenketekster og knappenavn.
3. Vurder tekstalternativer for nye bilder.
4. Kontroller tekst som ligger på farget bakgrunn eller bilde.
5. Test nye eller endrede skjemaer med feil inndata.
6. Utfør hovedoppgaven med tastatur dersom siden har interaktive elementer.

Utvidet kontroll ved større endringer

Nye maler, komponenter, navigasjonsløsninger og integrasjoner bør gjennom en bredere test hos personer med riktig fagkompetanse. Da bør kontrollen omfatte flere skjermstørrelser, tastaturnavigasjon, skjermleser, forstørring, feilhåndtering og teknisk oppmerking.

Automatiske tester kan finne en del feil, men de kan ikke alene vurdere om en lenketekst er forståelig, om fokusrekkefølgen er logisk, eller om et tekstalternativ gir riktig mening. Kombiner derfor automatiske kontroller med manuell bruk.

Behandle tilgjengelighetsfeil som ordinære kvalitetsavvik

Feil bør registreres med nok informasjon til at de kan gjenskapes. Noter side, komponent, handling, forventet resultat og hva som faktisk skjedde. Beskriv også konsekvensen. «Svak gråfarge» er mindre nyttig enn «hjelpeteksten i bestillingsskjemaet er vanskelig å lese mot bakgrunnen».

Prioriter først feil som stopper viktige oppgaver, skjuler informasjon eller rammer mange sider. En utilgjengelig meny eller skjemakomponent er som regel viktigere enn et enkelt manglende tekstalternativ på et dekorativt bilde.

Den mest robuste løsningen er ofte å rette komponenten eller malen, ikke bare den aktuelle siden. Da fjernes feilen flere steder, og risikoen for gjentakelse blir mindre.

Universell utforming må inngå i forvaltningen

God tilgjengelighet over tid handler om styring. Bedriften trenger navngitte eiere, godkjente komponenter, en kort publiseringssjekk og en tydelig vei for tekniske avvik. Nye redaktører bør få opplæring i de valgene de faktisk møter i publiseringsløsningen.

Start med de mest brukte sidene og de viktigste oppgavene. Gjør deretter kontrollen til en fast del av publisering, kampanjearbeid og videreutvikling. Slik blir universell utforming en egenskap ved den løpende nettsideforvaltningen, ikke en kvalitet som gradvis forsvinner etter lansering.