Técnica HTML WCAG 2.2
H89Dar ayuda en los campos de formulario con el atributo title
Nombre oficial en el W3C: Usar el atributo title para proporcionar ayuda contextual
En pocas palabras
El atributo title de un campo puede dar una pista breve: el formato de una fecha o dónde encontrar el número de cliente. Aparece al pasar el ratón y algunos lectores de pantalla lo leen. No basta por sí solo, porque no todos lo muestran: debe ir acompañado de otra ayuda visible.
Por qué es importante
Muchos errores en formularios vienen de no saber qué escribir. Una pista a tiempo evita equivocarse y repetir el envío.
Pero el title tiene límites. Solo se ve al pasar el ratón, no al usar teclado ni pantalla táctil. Y algunos lectores de pantalla (programas que leen en voz alta la pantalla) no siempre lo leen.
Cómo se hace
- Dé a cada campo su etiqueta visible con
<label>. Eltitleno la sustituye. - Añada en el
titleuna ayuda breve: formato, ejemplo o dónde encontrar el dato. - No repita en el
titleel texto de la etiqueta. - Ofrezca la misma ayuda de otra forma visible, por ejemplo un texto bajo el campo enlazado con
aria-describedby.
Cómo comprobarlo
- Localice los campos donde se escribe texto.
- Compruebe que cada uno tiene una etiqueta asociada con
<label>. - Pase el ratón por encima y confirme que el
titlemuestra una ayuda útil. - Compruebe que esa ayuda también está disponible sin ratón, en un texto visible.
Ejemplo
El campo explica dónde está el número de cliente en el title y también en un texto visible.
<label for="cliente">Número de cliente</label>
<input id="cliente" name="cliente" aria-describedby="ayuda-cliente"
title="Está en la parte superior de su factura, junto a la fecha">
<p id="ayuda-cliente">Está en la parte superior de su factura, junto a la fecha.</p>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 H89 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
HTML
Descripción
El objetivo de esta técnica es proporcionar ayuda contextual a los usuarios mientras introducen datos en formularios, incluyendo la información de ayuda en un atributo title. La ayuda puede incluir información sobre el formato o ejemplos de lo que hay que introducir.
Los agentes de usuario y las tecnologías de asistencia actuales no siempre presentan a los usuarios la información contenida en el atributo title. Evite usar esta técnica de forma aislada.
Ejemplos
Una aplicación de mapas ofrece un formulario compuesto por una etiqueta «Address:» (dirección), un componente de entrada y un botón de envío con el valor «Find map» (buscar mapa). El componente de entrada tiene un atributo title cuyo valor es un ejemplo del formato de dirección que debe introducir el usuario.
<label for="search-address">Address:</label>
<input id="search-address" name="search-address" size="30"
title="Address example: 101 Collins St, Melbourne, Australia" type="text" value="">Un formulario que permite a los usuarios pagar su factura en línea exige que el usuario introduzca su número de cuenta. El componente de entrada asociado a la etiqueta «Account number» (número de cuenta) tiene un atributo title que proporciona información sobre dónde localizar el número de cuenta.
<label for="acc-num1">Account number:</label>
<input id="acc-num1" size="10"
title="Your account number can be found in the top right-hand corner of your bill"
type="text" value="">Pruebas
Procedimiento
- Identificar los controles de formulario que requieren la introducción de texto.
- Comprobar que cada control de formulario tiene una etiqueta asociada explícitamente.
- Comprobar que cada control de formulario tiene ayuda contextual proporcionada en el atributo
title.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
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 H89 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.