aria-errormessage

Das aria-errormessage Attribut auf einem Objekt identifiziert das Element, das eine Fehlermeldung für dieses Objekt bereitstellt.

Beschreibung

Wenn ein vom Benutzer verursachter Fehler vorliegt, möchten Sie ihnen mitteilen, dass er existiert, und erklären, wie er behoben werden kann. Es gibt zwei Attribute, die Sie verwenden müssen: Setzen Sie aria-invalid="true", um das Objekt als fehlerhaft zu definieren, und fügen Sie dann das aria-errormessage Attribut hinzu, wobei der Wert die id des Elements ist, das den Fehlermeldungstext für dieses Objekt enthält.

Das aria-errormessage Attribut sollte nur verwendet werden, wenn der Wert eines Objekts ungültig ist; wenn aria-invalid auf true gesetzt ist. Wenn das Objekt gültig ist und Sie das aria-errormessage Attribut einfügen, stellen Sie sicher, dass das referenzierte Element versteckt ist, da die darin enthaltene Nachricht nicht relevant ist.

Wenn aria-errormessage relevant ist, muss das referenzierte Element sichtbar sein, damit die Benutzer die Fehlermeldung sehen oder hören können.

Oft möchten Sie, dass das Element mit der Fehlermeldung eine ARIA Live-Region ist, wie zum Beispiel, wenn eine Fehlermeldung den Benutzern angezeigt wird, nachdem sie einen ungültigen Wert eingegeben haben. Die Fehlermeldung sollte beschreiben, was falsch ist, und den Benutzer darüber informieren, was erforderlich ist, um das Objekt gültig zu machen. Das Hinzufügen der Fehlermeldung als ARIA Live-Region informiert unterstützende Technologien darüber, dass der Benutzer von dem Inhalt der Fehlermeldung profitieren könnte, selbst wenn die Fehlermeldung dem Benutzer ansonsten nicht mitgeteilt würde.

Fügen Sie eine sichtbare Fehlermeldung hinzu und verknüpfen Sie das ungültige Objekt mit dem aria-errormessage Attribut, wenn der Fehler optisch erkennbar ist und eine explizite Beschreibung des Fehlers erforderlich ist.

Beispiel

Wir erstellen einige Stile, um:

Alle Fehlermeldungen zu verstecken,
Ungültige Objekte als ungültig darzustellen, und
Fehlermeldungen anzuzeigen, die Geschwister sind und auf ein ungültiges Objekt folgen.

Wir verwenden aria-invalid="true", um ungültige Objekte zu identifizieren:

css

.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

Wenn ein Objekt ungültig ist, verwenden wir JavaScript, um aria-invalid="true" hinzuzufügen. Der obige CSS macht die .errormessage, die auf ein ungültiges Objekt folgt, sichtbar.

html

<p>
  <label for="email">Email address:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

Wenn wir von gültig zu ungültig wechselten, war die einzige JavaScript-Änderung für dieses Beispiel ein Update von aria-invalid auf dem E-Mail-Eingabeobjekt. Da die Fehlermeldung der Eingabe folgt und auf dem Barrierefreiheitsbaum sichtbar und verfügbar wird, können wir unser Beispiel einfach halten. Wir hätten auch eine aria-live Eigenschaft anwenden oder Live-Region-Rollen wie alert verwenden können.

Werte

id Referenz: Der Wert der id des Elements, das die Fehlermeldung für das aktuelle Element enthält

Zugehörige Rollen

Verwendet in Rollen:

Erbt von Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-errormessage