Semantisk HTML
Semantisk HTML bruker elementer etter betydningen deres. En ekte knapp har egenskaper som en formatert tekstblokk ikke får automatisk.
Bruk elementer til den tiltenkte oppgaven
Semantisk HTML beskriver innhold og kontroller med passende HTML-elementer. Overskrifter strukturerer innhold, en lenke fører til et mål, og en knapp utfører en handling. Dette gir nettlesere og hjelpemidler informasjon om betydningen av grensesnittet.
For å lagre en adresse i et tenkt portaleksempel passer en button. En visuelt identisk div-blokk får ikke automatisk samme betydning eller vanlig tastaturatferd. Et a-element med en passende href egner seg derimot til å gå til adresselisten.
CSS bestemmer presentasjonen; stor tekst blir ikke automatisk en overskrift. Semantisk HTML er et viktig grunnlag, men garanterer ikke alene en fullt tilgjengelig applikasjon. Etiketter, tilstander og faktisk atferd må også være riktige.
Kilder
Beslektede begreper
- ARIAARIA supplerer informasjon om roller, tilstander og egenskaper for hjelpemidler. Den beskrevne atferden må faktisk være implementert.
- SkjermleserEn skjermleser gjør digitalt innhold tilgjengelig gjennom tale eller punktskrift. Meningsfull struktur og etiketter gjør betjeningen forståelig.
- TastaturbetjeningTastaturbetjening gjør det mulig å utføre oppgaver uten mus. Handlingene må være tilgjengelige i en forståelig rekkefølge.
- FokusrekkefølgeFokusrekkefølgen bestemmer veien gjennom elementer som kan få fokus. Den skal bevare mening og betjenbarhet også ved dynamiske endringer.
- TastaturfelleI en tastaturfelle blir betjeningen sittende fast i et område. Bevisst avgrensning av fokus i en dialog trenger en utgang som kan betjenes med tastaturet.
- Lenke for å hoppe til hovedinnholdetEn hoppelenke går forbi gjentatt navigasjon til hovedinnholdet. Også neste tastaturtrinn må fortsette på riktig sted.
Artikler om temaet
Design og UX med ASES
Brukeropplevelse, grensesnitt og merkevare