La importancia de etiquetar elementos en la Web

Tips para mejorar accesibilidad de controles de interacción

Hace un tiempo iniciamos por acá una conversación sobre Accesibilidad en la Web. Hoy nos proponemos retomar el tema entrando ya en algunos detalles específicos. En particular hablaremos de la importancia de etiquetar los elementos interactivos en nuestras aplicaciones Web.

Photo by Kelly Sikkema on Unsplash

El caso del botón sin nombre

Tomemos, por ejemplo, el caso de botones que visualmente consisten en sólo un ícono, sin texto visual que lo acompañe. Consideremos que el siguiente botón de ejemplo es para cerrar un modal. Contiene un ícono que visualmente da la idea de cancelación o de cerrar, pero nada más.

<button type="button">
  ×
</button>

¿Has considerado alguna vez que no hay nada que lo describa? ¿Recuerdas cuando hablamos de los Screen Readers? Las personas con discapacidad visual no podrán ver el ícono. Gracias al Screen Reader sabrán que llegaron a un botón, pero no saben su función. Y no, añadir un atributo title="Cerrar modal" no es suficiente.

Hay varias alternativas para etiquetar el botón semánticamente sin que la etiqueta se muestra visualmente. Una de la más sencillas es proveerlo de un atributo aria-label="Cerrar modal". Puedes usar en él el mismo texto que el del atributo title.

<button type="button" aria-label="Cerrar modal">
  ×
</button>

Cómo esconder elementos visualmente

Otra alternativa consiste en declarar una clase css que esconde visualmente cualquier elemento al que se le aplica, sin hacerlo invisible a los Screen Readers:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Luego podemos tener dentro del botón un elemento adicional al ícono, que contenga la descripción o etiqueta semántica del botón:

<button type="button">
  <span class="visually-hidden">Cerrar modal</span>
  ×
</button>

Esta variante, aunque parezca innecesariamente más elaborada que la anterior, resulta muy útil para otros casos de etiquetado que veremos más adelante.

Finalmente, también podemos hacer uso de otro atributo: aria-labelledby. Este atributo, a diferencia del aria-label, en lugar de contener el texto de la etiqueta, contiene el id del elemento a considerar como etiqueta. Si este elemento a su vez lo ocultamos con la clase visually-hidden, obtenemos el mismo efecto:

<button type="button" aria-labelledby="close_button_label">
  ×
</button>
<span id="close_button_label" class="visually-hidden">
  Cerrar modal
</span>

Esta estrategia, aunque menos común, podría ser útil por ejemplo, si tenemos más de un botón compartiendo la misma etiqueta. También es útil en otros casos, como al etiquetar campos de texto y otros controles de formulario, como veremos a continuación.

Etiquetado de controles de formulario

Tan o más relevante que el etiquetado de botones resulta el etiquetado de elementos interactivos tales como campos de entrada de texto, checkboxes, radio buttons, <select>s, etc.

En particular los campos de texto muchas veces, por razones estéticas o de otro tipo, no se muestran con una etiqueta visual. Incluso hay quienes, aún al tanto de temas de accesibilidad, piensan que usar el atributo placeholder hace las veces de etiqueta. Lamentablemente esto no está garantizado, dependiendo del Screen Reader en cuestión. Además, muchas veces el placeholder es utilizado para poner algo más parecido a un ejemplo de lo que debe escribirse en el campo, más que una etiqueta que lo describa.

Una forma de lograrlo es etiquetar el elemento como se haría usualmente, pero a la vez escondemos visualmente la etiqueta, para que sólo sea reconocida por los Screen Readers:

<label for="username_input" class="visually-hidden">
  Nombre de usuario
</label>
<input type="text" id="username_input" />

Alternativamente podemos hacer uso de las mismas estrategias descritas para botones más arriba. Por ejemplo, con aria-label:

<input type="text" aria-label="Nombre de usuario" />

O con aria-labelledby:

<label id="username_input_label" class="visually-hidden">
  Nombre de usuario
</label>
<input type="text" aria-labelledby="username_input_label" />

Todas estas técnicas se pueden aplicar con cualquier otro elemento interactivo, como <select>, <textarea>, etc.

¿Qué sigue?

En la siguiente ocasión que hablemos de accesibilidad en la Web vamos a indagar un poco más en técnicas avanzadas de etiquetado. En particular hablaremos del olvidado fieldset.