Semántica HTML: botón que actúa como ancla
Me interesan principalmente los a11yaspectos
Entonces, como ya sabrá, a veces puede desear tener un botón que actúe como un ancla.
Estas son 4 formas (se me ocurren) de abordar este problema:
1. Botón dentro de un elemento de ancla
<a href="//redirection"><button>Button</button></a>
2. Elemento de botón de anclaje interior
<button><a href="//redirection">Button</a></button>
<!-- Also should it be a href or button onclick (?) -->
3. Ancla con el estilo de un botón (sin un elemento de botón)
<a class="buttonLike" href="//redirection">Button</a>
4. Botón que actúa como redirección (sin un elemento de anclaje):
const button = document.getElementById('button')
button.addEventListener('click', () => {
window.location.href = "//redirection"
})
<button id="button">Button</button>
He tratado de encontrar una respuesta a esto yo mismo. Lo más cercano que pude encontrar fue este extracto:
De acuerdo con la especificación de anclaje MDN , que establece lo siguiente:
Los elementos de anclaje a menudo se abusan como botones falsos al establecer su href en
#ojavascript:void(0)para evitar que la página se actualice y luego escuchar sus eventos de clic.Estos valores href falsos causan un comportamiento inesperado al copiar / arrastrar enlaces, abrir enlaces en una nueva pestaña / ventana, marcar como favoritos o cuando JavaScript se está cargando, errores o está deshabilitado. También transmiten semántica incorrecta a tecnologías de asistencia, como lectores de pantalla.
Utilice un
<button>en su lugar. En general, solo debe usar un hipervínculo para navegar a una URL real.
Desafortunadamente, esto no me ayuda mucho. Básicamente, todo lo que dice es que no debe usar el tercer enfoque (ancla con estilo de botón) si no tiene la intención de proporcionar un enlace real a él, que no es de lo que se trata esta pregunta.
¿Hay alguna WCAG oficial sobre este tema que no pude encontrar o?
Respuestas
La opción 1 no es HTML válido.
La opción 2 no es HTML válido.
La opción 3 es la correcta aquí.
La opción 4 es semánticamente incorrecta.
La semántica es uno de los aspectos más importantes de la accesibilidad, si no el más importante.
Hay dos cosas en juego que dictan la opción 3.
La primera es que un ancla debe usarse solo para saltar a secciones y navegar entre páginas.
La segunda es que un botón debe realizar acciones en la misma página .
Ahora, si desea diseñar un enlace de llamada a la acción para que se vea como un botón, está bien, pero asegúrese de usar la semántica correcta, pero asegúrese de que la llamada a la acción lleve a una nueva página o no sea semánticamente correcta.
Y aunque está jurando en StackOverflow mencionar SEO, un hipervínculo en lugar de una redirección de JavaScript será mucho mejor.
La primera y segunda reglas de ARIA dicen:
- Primera regla : si puede utilizar un elemento HTML nativo, [...] hágalo
- Segunda regla : No cambie la semántica nativa, a menos que realmente sea necesario.
Los elementos interactivos como un botón y no pueden contener otros elementos interactivos:
El elemento a puede estar envuelto alrededor de párrafos completos, listas, tablas, etc., incluso secciones enteras, siempre que no haya contenido interactivo dentro (por ejemplo, botones u otros enlaces).
Entonces, como lo que desea hacer es vincular a una página, su tercera solución es obviamente la única correcta.
Creo que podría haber confundido la etapa "falsa" que se refiere a su cuarto ejemplo.
Desde mi pequeña experiencia con Accesibilidad y semántica, no existe una "talla única". Realmente depende de tus prioridades y de la experiencia de usuario que busques.
A <button>obtiene todas las ventajas de accesibilidad del navegador automáticamente: si se selecciona o presiona con las teclas de tabulación o barra espaciadora / enter.
Un <a>elemento es un enlace, los enlaces están destinados a utilizarse como enlaces o anclas dentro de una página.
Los anclajes no son tan importantes en comparación con un botón dentro de una página. Desde el punto de vista de la experiencia del usuario; Las personas utilizan un botón para interactuar con una interfaz de usuario, ya sea para confirmar o hacer que la interfaz de usuario haga algo. Presionar un botón proporciona una retroalimentación diferente en comparación con un enlace. Los enlaces de anclaje, por otro lado, ayudan al usuario a encontrar contenido dentro de una página.
Nuevamente, realmente depende de lo que intente hacer:
- ¿Es esta una página de términos o un artículo? Luego, enumere sus enlaces de anclaje sin ningún estilo similar a un botón
- ¿Se trata de un enlace que debe verse como un botón para que los usuarios encuentren más fácil de detectar o interactuar? Luego, modifíquelo como un botón sin que sea realmente un
<button>.