Hva er universell utforming på nett? WCAG og inkluderende design forklart

Universell utforming på nett betyr å bygge nettsteder og apper slik at mennesker med funksjonsnedsettelser kan bruke dem – enten de er blinde og bruker skjermleser, ikke kan bruke mus, har nedsatt syn eller fargeblindhet, er døve, eller har kognitive eller lærevansker. I praksis handler det om ting som tekstalternativer for bilder, nok fargekontrast, skjemaer med riktige etiketter, og at alt fungerer med bare tastaturet. Den internasjonale standarden for det er WCAG, Web Content Accessibility Guidelines fra W3C.

Universell utforming forkortes ofte til a11y – «a», deretter 11 bokstaver, og så «y».

Hvorfor universell utforming betyr noe når du bygger med AI

AI-byggere er gode til å lage apper som ser riktige ut. Universell utforming handler mest om det du ikke ser på et skjermbilde: om en knapp faktisk er en knapp, om et felt har en etikett en skjermleser kan lese opp, og om du kan nå menyen med Tab-tasten.

Derfor er det viktig å spørre:

• Det er lett å overse. En egendesignet nedtrekksmeny kan se perfekt ut og være umulig å bruke uten mus. Du merker det ikke med mindre du tester for det.
• Det er billigere å gjøre riktig tidlig. Å be om tilgjengelige komponenter fra første prompt koster nesten ingenting. Å bygge det inn i en ferdig app betyr å røre hver skjerm.
• Det hjelper alle. Undertekster hjelper folk på støyende steder, god kontrast hjelper folk med telefon i sterkt sollys, og tydelige etiketter gjør at alle fyller ut skjemaer raskere.
• Det overlapper med SEO. Riktige overskrifter, beskrivende lenker og alt-tekst hjelper søkemotorer å forstå sidene dine også – se SEO for AI-bygde nettsteder.
• Det kan være påkrevd. Avhengig av hvor du opererer og hvem du betjener, kan universell utforming være en juridisk forpliktelse.

En hverdagslig sammenligning

Tenk på inngangen til en bygning.

Trapper fungerer for mange. En rampe fungerer for rullestolbrukere – og også for foreldre med barnevogn, bud med trillebager og reisende med kofferter. Automatiske dører, tydelige skilt, blindeskrift på heisknapper og god belysning fjerner en barriere for noen.

Universell utforming på nett er den samme ideen for digitale rom: rampene, skiltene og rekkverkene i appen din. Og som med en bygning er det langt lettere å ta med en rampe i planene enn å sette en opp etter at betongen har herdet.

WCAG i korte trekk

WCAG utgis av W3Cs Web Accessibility Initiative. Den nåværende versjonen er WCAG 2.2, først utgitt i oktober 2023. Den er bakoverkompatibel: innhold som oppfyller WCAG 2.2, oppfyller også 2.1 og 2.0, og W3C oppfordrer til å bruke den nyeste versjonen. WCAG 2.2 er også godkjent som internasjonal standard, ISO/IEC 40500:2025. En helt annen WCAG 3 er under utvikling som et tidlig utkast, ikke en ferdig standard.

WCAG er organisert under fire prinsipper, ofte husket som POUR:

Hver retningslinje har testbare suksesskriterier på tre nivåer:

• Nivå A – minimum. Å ikke oppfylle disse stopper noen helt.
• Nivå AA – standardmålet, og nivået de fleste lover og retningslinjer peker på.
• Nivå AAA – det høyeste nivået. Nyttig å sikte mot noen steder, men W3C anbefaler ikke å kreve det for hele nettsteder, fordi noe innhold ikke kan oppfylle det.

WCAG 2.2 la til ni suksesskriterier til 2.1, inkludert Målstørrelse (minimum) på nivå AA – klikkbare mål bør generelt være minst 24 x 24 CSS-piksler, med unntak – og Tilgjengelig autentisering (minimum), som begrenser innloggingstrinn som krever hukommelse eller gåter, for eksempel at du må skrive inn et passord på nytt uten å få lime det inn. Den fjernet også det gamle kriteriet «Parsing», som ikke lenger er aktuelt.

Et praktisk eksempel: et registreringsskjema

Her er et registreringsskjema en AI kan lage, og hva en tilgjengelighetssjekk finner:

Ingen av disse løsningene endrer særlig hvordan skjemaet ser ut. Alle endrer om noen i det hele tatt kan bruke det.

Nøkkelbegreper

Vanlige misforståelser

• «Universell utforming betyr bare noe for blinde brukere.» Det dekker synsnedsettelser, motoriske, hørsels-, tale- og kognitive funksjonsnedsettelser, pluss midlertidige situasjoner som et brukket armbein.
• «Tilgjengelige nettsteder ser kjedelige ut.» Universell utforming setter noen rammer – kontrast, fokusstiler, tekststørrelse – men pene, tilgjengelige nettsteder er normen, ikke unntaket.
• «En automatisk sjekker sier 100, så vi er ferdige.» Automatiske verktøy fanger bare noen problemer. Om alt-tekst faktisk er meningsfull, eller om en flyt gir mening med skjermleser, må et menneske sjekke.
• «En overlay-widget gjør oss i samsvar.» Verktøylinjer lagt på toppen kan ikke fikse manglende etiketter eller ødelagt tastaturtilgang i koden din. Fiks kilden.
• «Vi har ingen brukere med funksjonsnedsettelser.» Du kan bare ikke vite det. Mange funksjonsnedsettelser er ikke synlige, og folk som møter en barriere forlater vanligvis bare siden.

Hva du bør be AI-byggeren om

• «Bygg dette slik at det oppfyller WCAG 2.2 nivå AA.»
• «Bruk semantisk HTML: ekte knapper, lenker, overskrifter i riktig rekkefølge, og etiketter for hvert skjemafelt.»
• «Sørg for at alle interaktive elementer fungerer med bare tastaturet og har en synlig fokusstil.»
• «Sjekk alle tekst- og ikonfarger for kontrast – 4,5:1 for vanlig tekst, 3:1 for stor tekst og ikoner.»
• «Legg til meningsfull alt-tekst på informative bilder og tom alt-tekst på dekorative.»
• «Vis skjemafeil som tekst, koblet til feltet, ikke bare med farge.»
• «Respekter brukerens innstilling for redusert bevegelse for animasjoner.»
• «Kjør en automatisk tilgjengelighetssjekk og lister opp det den ikke kan teste, så jeg kan sjekke det manuelt.»

Test deretter selv: legg musen til side og prøv å fullføre hovedflyten din med bare Tab, Shift+Tab, Enter og mellomrom. Prøv den innebygde skjermleseren på telefonen din på hovedsiden. Zoom nettleseren til 200 % og se om noe ødelegges.

Universell utforming i Mythex

Mythex har ikke en egen tilgjengelighetssjekker, så behandle universell utforming som en del av promptene og testingen din. Be om WCAG 2.2 AA fra første prompt, sjekk resultatet i forhåndsvisningen med tastaturet, og bruk /test for å la agenten klikke gjennom hovedflytene dine før du publiserer – se App-testing. SEO-oppskriften ber også om semantiske overskrifter og meningsfull alt-tekst, som tjener begge mål.

For en praktisk sjekkliste, se slik gjør du nettstedet ditt tilgjengelig. For design, les slik designer du en pen app med AI, og før lansering, slik tester du appen din før lansering. W3Cs egen WCAG-oversikt er den autoritative kilden.

Spørsmål