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 les deux disabled et aria-disabled attributs, ou juste un?
<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>
3 réponses
je peux prendre votre exemple, mettre dans un CodePen, et 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 la NVDA et JAWS sautent le champ (ou si elles sont explicitement ciblées, annoncez qu'elles sont désactivées).
en bref, vous ne pas besoin aria-disabled plus longtemps. Suffit d'utiliser disabled.
vous pouvez lire un peu plus sur les attributs ARIA que vous pouvez Dumper dans cet article de Steve Faulkner (un de la rédaction 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 questionrequired contre aria-required, c'est parce qu'elle est essentiellement la même réponse.
en bref, vous n'avez plus besoin d'Aria-disabled. Utilisez simplement désactivé.
Pour terminer @aardrian réponse.
lorsque vous utilisez un contrôle HTML qui supporte nativement le disabled l'attribut, vous n'avez pas besoin de l' aria-disabled l'attribut.
Si vous utilisez un contrôle personnalisé vous pouvez utiliser le aria-disabled l'attribut. Par exemple, dans le code suivant, le bouton "Pause" sera désactivé jusqu'à ce que le bouton "Jouer" est pressé (notre javascript pour changer 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" />
notez que selon W3C:
les éléments désactivés peuvent ne pas recevoir la mise au point de l'ordre de l'onglet. [...] En plus de définir l'attribut aria-disabled, les auteurs doivent modifier l'apparence (grisée, etc.) pour indiquer que l'élément a été désactivé.
une distinction importante est que lors de l'utilisation de la voix-off l'article avec juste la propriété 'disabled' ne sera pas tabbed to. Cependant, l'item avec aria-disabled="true" sera toujours en mesure de recevoir la mise au point et le rapport au lecteur d'écran comme dimmed.