Informasjon, struktur og relasjoner som formidles via presentasjonen kan bestemmes programmatisk eller gjøres tilgjengelig(e) som tekst.
Hvorfor er suksesskriteriet viktig?
Personer som hører på innhold eller som leser med punktskrift skal også forstå informasjon, struktur og relasjoner. Nesten alle HTML-elementer har en semantisk betydning, og det er viktig at du bruker denne semantikken riktig.
Anbefalinger
Suksesskriterium 1.3.1 sier litt forenklet at du skal bruke HTML slik HTML er tenkt brukt. Egentlig er derfor ikke dette kravet så vanskelig, men du må forstå HTML.
Hvis du for eksempel har en overskrift skal denne kodes med en h-tag. Da kan skjermlesere skjønne at det er en overskrift og gi brukeren beskjed om nivået på overskriften. Dette gjør innholdet enklere å forstå siden strukturen formidles. I tillegg kan skjermlesere hoppe fra overskrift til overskrift, vise en liste over alle overskriftene på siden med mer. På tilsvarende måte skal du bruke riktig koding for lister, avsnitt, blokksitater, lenker, tabeller og så videre.
Kode skal også formidle relasjoner. I en tabell er det for eksempel viktig å vite hvilke rad- og kolonnetitler en celle hører til. Med skjermleser kan du bare høre en celle av gangen, og da er det viktig at du får informasjon om hvilken rad og kolonne cellen hører til. Dette gjøres vanligvis med th-tagger. På samme måte skal skjemafelt knyttes til ledeteksten ved hjelp av for eksempel label-taggen.
I suksesskriteriet står det at informasjon, struktur og relasjoner kan gjøres tilgjengelig som tekst. Dette bør kun være unntaksvis, og egner seg vanligvis kun for enkelt innhold. Et eksempel kan være et skjema der obligatoriske felt er merket med *. Da kan en innledende tekst som sier at «Obligatoriske felt er merket med *» og der stjernen er en del av label-teksten være tilstrekkelig.
Vanlige misforståelser
Hensikten med ARIA-standarden er å supplere semantisk HTML, ikke erstatte det som alt finnes i HTML. ARIA skal bare brukes dersom HTML ikke har nødvendig semantikk. Det er ganske vanlig at ARIA brukes for å formidle semantikk, og dessverre blir det ofte feil.
Selv om farger kan brukes til å formidle informasjon er ikke dette en del av suksesskriterium 1.3.1. Krav til bruk av farger hører inn under 1.4.1 Bruk av farge.
Hvordan teste kravet
Kjernespørsmålet
Er innhold kodet slik det ser ut?
Testmetode
Start med å scanne hele siden ved hjelp av et automatisert verktøy som ARC Toolkit. Slike verktøy kan avdekke en del problemer knyttet til 1.3.1, for eksempel mangler i label- eller legend-elementer. Deretter kan du teste følgende innholdstyper:
Bruk verktøy som HeadingsMap, ARC Toolkit eller en skjermleser for å vise alle overskriftene på siden.
Er tekst som ser ut som en overskrift, også kodet som en overskrift?
Er den hierarkiske strukturen i innholdet riktig gjenspeilet i overskriftenes nivåer og design?
Har overskrifter på samme nivå et konsekvent grafisk utseende?
Finnes det elementer som er kodet som overskrifter, men som ikke fungerer semantisk som overskrifter? (Vanlige eksempler inkluderer tomme h-tagger brukt til spacing eller h-tagger brukt kun for styling.)
Tips
Overskrifter bør som regel kodes med h-tagger i tekstlig innhold, legend i fieldset, th i tabeller eller caption i tabeller. I noen spesielle tilfeller kan det likevel være innafor å bruke role="heading" og aria-level.
Bruk verktøy som ARC Toolkit eller en skjermleser for å vise alle lister på siden.
Er innhold som ser ut som en liste, også kodet som en liste?
Ser innhold som er kodet som en liste, visuelt ut som en liste?
Tilsvarer listetypen i koden den semantiske listetypen til innholdet?
Er listekode brukt kun til innhold som har listesemantikk?
Tips
En liste består av flere sammenhengende elementer som presenteres etter hverandre. Lister har ofte punkter, tall eller symboler foran hvert element. De bør som hovedregel kodes slik:
ul + li for uordnede lister, der rekkefølgen ikke påvirker betydningen.
ol + li for ordnede lister, der rekkefølgen har betydning.
dl + dt og dd for definisjons- eller beskrivelseslister, som kobler et begrep med én eller flere beskrivelser.
I noen sjeldne tilfeller kan det være akseptabelt å bruke role="list" og role="listitem" i stedet for ul + li.
Bruk verktøy som ARC Toolkit, en skjermleser eller Web Developer Toolbar for å vise alle tabeller på siden.
Datatabeller
For tabeller som presenterer tabulær data, sjekk følgende:
Hvis tabellen har en synlig tittel, at den er kodet semantisk riktig (med caption eller aria-labelledby).
Tabellen bruker semantiske tabelloverskrifter, og celler som visuelt ser ut som overskrifter bruker riktig semantikk (th eller headers + id).
Komplekse tabeller (med sammensatte celler eller flere overskriftsnivåer) bruker headers- og id-attributter eller scope for å beskrive cellene.
Tabellceller, rader og kolonner brukes kun til innhold, ikke til styling.
Layout-tabeller
For tabeller som brukes kun til justering av innhold og ikke inneholder tabulær data, sjekk følgende:
table-elementet har ARIA-rollen presentation eller none.
Tabellen bruker ikke semantiske elementer som th, caption, summary eller headers.
Tips
Tabeller bør som regel kodes med native table-elementer. Ved spesielle behov kan ekvivalente ARIA-roller brukes.
Bruk en skjermleser eller ARC Toolkit for å få oversikt over alle skjemaelementer. Sjekk følgende:
Skjemaelementer med en synlig etikett er tilknyttet etiketten i koden via for/id eller aria-labelledby.
select-elementer med synlige grupperinger bruker optgroup.
Skjemaelementer som visuelt er grupperte og deler en felles etikett bruker en fieldset med legend eller aria-labelledby.
Hvis et skjemafelt er visuelt markert som påkrevd, er denne informasjonen også tilgjengelig programmatisk (via aria-required="true" eller required-attributtet) eller forklart i tekst (se Anbefalinger).
Bruk en skjermleser, Landmarks-addon'en og/eller nettleserens DevTools, og sjekk følgende:
Innhold med en klar semantisk type bruker den tilsvarende HTML-taggen.
Innhold som bruker en semantisk HTML-tag er i tråd med taggens betydning.
Tips
Denne kategorien omfatter ulike innholdstyper med semantiske HTML-tagger, for eksempel:
Verifiser at CSS-pseudoelementer kun er brukt til dekorativt innhold.
Ofte-stilte spørsmål
Nei, det er ikke tilstrekkelig å bruke bare fet skrift eller annen visuell formatering eksempelvis for å angi overskrifter. For at overskrifter skal forstås av skjermlesere, må du bruke semantiske HTML-elementer som <h1>, <h2>, osv. Dette gir både struktur og en navigasjonsmekanisme som hjelper hjelpemiddelteknologi.
Hvis du bruker fet eller kursiv tekst for å kommunisere semantisk viktighet, bør du bruke <strong> eller <em>-tagger. Hvis tekstvariantene derimot kun brukes til designformål, for eksempel fet skrift i en dashboardvisning eller kursiv tekst i en referanseliste, er det bedre å bruke CSS.
Det regnes vanligvis som fornuftig å alltid ha én overskrift 1 (<h1>) på siden. Bruk riktige nivåer, altså at overskrift 3 er underordnet overskrift 2 og så videre. Ikke hopp over nivåer.
På nettsider gir det ikke alltid mening at en overskrift 2 er underordnet overskrift 1. For eksempel, hvis en artikkel starter med overskrift 1 kan det være helt riktig å bruke overskrift 2 på ulike seksjoner i bunnteksten (selv om disse finnes på alle sider og ikke er direkte underordnet artikkeloverskriften).
Dette kan gjøres på flere måter. Den vanligste metoden er å bruke label-elementet sammen med for-attributtet som refererer til skjemaelementets id. Dette skaper en semantisk kobling mellom ledeteksten og skjemaelementet.
Eksempel:
Nei, ARIA (Accessible Rich Internet Applications) skal ikke brukes til å erstatte semantisk HTML. ARIA er ment å forbedre tilgjengeligheten når det ikke finnes innebygde HTML-løsninger. Korrekt HTML skal alltid brukes først, og ARIA skal bare supplere hvis det er nødvendig.
Nei, det finnes tabeller som kun har rad- eller kolonneoverskrifter, men ikke begge. Tabeller som kun brukes til layout bør unngås.
Medvirkende
Morten Tollefsen, Sarah Brodwall
Innspill til artikkelen
Logg inn med Nav SSO for å gi innspill til artikkelen
