El antipatrón del ancla sin href

Un anti patrón habitual es un ancla sin href al que se añade un controlador de clic para que actúe como un botón. Parece correcto, pero provoca problemas.

Un ancla solo cuenta como enlace real cuando tiene un href. Sin él, el navegador no lo trata como un elemento interactivo.

Un ancla sin href no puede recibir el foco, por lo que los usuarios que recorren la página con el teclado lo omiten y nunca pueden acceder a él.

Aunque se fuerce el foco sobre él, un enlace falso ignora Enter y la barra espaciadora de forma predeterminada, por lo que los usuarios del teclado siguen sin poder activarlo.

Sin un href, un lector de pantalla podría no anunciar el ancla como enlace, por lo que los usuarios nunca sabrían que pueden utilizarlo.

Algunas personas lo solucionan con un href que solo contiene una almohadilla. Eso permite recibir el foco, pero también lleva la página al principio, lo que resulta desconcertante.

Si el control realiza una acción, use un botón real. Obtendrá el foco, la compatibilidad con el teclado y el rol correcto automáticamente.

Si el control realmente permite navegar, conserve el ancla, pero asígnele un href real que apunte al destino.

Los desarrolladores suelen elegir un ancla por su estilo subrayado. Pero puede aplicar estilos a un botón sin renunciar a la accesibilidad.

Un ancla sin href incluso pierde de forma predeterminada el cursor de puntero, lo que indica a los usuarios videntes que realmente no se puede hacer clic ahí.

No simule la interactividad. Elija un botón real para las acciones o un ancla con href para la navegación, y evite las soluciones alternativas.

Un ancla sin href es un enlace falso: no puede recibir el foco y no funciona con el teclado. Use un botón para las acciones y un href real para la navegación. ✅