it-swarm.com.de

Wann soll das Attribut disabled gegenüber dem Attribut aria-disabled für HTML-Elemente verwendet werden?

Ich versuche, ein Formular zugänglich zu machen. Soll ich meine Eingaben machen, haben sowohl disabled als auch aria-disabled Attribute oder nur eines?

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>

Oder so?

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true">

Oder so?

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>
27

Ich kann Ihr Beispiel nehmen, es in einem CodePen einfügen und es in JAWS und NVDA überprüfen (Entschuldigung, kein VoiceOver heute):

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>

Sie werden froh sein zu wissen, dass sowohl NVDA als auch JAWS das Feld überspringen (oder, wenn dies ausdrücklich festgelegt ist, das Deaktivieren ankündigen).

Kurz gesagt, Sie brauchen aria-disabled Nicht mehr . Verwenden Sie einfach disabled.

Sie können ein bisschen mehr über die ARIA-Attribute lesen, die Sie in diesem Artikel von Steve Faulkner (einem der Herausgeber der ARIA-Spezifikation) aus dem Jahr 2015 ausgeben können (obwohl aria-disabled Nicht explizit aufgeführt ist, ist das Konzept dasselbe). : http://html5doctor.com/on-html-belts-and-aria-braces/

Wenn meine Antwort ähnlich aussieht wie Ihre andere Frage about required versus aria-required, Dann liegt das daran, dass es im Wesentlichen die gleiche Antwort ist.

19
aardrian

Kurz gesagt, Sie brauchen keine deaktivierten Arien mehr. Verwenden Sie einfach deaktiviert.

Um @aardrian Antwort abzuschließen.

Wenn Sie ein HTML-Steuerelement verwenden, das das Attribut disabled von Haus aus unterstützt, benötigen Sie das Attribut aria-disabled Nicht.

Wenn Sie ein benutzerdefiniertes Steuerelement verwenden, können Sie das Attribut aria-disabled Verwenden. Beispielsweise wird im folgenden Code die Schaltfläche "Pause" deaktiviert, bis die Schaltfläche "Abspielen" gedrückt wird (unser Javascript ändert dann die Attribute tabindex und aria-disabled).

<img src="controls/play.png"
  id="audio-start"
  alt="Start"
  role="button"
  aria-disabled="false"
  tabindex="0" />

<img src="controls/pause.png"
  id="audio-pause"
  alt="Pause"
  role="button"
  aria-disabled="true"
  tabindex="-1" />

Beachten Sie, dass laut W3C:

Deaktivierte Elemente erhalten möglicherweise nicht den Fokus von der Aktivierreihenfolge. [...] Zusätzlich zum Setzen des Attributs "Arie deaktiviert" MÜSSEN Autoren das Erscheinungsbild ändern (abgeblendet usw.), um anzuzeigen, dass das Element deaktiviert wurde.

22
Adam

Ein wichtiger Unterschied besteht darin, dass bei Verwendung von Voice-Over das Element mit nur der Eigenschaft 'disabled' nicht mit einem Tabulator versehen wird. Das Element mit aria-disabled = "true" kann jedoch weiterhin den Fokus erhalten und abgeblendet an den Bildschirmleser weiterleiten.

13
brandonbradley