Los enlaces de bloqueo son una molestia (y tal vez simplemente una mala idea)

Como señalamos en nuestra guía completa , puede colocar un a href=""enlace alrededor de cualquier fragmento de HTML que desee. Llamémoslo “enlace de bloque”. Como si quisiera vincular una “Tarjeta” completa de contenido porque constituye un gran objetivo en el que se puede hacer clic.

a href="/article/" !-- display: block; --  div    h2Card/h2    img src="..." alt="..."    pContent/p  /div/a

Sobre esto, Adrián Roselli :

Quizás lo peor que puedes hacer con un enlace de bloqueo es envolver todo en el archivo a href.

[…] para un usuario de lector de pantalla, la cadena completa se lee al desplazarse por los controles. En el siguiente ejemplo, el primer enlace contiene el encabezado, la imagen (sin declararlo como imagen) y el bloque de texto, y tarda unos 25 segundos en leerse antes de anunciarlo como enlace. Al tabular, no siempre se sabe el tipo de control hasta que se completa el nombre accesible.

(El ejemplo es una tarjeta de aspecto bastante normal con un encabezado, una imagen y un párrafo).

Así que no hagas eso.

La alternativa es dejar que el enlace sea “normal”, como sólo el encabezado.

div  h2a href="/article/"Article/a/h2  img src="..." alt="..."  pContent/p/div

La ampliación del “área en la que se puede hacer clic” del enlace para cubrir toda el área.

.card {  position: relative;}.card h2 a::after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

Esto funciona para el área en la que se puede hacer clic y resuelve la penalización para los usuarios de lectores de pantalla.

Pero hay otro problema que perjudica a ambas soluciones: la selección de texto . No puedes simplemente colocar el cursor en algún lugar de la tarjeta y seleccionar texto normalmente. El clic activa el enlace, esperando que usted, mouseupmientras aún está en el enlace, lo active. No tienes la posibilidad de seleccionar partes internas del texto como probablemente esperarías. No impide en absoluto la posibilidad de seleccionar el texto, pero lo hace incómodo y molesto.

No estoy seguro de que eso sea fácilmente solucionable. Quizás exista alguna solución JavaScript exótica que pueda detectar si comenzó a seleccionar texto y luego no activa un clic, pero si hace clic sin arrastrar, irá al enlace. Sin embargo, hay algo en eso que me llama un poco la atención.

Actualización: consulte la sección “El evento de clic redundante” de Heydon en su artículo Tarjetas.

Considerándolo todo, yo diría que bloquear enlaces es simplemente una mala idea. Pero me encantaría demostrar que estoy equivocado y ver una implementación realmente buena que resuelva todos estos problemas.