Como señalamos en nuestra guía completa, puede poner un <a href=""> enlace alrededor de cualquier fragmento de HTML que desee. Llamemos a eso un “enlace de bloque”. Como si quisiera vincular una “Tarjeta” completa de contenido porque es un gran objetivo en el que se puede hacer clic.
<a href="https://css-tricks.com/article/"> <!-- display: block; -->
<div class="card">
<h2>Card</h2>
<img src="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/..." alt="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/...">
<p>Content</p>
</div>
</a>Sobre eso, Adrián Roselli:
Quizás lo peor que puede hacer por un enlace de bloque es envolver todo en el <a href>.
[…] para un usuario de lector de pantalla, la cadena completa se lee al pasar 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 conoce 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 solo el encabezado.
<div class="card">
<h2><a href="https://css-tricks.com/article/">Article</a></h2>
<img src="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/..." alt="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/...">
<p>Content</p>
</div>La extensió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%;
}Eso 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, y es selección de texto. No puede simplemente colocar el cursor en algún lugar de la tarjeta y seleccionar el texto normalmente. El clic activa el enlace, esperando a que usted mouseup mientras aún está en el enlace para activarlo. No tiene la capacidad de seleccionar partes internas del texto como probablemente esperaría. No impide la posibilidad de seleccionar el texto en absoluto, pero lo hace incómodo y molesto.
No estoy seguro de que sea fácilmente solucionable. Tal vez haya alguna solución exótica de JavaScript que pueda detectar si ha comenzado a seleccionar texto y luego no activa un clic, pero si hace clic sin arrastrar, irá al enlace. Sin embargo, algo sobre eso es un poco rojo para mí.
Actualización: Consulte la sección “El evento de clic redundante” de Heydon en su artículo de Tarjetas.
Considerándolo todo, diría que los enlaces en bloque son solo una mala idea. Pero me encantaría estar equivocado y ver una implementación realmente buena que resuelva todos estos problemas.