Svelte 53: Fundamentos de Accesibilidad
easy⏱ 5 mincoursesvelte
role, aria-* y tabindex en controles personalizados
Un <div> no es un <button> — no recibe foco de teclado ni un rol accesible por defecto. Para convertir uno en un control personalizado real, agrega role="switch" (o button/checkbox), aria-checked (o aria-pressed) que refleje el estado actual, tabindex="0" para que Tab pueda alcanzarlo, y un manejador onkeydown para Enter y Espacio, ya que solo <button> recibe eso gratis.
<div
role="switch"
aria-checked={on}
tabindex="0"
onclick={toggle}
onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle();
}
}}
>
{on ? 'On' : 'Off'}
</div>
aria-live anuncia sin robar el foco
Un elemento con aria-live="polite" es vigilado por los lectores de pantalla: cada vez que cambia su contenido de texto, se anuncia — sin mover el foco de teclado de la persona usuaria de lo que estaba haciendo. Eso es exactamente lo que quieres para mensajes toast, contadores y actualizaciones de estado.
Prefiere el elemento real cuando exista
Esta lección construye un switch personalizado para enseñar la mecánica interna — pero en código real, recurre primero a un <button> nativo o a un <input type="checkbox">. Reciben foco, manejo de teclado y semántica correcta de forma gratuita, con mucho menos código y menos formas de equivocarse.