Quand utiliser l'attribut disabled plutôt que l'attribut aria-disabled pour les éléments HTML?

Je suis en train de faire un formulaire accessible. Dois-je faire mes entrées à la fois disabled et aria-disabled attributs, ou seulement un seul?

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

Ou comme cela?

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

Ou comme cela?

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

source d'informationauteur Ralph David Abernathy

  1. 14

    Je peux prendre votre exemple, mettre dans un CodePenet de vérifier dans JAWS et NVDA (désolé, pas de VoiceOver aujourd'hui):

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

    Vous serez heureux de savoir que ces deux NVDA et des MÂCHOIRES ignorer le champ (ou si concentré explicitement, de vous annoncer qu'est désactivé).

    En bref, vous ne pas besoin aria-disabled plus longtemps. Utilisez simplement disabled.

    Vous pouvez lire un peu plus sur les attributs ARIA vous pouvez vider dans cet article par Steve Faulkner (l'un des rédacteurs de l'ARIA spec) à partir de 2015 (si aria-disabled n'est pas explicitement, le concept est le même): http://html5doctor.com/on-html-belts-and-aria-braces/

    Si ma réponse ressemble à votre autre question sur required contre aria-requiredc'est parce qu'elle est essentiellement la même réponse.

  2. 16

    En bref, vous n'avez pas besoin aria-désactivé plus longtemps. Utilisez simplement désactivé.

    Pour terminer @aardrian réponse.

    Lorsque vous utilisez un contrôle HTML qui prend en charge nativement les disabled attribut, vous n'avez pas besoin de la aria-disabled attribut.

    Si vous utilisez un contrôle personnalisé vous pouvez ensuite utiliser la aria-disabled attribut. Par exemple, dans le code suivant, le bouton "Pause" sera désactivé jusqu'à ce que le bouton "Jouer" est pressé (notre code javascript pour changer de tabindex et aria-disabled attributs).

    <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" />

    Note que, selon le W3C:

    Désactivé éléments pourraient ne pas recevoir le focus de l'ordre de tabulation. [...] Outre la définition de l'attribut aria-disabled, les auteurs DEVRAIENT modifier l'apparence (en grisé, etc.) pour indiquer que l'élément a été désactivé.

  3. 5

    Une distinction importante est que lors de l'utilisation de la voix sur l'élément avec juste le "désactivé" la propriété ne sera pas à onglets. Cependant l'élément avec aria-disabled="true" sera toujours en mesure de recevoir le focus et le rapport au lecteur d'écran en grisé.