Técnica Técnicas generales WCAG 2.2
G96Señalar los elementos con algo más que su forma, tamaño o posición
Nombre oficial en el W3C: Proporcionar una identificación textual de los elementos que, de otro modo, solo se entenderían por información sensorial
En pocas palabras
Cuando un texto remite a un elemento de la página, no debe identificarlo solo por cómo se ve o dónde está. «Pulse el botón redondo» o «vea el menú de la derecha» no bastan. Hay que añadir su nombre o su etiqueta visible: «Pulse el botón redondo “Continuar”».
Por qué es importante
Una persona ciega no percibe formas, colores ni posiciones. Para ella, «el botón de abajo a la derecha» no significa nada.
En un móvil o con la página ampliada, el diseño cambia: lo que estaba a la derecha puede aparecer abajo. Las personas con discapacidad cognitiva también localizan antes un elemento por su nombre.
Cómo se hace
- Revise los textos con instrucciones: formularios, ayudas, tutoriales, mensajes de error.
- Busque referencias como «a la derecha», «arriba», «el icono verde», «el botón grande» o «el cuadro redondo».
- Añada en cada una el nombre o la etiqueta visible del elemento: «el apartado “Trámites” del menú lateral».
- Puede mantener la referencia visual, porque ayuda a muchas personas. Lo importante es que no sea la única pista.
- Asegúrese de que el nombre que cita coincide con el texto que de verdad muestra el elemento.
Cómo comprobarlo
- Busque en la página referencias a forma, tamaño, color o posición de algún elemento.
- Compruebe que cada una incluye también el nombre o la etiqueta visible del elemento.
- Lea la instrucción sin mirar el diseño. Confirme que se podría encontrar el elemento solo con esa información.
Ejemplo
Instrucción de un formulario de inscripción que cita la posición y también el texto del botón.
<p>
Cuando termine, pulse el botón «Enviar solicitud»,
situado abajo a la derecha.
</p>
<button type="submit">Enviar solicitud</button>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 G96 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
Todas las tecnologías que presentan al usuario una descripción de cómo se muestra un contenido.
Descripción
El objetivo de esta técnica es garantizar que, cuando el contenido hace referencia a elementos de una página web, no lo haga únicamente por su forma, tamaño, sonido o ubicación, sino también de formas que no dependan de esa percepción sensorial. Por ejemplo, una referencia puede describir además la función del elemento o su etiqueta.
Ejemplos
Botón referenciado por su forma y su nombre accesible
Un formulario ofrece un botón redondo para enviarlo y pasar al siguiente paso de un proceso. El botón está etiquetado con el texto "go" («ir»). Las instrucciones indican: «para enviar el formulario, pulse el botón redondo etiquetado go». Así se incluye tanto la forma como información textual para localizar el botón.
Una sección de enlaces de navegación referenciada por su ubicación y su encabezado
Las instrucciones de una página web de formación en línea indican: «Utilice la lista de enlaces de la derecha, bajo el encabezado "Class Listing" («Lista de clases»), para ir al curso en línea deseado». Esta descripción proporciona la ubicación y también pistas textuales que ayudan a encontrar la lista de enlaces correcta.
Botón referenciado por su posición y su nombre accesible
La siguiente maquetación coloca un botón en la esquina inferior derecha y lo indica por su posición. La mención de su etiqueta textual aclara qué botón hay que usar a los usuarios para quienes la posición no tiene sentido.
El HTML
<form class="wrapper">
<h1>Sign up to our mailing list</h1>
<div role="note">
Complete the form and then press the lower-right (<i>sign up</i>) button.
</div>
<div class="form-group">
<label for="full-name">Your name</label>
<input autocomplete="name" id="full-name" type="text">
</div>
<div class="form-group">
<label for="email">Your email address</label>
<input autocomplete="email" id="email" type="text">
</div>
<button type="reset">Cancel</button>
<button type="submit">Sign up</button>
</form>El CSS
.wrapper{
border:1px solid #aeaeae;
display:grid;
gap:1rem;
grid-template-columns:1fr 1fr;
padding:1rem;
width:50vw;
}
label{
display:block;
}
input, button{
font:inherit;
}
h1, [role=note]{
grid-column:1 / -1;
}
.form-group{
grid-column:1;
}
input{
width:100%;
}
button[type=reset]{
grid-column:1;
}
button[type=submit]{
grid-column:2;
}Pruebas
Procedimiento
Localizar todas las referencias de la página web que mencionen la forma, el tamaño o la posición de un objeto. Para cada una de ellas:
- Comprobar que la referencia contiene información adicional que permite localizar e identificar el elemento sin conocer su forma, su tamaño o su posición relativa.
Resultados esperados
- La comprobación n.º 1 es verdadera.
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 G96 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.