...
| Iframe | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Designspecifikation
Checkboxar har rundade hörn 4px och har blå check-markering i aktivt läge.
...
Do’s and Don’ts
-
Tillgänglighet
...
Kontrasten på Ineras checkboxes och radioknapp klarar precis kontrastkravet mot en vit bakgrund, används den färgen
#01A5A3mot en ljusgrå bakgrund exempelvis så kommer den inte uppnå tillräckligt kontrastvärde, se upp för detta. Detta gäller även stor text som också ska nå kontrastvärde 3.0.
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”.
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.
Viktigt att tänka på när det gäller obligatoriska fält kan du läsa om här: Obligatoriska fält
...