Técnica HTML WCAG 2.2
H65Usar title para nombrar un campo de formulario sin etiqueta visible
Nombre oficial en el W3C: Usar el atributo title para identificar los controles de formulario cuando no se puede usar el elemento label
En pocas palabras
A veces el diseño no deja sitio para una etiqueta visible junto a un campo, como en un buscador con su botón al lado. En esos casos, el atributo title da nombre al campo y el lector de pantalla lo lee. Es una solución de reserva: lo mejor sigue siendo una etiqueta label visible.
Por qué es importante
Un campo sin nombre se anuncia solo como «editar» o «cuadro combinado». Quien usa un lector de pantalla no sabe qué escribir o qué elegir.
Quien ve la pantalla entiende el campo por el contexto: una lupa, un botón «Buscar» al lado o el encabezado de una columna. El atributo title da esa misma información a quien no ve. El criterio 4.1.2 pide que cada control tenga un nombre.
Cómo se hace
- Use
titlesolo cuando no quepa una etiqueta visible. Si cabe, use<label>. - Escriba en
titleun texto breve y claro:title="Buscar en la web". - Haga que el diseño explique el campo a quien ve: un botón «Buscar» justo al lado, un icono o el encabezado de la tabla. El
titleno se ve con el teclado ni en el móvil. - En grupos de campos, como un teléfono dividido en prefijo y número, dé a cada campo su propio
title. - No use el texto de ejemplo (
placeholder) como nombre: desaparece al escribir.
Cómo comprobarlo
- Busque los campos de formulario que no tienen etiqueta visible.
- Con las herramientas del navegador (F12), panel Accesibilidad, compruebe que su nombre sale del
titley que describe el campo. - Recorra el formulario con Tab y un lector de pantalla. Cada campo debe anunciar su nombre.
- Mire la pantalla y compruebe que también se entiende para qué sirve cada campo.
Ejemplo
Un buscador con un campo de texto y una lista de secciones, sin etiquetas visibles, nombrados con title.
<form role="search" action="/buscar">
<input type="search" name="q" title="Buscar en la web">
<select name="seccion" title="Sección donde buscar">
<option>Toda la web</option>
<option>Noticias</option>
<option>Trámites</option>
</select>
<button type="submit">Buscar</button>
</form>
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H65 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Controles de formulario HTML que no se identifican mediante value, alt o el contenido del elemento
Descripción
El objetivo de esta técnica es usar el atributo title para proporcionar un nombre accesible a los controles de formulario cuando el diseño visual no incluye en pantalla un texto que pueda asociarse al control como etiqueta. Los agentes de usuario, incluidas las tecnologías de asistencia, pueden leer en voz alta el atributo title.
Ejemplos
Un menú desplegable que limita el alcance de una búsqueda
Un formulario de búsqueda usa un menú desplegable para limitar el alcance de la búsqueda. El menú desplegable está inmediatamente al lado del campo de texto que se usa para introducir el término de búsqueda. La relación entre el campo de búsqueda y el menú desplegable resulta clara para los usuarios que pueden ver el diseño visual, que no tiene espacio para una etiqueta visible independiente. El atributo title se usa para identificar el menú select. El atributo title puede ser leído por los lectores de pantalla o mostrarse como información emergente (tooltip) a las personas que usan magnificadores de pantalla. Debe haber información visual en la página que permita a los usuarios videntes comprender el propósito de los controles de formulario y de los agentes de usuario.
<label for="search-term">Search for:</label>
<input id="search-term" name="search-term" type="text" value="">
<select title="Search in" id="scope">
...
</select>
Campos de entrada para un número de teléfono
Una página web contiene controles para introducir un número de teléfono de Estados Unidos, con tres campos para el prefijo de zona, la central y los cuatro últimos dígitos.
<fieldset>
<legend>Phone number</legend>
<input id="area-code" name="area-code" title="Area Code"
type="text" size="3" value="">
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="">
<input id="last-digits" name="last-digits" title="Last four digits of phone number"
type="text" size="4" value="">
</fieldset>
Una función de búsqueda
Una página web contiene un campo de texto en el que el usuario puede introducir términos de búsqueda y un botón etiquetado «Search» (buscar) para realizar la búsqueda. El atributo title se usa para identificar el control de formulario, y el botón se coloca justo después del campo de texto para que al usuario le quede claro que el término de búsqueda debe introducirse en ese campo.
<input type="text" title="Type search term here"> <input type="submit" value="Search">
Una tabla de datos con controles de formulario
Una tabla de datos con controles de formulario necesita asociar cada control con los encabezados de columna y de fila de su celda. Sin un title (o una etiqueta fuera de pantalla), a los usuarios que no ven les resulta difícil detenerse y consultar con su tecnología de asistencia los valores de los encabezados de fila o columna correspondientes mientras recorren el formulario con el tabulador.
Por ejemplo, un formulario de encuesta tiene cuatro encabezados de columna en la primera fila: Pregunta, De acuerdo, Indeciso, En desacuerdo. Cada una de las filas siguientes contiene una pregunta y un botón de opción en cada celda, correspondiente a la opción de respuesta de las tres columnas. El atributo title de cada botón de opción contiene la información necesaria para identificar el control.
Pruebas
Procedimiento
Para todos los controles de formulario que no están asociados a un elemento label:
- Comprobar que el control tiene un atributo
title - Comprobar que el propósito del control de formulario resulta claro para los usuarios que pueden ver el control.
- Comprobar que el atributo
titleidentifica el propósito del control y que coincide con el propósito visual aparente.
Resultados esperados
- Las comprobaciones anteriores son verdaderas.
Recursos
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H65 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.