G211Hacer coincidir el nombre accesible con la etiqueta visible

El texto del enlace proporciona tanto la etiqueta del enlace como su nombre accesible

Con HTML convencional, el texto situado entre las etiquetas del elemento a proporciona tanto el texto visible del enlace como el nombre accesible "Code of conduct" (Código de conducta):

<p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p>

El texto del elemento label proporciona el nombre del campo mediante el atributo for

El texto situado entre las etiquetas label sirve también como nombre accesible "Notify me of delays" (Avisarme de los retrasos) de la casilla de verificación, gracias al atributo for, que hace referencia al id del input.

<input type="checkbox" id="notification" name="notify" value="delays">
<label for="notification">Notify me of delays</label>

El texto del botón proporciona el nombre accesible

El texto dentro de un elemento button se convierte tanto en su etiqueta visible como en su nombre accesible:

<button>Send</button>

Grupo sencillo de botones de opción

Los botones de opción suelen aparecer en grupo, donde cada botón está etiquetado y el grupo de botones va precedido de información que explica o categoriza el grupo.

La etiqueta de cada componente debe limitarse a "Yes" y "No". Para cumplir los criterios de conformidad 1.3.1 Información y relaciones y 3.3.2 Etiquetas o instrucciones, el texto "Call me…" puede codificarse de modo que transmita la relación a las tecnologías de asistencia, en este ejemplo mediante un fieldset y un legend.

Si la etiqueta no se limita a la cadena adyacente al botón de opción, las múltiples interpretaciones de qué constituye la etiqueta pueden dar lugar a un funcionamiento menos uniforme. Si "Yes" por sí solo no es la etiqueta del primer botón de opción, ¿lo es "Call me when balance exceeds $10,000"? ¿O es una combinación de cadenas de texto y, en ese caso, el orden es "Call me when balance exceeds $10,000 Yes" o "Yes, Call me when balance exceeds $10,000"? Las decisiones de combinar cadenas de texto pueden tener efectos negativos para los usuarios de lectores de pantalla, ya que el orden de concatenación puede afectar al significado. En este ejemplo, "No, call me when balance exceeds $10,000" (No, llamarme cuando el saldo supere 10.000 $) podría resultar muy confuso para un usuario de lector de pantalla.

<fieldset>
  <legend>Call me when balance exceeds $10,000?</legend><br />
  <input type="radio" id="yes" name="callme" value="yes">
  <label for="yes">Yes</label>
  <input type="radio" id="no" name="callme" value="no">
  <label for="no">No</label>
</fieldset>

Ejemplo funcional de grupo sencillo de botones de opción

Agrupaciones de casillas de verificación

En las agrupaciones de casillas de verificación, las implementaciones que intentan incorporar al nombre accesible algo más que la etiqueta inmediata de la casilla también pueden resultar problemáticas si no se limitan a la cadena de texto adyacente.

En la figura 2 hay una cadena de texto larga que combina una etiqueta de grupo y una instrucción: "What do you value in our service (check all that apply)?" (¿Qué valora de nuestro servicio? Marque todas las que correspondan). Cada una de las casillas tiene además su propia etiqueta de una o dos palabras. En lo que respecta al 2.5.3, las etiquetas de los componentes deben limitarse a "Courtesy", "Promptness", "Store Hours" y "Knowledge".

Intentar incluir el texto precedente como parte del nombre accesible puede dificultar que los usuarios de entrada por voz aíslen un control mediante órdenes habladas. Una construcción así también aumentará de forma negativa la verbosidad para los usuarios de lectores de pantalla (al leerse las cadenas de texto combinadas para cada uno de los campos antes de su estado). La solución más sencilla es limitar el nombre accesible al texto situado inmediatamente junto a las casillas, utilizando técnicas similares a las del grupo estándar de botones de opción.

Etiquetas apiladas

Aunque las etiquetas de los cuadros combinados, las listas desplegables, los campos de texto y otros componentes se sitúan normalmente justo a la izquierda del componente, existe otra convención establecida en la que las etiquetas se apilan encima de los campos, alineadas con su borde izquierdo.

En la figura 3, los campos están apilados y alineados a la izquierda, con las etiquetas inmediatamente antes de cada campo, también alineadas a la izquierda. Hay un espacio en blanco adicional entre la etiqueta y el campo anterior, de modo que la etiqueta queda más cerca del campo de texto al que está asociada. Las etiquetas apiladas son relativamente habituales en los diseños para móvil, donde el espacio horizontal es limitado.

La figura 4 muestra una variante de las etiquetas apiladas en la que se incluyen pistas e indicaciones entre la etiqueta y el campo. Este diseño no proporciona una etiqueta adyacente. Sin embargo, la etiqueta "New Password" (Nueva contraseña) se sigue considerando lo bastante próxima, sobre todo por su tamaño y su negrita en comparación con el texto de ayuda, más pequeño y de menor contraste. Las asociaciones se refuerzan por software: al texto de ayuda se le asigna una función de aria-describedby y la etiqueta está correctamente asociada al campo.

En este tipo de implementaciones, el texto de ayuda debería limitarse a una sola línea siempre que sea posible, ya que pueden surgir problemas de accesibilidad cuando una ayuda más extensa separa la etiqueta de su campo. La figura 4 ilustra que el concepto de «texto adyacente» es una guía para interpretar la etiqueta, pero no siempre puede servir como regla estricta.

<form>
  <label class="label" for="example-2">New password</label>
  <span id="example-2-hint" class="hint">
    Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.
  </span>
  <input class="input" id="example-2" name="example-2" type="password"
         autocomplete="new-password" aria-describedby="example-2-hint">
</form>

Ejemplo funcional de etiquetas apiladas

Rango de campos con pocas etiquetas

Una discrepancia menos habitual entre etiquetas y campos puede darse cuando un grupo de botones de opción se configura para recoger una elección dentro de un rango. Las etiquetas pueden situarse únicamente en cada extremo del rango o intercalarse en distintos puntos del mismo.

Las dos etiquetas, "Hated it" y "Loved it", son adyacentes al primer y al último botón de opción, y deberían ser sus nombres accesibles. Los usuarios de entrada por voz pueden pronunciar cualquiera de estas etiquetas para seleccionar un botón de opción y después usar la navegación con flechas (por ejemplo, «pulsar flecha derecha») para modificar la selección. "Rate your response" (Valore su respuesta) es el texto que describe el componente completo y puede asociarse como etiqueta de grupo (aquí mediante legend). Los tres botones de opción centrales no tienen etiquetas visibles. En el ejemplo de código se les asignan atributos title con los valores "Disliked", "So-so" y "Liked" (No me gustó, Regular y Me gustó) para cumplir el criterio de conformidad 3.3.2 Etiquetas o instrucciones.

<fieldset>
  <legend>Rate your response</legend>
  <label for="hated">Hated it</label>
  <input type="radio" name="meal" id="hated" value="hated">
  <input type="radio" name="meal" id="poor" value="poor" title="Disliked">
  <input type="radio" name="meal" id="neutral" value="neutral" title="So-so">
  <input type="radio" name="meal" id="okay" value="okay" title="Liked">
  <input type="radio" name="meal" id="loved" value="loved">
  <label for="loved">Loved it</label>
</fieldset>

Ejemplo funcional de rango de campos

Texto entre paréntesis y signos de puntuación

La técnica G211 no pretende complicar las convenciones existentes para la construcción de campos de formulario accesibles. Como se describe en las subsecciones Punctuation and capitalization y Text in parentheses del documento de Comprensión, no siempre es necesario incluir toda la información en el nombre accesible para intentar cumplir el requisito de Etiqueta en el nombre, especialmente cuando se trata de texto que normalmente no se pronunciaría al usar el reconocimiento de voz para llegar a los controles. Cuando existen formas establecidas de garantizar que la información y las relaciones transmitidas visualmente estén presentes por software, es aceptable dejar fuera del nombre accesible el texto entre paréntesis y los signos de puntuación.

El siguiente fragmento muestra posibles técnicas mencionadas en el documento de Comprensión. Dado que el carácter obligatorio del campo se indica por software y que las restricciones de entrada de la fecha se exponen mediante aria-describedby, el asterisco y la información entre paréntesis se han dejado fuera del nombre accesible.

<label for="name">Name</label> *
<input type="text" name="name" id="name" autocomplete="name" required>
<label for="birth">Birth date</label> (<span id="mask">YYYY-MM-DD</span>)
<input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask">

Ejemplo funcional de campos con nombres accesibles simplificados