ARIA-etikettfel

SMS

Elementet är av typen indata, -knappen, bildknapp eller landmärke men har inget tillgängligt namn.

Typ

Fel

Beskrivning

Det här felet gäller för:

• Formulärindatafält:
  • HTML-taggar–input[type= "text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime-local|time|week|month|number|range|search|url"], select, datalistoch textarea.
  • WAI-ARIA roller –kryssrutan, combobox, listbox, radiogroup, radio, textbox, tree, slideroch spinbutton.
• Bilder/bildknappar/knappar
  • HTML-taggar –img, input[type="image|button"]och knappen .
  • WAI-ARIA roller –img-- och -knapp.
• Landmärken
  • WAI-ARIA roller –region, banner, kompletterande, contentinfo, form, main, navigationoch sök.

Not

AccChecker visar det här felet även för element för vilka det tillgängliga namnet anges som standard baserat på inre HTML-innehåll (se -banderollen elementet i exemplet ovan). I dessa fall kan du utelämna de här felen.

 

Alla semantiskt viktiga gränssnittselement som formulärfält (till exempel indata, välja, textområde), bilder, knappar och landmärken (taggar som representerar logiska regioner) måste ha det tillgängliga namnet för att skärmläsare ska kunna meddela dem korrekt.

Åtgärda det här felet genom att ange det tillgängliga namnet på något av följande sätt (anges i prioritetsordning).

• Formulärfält: Använd taggen etikett och ange attributet för till värdet id i målfältet.
• Bild-/bildknapp: Ange attributet alt.
• Knappar: Ange knapptexten.
• För alla element:
  • aria-märktav attribut: Ange värdet id för elementet som innehåller den tillgängliga namnsträngen.
  • attributet aria-label: Ange till den tillgängliga namnsträngen.
  • rubrik attribut: Ange till den tillgängliga namnsträngen (skapa även en knappbeskrivning).

Exempel

<!-- For landmark tags, set the accessible name by using the aria-labelledby 
attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">

  <!-- For input fields, use the LABEL tag with the for attribute. -->
  <label for="fullName">Full Name</label>
  <input id="fullName" type="text" />

  <!-- If there is no visible text that can be referenced, set the accessible 
  name by using aria-label or title attributes. -->
  <input type="file" aria-label="Your photo"/>

  <!-- For images, use the alt attribute. -->
  <img src="…" alt="Uploaded photo" />

  <!-- For buttons, caption text is also used as the accessible name. -->
  <button onclick="processForm()">Send</button>

  <!-- For image buttons, use the alt attribute to define the accessible name. -->
  <input type="image" src="images/moreinfo.png" alt="Show more info"/>

  <!-- For elements with inner text this error can be suppressed because the 
  accessible name is set by default. -->
  <div role="banner">Accessible name set by default</div>
</form >