Checkbox

Checkboxar tillåter användare att välja flera objekt från en lista med enskilda objekt, eller att markera ett enskilt objekt som valt.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Kod för gruppering av formulärfält riktlinje 53.

• Alla grupper med radioknappar och kryssrutor ska omges av <fieldset> med en beskrivande <legend>

• Checkboxen ska ha fokus och användaren ska aktivt välja att kryssa i rutan med hjälp av space-knappen eller klicka med musen. När användaren tabbar till komponenten så ska fokus följa med och en fokusram ska visa användaren att hen har fokus på komponenten/checkboxen. Fokusramen ska vara tydlig och uppnå kontrastvärdet för icke-textobjekt (3.0:1)
  
  

  • Här finns ett kodexempel från A11Y: https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-checkboxes

    <section class="checkboxes-section">   <h3>Option #1: Use fieldsets to group options</h3>   <fieldset>     <legend>Who is your favorite 19th century scientist</legend>     <div class="checkbox column">       <input id="bell" type="checkbox" name="scientist" value="bell"/>       <label for="bell">Alexander Graham Bell</label>       <input id="curry" type="checkbox" name="scientist" value="curry"/>       <label for="curry">Marie Curie</label>       <input id="lovelace" type="checkbox" name="scientist" value="lovelace"/>       <label for="lovelace">Ada Lovelace</label>       <input id="nobel" type="checkbox" name="scientist" value="nobel"/>       <label for="nobel">Alfred Nobel</label>       <input id="pasteur" type="checkbox" name="scientist" value="pasteur"/>       <label for="pasteur">Louis Pasteur</label>       <input id="tesla" type="checkbox" name="scientist" value="tesla"/>       <label for="tesla">Nikola Tesla</label>     </div>   </fieldset>

     

WCAG-kriteriet 1.4.11

• Se till att kontrasten har tillräckligt högt värde mot bakgrunden (fokusmarkering, knapp och text). Icke text-objekt 3.0 kontrast och liten text 4.5 kontrast.
  
  

WCAG-kriteriet 1.3.1

• Se till att en användare kan ta del och förstå innehållet tydligt och förstå vad som förväntas av dom med hjälp av passande label-attribut. Se till att label attributet är kopplat korrekt till respektive element.

3.3.2 Ledtexter/etiketter eller instruktioner

• Det finns Ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren. Genom att i kod (med hjälp av for-attributet på label-elementet) koppla etiketten till fältet kan användare markera fältet även genom att klicka på etiketten, vilket ökar den klickbara ytan. Genom kopplingen blir det även möjligt för en person som saknar en visuell presentation att veta vilken etikett som hör till vilket fält, eftersom skärmläsare läser upp etiketten när fältet får fokus. Radioknappar och kryssrutor: sätt etiketten till höger om knappen eller rutan. Skriv fältetiketter till kryssrutor så att det tydligt framgår vad det innebär om kryssrutan är ifylld respektive tom. Skriv i jakande form, till exempel ”Ja, jag vill få nyhetsbrevet via e-post”. Undvik kryssrutor där användaren ska välja bort någonting, till exempel ”Nej tack, jag vill inte ha nyhetsbrevet via e-post”.

4.1.2 Namn, roll, värde

• För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel.
  
  

WCAG-kriteriet 2.1.1

• Tangentbordsnavigering: Se till att det går att hantera och navigera till/från checkboxarna med både mus och tangentbord.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.