Sidjämförelse

Radioknappar är grafiska element i användargränssnittet som gör att användaren endast kan välja ett alternativ från en fördefinierad uppsättning alternativ. En radioknapp kan aldrig förekomma ensam utan endast i en radiogrupp, då det behöver finnas minst två val.

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

• Kontrasten på Ineras checkboxes och radioknapp klarar precis kontrastkravet mot en vit bakgrund, används den färgen #01A5A3 mot 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 ska uppnå 3.0 i kontrastvärde.

• Se till att radioknapparna kan få fokus och navigeras med hjälp med tangentbord.

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

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

Kodexempel för radioknappar:

<fieldset>

<legend>Output format</legend>

  <div>

    <input type="radio" name="format" id="txt" value="txt" checked>

    <label for="txt">Text file</label>

  </div>

  <div>

    <input type="radio" name="format" id="csv" value="csv">

    <label for="csv">CSV file</label>

  </div>

  […]

</fieldset>

https://www.w3.org/WAI/tutorials/forms/grouping/

Annat exempel på en längre radioknappsgrupp finns här: https://www.w3.org/WAI/WCAG21/Techniques/html/H71

 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 för varje radioknapp. Se till att label attributet är kopplat korrekt till respektive element. WCAG 1.3.1

• Tänk på att om radioknappar används i en tooltip så fungerar tangentbordsnavigeringen annorlunda. I exempelvis ett formulär så kan användaren navigera in och ut från gruppen av radioknappar med hjälp av Tab. I tooltip så används inte Tab för att ta sig ur gruppen av radioknappar utan Tab används för att ta sig in och ut ifrån tooltipen.Mer info: https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton

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.

  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.