Universell utforming har blitt en viktig del av arbeidet til designere og frontend-utviklere. Å sørge for god brukeropplevelse for alle kan være en kjempeoppgave, og det er lett å bli skremt av alle krav og regler. Noen av de vanligste UU-tabbene vi ser gir vi deg løsningen på under.
1: Tilgjengelig navn
Tilgjengelig navn, på engelsk “accessible name”, er i HTML-kode en kort tekst tilgjengelig for assisterende verktøy (f.eks. Skjermleserverktøy som VoiceOver for Mac) til å identifisere et UI-element (knapp, inputfelt osv.). Navnet har to formål: å formidle formålet med elementet og skille det fra andre elementer på siden. For at en løsning skal være universelt utformet må alle fokuserbare og interaktive elementer ha tilgjengelige navn.
Basert på hvordan et element er kodet, kan det tilgjengelige navnet bestå av synlig ledetekst og/eller programmatisk ledetekst. Ledeteksten er instruksen brukerne får når de skal gi respons i et skjema eller lignende En knapp med tekst “Lagre” har denne teksten som synlig ledetekst. Hvis man har en ikonknapp, for eksempel lukkeknapp med kryssikon, og den har kodet ledetekst “Lukk”, er dette den programmatiske ledeteksten. Et element kan også ha begge typer tekst. Hva er det tilgjengelige navnet da? Dette funker slik:
-
Hvis kun synlig ledetekst brukes: tilgjengelig navn = synlig ledetekst
-
Hvis kun programmatisk ledetekst brukes: tilgjengelig navn = programmatisk ledetekst
-
Hvis både synlig og programmatisk ledetekst brukes: tilgjengelig navn = spørs. Dessverre, nettlesere har varierende støtte for kombinasjon av ledetekster, og må eventuelt testes individuelt.
Løsning for designere
Ledetekster tar plass, og ofte ser vi eksempler på at de ikke er med visuelt i grensesnittet i det hele tatt. Har du noen gang sett en knapp med et ikon du ikke aner hva betyr? Eller fylt ut et skjema, blitt avbrutt, tittet bort fra skjermen, og når du titta på skjermen igjen ikke husket hva det var du fylte ut? Her må ledeteksten til pers.
De generelle reglene du bør forholde deg til når du skriver og designer ledetekster er:
-
Hold de enkle, korte og så beskrivende som mulig.
-
Tenk over hva handlingen skal være i tekst om du designer noe interaktivt «uten» tekst, f.eks. en knapp med kun ett ikon på
-
En vanlig tabbe er at det er mange helt like knapper under hverandre i en liste. Disse knappene må inkludere et tema-navn. «Les mer» holder ikke. Et bedre alternativ er «Mer om <tema>».
-
Om det av en eller annen grunn ikke skal være synlig ledetekst, må det være definert i koden – uansett! Alle interaktive elementer bør være definert. Her må utvikleren og designeren hjelpe hverandre.
Løsning for utviklere
Hvis synlig ledetekst alene er tilstrekkelig, trenger du ikke noe mer. De enkleste løsningene er ofte de beste. En lagre-knapp trenger bare teksten “Lagre”.
Det er derimot ofte slik at vi ikke skal ha synlig tekst i et HTML-element, og da brukes det programmatisk ledetekst. Lukkeknapp er et eksempel, men elementer som søkefelt eller fane trenger også ledetekst.
Det finnes en rekke løsninger i HTML:
-
Title-attributt. Den viser en tooltip til brukeren med tekst inni. Denne kan være nyttig, men bør ikke brukes hvis den ikke tilføyer noe for seende brukere. Da kan den oppfattes som forstyrrende.
-
Aria-labelledby-attributt. Denne kan brukes når det allerede finnes en tekst på siden som kan brukes som ledetekst, men som ikke er kodet som ledetekst. Den knytter den eksisterende teksten til elementet.
-
Aria-label-attributt. Denne brukes til å gi et element programmatisk ledetekst som er tilgjengelig kun for assisterende verktøy.
-
Placeholder-attributt. Den kan brukes i inputfelt før brukeren taster inn data. Den anbefales ikke, da et felt kan se ferdig utfylt ut. I tillegg fungerer det ikke som tilgjengelig navn, da det ikke synes når feltet er fylt ut.
-
Usynlig HTML-element som med tekst som knyttes til elementet. Det er vanlig å bruke CSS som skjuler elementet visuelt, og legge teksten der. Den er også mulig å skjule kun deler av teksten om relevant. Denne løsningen støttes likt av alle nettlesere, og kan dermed anbefales.
Det er viktig å ikke bruke for mange attributter sammen. Nettlesere har ulik støtte for kombinerte attributter; skjermleser kan lese opp en vilkårlig kombinasjon, eller bare en av tekstene. Det kan være uforutsigbart hva brukeren ender opp med å høre, og repetisjon av samme tekst er forstyrrende. I verstefall blir feil tekst lest opp, og da er man like langt.
2: Alternativ tekst i bilder
Alle bilder som tilfører en mening i konteksten de er satt i trenger en beskrivende tekst for assisterende verktøy. Med bilder menes: foto, ikoner, illustrasjoner, grafer, dekorativ grafikk og tegninger. Dekorative bilder er elementer med utelukkende estetisk formål, det vil si at de er uten en meningsbærende funksjon og har ikke informasjon som må formidles. Alternativ tekst kalles ofte for «alt text».
Løsning for designere
Tommelfingerregelen for alt text er å forholde seg kortfattet og spesifikk. Med andre ord, bruk klarspråk! Andre ting du bør ta høyde for er:
- Aldri start med «Bilde av...», dette blir repeterende – og en skjermleser-bruker vet allerede at de er på den tekstlige beskrivelsen av et bilde.
- Inkluder tekst som er en del av bildet i den alternative teksten.
- Ikke gjenta deg selv.
- Ikke bruk alt text på bilder som er kun dekorative.
- God alt-tekst gir bedre SEO!
Løsning for utviklere
En typisk tabbe er å glemme alt-attributt på bilder i koden. Det bør alltid være med i bilder som formidler informasjon til brukeren, slik at assisterende verktøy kan få tak i det. Det brukes noen ganger title-attributt til samme formål, slik at seende brukere også kan få forklaring på innhold i et bilde. Det anbefales ikke som erstatning for alt text, da det ikke blir oppdaget av nettleser-crawler for indeksering, og i tillegg gir dårlig resultat med tanke på SEO.
Et vanlig problem er også feil bruk av dekorative bilder, som svg-ikoner og lignende. Disse skal ikke vises til assisterende verktøy, da de skaper støy for brukeren. Slike bilder skal ikke ha alt-attributt, og de skjules ved hjelp av aria-hidden-attributt: aria-hidden=”true”.
3: Trekkspill
Et trekkspill er en interaktiv overskrift som gjerne blir presentert i seksjoner. De interaktive overskriftene lar brukere åpne eller lukke trekkspillet for å vise innholdet under. Trekkspill er vanlig å bruke for å strukturere innhold, f.eks. for å presentere en liste over vanlig stilte spørsmål. De kan redusere scrolling og kognitiv belastning, men de er forholdsvis komplekse i en UU-sammenheng.
Løsning for designere
En vanlig tabbe er å overdrive bruken av trekkspill. Det kan føre til mye klikking og leting om brukeren leter etter noe spesifikt. Det er også slik at det ikke er mulig å søke etter innholdet i trekkspill i nettleseren. Du må derfor regne med at innhold i trekkspill blir oversett. Derfor er det lurt at innholdet i trekkspillet ikke er avgjørende for å skjønne helheten i informasjonen du vil formidle. Du må også tenke på at innhold i trekkspill burde høre sammen, tenk på en seksjon med trekkspill som en liste. Hvis du bruker trekkspill til å gruppere masse innhold som egentlig ikke hører sammen, blir det vanskeligere å finne frem.
For å unngå de verste tabbene bør du som designer huske dette:
-
Husk å designe for alle "states", f.eks. å lage stiler for hva som skjer når musepekeren ligger over en knapp når man klikker.
-
Gode overskrifter – tenk klarspråk.
-
Skal trekkspillet være åpent eller lukket når siden lastes inn?
-
La brukeren styre åpen/lukk selv.
Løsning for utviklere
Trekkspill er en kompleks komponent, og det skal dermed lite til for å ikke kode den helt riktig. Det er to måter å implementere den: ved hjelp at native HTML-attributter eller bygge den selv fra bunn av.
HTML stiller med native tags <details>, som tilsvarer hele trekkspillet, og <summary> - header-elementet. <details> håndterer åpen og lukket tilstand når brukeren interagerer med <summary>. Svakheten til dette oppsettet er begrensning av styling. <summary> stiller med egen markør for utrulling, og det kan være utfordrende å fritt erstatte den med egen markering.
Det andre alternativet krever bruk av aria-attributter og riktig valg av HTML tags. Vi trenger:
-
Header: kodet som en <button>, aria-expanded-attributt satt til true når innhold vises, og aria-controls-attributt satt til id til innholdspanelet.
-
Panel: kodet som for eksempel <div>, med aria-labelledby-attributt satt til id til header, og hidden-attributt satt til true hvis panelet vises.
Kodesnuten kan se slik ut:
<div>
<button
id="acc-header-1" aria-expanded="false" aria-controls="acc-panel-1">
Tittel
</button>
<div
id="acc-panel-1" aria-labelledby="acc-header-1" hidden>
Innhold
</div>
</div>
Her trenger du å holde tunga bent i munnen, siden du implementerer mye funksjonalitet fra bunn av.
En vanlig tabbe er å gå for en hyllevare som ikke er universelt utformet, typisk en komponent fra et populært komponentbibliotek. Du bør være kritisk til løsninger du ikke har kontroll over. Det er lett å anta at et bibliotek mange bruker er utviklet med hensyn til universell utforming, men det er ofte ikke tilfelle. Derfor anbefaler vi å teste nøye om løsningen oppfyller alle krav og behov.
4: Overskrifter
En vanlig tabbe er at overskrifter ikke blir brukt i riktig rekkefølge, både visuelt og semantisk. Riktig bruk av overskrifter er viktig, fordi de er med på å bygge strukturen på nettsiden. Skjermleser-brukere benytter overskrifter for å navigere mellom forskjellig innhold på siden.
Løsning for designere
Det viktigste å huske på som designer er å bruke overskriftene i riktig rekkefølge rent visuelt. Løsriv deg gjerne fra <h1>-<h6> headings om du skal lage små overskrifter inni menyer og lignende.
-
De ulike teksttypene og størrelsene bør være lette å skille fra hverandre.
-
Ikke hopp over overskriftsnivå, f.eks. <h1> - <h3> er ikke lov.
-
Bruk gjerne et verktøy som https://typescale.com/ for å generere en god visuell struktur på overskriftene.
Løsning for utviklere
Overskrifter trenger å være kodet semantisk riktig, og det er ikke alltid åpenbart hva dette betyr. Mange problemstillinger gjelder hierarki på hele siden, og da er det lett å overse mindre feil.
Først og fremst skal de kodes med HTML-element ment for overskrifter: <h1>-<h6>. Den første overskriften på siden er <h1>, og det finnes bare én av den. Teksten i den bør stå også i <title>-elementet, slik at formålet med siden kan bli lett formidlet via assisterende verktøy. I visse tilfeller passer det derimot ikke å ha en synlig overskrift på toppen av siden; da er det lurt å skjule den med CSS. På denne måten mister vi ikke viktig informasjon, mens seende brukere ikke blir forstyrret.
Det er også viktig å opprettholde hierarkiet mellom overskriftene, da det ikke skal hoppes over størrelser. h1-h2-h3 er lov, men h1-h3er ikke lov. I tillegg skal det visuelle stemme overens med det semantiske; elementer som ser ut som overskrifter er overskrifter, og det bør ikke brukes stil brukt på <h2> til å utforme <h3>. Det kan være vanskelig å oppfatte strukturen på siden ved ukonsekvent bruk av stiler.
Kontakt oss
