Accesibilidad No Es un Feature — Es la Base
El 15% de la población mundial vive con algún tipo de discapacidad. Eso representa más de mil millones de personas que interactúan con productos digitales usando tecnologías asistivas, configuraciones personalizadas o estrategias de navegación alternativas. Un sitio web que ignora la accesibilidad no es "incompleto" — es excluyente.
Mi enfoque hacia la accesibilidad se integra desde la primera línea de código, no como una auditoría post-desarrollo. El HTML semántico es el primer pilar: utilizar , , , y correctamente permite que los lectores de pantalla construyan un mapa mental de la página sin necesidad de atributos ARIA adicionales. El mejor ARIA es el que no se necesita.
La navegación por teclado merece atención explícita. Todo elemento interactivo debe ser alcanzable con Tab, activable con Enter o Space, y debe mostrar un indicador de foco visible. Los estilos de foco personalizados reemplazan el outline predeterminado del navegador con indicadores que respetan la identidad visual del producto sin sacrificar la funcionalidad. Un borde cyan de 2px con offset proporciona visibilidad suficiente en fondos oscuros.
/* Foco accesible con identidad visual */
:focus-visible {
outline: 2px solid var(--color-cyan);
outline-offset: 2px;
}
/* Elementos interactivos: siempre accesibles */
<button aria-label="Volver arriba"> /* No solo un ícono */
<img alt="Dashboard de SacsCloud"> /* Descriptivo, no decorativo */
<a href="/work">Proyectos</a> /* Texto descriptivo, no "click aquí" */Las animaciones también tienen implicaciones de accesibilidad. La media query prefers-reduced-motion permite detectar si el usuario ha configurado su sistema para minimizar el movimiento. Respetar esta preferencia no significa eliminar todas las animaciones — significa reducirlas a transiciones funcionales que comunican cambio de estado sin provocar malestar.
La accesibilidad no ralentiza el desarrollo — lo disciplina. Un componente construido con accesibilidad desde su concepción es más robusto, más semántico y más mantenible que uno al que se le "añade" accesibilidad después. Las restricciones correctas producen mejor código. // A11Y_AUDIT: WCAG_2.1_AA_COMPLIANT