Componentes y estados: botón o enlace, estados sin color y contenido emergente (1.4.13)

Cada vez que dibujas un rectángulo con texto y esquinas redondeadas estás tomando una decisión que el lector de pantalla, el teclado y el control por voz van a notar: ¿es un botón o un enlace?, ¿qué estados tiene?, ¿qué pasa cuando aparece un panel encima? Esta lección se centra en el diseño de los componentes interactivos: elegir su naturaleza, diseñar todos sus estados sin depender del color y especificar el contenido que aparece y desaparece. La implementación detallada de estos patrones se estudia en el nivel 3 (curso N3-C5); aquí nos ocupamos de lo que el diseño debe decidir y dejar escrito.

Primero, decidir qué es cada cosa

La regla es sencilla y se incumple a diario: un enlace lleva a otro sitio (otra página, un fichero, un ancla de la misma página); un botón hace algo en la página actual (enviar, abrir, cerrar, añadir, filtrar). Para quien usa lector de pantalla la diferencia es real: se anuncian distinto, se activan con teclas distintas (el enlace con Intro; el botón con Intro o Espacio) y se listan por separado.

Lo que se ve	Lo que hace	Qué es
«Ver requisitos»	Despliega un panel en la misma página	Botón (patrón desplegable)
«Descargar formulario (PDF, 120 KB)»	Abre o descarga un fichero	Enlace
«Iniciar sesión» en la cabecera	Lleva a la página de acceso	Enlace
«Iniciar sesión» en la cabecera	Abre un diálogo modal	Botón
«Añadir al carrito»	Añade el producto sin cambiar de página	Botón
Tarjeta de noticia completa	Lleva a la noticia	Enlace en el titular (la tarjeta no es un gran enlace con todo dentro)

El aspecto puede ser el que el sistema de diseño decida (un enlace con forma de botón para «Pedir cita» es habitual), pero la naturaleza debe anotarse siempre. Y dentro de un texto, los enlaces deben reconocerse como tales: lo más fiable es el subrayado; si se distinguen solo por el color, para cumplir 1.4.1 Uso del color la técnica aceptada (G183) pide al menos un contraste de 3:1 con el texto que los rodea y una señal adicional al recibir el foco y el hover.

Nativo antes que inventado

Las casillas, los botones de opción, los desplegables select y los botones nativos ya funcionan con teclado, se anuncian bien y se pueden personalizar mucho con CSS. Cada vez que el diseño exige un control que no existe en HTML (un desplegable con buscador e imágenes, un selector de fechas propio, un interruptor con forma de píldora), el equipo tiene que construir y probar todo su comportamiento. Si lo necesitas, especifica el patrón del APG (ARIA Authoring Practices Guide) que debe seguir y las teclas que lo operan. Si no lo necesitas, no lo inventes.

Estados que se ven y se anuncian

Un componente no es una imagen: es un conjunto de estados. El sistema de diseño debe dibujar cada uno y la anotación debe decir cómo se comunica a la tecnología de apoyo (4.1.2 Nombre, función, valor).

• Foco y hover: distintos entre sí; el foco lo veremos a fondo en la lección siguiente.
• Pulsado o activo, y en los interruptores activado o desactivado.
• Seleccionado (pestaña, opción, fila) y marcado (casilla).
• Expandido o contraído (acordeón, menú, «Ver más»).
• Deshabilitado, solo lectura, error y cargando.

Dos reglas de diseño para todos ellos. Primera: ningún estado depende solo del color (1.4.1). La pestaña seleccionada lleva una barra inferior o un fondo distinto, además del color; el interruptor activado muestra la posición del círculo y, mejor aún, el texto «Sí» o «No»; el campo con error lleva icono y mensaje. Segunda: los indicadores visuales de estado necesitan un contraste de al menos 3:1 con lo que tienen al lado (1.4.11 Contraste no textual, que estudiaste en el curso N2-C3).

<!-- Incorrecto: el estado solo existe como color en una clase CSS -->
<div class="toggle on" onclick="cambiar()">Notificaciones</div>

<!-- Correcto: botón nativo con estado expuesto y texto que no cambia -->
<button type="button" aria-pressed="true">Notificaciones por correo</button>

Fíjate en un detalle: en un botón de alternar, o cambia el estado (aria-pressed) o cambia el texto («Activar» / «Desactivar»), pero no las dos cosas a la vez, porque el lector anunciaría algo contradictorio como «Desactivar, botón, pulsado».

Botones de icono: el nombre no es opcional

La lupa, la papelera, el lápiz, los tres puntos y la X de cerrar son botones que, sin anotación, llegan a desarrollo sin nombre. Decide para cada uno el nombre accesible literal («Buscar», «Eliminar factura 2026-014», «Editar dirección», «Más acciones», «Cerrar»), y mantenlo igual en todo el sitio (3.2.4 Identificación coherente). Siempre que haya espacio, acompaña el icono de texto visible: hay muy pocos iconos que todo el mundo entienda, y el texto ayuda a las personas con discapacidad cognitiva y a quien usa control por voz, que necesita saber qué decir. Si el texto visible existe, el nombre accesible debe incluirlo (2.5.3 Etiqueta en el nombre).

Contenido que aparece al pasar o al enfocar

Las ayudas emergentes (tooltips), los submenús que se abren al pasar el ratón y las tarjetas de vista previa están regulados por 1.4.13 Contenido con hover o foco (AA). Cuando un contenido adicional aparece al recibir el hover o el foco, debe ser:

1. Descartable: se puede cerrar sin mover el puntero ni el foco, normalmente con Esc, salvo que comunique un error de entrada o no tape ni sustituya otro contenido.
2. Sobrevolable (hoverable): si aparece con el puntero, se puede mover el puntero encima del contenido sin que desaparezca. Con zoom, hay que poder desplazarse hasta él.
3. Persistente: sigue visible hasta que se retira el hover o el foco, la persona lo cierra o deja de ser válido. Nada de ayudas que se esfuman a los dos segundos.

Añade dos decisiones más: lo que aparece con hover también aparece con el foco del teclado, y en pantallas táctiles, donde no hay hover, hace falta otra vía. Por eso la información esencial (requisitos de una contraseña, el significado de un campo) no debe vivir solo en un tooltip: va en texto visible junto al campo.

Diálogos, acordeones, pestañas y carruseles

Para los componentes compuestos, la especificación de diseño debe cubrir siempre los mismos puntos: qué es, cómo se abre y se cierra, adónde va el foco y cómo se ve cada estado.

• Diálogo modal: título visible, botón «Cerrar» con nombre, cierre con Esc, foco al primer elemento útil al abrir y de vuelta al botón que lo abrió al cerrar, fondo no operable mientras está abierto y contenido que cabe a 320 px con desplazamiento interno.
• Acordeón: toda la cabecera es el botón (no solo la flecha), el icono indica el estado y el texto de la cabecera es un encabezado del nivel adecuado.
• Pestañas: la seleccionada se distingue por forma y no solo por color; si en móvil no caben, mejor convertirlas en acordeón que esconder pestañas.
• Carrusel: flechas y controles con nombre, indicación «Diapositiva 2 de 5» y, si avanza solo, botón de pausa (lo veremos en la lección sobre movimiento y tiempo).

Resumen

• Un enlace lleva a otro sitio y un botón hace algo en la página; la naturaleza se anota aunque el aspecto sea otro.
• Prefiere controles nativos personalizados; si inventas uno, especifica su patrón APG (se abre en una ventana nueva) y sus teclas.
• Diseña todos los estados (foco, seleccionado, expandido, deshabilitado, error…) sin depender del color y con contraste de 3:1 en sus indicadores; evita deshabilitar sin explicar por qué.
• Los botones de icono necesitan un nombre literal y coherente; mejor aún, texto visible.
• 1.4.13 Contenido con hover o foco (AA): descartable, sobrevolable y persistente; la información esencial nunca solo en un tooltip.