` ARIA se usa para **casos complejos** o para enriquecer dinámicamente la interfaz. ## Roles, estados y propiedades ARIA: guía práctica A continuación, las piezas de ARIA que más impacto tienen en accesibilidad y en “legibilidad” para IA. ### 1. Roles ARIA (atributo role) – Roles landmark (estructura global) Ayudan a dividir la página en regiones lógicas: | Rol | Significado | Equivalente HTML | | --- | ----------- | ---------------- | | banner | Cabecera del sitio | | | navigation | Navegación | | | main | Contenido principal | | | complementary | Contenido secundario | | | contentinfo | Pie de página | | > Úsalos solo cuando *no* exista el elemento HTML nativo adecuado. ### Roles de widgets (interacción) Para componentes creados con HTML genérico: - `button` - `menu` / `menuitem` - `tablist`, `tab`, `tabpanel` - `dialog` - `switch`, `slider` Estos roles permiten que lectores de pantalla y LLMs interpreten correctamente la función del componente. ### Roles de estructura de documento - `article` - `list` / `listitem` - `table` - `heading` Otra vez: si existe el equivalente nativo, mejor usar HTML. ### Roles especiales - `presentation` / `none`: indica elemento decorativo sin rol. - Útil para ignorar iconos o contenedores innecesarios. ## 2. Propiedades ARIA esenciales ### aria-label Etiqueta accesible cuando el elemento no tiene texto claro. `✕` ### aria-labelledby Apunta a un ID que contiene el texto correcto. `Últimas Noticias ...` ### aria-describedby Añade una descripción extendida. ` Debe tener al menos 8 caracteres.` ## 3. Estados dinámicos (aria-* booleanos) - `aria-expanded="true/false"` - `aria-selected="true/false"` - `aria-checked="true/false/mixed"` - `aria-disabled="true/false"` Estos deben actualizarse con JavaScript en tiempo real.**Si no están sincronizados, generan confusión.** ## 4. Propiedades de relación - `aria-controls="id"` → indica qué elemento controla otro. - `aria-haspopup="true"` → un botón abre un menú o popup. - `aria-live="polite/assertive"` → regiones que anuncian cambios automáticos. ### Ejemplo completo: acordeón accesible ` ¿Qué es WAI-ARIA? WAI-ARIA es un estándar del W3C para mejorar la accesibilidad en interfaces web... ` Comportamiento esperado: - El botón actualiza `aria-expanded` con JS. - El panel alterna `hidden`. - `role="region"` + `aria-labelledby` hace que lectores y LLMs entiendan la relación “pregunta → respuesta”. ## Implementación en WordPress: temas, bloques y ARIA WordPress incorpora bastante semántica por defecto, pero siempre conviene revisarla. ### 1. Estructura típica con landmarks ` ` Recomendaciones: - Usa `aria-label` si hay varias regiones de navegación. - No añadas roles redundantes si ya existen equivalentes HTML. ### 2. ARIA que WordPress añade automáticamente - `aria-current="page"` en el menú activo. - `aria-haspopup="true"` en menús con submenús. - Algunas plantillas y bloques ya incluyen landmarks correctos. **Revisa el HTML generado** antes de añadir más ARIA. ### 3. ARIA en bloques Gutenberg - Los bloques nativos suelen ser accesibles. - Si creas bloques personalizados (React), asegúrate de: Usar `button` reales. - Manejar `aria-expanded`, `aria-controls` en acordeones. - Usar `role="tablist"`, `role="tab"` y `aria-selected` en pestañas. - Añadir `aria-live` en contenido dinámico. ## ChatGPT Atlas usa ARIA para entender la página OpenAI documenta que su navegador integrado lee: - Landmarks (`main`, `nav`, `aside`…) - Roles ARIA - Atributos como `aria-label` y `aria-controls` - Estructura de encabezados - JSON-LD de `schema.org` Esto permite que: - Evite ruido (menús, barras laterales). - Identifique rápido el contenido principal. - Use tus `aria-label` para interpretar botones y formularios. - Navegue acordeones o pestañas de forma fiable. ## Semántica clara = pasajes citables por un LLM Los modelos extraen y sintetizan fragmentos “autoexplicativos”.Ejemplos: - Un párrafo de **40–60 palabras** bajo un H2 es oro puro para LLMs. - Listas claras ayudan a generar respuestas directas. - Un FAQ marcado con schema ayuda a que ChatGPT reconozca “pregunta → respuesta”. ## JSON-LD y datos estructurados Los modelos también suelen leer: `` Lo usan para construir un grafo semántico interno: - FAQPage - Article - LocalBusiness - HowTo - BreadcrumbList Combinar **HTML semántico + ARIA + Schema** es lo que maximiza la comprensión por parte de IA. ## SEO y ARIA: impacto real Google ha afirmado que **ARIA no mejora el ranking directamente**.Sin embargo, sí influye indirectamente: - Facilita el *crawling* y la extracción del contenido principal. - Mejora la experiencia de usuario (accesibilidad = usabilidad). - Ayuda a obtener rich results si complementas con schema. - Prepara tu sitio para SEO en asistentes y búsqueda por IA. Lo importante es implementar ARIA **por accesibilidad**, sabiendo que su semántica también beneficia a las IA. ## Checklist rápido: ¿tu web está “AI-ready”? ### Estructura base - Encabezados jerárquicos claros. -
,