Formular-etiketter: Væsentlige tilgængelighedskrav for indtastningsfelter

Formularer er en fundamental del af internettet. Fra simple kontaktformularer til komplekse e-handels-checkouts gør de det muligt for brugere at interagere med websteder og applikationer. Dårligt designede formularer kan dog skabe betydelige barrierer for brugere med handicap. Et afgørende element i at skabe tilgængelige formularer er den korrekte brug af formular-etiketter. Denne guide giver en omfattende oversigt over tilgængelighedskrav til formular-etiketter og sikrer, at dine formularer kan bruges af alle, uanset deres evner.

Hvorfor er tilgængelige formular-etiketter vigtige?

Tilgængelige formular-etiketter er afgørende af flere årsager:

Brugervenlighed: Klare og præcise etiketter hjælper alle brugere med at forstå formålet med hvert indtastningsfelt, hvilket forbedrer den samlede brugervenlighed.
Tilgængelighed: Etiketter giver essentiel information til brugere med handicap, især dem, der er afhængige af hjælpemiddelteknologier som skærmlæsere. Uden korrekte etiketter kan disse brugere muligvis ikke udfylde formularer.
WCAG-overholdelse: Retningslinjerne for tilgængeligt webindhold (WCAG) kræver, at alle formularkontroller har tilknyttede etiketter. At opfylde disse retningslinjer sikrer, at dit websted er tilgængeligt og lovmæssigt i overensstemmelse i mange jurisdiktioner.
SEO: Selvom det ikke er en direkte rangeringsfaktor, har tilgængelige websteder tendens til at have en bedre brugeroplevelse, hvilket indirekte kan forbedre SEO-præstationen.

Forståelse af WCAG-krav til formular-etiketter

WCAG giver specifikke retningslinjer for at sikre formulartilgængelighed. Her er de vigtigste krav relateret til formular-etiketter:

WCAG 2.1 Succeskriterium 1.1.1 Ikke-tekstligt indhold (Niveau A)

Selvom det ikke direkte handler om etiketter, understreger dette kriterium vigtigheden af at levere tekstalternativer til alt ikke-tekstligt indhold, herunder CAPTCHA'er og billeder, der bruges i formularer. En korrekt mærket formular er afgørende for at give kontekst til disse alternativer.

WCAG 2.1 Succeskriterium 1.3.1 Information og relationer (Niveau A)

Information, struktur og relationer, der formidles gennem præsentation, skal kunne bestemmes programmeringsmæssigt eller være tilgængelige i tekst. Dette betyder, at forholdet mellem en etiket og dens tilsvarende indtastningsfelt skal defineres eksplicit i HTML-koden.

WCAG 2.1 Succeskriterium 2.4.6 Overskrifter og etiketter (Niveau AA)

Overskrifter og etiketter beskriver emne eller formål. Formular-etiketter giver beskrivende kontekst for indtastningsfelter, hvilket gør det lettere for brugerne at forstå formularens struktur og udfylde den korrekt.

WCAG 2.1 Succeskriterium 3.3.2 Etiketter eller instruktioner (Niveau A)

Etiketter eller instruktioner skal angives, når indhold kræver brugerinput.

WCAG 2.1 Succeskriterium 4.1.2 Navn, rolle, værdi (Niveau A)

For alle brugergrænsefladekomponenter (inklusive, men ikke begrænset til, formularelementer, links og komponenter genereret af scripts), kan navn og rolle bestemmes programmeringsmæssigt; tilstande, egenskaber og værdier, der kan indstilles af brugeren, kan indstilles programmeringsmæssigt; og meddelelse om ændringer til disse elementer er tilgængelig for brugeragenter, herunder hjælpemiddelteknologier.

Bedste praksis for implementering af tilgængelige formular-etiketter

Her er flere bedste praksisser for at skabe tilgængelige formular-etiketter:

1. Brug <label>-elementet

<label>-elementet er den primære måde at knytte en tekstetiket til et indtastningsfelt. Det giver en semantisk og strukturel forbindelse mellem etiketten og kontrolfeltet. for-attributten i <label>-elementet skal matche id-attributten i det tilsvarende indtastningsfelt.

Eksempel:


<label for="name">Navn:</label>
<input type="text" id="name" name="name">

Forkert eksempel (undgå):


<span>Navn:</span>
<input type="text" id="name" name="name">

Brug af et span-element i stedet for et label skaber ikke den nødvendige programmeringsmæssige tilknytning, hvilket gør det utilgængeligt for skærmlæsere.

2. Forbind eksplicit etiketter med indtastningsfelter

Sørg for en klar og eksplicit forbindelse mellem etiketten og indtastningsfeltet ved hjælp af for- og id-attributterne som vist i eksemplet ovenfor.

3. Placer etiketter korrekt

Placeringen af etiketter kan påvirke brugervenligheden. Generelt bør etiketter placeres:

Over indtastningsfeltet: Dette er ofte den mest tilgængelige og brugervenlige mulighed, især for tekstfelter og tekstområder.
Til venstre for indtastningsfeltet: Almindeligt, men kan være mindre effektivt for brugere med synshandicap, som kan have svært ved at scanne siden.
For radioknapper og afkrydsningsfelter: Etiketter skal placeres til højre for kontrolfeltet.

Overvej kulturelle normer, når du placerer etiketter. I nogle sprog placeres etiketter traditionelt efter indtastningsfeltet. Tilpas dit design for at imødekomme disse præferencer.

4. Brug klare og præcise etiketter

Etiketter skal være korte, beskrivende og lette at forstå. Undgå jargon eller tekniske termer, der kan forvirre brugerne. Brug for eksempel 'Brugernavn' eller 'E-mailadresse' i stedet for 'BrugerID'. Overvej lokalisering. Sørg for, at dine etiketter let kan oversættes til forskellige sprog, mens de bevarer deres betydning.

5. Brug ARIA-attributter, når det er nødvendigt

ARIA (Accessible Rich Internet Applications) attributter kan forbedre tilgængeligheden af formularelementer, især i komplekse scenarier. Brug dog ARIA med omtanke og kun når native HTML-elementer og -attributter er utilstrækkelige.

aria-label: Brug denne attribut til at give en etiket, når en synlig etiket ikke er mulig eller praktisk.
aria-labelledby: Brug denne attribut til at henvise til ID'et på et eksisterende element på siden, der skal fungere som etiket.
aria-describedby: Brug denne attribut til at give yderligere information eller instruktioner til indtastningsfeltet. Dette er nyttigt til at give kontekst eller forklare valideringsregler.

Eksempel med aria-label:


<input type="search" aria-label="Søg på webstedet">

Eksempel med aria-labelledby:


<h2 id="newsletter-title">Tilmelding til nyhedsbrev</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Indtast din e-mailadresse">

6. Gruppér relaterede formularelementer med <fieldset> og <legend>

<fieldset>-elementet grupperer relaterede formularkontroller, og <legend>-elementet giver en billedtekst til feltgruppen. Dette forbedrer formularens struktur og gør det lettere for brugerne at forstå forholdet mellem forskellige indtastningsfelter.

Eksempel:


<fieldset>
  <legend>Kontaktoplysninger</legend>
  <label for="name">Navn:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Giv klare fejlmeddelelser

Når brugere laver fejl, mens de udfylder en formular, skal du give klare og informative fejlmeddelelser, der forklarer, hvad der gik galt, og hvordan fejlen rettes. Knyt disse fejlmeddelelser til de tilsvarende indtastningsfelter ved hjælp af ARIA-attributter som aria-describedby.

Eksempel:


<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Indtast venligst en gyldig e-mailadresse.</span>

Sørg for, at fejlmeddelelsen er visuelt tydelig (f.eks. ved brug af farve eller ikoner) og programmeringsmæssigt tilgængelig for hjælpemiddelteknologier.

8. Brug tilstrækkelig farvekontrast

Sørg for tilstrækkelig farvekontrast mellem etiket-teksten og baggrundsfarven for at opfylde WCAG-kravene. Brug et værktøj til analyse af farvekontrast for at bekræfte, at kontrastforholdet opfylder minimumskravene (4.5:1 for normal tekst og 3:1 for stor tekst). Dette hjælper brugere med nedsat syn med at læse etiketterne lettere.

9. Sikre tilgængelighed via tastatur

Alle formularelementer skal være tilgængelige kun ved brug af tastaturet. Brugere skal kunne navigere gennem formularen ved hjælp af Tab-tasten og interagere med formularkontroller ved hjælp af Mellemrumstasten eller Enter-tasten. Test dine formularer grundigt med et tastatur for at sikre korrekt tastaturtilgængelighed.

10. Test med hjælpemiddelteknologier

Den bedste måde at sikre, at dine formularer er tilgængelige, er at teste dem med hjælpemiddelteknologier som skærmlæsere (f.eks. NVDA, JAWS, VoiceOver). Dette vil hjælpe dig med at identificere eventuelle tilgængelighedsproblemer, der måske ikke er tydelige ved visuel inspektion. Involver brugere med handicap i din testproces for at få værdifuld feedback og løbende forbedre dit websteds tilgængelighed.

Eksempler på implementering af tilgængelige formular-etiketter

Eksempel 1: Simpel kontaktformular (internationalt perspektiv)

Overvej en kontaktformular til et globalt publikum. Etiketterne skal være klare, præcise og lette at oversætte.


<form>
  <label for="name">Fulde navn:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mailadresse:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Land:</label>
  <select id="country" name="country">
    <option value="">Vælg land</option>
    <option value="us">USA</option>
    <option value="ca">Canada</option>
    <option value="uk">Storbritannien</option>
    <option value="de">Tyskland</option>
    <option value="fr">Frankrig</option>
    <option value="jp">Japan</option>
    <option value="au">Australien</option>
    <!-- Tilføj flere lande -->
  </select><br><br>

  <label for="message">Besked:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Send">
</form>

Bemærk brugen af 'Fulde navn' i stedet for blot 'Navn' for klarhedens skyld, især for kulturer, hvor efternavne kommer før fornavne.

Eksempel 2: E-handels checkout-formular

E-handels checkout-formularer kræver ofte følsomme oplysninger. Klare etiketter og instruktioner er afgørende for at opbygge tillid og sikre tilgængelighed.


<form>
  <fieldset>
    <legend>Leveringsadresse</legend>
    <label for="shipping_name">Fulde navn:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adresse:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">By:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Postnummer/Zip-kode:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Land:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Vælg land</option>
      <option value="us">USA</option>
      <option value="ca">Canada</option>
      <!-- Tilføj flere lande -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Betalingsoplysninger</legend>
    <label for="card_number">Kreditkortnummer:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Udløbsdato (MM/ÅÅ):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/ÅÅ"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Afgiv ordre">
</form>

Brugen af fieldsets og legends organiserer tydeligt formularen i logiske sektioner. Placeholder-tekst giver yderligere vejledning, men husk, at placeholder-tekst ikke bør bruges som erstatning for etiketter.

Eksempel 3: Registreringsformular med ARIA-attributter

Overvej en registreringsformular, hvor et kaldenavn er valgfrit. Ved hjælp af ARIA-attributter kan vi give yderligere kontekst.


<form>
  <label for="username">Brugernavn:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Adgangskode:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Kaldenavn (valgfrit):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Dette kaldenavn vil blive vist offentligt.</span><br><br>

  <input type="submit" value="Registrer">
</form>

aria-describedby-attributten linker kaldenavns-indtastningsfeltet til et span-element, der giver yderligere information om, hvordan kaldenavnet vil blive brugt.

Værktøjer til test af formulartilgængelighed

Flere værktøjer kan hjælpe dig med at evaluere tilgængeligheden af dine formularer:

Accessibility Insights: En browserudvidelse, der identificerer tilgængelighedsproblemer på websider.
WAVE (Web Accessibility Evaluation Tool): Et onlineværktøj, der evaluerer websider for tilgængelighedsfejl.
axe DevTools: En browserudvidelse, der udfører automatiseret tilgængelighedstest.
Skærmlæsere (NVDA, JAWS, VoiceOver): Test med skærmlæsere er afgørende for at identificere tilgængelighedsproblemer, der måske ikke er tydelige gennem automatiseret test.

Konklusion

Tilgængelige formular-etiketter er essentielle for at skabe inkluderende weboplevelser. Ved at følge de bedste praksisser, der er beskrevet i denne guide, kan du sikre, at dine formularer kan bruges af alle, uanset deres evner. At prioritere tilgængelighed gavner ikke kun brugere med handicap, men forbedrer også den samlede brugervenlighed af dit websted for alle brugere. Husk at teste dine formularer konsekvent med hjælpemiddelteknologier og inddrage brugere med handicap i din testproces for at få værdifuld feedback og løbende forbedre dit websteds tilgængelighed.

At omfavne tilgængelighed er ikke kun et spørgsmål om overholdelse; det handler om at skabe et mere inkluderende og retfærdigt internet for alle. Ved at investere i tilgængeligt formulardesign viser du et engagement i inklusivitet og skaber en bedre brugeroplevelse for alle.