form

Hvornår skal den bruges

Rundt om en væsentlig formular — registrering, checkout, kontakt, redigering af profil — der berettiger navigation som et landmark. Som med region promoveres <form>-elementet KUN til et form-landmark, når det har et tilgængeligt navn (aria-label eller aria-labelledby).

Et formulars tilgængelige navn skal beskrive dets formål: “Kontaktformular”, “Tilmeld dig”, “Rediger profil”. Undgå generisk “Formular” — redundant med landmark-annonceringen.

Er formularen en søgeformular, bruges <search> (eller role="search") i stedet — søgemarkøren er mere specifik.

En enkelt-input-nyhedsbrevsregistrering eller et “søg”-felt berettiger ikke form-landmarket. Reservér det til formularer med tre eller flere meningsfulde inputs og et klart formål.

Hvornår skal den mærkes

Altid — uden et navn bliver <form> ikke et landmark. Med flere formularer på en side (en kommentarformular OG en nyhedsbrevsregistrering) SKAL hver have et tydeligt navn.

aria-labelledby, der peger på en synlig overskrift, foretrækkes frem for aria-label, fordi det knytter den synlige titel til landmark-annonceringen.

Typiske fejl

• <form> uden aria-label / aria-labelledby. Ikke et landmark. Brugere kan ikke springe til det via landmark-navigation.
• aria-label="Formular" — redundant.
• Brug af <form role="search"> og OGSÅ aria-label="Søg". Søgemarkøren dækker det allerede; form-rollen ville konflikte.
• Login- og tilmeldingsformularer begge mærket “Log ind” — uadskillelige i landmark-menuen.
• Omslutning af et enkelt input i <form> og mærkning som et form-landmark. Overanvendt; landmarken tilføjer ingen værdi.

Eksempel

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Kontakt os</h2>
  <label>Navn <input type="text" name="name" required></label>
  <label>E-mail <input type="email" name="email" required></label>
  <label>Besked <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>