Curso HTML 11.6 Buenas prácticas de accesibilidad en enlaces y botones

Buenas prácticas de accesibilidad en enlaces y botones

En el desarrollo web, los enlaces y los botones son elementos clave para la navegación y la interacción. Para que cualquier usuario, incluidos aquellos con discapacidad, pueda utilizarlos sin barreras, conviene seguir una serie de buenas prácticas de accesibilidad:

1. Diferencias semánticas y uso correcto

   • Enlace (<a>): Sirve para navegar a otra página o recurso. Debe llevar siempre el atributo href. Si pretendes ejecutar una acción (abrir un modal, enviar datos), mejor usa un botón.

   • Botón (<button>): Sirve para ejecutar acciones en la propia página (enviar formularios, controlar interfaces, abrir menús). Evita usar <div> o <span> con JavaScript simulando botones.

2. Texto descriptivo y significativo

   Un enlace o botón debe permitir comprender su propósito sin leer el contexto. Evita textos genéricos como “haz clic aquí” o “leer más”.

   • Correcto: “Descargar guía de usuario”
   • Incorrecto: “Descargar” (sin contexto)

3. Atributos ARIA y labels

   Cuando el texto visible no sea suficiente (por ejemplo, un icono sin texto), usa aria-label o aria-labelledby para proporcionar un nombre accesible:

   Ejemplo: enlace con icono

   <a href='/perfil' aria-label='Ir a mi perfil'>
     <svg width='24' height='24' role='img' aria-hidden='true'>
       <!-- icono SVG -->
     </svg>
   </a>  <!-- Aunque no haya texto, screen readers leerán 'Ir a mi perfil' -->
         

4. Estados y roles

   Para botones de tipo toggle (encendido/apagado), es imprescindible reflejar el estado con aria-pressed:

   Ejemplo: botón toggle

   <button type='button'
           aria-pressed='false'
           onclick='this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')'>
     Activar notificaciones
   </button>
         

   Al pulsarlo, aria-pressed cambiará entre true y false, informando al lector de pantalla del estado.

5. Enlaces de “Saltar al contenido” y navegación rápida

   Incluye un enlace inicial para saltar menús y cabeceras. Con ello, los usuarios de teclado acceden directamente al contenido principal:

   <a href='#main-content' class='skip-link'>Saltar al contenido principal</a>
   ...
   <main id='main-content'>
     <!-- contenido relevante -->
   </main>
         

   Este enlace suele ocultarse visualmente pero estar disponible al hacer Tab.

6. Foco visible y orden lógico

   Asegúrate de que al navegar con Tab se aprecie claramente qué elemento tiene el foco. No cambies el orden del DOM para presentarlo visualmente distinto; respeta el flujo semántico.

7. Uso apropiado de atributos

   Atributo	Elemento	Función
   href	<a>	Define la ruta de navegación. Obligatorio en enlaces.
   disabled	<button>	Desactiva la interacción y comunica inaccesibilidad.
   type	<button>	Evita comportamientos por defecto no deseados (submit, button).
   role=’link’	Elementos no semánticos	Solo si no puedes usar <a>, pero conviene evitarlo.

8. Evitar prácticas perjudiciales

   • No uses <div> o <span> con onclick en lugar de botones.
   • No dejes enlaces sin href o con href='#' sin prevenir el comportamiento por defecto.
   • No ocultes controles mediante display:none o visibility:hidden si deben ser accesibles.

   Ejemplo incorrecto: div actuando como botón

   <div onclick='enviarFormulario()' role='button'>
     Enviar
   </div>  <!-- Peor: carece de focus, no reacciona a Enter/Espacio -->
         

   En su lugar, usa:

   <button type='button' onclick='enviarFormulario()'>
     Enviar
   </button>
         

Siguiendo estas pautas, garantizas que todos los usuarios, independientemente de sus capacidades, puedan navegar e interactuar con tu sitio o aplicación de manera efectiva y sin barreras.