diff --git a/wp-content/themes/apus-theme/ISSUE-17-COMPLETION-REPORT.md b/wp-content/themes/apus-theme/ISSUE-17-COMPLETION-REPORT.md new file mode 100644 index 00000000..83e944b8 --- /dev/null +++ b/wp-content/themes/apus-theme/ISSUE-17-COMPLETION-REPORT.md @@ -0,0 +1,495 @@ +# Reporte de Completado - Issue #17 + +**Título**: Imágenes responsive con srcset/sizes y soporte WebP/AVIF +**Fecha**: 2025-11-04 +**Estado**: ✅ COMPLETADO + +--- + +## Resumen Ejecutivo + +Se implementó completamente el sistema de optimización de imágenes con soporte para formatos modernos (WebP/AVIF), srcset/sizes automáticos, lazy loading inteligente y todas las mejores prácticas para Core Web Vitals. + +--- + +## Cambios Implementados + +### 1. Soporte para Formatos Modernos (WebP/AVIF) + +#### Habilitación de AVIF +- ✅ Filtro `upload_mimes` para permitir subida de archivos AVIF +- ✅ Filtro `wp_check_filetype_and_ext` para validación de extensión AVIF +- ✅ Filtro `mime_types` para tipos MIME adicionales + +#### Habilitación de WebP +- ✅ Verificación de soporte en servidor (GD/Imagick) +- ✅ Filtro `wp_image_editors` para habilitar generación WebP +- ✅ Tipos MIME configurados correctamente + +#### Picture Element con Fallbacks +- ✅ Función `apus_get_picture_element()` implementada +- ✅ Genera `` con sources para AVIF, WebP y fallback JPEG/PNG +- ✅ Incluye srcset y sizes apropiados + +**Archivo**: `inc/image-optimization.php` (líneas 19-35, 358-401) + +--- + +### 2. Srcset y Sizes Automáticos + +#### Srcset Automático +- ✅ WordPress genera srcset automáticamente vía `wp_get_attachment_image()` +- ✅ Función helper `apus_get_responsive_image_attrs()` para obtener srcset/sizes +- ✅ Máximo width de srcset configurado a 2560px +- ✅ Función `apus_get_responsive_image()` con srcset integrado + +#### Sizes Personalizados por Contexto +- ✅ Filtro `wp_calculate_image_sizes` implementado +- ✅ Sizes específicos para cada tamaño de imagen: + - **apus-featured-large**: `(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px` + - **apus-featured-medium**: `(max-width: 768px) 100vw, (max-width: 992px) 50vw, 800px` + - **apus-thumbnail**: `(max-width: 576px) 100vw, 400px` + - **apus-hero**: `100vw` + +**Archivo**: `inc/image-optimization.php` (líneas 66-102, 113-138, 348-356, 416-443) + +--- + +### 3. Lazy Loading Inteligente + +#### Lazy Loading por Defecto +- ✅ Filtro `wp_get_attachment_image_attributes` para agregar `loading="lazy"` +- ✅ Atributo `decoding="async"` para mejor rendimiento +- ✅ Aplicado automáticamente a todas las imágenes + +#### Exclusión de LCP Images +- ✅ Featured images en posts singulares usan `loading="eager"` +- ✅ Featured images tienen `fetchpriority="high"` +- ✅ Primera imagen del contenido excluida de lazy loading +- ✅ Preload de featured images en `` para LCP + +#### Lazy Loading en Contenido +- ✅ Filtro `the_content` para agregar lazy loading a imágenes del editor +- ✅ Protección contra imágenes que ya tienen el atributo + +**Archivo**: `inc/image-optimization.php` (líneas 142-177, 232-262, 460-485) + +--- + +### 4. Tamaños de Imagen Optimizados + +#### Tamaños Personalizados Definidos +- ✅ `apus-thumbnail`: 400x300 (widgets, sidebars) +- ✅ `apus-medium`: 800x600 (archives) +- ✅ `apus-large`: 1200x900 (posts) +- ✅ `apus-featured-large`: 1200x600 (featured images en single) +- ✅ `apus-featured-medium`: 800x400 (featured images en archives) +- ✅ `apus-hero`: 1920x800 (hero sections) +- ✅ `apus-card`: 600x400 (cards) +- ✅ `apus-thumbnail-2x`: 800x600 (retina thumbnails) + +#### Limpieza de Tamaños No Utilizados +- ✅ Removido `medium_large` (768px - redundante) +- ✅ Removido `1536x1536` (2x medium_large - no necesario) +- ✅ Removido `2048x2048` (2x large - no necesario) +- ✅ Ahorro de espacio en disco al no generar tamaños innecesarios + +**Archivo**: `inc/image-optimization.php` (líneas 41-63, 403-414) + +--- + +### 5. Threshold de Escalado de Imágenes + +#### Big Image Size Threshold +- ✅ Configurado a 2560px (balance calidad/rendimiento) +- ✅ WordPress no escalará imágenes menores a 2560px +- ✅ Imágenes mayores se escalan automáticamente +- ✅ Previene uploads de imágenes excesivamente grandes + +**Archivo**: `inc/image-optimization.php` (líneas 338-347) + +--- + +### 6. Optimización de Calidad JPEG + +#### Calidad Configurada +- ✅ JPEG quality configurado a 85% +- ✅ Balance óptimo entre tamaño y calidad visual +- ✅ Aplicado a subidas nuevas y regeneración de thumbnails +- ✅ Filtros `jpeg_quality` y `wp_editor_set_quality` + +**Archivo**: `inc/image-optimization.php` (líneas 264-276) + +--- + +### 7. Preload de Imágenes Críticas (LCP) + +#### Preload Implementado +- ✅ Función `apus_preload_image()` para preload manual +- ✅ Preload automático de featured images en posts singulares +- ✅ Incluye srcset en el preload (atributo `imagesrcset`) +- ✅ Detección automática de tipo de imagen (AVIF/WebP/JPEG/PNG) +- ✅ Inyectado en `` con prioridad alta + +**Archivo**: `inc/image-optimization.php` (líneas 179-248) + +--- + +### 8. Dimensiones Explícitas (CLS Prevention) + +#### Width y Height Automáticos +- ✅ WordPress añade automáticamente `width` y `height` +- ✅ Previene Cumulative Layout Shift (CLS) +- ✅ Mejora score de Core Web Vitals +- ✅ CSS `height: auto` para mantener responsive + +**Archivo**: Manejado nativamente por WordPress + CSS del tema + +--- + +### 9. Integración con Featured Images + +#### Featured Image Helper Actualizado +- ✅ `featured-image.php` ya usa `get_the_post_thumbnail()` +- ✅ Todas las optimizaciones se aplican automáticamente vía filtros +- ✅ Funciones helper retornan imágenes optimizadas: + - `apus_get_featured_image()` + - `apus_get_post_thumbnail()` + - `apus_get_post_thumbnail_small()` +- ✅ Lazy loading aplicado automáticamente +- ✅ Srcset y sizes incluidos en output + +**Archivo**: `inc/featured-image.php` (todo el archivo se beneficia) + +--- + +## Funciones Agregadas/Actualizadas + +### Funciones Nuevas + +1. **`apus_big_image_size_threshold($threshold)`** + - Configura threshold de escala a 2560px + +2. **`apus_enable_webp_generation($editors)`** + - Verifica y habilita soporte WebP en servidor + +3. **`apus_additional_mime_types($mimes)`** + - Agrega tipos MIME para WebP y AVIF + +4. **`apus_remove_unused_image_sizes($sizes)`** + - Remueve tamaños de imagen no utilizados + +5. **`apus_responsive_image_sizes_attr($sizes, $size, ...)`** + - Genera sizes attribute personalizado por contexto + +6. **`apus_maybe_regenerate_image_metadata($metadata, $attachment_id)`** + - Asegura generación de metadata para formatos modernos + +7. **`apus_skip_lazy_loading_first_image($content)`** + - Excluye primera imagen del contenido de lazy loading (LCP) + +8. **`apus_enable_image_subsizes($metadata, $attachment_id, $context)`** + - Habilita generación de subsizes en formatos modernos + +### Funciones Existentes (Ya Implementadas) + +- `apus_enable_avif_support()` +- `apus_allow_avif_extension()` +- `apus_setup_additional_image_sizes()` +- `apus_custom_image_sizes()` +- `apus_get_responsive_image_attrs()` +- `apus_get_responsive_image()` +- `apus_add_lazy_loading_to_images()` +- `apus_add_lazy_loading_to_content()` +- `apus_preload_image()` +- `apus_preload_featured_image()` +- `apus_add_fetchpriority_to_featured_image()` +- `apus_optimize_image_quality()` +- `apus_get_picture_element()` +- `apus_max_srcset_image_width()` + +--- + +## Filtros de WordPress Utilizados + +### Filtros Implementados + +1. **`upload_mimes`** - Permitir subida de AVIF +2. **`wp_check_filetype_and_ext`** - Validar extensión AVIF +3. **`mime_types`** - Tipos MIME adicionales +4. **`big_image_size_threshold`** - Threshold de escalado 2560px +5. **`max_srcset_image_width`** - Máximo width en srcset +6. **`wp_image_editors`** - Habilitar generación WebP +7. **`intermediate_image_sizes_advanced`** - Remover tamaños no usados +8. **`wp_calculate_image_sizes`** - Sizes personalizados por contexto +9. **`wp_generate_attachment_metadata`** - Metadata de imágenes (2 hooks) +10. **`wp_get_attachment_image_attributes`** - Lazy loading y fetchpriority (2 hooks) +11. **`the_content`** - Lazy loading en contenido y exclusión primera imagen +12. **`jpeg_quality`** - Calidad JPEG 85% +13. **`wp_editor_set_quality`** - Calidad editor 85% +14. **`wp_head`** - Preload de featured images + +--- + +## Compatibilidad + +### WordPress +- ✅ WordPress 5.8+ (soporte WebP nativo) +- ✅ WordPress 6.5+ (soporte AVIF nativo) +- ✅ Funciona con versiones anteriores (features se degradan gracefully) + +### Servidor +- ✅ PHP 7.4+ recomendado +- ✅ GD con soporte WebP O Imagick con soporte WebP +- ✅ Detección automática de capacidades del servidor +- ✅ Fallback graceful si WebP/AVIF no disponibles + +### Navegadores +- ✅ Navegadores modernos reciben WebP/AVIF +- ✅ Navegadores antiguos reciben JPEG/PNG (fallback automático) +- ✅ Picture element para compatibilidad máxima +- ✅ Srcset funciona en todos los navegadores modernos (95%+ de usuarios) + +--- + +## Testing Recomendado + +### Testing Funcional + +1. **Subir Imagen Nueva** + - [ ] Subir imagen JPEG + - [ ] Verificar que se generan tamaños custom + - [ ] Verificar que se genera WebP (si servidor soporta) + - [ ] Verificar metadata en Media Library + +2. **Output HTML** + - [ ] Verificar presencia de `srcset` + - [ ] Verificar presencia de `sizes` + - [ ] Verificar `loading="lazy"` en imágenes normales + - [ ] Verificar `loading="eager"` en featured image de single post + - [ ] Verificar `fetchpriority="high"` en featured image + - [ ] Verificar `width` y `height` attributes + +3. **Preload en Head** + - [ ] Ver source de single post + - [ ] Verificar `` en `` + - [ ] Verificar que incluye `imagesrcset` + +4. **Picture Element** (si se usa) + - [ ] Llamar `apus_get_picture_element()` + - [ ] Verificar sources para AVIF, WebP + - [ ] Verificar fallback img + +### Testing de Rendimiento + +1. **PageSpeed Insights** + - [ ] Verificar "Serve images in next-gen formats" - PASS + - [ ] Verificar "Properly size images" - PASS + - [ ] Verificar "Defer offscreen images" - PASS + - [ ] Verificar "Image elements have explicit width and height" - PASS + +2. **Lighthouse** + - [ ] Performance score > 90 + - [ ] LCP < 2.5s (verde) + - [ ] CLS < 0.1 (verde) + - [ ] Verificar que featured image es LCP element + +3. **GTmetrix** + - [ ] Verificar WebP serving + - [ ] Verificar lazy loading + - [ ] Verificar image optimization score + +4. **WebPageTest** + - [ ] Verificar preload en waterfall + - [ ] Verificar que lazy images no cargan initially + +### Testing Cross-Browser + +- [ ] Chrome (WebP, AVIF) +- [ ] Firefox (WebP, AVIF) +- [ ] Safari (WebP desde 14+) +- [ ] Edge (WebP, AVIF) +- [ ] Navegador antiguo (verificar fallback a JPEG/PNG) + +### Testing de Dispositivos + +- [ ] Desktop +- [ ] Tablet +- [ ] Mobile +- [ ] Verificar que se cargan tamaños apropiados por viewport + +--- + +## Beneficios Esperados + +### Rendimiento +- **Reducción de peso**: 30-50% con WebP vs JPEG +- **Reducción de peso**: 50-70% con AVIF vs JPEG (si disponible) +- **Menor ancho de banda**: srcset sirve tamaño correcto por dispositivo +- **Carga más rápida**: lazy loading reduce imágenes en initial load +- **Mejor LCP**: preload + fetchpriority en imagen crítica + +### Core Web Vitals +- **LCP mejorado**: Preload de imagen destacada +- **CLS mejorado**: Width/height explícitos previenen shifts +- **FID no afectado**: Lazy loading usa API nativa (no JS) + +### SEO +- **Mejor ranking**: Core Web Vitals son factor de ranking +- **Mejor experiencia**: Páginas cargan más rápido +- **Imágenes optimizadas**: Factor positivo para SEO + +### Experiencia de Usuario +- **Carga instantánea percibida**: Above-fold carga rápido +- **Ahorro de datos**: Especialmente en mobile +- **Sin layout shifts**: Experiencia más fluida + +--- + +## Archivos Modificados + +### Archivos Actualizados + +1. **`wp-content/themes/apus-theme/inc/image-optimization.php`** + - Agregadas 8 funciones nuevas + - Activado threshold de 2560px + - +152 líneas de código + - Total: 500 líneas + +### Archivos Sin Cambios (Pero se Benefician) + +1. **`wp-content/themes/apus-theme/inc/featured-image.php`** + - Ya usa `get_the_post_thumbnail()` correctamente + - Todas las optimizaciones se aplican automáticamente vía filtros + +2. **`wp-content/themes/apus-theme/functions.php`** + - Ya incluye `image-optimization.php` (líneas 194-196) + - No requiere cambios adicionales + +--- + +## Configuración Requerida (Opcional) + +### En el Servidor + +Para habilitar WebP/AVIF, el servidor debe tener: + +```bash +# Verificar soporte WebP en PHP +php -r "var_dump(function_exists('imagewebp'));" + +# O con Imagick +php -r "\$im = new Imagick(); print_r(\$im->queryFormats('WEBP'));" +``` + +### En WordPress (Automático) + +Todo está configurado automáticamente. No requiere configuración manual. + +### Regenerar Imágenes Existentes (Opcional) + +Para aplicar WebP a imágenes ya subidas: + +1. Instalar plugin "Regenerate Thumbnails" +2. Ir a Tools > Regenerate Thumbnails +3. Seleccionar "Regenerate All Thumbnails" +4. WordPress generará WebP automáticamente (si servidor soporta) + +--- + +## Limitaciones Conocidas + +### Server-Side + +1. **WebP/AVIF requiere soporte en servidor** + - Si GD/Imagick no soportan WebP, no se generará + - Fallback: se sirven imágenes originales (JPEG/PNG) + - Solución: Actualizar GD/Imagick en servidor + +2. **Espacio en disco** + - Cada imagen genera múltiples tamaños (8 tamaños custom) + - WebP duplica aproximadamente (1 JPEG + 1 WebP por tamaño) + - Mitigación: Removimos 3 tamaños no usados de WordPress + +### Client-Side + +1. **Safari < 14 no soporta WebP** + - Safari 14+ (2020) soporta WebP + - Fallback automático a JPEG/PNG + - 95%+ de usuarios tienen soporte WebP + +2. **AVIF tiene soporte limitado** + - Chrome 85+, Firefox 93+, Safari 16+ + - Fallback automático a WebP o JPEG/PNG + - AVIF es futuro-proofing + +--- + +## Próximos Pasos Sugeridos + +### Fase Futura (No en Este Issue) + +1. **CDN Integration** + - Considerar CDN para servir imágenes + - CDN puede hacer transformaciones on-the-fly + - Ejemplo: Cloudflare, BunnyCDN, Cloudinary + +2. **Image Optimization Service** + - Plugin: ShortPixel, Imagify, Smush + - Compresión adicional sin pérdida de calidad + - Optimización automática en upload + +3. **Blur-up Placeholder** + - Placeholder borroso mientras carga imagen + - Mejora percepción de velocidad + - Requiere JavaScript adicional + +4. **Responsive Background Images** + - Soporte para imágenes de background CSS + - Picture polyfill para backgrounds + - CSS custom properties con media queries + +--- + +## Documentación de Referencia + +### WordPress Codex +- [Responsive Images](https://developer.wordpress.org/apis/responsive-images/) +- [Image Sizes](https://developer.wordpress.org/reference/functions/add_image_size/) +- [Lazy Loading](https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/) + +### Web Standards +- [MDN: Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- [MDN: Picture Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) +- [MDN: Loading Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) + +### Performance +- [web.dev: Optimize Images](https://web.dev/fast/#optimize-your-images) +- [web.dev: Serve Modern Formats](https://web.dev/serve-images-webp/) +- [web.dev: LCP Optimization](https://web.dev/optimize-lcp/) + +--- + +## Conclusión + +✅ **Issue #17 está COMPLETADO** + +Se implementaron todas las especificaciones del issue: +- ✅ Soporte WebP y AVIF con fallbacks +- ✅ Srcset y sizes automáticos +- ✅ Lazy loading inteligente (excluye LCP) +- ✅ Preload de imágenes críticas +- ✅ Threshold de escalado configurado +- ✅ Optimización de calidad JPEG +- ✅ Tamaños de imagen optimizados +- ✅ Picture element con fallbacks +- ✅ Dimensiones explícitas (CLS prevention) +- ✅ Integración completa con featured images + +El tema está ahora completamente optimizado para imágenes según las mejores prácticas de 2025. + +--- + +**Desarrollado por**: Claude Code +**Fecha de completado**: 2025-11-04 +**Issue**: #17 - Imágenes responsive con srcset/sizes y soporte WebP/AVIF diff --git a/wp-content/themes/apus-theme/ISSUE-18-ACCESSIBILITY-REPORT.md b/wp-content/themes/apus-theme/ISSUE-18-ACCESSIBILITY-REPORT.md new file mode 100644 index 00000000..f387dcff --- /dev/null +++ b/wp-content/themes/apus-theme/ISSUE-18-ACCESSIBILITY-REPORT.md @@ -0,0 +1,595 @@ +# 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 `