aria-readonly

Cuándo utilizarlo

En un control de formulario cuyo valor el usuario puede ver y copiar pero no modificar: una línea de resumen de un pedido que no debe editarse, el comentario de un revisor en una aprobación de varios pasos o un identificador generado automáticamente. El usuario puede seguir accediendo mediante tabulación, seleccionar el texto y leerlo; el formulario también enviará el valor del campo.

Si se utilizan <input>, <textarea> o <select>, el atributo HTML readonly gestiona todo esto de forma nativa y es la opción preferida. Se debe recurrir a aria-readonly en widgets personalizados: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" y role="textbox" (personalizados).

Comparación con los estados relacionados:

• aria-readonly — enfocable; el valor es visible y copiable; el valor se envía; el valor no puede modificarse.
• aria-disabled — enfocable (permanece en el orden de tabulación), pero no responde a la entrada del usuario y, por convención, no se envía.
• HTML disabled — queda fuera del orden de tabulación por completo, se ignora y no se envía.
• aria-hidden — se elimina del árbol de accesibilidad; este atributo tiene un propósito diferente.

La elección entre solo lectura e inactivo es semántica: solo lectura significa «valor válido que puede verse»; inactivo significa «no es necesario interactuar con esto ahora mismo».

Cómo mantenerlo sincronizado

Los valores válidos son "true" y "false". Se debe usar "false" por defecto (o simplemente omitirlo) en controles editables; se cambia a "true" cuando el campo pasa a ser de solo lectura.

Cuando aria-readonly="true":

• El control debe seguir siendo enfocable. No se debe establecer también tabindex="-1".
• Los manejadores de clic y teclado no deben modificar el valor. La selección y copia de texto deben seguir funcionando.
• Se debe aplicar estilo al campo para que el aspecto de solo lectura se distinga visualmente del estado editable: habitualmente un fondo diferente, sin cursor de edición y sin indicación visual al pasar el ratón.

Errores frecuentes

• Establecer aria-readonly en un <input> nativo a la vez que se usa el atributo HTML readonly. El atributo nativo es suficiente; la duplicación puede generar inconsistencias.
• Usar aria-readonly en un elemento que no es un formulario, como un <p> o un <div>: el estado no tiene significado en ese contexto.
• Establecer aria-readonly="true" y aria-disabled="true" simultáneamente. Debe elegirse uno en función de si el campo está «bloqueado pero es válido» o «ignorar por ahora».
• Hacer que un campo de solo lectura no sea enfocable con tabindex="-1": los usuarios de lectores de pantalla dejan de poder acceder a él para leer el valor.
• Ocultar visualmente el campo de solo lectura pero mantenerlo en el orden de tabulación.

Ejemplo

<label for="order-id">Order ID</label>
<input
  id="order-id"
  type="text"
  value="ORD-83472"
  readonly
>

<!-- Widget personalizado donde el atributo nativo no está disponible -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>