También disponible en Inglés
La afirmación a prueba
El ensayo del jueves sostuvo que ARIA es una intervención semántica: debe suministrar lo que el documento nativo no expresa por sí mismo, no reemplazar lo que sí expresa. La afirmación se probó contra dos errores enviados a producción en el mismo control de navegación: un aria-label que reemplazó un nombre accesible correcto, y un <div role="button"> sustituyendo a un control que ya existía como <button>.
Esta Nota desarmó ambos, una pieza a la vez, y confirmó qué queda una vez que todo lo innecesario se retira.
Reducción uno: El botón
Tal como se envió a producción:
<button aria-label="Dismiss navigation panel">
Close menu
</button>
Antes de tocar nada, recorre el cálculo del nombre accesible de la forma en que el navegador realmente lo ejecuta. aria-labelledby: no presente. aria-label: presente, valor "Dismiss navigation panel". El cálculo se detiene allí. Nunca llega al contenido del propio botón, porque nada le exige seguir buscando una vez que un paso anterior ya produjo una respuesta.
Quita el único atributo:
<button>
Close menu
</button>
Recorre el cálculo de nuevo. aria-labelledby: no presente. aria-label: no presente. Contenido: "Close menu", y <button> es uno de los roles de los que el cálculo lee un nombre directamente. Ese es el nombre accesible ahora. Siempre pudo haberlo sido. No se agregó nada para producirlo. El único cambio fue eliminar lo que lo estaba superando en prioridad.
Reducción dos: El Div
El segundo control de la misma revisión, completo:
<div role="button" tabindex="0" class="menu-close">
Close menu
</div>
const closeControl = document.querySelector('.menu-close');
closeControl.addEventListener('click', closeMenu);
closeControl.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
closeMenu();
}
});
Quita primero el handler de keydown, deja todo lo demás:
<div role="button" tabindex="0" class="menu-close">
Close menu
</div>
document.querySelector('.menu-close').addEventListener('click', closeMenu);
El div todavía se anuncia como un botón. Todavía es alcanzable mediante Tab. El clic todavía cierra el menú. Presiona Enter o Espacio en su lugar, y no sucede absolutamente nada: role="button" nunca vino con la activación por teclado que un botón real proporciona de forma automática. Ese siempre fue el trabajo del handler de keydown, y es la única pieza que acaba de salir.
Quita el resto y cambia el elemento:
<button class="menu-close">
Close menu
</button>
document.querySelector('.menu-close').addEventListener('click', closeMenu);
Un listener, sin cambios. Sin atributo role, sin tabindex, sin handler de keydown. Tab todavía lo alcanza. El clic todavía cierra el menú. Enter y Espacio también lo cierran, porque un botón nativo dispara el mismo evento click en respuesta a los tres, sin que se le ordene hacerlo. El div necesitaba dos asignaciones de eventos separadas para cubrir lo que la etiqueta ahora cubre con una.
Si la afirmación se mantuvo
Ambas reducciones llegan a la respuesta que predice la tesis del ensayo: un documento cuyas semánticas tienen la cantidad justa, ni más ni menos. El botón nunca necesitó una etiqueta: el contenido ya estaba haciendo ese trabajo, y lo único que se interponía en su camino era un atributo agregado para satisfacer una lista de verificación. El div nunca necesitó ser un div. Llevaba un role, un tabindex y un handler de keydown para simular un comportamiento que <button> siempre iba a proporcionar por sí solo, por una asignación de evento menos de las que el div jamás logró manejar.
Ninguna de las dos correcciones agregó nada. Ambas restaron exactamente la pieza que sustituía a algo que la plataforma ya tenía, y el resultado en cada caso no fue una versión más pequeña de lo mismo. Fue la cosa funcionando correctamente por primera vez.
Top comments (0)