web-dev-qa-db-fra.com

Quand utiliser l'attribut disabled par rapport à l'attribut aria-disabled pour les éléments HTML?

J'essaie de rendre un formulaire accessible. Dois-je faire mes entrées ont à la fois disabled et aria-disabled attributs, ou juste un?

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

Ou comme ça?

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

Ou comme ça?

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

Je peux prendre votre exemple, le mettre dans un CodePen , et le 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 NVDA et JAWS ignorent le champ (ou annoncent que celui-ci est désactivé).

En bref, vous n'avez pas besoin de aria-disabled plus longtemps. Utilisez simplement disabled.

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

Si ma réponse ressemble à votre autre question à propos de required par rapport à aria-required, c’est parce que c’est essentiellement la même réponse.

19
aardrian

En bref, vous n’avez plus besoin d’aria-disabled. Il suffit d'utiliser désactivé.

Pour compléter la réponse @aardrian.

Lorsque vous utilisez un contrôle HTML qui prend en charge en natif l'attribut disabled, vous n'avez pas besoin du aria-disabled attribut.

Si vous utilisez un contrôle personnalisé, vous pouvez utiliser le aria-disabled attribut. Par exemple, dans le code suivant, le bouton "Pause" sera désactivé jusqu'à ce que le bouton "Lecture" soit enfoncé (notre javascript changera alors tabindex et aria-disabled les 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" />

Notez que selon le W3C:

Les éléments désactivés risquent de ne pas recevoir le focus de l'ordre des onglets. [...] En plus de définir l'attribut aria-disabled, les auteurs DEVRAIENT changer l'apparence (grisé, etc.) pour indiquer que l'élément a été désactivé.

22
Adam

Une distinction importante est que lorsqu’on utilise la voix-off, l’élément avec seulement la propriété 'disabled' ne sera pas tabulé. Cependant, l'élément avec aria-disabled = "true" pourra toujours recevoir le focus et signaler au lecteur d'écran en grisé.

13
brandonbradley