Lección 5: Accesibilidad — foco, teclado y ARIA
Estilizaste un `<div>` con `onClick` que se ve como un botón perfecto. Pero un usuario de teclado no puede alcanzarlo, y un lector de pantalla no sabe que es clicable. Esta lección te enseña a construir componentes accesibles en el sistema de diseño: controles semánticos, un anillo de foco basado en
Un botón real es como una puerta con manija — cualquiera la abre, a mano o con el teclado. Un `<div>` clicable es una pared pintada para parecer una puerta: se ve bien, pero no hay nada de dónde agarrarse.
- semantic control
- Un elemento HTML con significado incorporado — `<button>`, `<a>`, `<input>` — que viene con soporte de teclado, foco y un rol de accesibilidad gratis, sin código adicional.
- focus-visible
- Un estado que muestra un anillo de foco solo durante la navegación por teclado, no en clics del mouse. En Tailwind: `focus-visible:ring-2` — una señal clara para usuarios de teclado sin molestar a los usuarios de mouse.
- aria-label
- Un atributo que le da un nombre accesible a un elemento sin texto visible — como un botón que solo tiene ícono — para que un lector de pantalla pueda anunciar qué hace.
- keyboard operability
- La capacidad de usar cada control solo con el teclado — Tab para enfocar, Enter/Espacio para activar — un requisito básico de accesibilidad.
