Normativas · ARIA

Estado Estado global

aria-disabled

Indica que un control es perceptible y enfocable pero no responde a la entrada del usuario. Se prefiere el atributo HTML disabled nativo cuando está disponible; recurra a aria-disabled cuando necesite que el elemento permanezca enfocable o pueda recibir un tooltip.

Cuándo utilizarlo

Cuando un botón, enlace, campo de entrada o widget compuesto está actualmente inoperable pero debe seguir apareciendo en el orden de tabulación para que los usuarios puedan descubrirlo y saber por qué está deshabilitado. Establezca aria-disabled="true" y aplique estilos visuales que hagan inequívoco el estado deshabilitado.

Comparación con atributos relacionados:

  • HTML disabled (en <button>, <input>, <select>, <textarea>, <fieldset>) — elimina el control del orden de tabulación completamente, ignora los clics e impide que el valor se envíe. Utilícelo cuando no haya nada que el usuario pueda hacer con el control.
  • aria-disabled="true" — el lector de pantalla anuncia «atenuado» / «no disponible», pero el elemento permanece enfocable. También se debe impedir que se ejecute el manejador de clic. Utilícelo en widgets personalizados, en etiquetas <a> (que no aceptan disabled), o cuando el estado deshabilitado necesita un tooltip que explique el motivo.
  • aria-readonly — el valor no puede modificarse, pero el control sigue siendo operable y enfocable. El usuario puede copiarlo y el formulario lo seguirá enviando.
  • aria-hidden — elimina el elemento del árbol de accesibilidad por completo. Objetivo diferente: oculto, no deshabilitado.

Cómo mantenerlo sincronizado

Los valores válidos son "true" y "false". Use "false" por defecto u omítalo cuando esté habilitado — no es necesario renderizar aria-disabled="false" en cada control activo.

Cuando aria-disabled="true":

  • Detenga la ejecución del manejador de clic. El atributo no bloquea eventos por sí solo.
  • Evite la activación predeterminada por teclado (Enter, Space).
  • Asegúrese de que el estilo visual deje claro el estado deshabilitado; verifique que sigue cumpliendo el contraste para elementos no textuales de WCAG 1.4.11 (la apariencia deshabilitada está explícitamente exenta, pero una señal visual clara sigue siendo la mejor práctica).

Fallos frecuentes

  • Usar aria-disabled="true" sin bloquear el manejador de clic — el elemento luce atenuado pero sigue ejecutando su acción.
  • Usar disabled y aria-disabled en el mismo elemento. El atributo nativo ya expone el estado; la duplicación es redundante.
  • Usar aria-disabled en <a> sin eliminar también href o prevenir el comportamiento por defecto — el enlace sigue navegando.
  • Deshabilitar controles sin explicar el motivo. WCAG 3.3.1 espera un error o una instrucción.
  • Confundir aria-disabled con aria-hidden. Los elementos deshabilitados permanecen en el árbol de accesibilidad; los ocultos desaparecen.

Ejemplo

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Enviar pedido
</button>
<p id="submit-help">Añada al menos un artículo a su carrito para habilitar el envío.</p>