Information og relationer

Hvad det kræver

Alt, hvad du kan se på et øjeblik — at denne store fede tekst er en overskrift, at disse rækker udgør en datatabel, at denne gruppe af felter hører til „faktureringsadresse“, at denne asterisk betyder påkrævet — skal også fremgå af den underliggende kode. Skærmlæsere, stemmestyringssoftware og reflowmotorer ser kun koden. Hvis en relation er rent visuel (en større skrifttype, en tykkere kant, et indrykningsniveau), ser hjælpeteknologi ingenting.

Sådan opfyldes det

• Brug rigtige overskriftselementer (<h1> til <h6>) i en logisk, indlejret rækkefølge — aldrig et stiliseret <div> til at efterligne en overskrift.
• Markér lister med <ul>, <ol> og <li> — ikke afsnit adskilt af linjeskift eller punkttegn.
• Brug <table> med <th scope="col"> / <th scope="row"> til datatabeller med <caption>, der beskriver tabellens formål.
• Hvert formularfelt skal have en programmatisk etiket: <label for="...">, aria-labelledby eller aria-label. Pladsholdertekst er ikke en etiket.
• Gruppér relaterede formularfelter i <fieldset> med <legend>, eller brug role="group" med aria-labelledby til tilpassede widgets.
• Til figurer og billedtekster bruges <figure> og <figcaption>. Til definitionspar bruges <dl> / <dt> / <dd>.
• Angiv påkrævede felter både visuelt (asterisk) og programmatisk (aria-required="true" eller attributten required).

Typiske fejl

• <div class="heading-1"> i stedet for <h1> — ser rigtigt ud, annonceres som ingenting.
• Layouttabeller brugt til visuelle kolonner, eller datatabeller bygget af <div>-gitre uden <th>-celler.
• Formularfelter med kun pladsholdertekst som etiket — etiketten forsvinder ved fokus, og skærmlæsere annoncerer den muligvis ikke.
• Punkter efterlignet med <p>•&nbsp;Element</p> i stedet for rigtig listemærkning.
• Asterisker for påkrævede felter vist i rød CSS uden aria-required eller required-attribut.
• Visuelt grupperede radioknapper uden <fieldset> / <legend>, hvilket efterlader skærmlæserbrugere med flydende muligheder, der mangler spørgsmålet.
• Datatabeller, hvor overskriftsrækken er stiliseret fed men bruger <td>, ikke <th>.

Hvorfor det er vigtigt

1.3.1 er det hyppigst citerede succeskriterium i WCAG-revisioner efter 1.1.1 og 1.4.3. Enhver CMS-genereret side, enhver markedsføringslandingsside og ethvert tilpasset formular-widget fejler typisk mindst én del af det. Løsningen er næsten altid semantisk HTML, ikke ARIA — når du griber efter role="heading" for at reparere et <div>, der burde have været <h2>, har du allerede tabt.