Formuläretiketter: Viktiga krav för tillgänglighet i inmatningsfält

Formulär är en grundläggande del av webben. Från enkla kontaktformulär till komplexa kassor i e-handel, gör de det möjligt för användare att interagera med webbplatser och applikationer. Dåligt utformade formulär kan dock skapa betydande hinder för användare med funktionsnedsättningar. En avgörande del i att skapa tillgängliga formulär är korrekt användning av formuläretiketter. Denna guide ger en omfattande översikt över tillgänglighetskrav för formuläretiketter, vilket säkerställer att dina formulär är användbara för alla, oavsett deras förmågor.

Varför är tillgängliga formuläretiketter viktiga?

Tillgängliga formuläretiketter är avgörande av flera anledningar:

Användbarhet: Tydliga och koncisa etiketter hjälper alla användare att förstå syftet med varje inmatningsfält, vilket förbättrar den övergripande användbarheten.
Tillgänglighet: Etiketter ger viktig information för användare med funktionsnedsättningar, särskilt de som förlitar sig på hjälpmedelsteknik som skärmläsare. Utan korrekta etiketter kan dessa användare kanske inte fylla i formulär.
WCAG-efterlevnad: Riktlinjerna för tillgängligt webbinnehåll (WCAG) kräver att alla formulärkontroller har associerade etiketter. Att uppfylla dessa riktlinjer säkerställer att din webbplats är tillgänglig och juridiskt förenlig i många jurisdiktioner.
SEO: Även om det inte är en direkt rankningsfaktor, tenderar tillgängliga webbplatser att ha en bättre användarupplevelse, vilket indirekt kan förbättra SEO-prestandan.

Förstå WCAG-kraven för formuläretiketter

WCAG tillhandahåller specifika riktlinjer för att säkerställa formulärs tillgänglighet. Här är de viktigaste kraven som rör formuläretiketter:

WCAG 2.1 Framgångskriterium 1.1.1 Icke-textuellt innehåll (Nivå A)

Även om det inte direkt handlar om etiketter, understryker detta kriterium vikten av att tillhandahålla textalternativ för allt icke-textuellt innehåll, inklusive CAPTCHA:er och bilder som används i formulär. Ett korrekt etiketterat formulär är avgörande för att ge kontext till dessa alternativ.

WCAG 2.1 Framgångskriterium 1.3.1 Information och relationer (Nivå A)

Information, struktur och relationer som förmedlas genom presentation ska kunna bestämmas programmatiskt eller finnas tillgängliga i text. Detta innebär att förhållandet mellan en etikett och dess motsvarande inmatningsfält måste definieras explicit i HTML-koden.

WCAG 2.1 Framgångskriterium 2.4.6 Rubriker och etiketter (Nivå AA)

Rubriker och etiketter beskriver ämne eller syfte. Formuläretiketter ger beskrivande kontext för inmatningsfält, vilket gör det lättare för användare att förstå formulärets struktur och fylla i det korrekt.

WCAG 2.1 Framgångskriterium 3.3.2 Etiketter eller instruktioner (Nivå A)

Etiketter eller instruktioner tillhandahålls när innehåll kräver användarinmatning.

WCAG 2.1 Framgångskriterium 4.1.2 Namn, roll, värde (Nivå A)

För alla användargränssnittskomponenter (inklusive men inte begränsat till formulärelement, länkar och komponenter genererade av skript) kan namn och roll bestämmas programmatiskt; tillstånd, egenskaper och värden som kan ställas in av användaren kan ställas in programmatiskt; och meddelanden om ändringar av dessa objekt är tillgängliga för användarprogram, inklusive hjälpmedelsteknik.

Bästa praxis för att implementera tillgängliga formuläretiketter

Här är flera bästa praxis för att skapa tillgängliga formuläretiketter:

1. Använd <label>-elementet

<label>-elementet är det primära sättet att associera en textetikett med ett inmatningsfält. Det ger en semantisk och strukturell koppling mellan etiketten och kontrollen. for-attributet i <label>-elementet ska matcha id-attributet för motsvarande inmatningsfält.

Exempel:


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

Felaktigt exempel (undvik):


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

Att använda ett span-element istället för en label skapar inte den nödvändiga programmatiska associationen, vilket gör det oåtkomligt för skärmläsare.

2. Associera etiketter explicit med inmatningsfält

Säkerställ en tydlig och explicit association mellan etiketten och inmatningsfältet med hjälp av for- och id-attributen som visas i exemplet ovan.

3. Placera etiketter korrekt

Placeringen av etiketter kan påverka användbarheten. Generellt sett bör etiketter placeras:

Ovanför inmatningsfältet: Detta är ofta det mest tillgängliga och användarvänliga alternativet, särskilt för textfält och textområden.
Till vänster om inmatningsfältet: Vanligt, men kan vara mindre effektivt för användare med synnedsättningar som kan ha svårt att skanna sidan.
För radioknappar och kryssrutor: Etiketter bör placeras till höger om kontrollen.

Tänk på kulturella normer när du placerar etiketter. I vissa språk placeras etiketter traditionellt efter inmatningsfältet. Anpassa din design för att tillgodose dessa preferenser.

4. Tillhandahåll tydliga och koncisa etiketter

Etiketter ska vara korta, beskrivande och lätta att förstå. Undvik jargong eller tekniska termer som kan förvirra användare. Använd till exempel "Användarnamn" eller "E-postadress" istället för "UserID". Consider localization. Ensure your labels are easily translated into different languages while retaining their meaning. Tänk på lokalisering. Se till att dina etiketter enkelt kan översättas till olika språk samtidigt som de behåller sin betydelse.

5. Använd ARIA-attribut vid behov

ARIA-attribut (Accessible Rich Internet Applications) kan förbättra tillgängligheten för formulärelement, särskilt i komplexa scenarier. Använd dock ARIA med omdöme och endast när inbyggda HTML-element och -attribut är otillräckliga.

aria-label: Använd detta attribut för att ge en etikett när en synlig etikett inte är möjlig eller praktisk.
aria-labelledby: Använd detta attribut för att referera till ID:t för ett befintligt element på sidan som ska fungera som etikett.
aria-describedby: Använd detta attribut för att ge ytterligare information eller instruktioner för inmatningsfältet. Detta är användbart för att ge kontext eller förklara valideringsregler.

Exempel med aria-label:


<input type="search" aria-label="Sök på webbplatsen">

Exempel med aria-labelledby:


<h2 id="newsletter-title">Nyhetsbrevsprenumeration</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Ange din e-postadress">

6. Gruppera relaterade formulärelement med <fieldset> och <legend>

<fieldset>-elementet grupperar relaterade formulärkontroller, och <legend>-elementet ger en rubrik för fältgruppen. Detta förbättrar formulärets struktur och gör det lättare för användare att förstå sambanden mellan olika inmatningsfält.

Exempel:


<fieldset>
  <legend>Kontaktinformation</legend>
  <label for="name">Namn:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-post:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Ge tydliga felmeddelanden

När användare gör fel när de fyller i ett formulär, ge tydliga och informativa felmeddelanden som förklarar vad som gick fel och hur man korrigerar felet. Associera dessa felmeddelanden med motsvarande inmatningsfält med hjälp av ARIA-attribut som aria-describedby.

Exempel:


<label for="email">E-post:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Vänligen ange en giltig e-postadress.</span>

Se till att felmeddelandet är visuellt distinkt (t.ex. genom att använda färg eller ikoner) och programmatiskt tillgängligt för hjälpmedelsteknik.

8. Använd tillräcklig färgkontrast

Säkerställ tillräcklig färgkontrast mellan etikettexten och bakgrundsfärgen för att uppfylla WCAG-kraven. Använd ett verktyg för att analysera färgkontrast för att verifiera att kontrastförhållandet uppfyller minimikraven (4.5:1 för normal text och 3:1 för stor text). Detta hjälper användare med nedsatt syn att lättare läsa etiketterna.

9. Säkerställ tangentbordstillgänglighet

Alla formulärelement ska vara tillgängliga med endast tangentbordet. Användare ska kunna navigera genom formuläret med Tab-tangenten och interagera med formulärkontroller med mellanslagstangenten eller Enter-tangenten. Testa dina formulär noggrant med ett tangentbord för att säkerställa korrekt tangentbordstillgänglighet.

10. Testa med hjälpmedelsteknik

Det bästa sättet att säkerställa att dina formulär är tillgängliga är att testa dem med hjälpmedelsteknik som skärmläsare (t.ex. NVDA, JAWS, VoiceOver). Detta hjälper dig att identifiera eventuella tillgänglighetsproblem som kanske inte är uppenbara vid visuell inspektion. Involvera användare med funktionsnedsättningar i din testprocess för att få värdefull feedback och kontinuerligt förbättra din webbplats tillgänglighet.

Exempel på implementeringar av tillgängliga formuläretiketter

Exempel 1: Enkelt kontaktformulär (internationellt perspektiv)

Tänk dig ett kontaktformulär för en global publik. Etiketterna ska vara tydliga, koncisa och lätta att översätta.


<form>
  <label for="name">Fullständigt namn:</label>
  <input type="text" id="name" name="name"><br><br>

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

  <label for="country">Land:</label>
  <select id="country" name="country">
    <option value="">Välj land</option>
    <option value="us">USA</option>
    <option value="ca">Kanada</option>
    <option value="uk">Storbritannien</option>
    <option value="de">Tyskland</option>
    <option value="fr">Frankrike</option>
    <option value="jp">Japan</option>
    <option value="au">Australien</option>
    <!-- Lägg till fler länder -->
  </select><br><br>

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

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

Notera användningen av "Fullständigt namn" istället för bara "Namn" för tydlighetens skull, särskilt för kulturer där efternamnet kommer före förnamnet.

Exempel 2: Kassaformulär för e-handel

Kassaformulär för e-handel kräver ofta känslig information. Tydliga etiketter och instruktioner är avgörande för att bygga förtroende och säkerställa tillgänglighet.


<form>
  <fieldset>
    <legend>Leveransadress</legend>
    <label for="shipping_name">Fullständigt namn:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

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

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

    <label for="shipping_zip">Postnummer:</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älj land</option>
      <option value="us">USA</option>
      <option value="ca">Kanada</option>
      <!-- Lägg till fler länder -->
    </select>
  </fieldset>

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

    <label for="expiry_date">Utgångsdatum (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="Slutför köp">
</form>

Användningen av fieldsets och legends organiserar tydligt formuläret i logiska sektioner. Platshållartext ger ytterligare vägledning, men kom ihåg att platshållartext inte ska användas som ersättning för etiketter.

Exempel 3: Registreringsformulär med ARIA-attribut

Tänk dig ett registreringsformulär där ett smeknamn är valfritt. Med hjälp av ARIA-attribut kan vi ge ytterligare kontext.


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

  <label for="password">Lösenord:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Smeknamn (valfritt):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Detta smeknamn kommer att visas offentligt.</span><br><br>

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

aria-describedby-attributet länkar smeknamnsfältet till ett span-element som ger ytterligare information om hur smeknamnet kommer att användas.

Verktyg för att testa formulärtillgänglighet

Flera verktyg kan hjälpa dig att utvärdera tillgängligheten på dina formulär:

Accessibility Insights: Ett webbläsartillägg som identifierar tillgänglighetsproblem på webbsidor.
WAVE (Web Accessibility Evaluation Tool): Ett onlineverktyg som utvärderar webbsidors tillgänglighetsfel.
axe DevTools: Ett webbläsartillägg som utför automatiserad tillgänglighetstestning.
Skärmläsare (NVDA, JAWS, VoiceOver): Testning med skärmläsare är avgörande för att identifiera tillgänglighetsproblem som kanske inte är uppenbara genom automatiserad testning.

Slutsats

Tillgängliga formuläretiketter är avgörande för att skapa inkluderande webbupplevelser. Genom att följa de bästa praxis som beskrivs i denna guide kan du säkerställa att dina formulär är användbara för alla, oavsett deras förmågor. Att prioritera tillgänglighet gynnar inte bara användare med funktionsnedsättningar utan förbättrar också den övergripande användbarheten på din webbplats för alla användare. Kom ihåg att konsekvent testa dina formulär med hjälpmedelsteknik och involvera användare med funktionsnedsättningar i din testprocess för att få värdefull feedback och kontinuerligt förbättra din webbplats tillgänglighet.

Att omfamna tillgänglighet är inte bara en fråga om efterlevnad; det handlar om att skapa en mer inkluderande och rättvis webb för alla. Genom att investera i tillgänglig formulärdesign visar du ett engagemang för inkludering och skapar en bättre användarupplevelse för alla.