WCAG 4.1.2 Namn, roll, värde

Knappar, länkar, fält och andra kontroller ska ha ett namn och en roll som hjälpmedel kan läsa ut, och deras läge ska gå att läsa av, till exempel om en meny är öppen. Med vanliga HTML-element följer det med automatiskt. Problemen uppstår med ikonknappar och kontroller som byggts med div-element.

• Ikonknappar för varukorg, sök, meny och stäng utan text eller aria-label.
• Storleksval byggda med div-element som går att klicka på men saknar roll och inte går att nå med tangentbordet.
• Menyknappen talar inte om att menyn är öppen, eftersom aria-expanded saknas.
• Inbäddade rutor (iframe) för recensioner, kartor eller delbetalning utan title.
• Pilarna i bildspelet saknar namn, så skärmläsaren säger bara ”knapp”.

Använd button för knappar och a för länkar, ge ikonknappar ett namn och låt aria-expanded visa om något är öppet. Inbäddade rutor får en title.

<button type="button" aria-label="Meny"
        aria-expanded="false" aria-controls="meny">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<iframe src="https://example.com/recensioner" title="Kundrecensioner"></iframe>

Gratistestet

Gratistestet letar efter det här i källkoden:

• Knapp saknar tillgängligt namn (ingen text, aria-label eller alt på ikonen).
• Länk saknar tillgängligt namn. Ofta en ikon eller bild utan alt-text inuti länken.
• Formulärfält saknar etikett. Den som använder skärmläsare får inte veta vad som ska fyllas i.
• Inbäddad ram (iframe) saknar title.

Gratistestet läser källkoden. Månadsgranskningen kör sidorna i en riktig webbläsare, där även kontroller som byggs med JavaScript och tangentbordsanvändning kommer med.

• Understanding 4.1.2 hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Den auktoriserade svenska översättningen gäller WCAG 2.0. Kravet 4.1.2 har samma lydelse i WCAG 2.1.