web-intro
  • Introduction
  • Introduksjon
    • Introduksjon
    • Din første nettside
      • Hello World
      • DevTools
  • Grunnleggende webutvikling
    • HTML
      • Elementer
      • Head og body
      • Semantikk
      • Bilder
      • Lenker
      • Knapper
      • DOM-en
    • CSS
      • Selectorer
      • Pseudo-klasser
      • Box model
      • Flyt
      • Layout
      • Responsivt
    • JavaScript
      • Filer
      • Variabler
      • Typer og operatorer
      • Strenger
      • Funksjoner
      • Listeoperasjoner
      • DOM-apiet
      • Promises
      • Async/await
      • Web-APIer
      • ESNext
      • Rammeverk
  • Neste steg
    • Universell utforming
    • React
    • Utviklingsmiljø
      • Dytt det til skyen!
    • Best practices
      • Linting og formatering
      • Code review
      • Keep it simple, stupid!
    • Flere ressurser
Powered by GitBook
On this page
  • WAI-ARIA
  • Oppgaver
  1. Neste steg

Universell utforming

PreviousRammeverkNextReact

Last updated 5 years ago

Dokumentasjon fra DIFI

  • ****

Andre ressurser

Det er viktig at vi lager nettsider som er universelt utformet. Ikke bare fordi det er , men fordi det gjør brukeropplevelsen til alle som bruker tjenesten din bedre. Du har kanskje scrollet nedover facebookfeeden din på t-banen og sett en video, selv om du ikke har med hodetelefoner, fordi den har undertekster? Eller bare hatt en hånd tilgjengelig mens du sitter på pcen, men har brukt tab til å navigere deg gjennom siden? som vi beskrev i delen om HTML, er viktig for å gjøre en nettside tilgjengelig for flere brukere, fordi det introduserer mening til elementene vi bygger nettsidene våre med, i tillegg til presentasjon.

som oppsummerer hvorfor UU er viktig, og gir noen konkrete tips til hvordan man kan få universelt utformede systemer.

Vi har også en egen podcast i Bekk, og er spesielt relevant hva UU gjelder (finnes også i diverse podcast-apper hvis man heller foretrekker å bruke det):

WAI-ARIA

er et sett attributter som settes på HTML-elementer og fungerer som et ekstra lag med beskrivende metadata. Disse er ikke ment som en erstatning for det semantiske innholdet som god bruk av HTML allerede gir, men som et tillegg. Det kan brukes til å informere skjermleseren om tilstander og oppdateringer i grensesnittet, noe som HTML i selg selv ikke har støtte for. Eksempelvis kan vi ved hjelp av WAI-ARIA informere brukeren om hvorvidt en meny er åpen eller lukket, om nytt innhold er lastet inn, eller om en feilmelding har dukket opp.

Denne gir en fin intro til WAI-ARIA og hvordan man bør bruke det sammen med semantisk HTML.

Husk!

Selv om WAI-ARIA er veldig nyttig, er det viktig bare bruke det når det er nødvendig. Du bør alltid utnytte innebygde semantiske HTML-elementer for å uttrykke semantikk, men hvis det ikke er mulig å bruke HTML-semantikk, f.eks. hvis du lager noe komplekst som ikke kan lages med enkle HTML-elementer, er WAI-ARIA et verdifullt tilskudd for å skape tilgjengelig kode.

Oppgaver

Les over koden i og se hvordan WAI-ARIA sitt rollebegrep brukes for å tilføre mer informasjon om nettsiden.

Test VoiceOver på macen din med denne

Standarden for UU (WCAG 2.0)
Veiledning og løsningsforslag for å følge WCAG 2.0
Dokumentasjon fra MDN: WAI-ARIA basics
Videokurs: hvordan bygge UU-vennlige webapplikasjoner
Kom igang med voiceover
The A11y Project
Bloggpost om hvordan man tester UU
lovpålagt
Semantisk HTML
På denne siden har DIFI en video
denne episoden
WAI-ARIA
videoen
dette repoet
oppstartsguiden