Accesibilidad y Diseño Responsivo (Accessibility & Responsive)

♿ Accesibilidad (Accessibility)

La accesibilidad forma parte del criterio de aceptación (Definition of Done) de cada vista y componente, asegurando que la herramienta sea usable por cualquier dueño de vehículo en cualquier entorno operativo.

Técnicas utilizadas en DiagAuto

• HTML Semántico: Uso estricto de etiquetas header, nav, main, section y footer para estructurar el cuerpo de las páginas.
• Elementos interactivos reales: Utilización de botones nativos para disparar acciones y directivas routerLink de Angular para la navegación del menú.
• Feedback en tiempo real: Los estados de carga y listas vacías de la agenda implementan role="status".
• Notificación de errores: Las alertas mecánicas críticas y fallos del servidor se anuncian de forma inmediata mediante role="alert".
• Contenedores activos: Las secciones de la agenda que están actualizando los datos de los coches se marcan dinámicamente con aria-busy.
• Formularios accesibles: Cada campo de registro o inserción de vehículo cuenta con su respectiva etiqueta label vinculada.
• Validación robusta: Los campos inválidos reciben aria-invalid="true" y se enlazan a sus textos de error mediante aria-describedby.
• Foco inteligente: Al enviar un formulario con errores, el foco de la pantalla se desplaza automáticamente hacia el primer campo inválido.
• Foco en dispositivos móviles: Se implementa lógica para mantener el campo de texto activo visible en pantalla cuando se despliega el teclado virtual.
• Diálogos y Modales: El modal rápido para alternar o solucionar averías utiliza aria-modal="true" y está etiquetado mediante aria-labelledby.
• Filtros y Conmutadores: Los botones tipo píldora de la agenda (Todos / Averiados) exponen su estado de activación a los lectores de pantalla usando aria-pressed.
• Botones con iconos puros: Los botones de acción rápida basados solo en iconos disponen de un atributo aria-label descriptivo.
• Iconos decorativos: Los símbolos visuales del motor o advertencias que acompañan al texto se ocultan de los lectores mediante aria-hidden="true".
• Estados deshabilitados nativos: El botón de añadir vehículo se bloquea mediante el atributo HTML disabled real al alcanzar el límite Freemium.
• Contraste de color: Las combinaciones de colores de la paleta técnica siguen estrictamente los estándares de contraste WCAG AA.
• Significado polimórfico: El estado de avería de un coche nunca se comunica únicamente a través del color (rojo/verde); se acompaña siempre de texto explícito e iconos alternativos.

📱 Diseño Responsivo (Responsive Design)

La interfaz de DiagAuto está construida bajo la filosofía Mobile-First utilizando Flexbox y CSS Grid a través de las clases globales integradas en Tailwind CSS 4. Esto garantiza que el dueño pueda gestionar y revisar sus coches cómodamente desde su teléfono móvil a pie de calle o en el taller.

Puntos de interrupción aplicados (Breakpoints)

Breakpoints	Ancho de pantalla	Cambios y Adaptaciones en DiagAuto
Móvil (base)	< 640px	Columna única en la agenda, espaciados compactos y menú de navegación colapsado.
Pequeño (sm)	≥ 640px	Márgenes internos más amplios; la cuadrícula de la agenda (agenda-grid) se divide en 2 columnas.
Tableta (md)	< 1024px	Reducción de la escala tipográfica técnica de los encabezados de la página (h1 a 28px, h2 a 22px).
Escritorio (lg)	≥ 1024px	Encabezados a tamaño completo, visualización de la agenda en 3 columnas y ancho máximo del contenedor limitado a 1200px.
Escritorio Grande (xl)	≥ 1280px	Se despliega el menú de navegación completo en la cabecera; por debajo de este ancho se oculta tras el botón de menú móvil.

• Ancho mínimo soportado: 320px (Pantallas de smartphones compactos).
• Enfoque prioritario: El cuerpo principal de la agenda de vehículos está optimizado para permitir interacciones completas mediante pulsaciones con una sola mano.