# Issue #18 - Reporte de Implementación de Accesibilidad **Tema**: apus-theme **Estándar**: WCAG 2.1 Level AA **Fecha**: 2025-11-04 **Estado**: Implementado - Pendiente Testing --- ## Resumen Ejecutivo Se ha implementado un conjunto completo de mejoras de accesibilidad en el tema `apus-theme` para cumplir con los estándares WCAG 2.1 Level AA. Las mejoras incluyen: - ✅ Estilos de focus visibles en todos los elementos interactivos - ✅ Skip links funcionales para navegación rápida - ✅ Navegación por teclado completa en menús y componentes - ✅ Contraste de color WCAG AA (4.5:1 para texto, 3:1 para UI) - ✅ Soporte para preferencias de movimiento reducido - ✅ Soporte para modo de alto contraste - ✅ ARIA labels y roles apropiados - ✅ Touch targets mínimos de 44x44px - ✅ Screen reader utilities --- ## 1. Archivos Modificados ### 1.1 CSS de Accesibilidad **Archivo**: `assets/css/accessibility.css` **Mejoras implementadas**: #### Focus Styles - Altamente Visibles - Outline de 3px en color azul (#0066cc) con offset de 2px - Box-shadow adicional para mejor visibilidad - Focus específico para: - Links (`a:focus`) - Botones (`button:focus`) - Form inputs (todos los tipos) - Checkboxes y radio buttons - Elementos de navegación - Menu toggles #### Screen Reader Text Utilities - Clases `.screen-reader-text`, `.sr-only`, `.visually-hidden` - Ocultamiento visual manteniendo accesibilidad - Visible en focus para skip links - Implementación con clip-path y posicionamiento absoluto #### Skip to Content Link - Posicionado fuera de viewport inicialmente - Visible al recibir focus con transición suave - Enlaza directamente al `#main-content` - Estilo de alta visibilidad (fondo negro, texto blanco) #### Touch Targets (44x44px mínimo) - Botones y elementos de formulario - Links de navegación - Paginación - Checkboxes y radio buttons (con margin efectivo) - Tags y badges #### High Contrast Mode Support - Media query `@media (prefers-contrast: high)` - Bordes más gruesos en elementos interactivos - Focus aún más visible (4px outline) - Eliminación de sombras que reducen contraste #### Reduced Motion Support - Media query `@media (prefers-reduced-motion: reduce)` - Animaciones reducidas a 0.01ms - Scroll behavior automático (no smooth) - Respeta preferencias del usuario #### Color Contrast (WCAG AA) - Enlaces: #0056b3 (ratio 4.89:1 en fondo blanco) - Enlaces hover: #003d82 (ratio 7.33:1) - Texto body: #212529 (ratio alto) - Texto muted: #495057 (ratio 7.0:1) - Placeholders: #6c757d (ratio 4.54:1) - Mensajes de error: #c81e1e con fondo #fef0f0 - Mensajes de éxito: #1e7e34 con fondo #e8f5e9 - Mensajes de advertencia: #856404 con fondo #fff3cd #### Navegación por Teclado - Menús Desplegables - Submenús visibles con `:focus-within` - Estilos específicos para items con focus - Soporte para dropdowns de Bootstrap - Soporte para menús personalizados de WordPress #### ARIA Estados Visuales - `[aria-expanded]` states - `[aria-hidden="true"]` oculta elementos - `[aria-disabled="true"]` con cursor not-allowed - `[aria-current="page"]` destacado con bold y underline #### Formularios Accesibles - Labels obligatorios con asterisco visual - Estados de validación con colores WCAG AA - Mensajes de ayuda descriptivos - Focus mejorado en inputs con error #### TOC Accesibilidad - Links con focus visible y fondo destacado - Item activo con borde lateral - Toggle con iconos de estado (▼/▶) #### Paginación Accesible - Touch targets de 44x44px - Bordes y estados hover/focus visibles - Página actual destacada con fondo azul #### Breadcrumbs - Focus visible en enlaces - Página actual con `[aria-current="page"]` #### Zoom de Texto (200%) - Unidades relativas (rem, em) - Sin anchos fijos - Imágenes responsive #### Animaciones Respetuosas - Sin parpadeos infinitos - Duración limitada (0.3s) - Respeto por prefers-reduced-motion --- ### 1.2 JavaScript de Accesibilidad **Archivo**: `assets/js/accessibility.js` (NUEVO) **Funcionalidades implementadas**: #### Skip Links - Click handler para navegación suave - Focus temporal en elemento target - Scroll automático con `scrollIntoView` - Eliminación de tabindex después del blur #### Navegación por Teclado - **Bootstrap Dropdowns**: - Enter/Space para abrir - ArrowDown/ArrowUp para navegar items - Escape para cerrar - Tab para salir cerrando - **Menús Personalizados WordPress**: - ARIA attributes dinámicos (`aria-haspopup`, `aria-expanded`, `aria-hidden`) - ArrowRight/ArrowDown para abrir submenu - ArrowLeft para volver al menú padre - Escape para cerrar submenu - Navegación entre items con flechas - Cierre automático al perder focus - **Modales**: - Escape para cerrar modales y offcanvas - Soporte para Bootstrap modals #### Gestión de Focus - **Focus Visible**: Detecta navegación por teclado vs mouse - **Focus Trap**: Mantiene focus dentro de modales - **Focus Restore**: Restaura focus al cerrar modales - Eventos `show.bs.modal` y `hidden.bs.modal` #### ARIA Live Regions - Regiones live polite y assertive creadas dinámicamente - Función global `announceToScreenReader(message, priority)` - Limpieza automática después de 5 segundos - Observer para cambios de título de página - Soporte para navegación con History API #### Data Attributes - `data-announce` para anuncios personalizados - `data-announce-priority` para nivel de prioridad --- ### 1.3 Archivo de Enqueue **Archivo**: `inc/enqueue-scripts.php` **Cambios**: - Agregado enqueue de `accessibility.js` - Dependencia de Bootstrap JS - Estrategia defer para carga optimizada - Versión APUS_VERSION para cache busting --- ### 1.4 Header Template **Archivo**: `header.php` **Mejoras**: - ✅ Skip link ya implementado correctamente - ✅ Atributo `lang` en HTML (via `language_attributes()`) - ✅ `aria-label` en navbar (`"Primary Navigation"`) - ✅ `role="navigation"` en navbar - ✅ `aria-label` en hamburger toggle (`"Toggle navigation"`) - ✅ `aria-expanded` y `aria-controls` en toggle button - ✅ ID `#main-content` en elemento main --- ### 1.5 Footer Template **Archivo**: `footer.php` **Características de accesibilidad**: - ✅ `role="contentinfo"` en footer - ✅ `role="complementary"` en widget areas - ✅ `aria-label` descriptivos en widget areas - ✅ `aria-label` en navegación de footer - ✅ Estructura semántica con `