html - w3school - aria-labelledby bootstrap

¿Cuándo usar el atributo deshabilitado frente al atributo aria deshabilitado para elementos HTML?

Question

Estoy tratando de hacer un formulario accesible. ¿Debo hacer que mis entradas tengan atributos disabled y aria-disabled , o solo uno?

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

¿O así?

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

¿O así?

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

Answer 1

En resumen, ya no necesitas aria-disabled. Sólo tiene que utilizar discapacitados

Para completar la respuesta de @aardrian.

Cuando utiliza un control HTML que admite de forma nativa el atributo disabled , no necesita el atributo aria-disabled .

Si usa un control personalizado, puede usar el atributo aria-disabled . Por ejemplo, en el siguiente código, el botón "Pausa" se deshabilitará hasta que se presione el botón "Jugar" (nuestro javascript cambiará los tabindex y 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" />

Tenga en cuenta que de acuerdo con W3C:

Los elementos deshabilitados pueden no recibir el foco del orden de tabulación. [...] Además de configurar el atributo aria-disabled, los autores DEBEN cambiar la apariencia (en gris, etc.) para indicar que el elemento ha sido deshabilitado.

Answer 2

Puedo tomar su ejemplo, ponerlo en un CodePen y verificarlo en JAWS y NVDA (lo siento, no hay VoiceOver hoy):

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

Le alegrará saber que tanto NVDA como JAWS se saltan el campo (o si están enfocados explícitamente, anuncian que está desactivado).

En resumen, ya no necesitas aria-disabled . Sólo tiene que utilizar disabled

Puede leer un poco más sobre los atributos ARIA que puede volcar en este artículo por Steve Faulkner (uno de los editores de la especificación ARIA) a partir de 2015 (aunque aria-disabled no está explícitamente en la lista, el concepto es el mismo): http://html5doctor.com/on-html-belts-and-aria-braces/

Si mi respuesta es similar a su otra pregunta acerca de required frente aria-required , es porque es esencialmente la misma respuesta.

Answer 3

Una distinción importante es que al usar la voz en off sobre el elemento con solo la propiedad ''deshabilitada'' no se tabulará. Sin embargo, el elemento con aria-disabled = "true" aún podrá recibir atención e informar al lector de pantalla como atenuado.