Implementar atributos ARIA en bloques y menús

Contents

Implementar atributos ARIA en bloques y menús

La accesibilidad web se ha convertido en un pilar fundamental para ofrecer experiencias inclusivas. Una de las herramientas más potentes para enriquecer semántica y relaciones entre componentes es ARIA (Accessible Rich Internet Applications). En este artículo abordaremos en profundidad cómo aplicar atributos ARIA en bloques y menús, con ejemplos, técnicas de prueba y buenas prácticas.

1. Fundamentos de ARIA

ARIA define un conjunto de atributos para mejorar la semántica de componentes dinámicos o complejos. Estos atributos ayudan a las tecnologías de asistencia (lectores de pantalla, dispositivos braille) a interpretar correctamente la interfaz.

El uso de ARIA debe ser complementario al HTML semántico nativo. Antes de recurrir a ARIA, verifica si un elemento HTML estándar ya incorpora la semántica deseada (nav, button, details).

2. Roles y propiedades clave

A continuación se muestran los roles y atributos ARIA más utilizados en bloques y menús:

Rol/Propiedad	Función	Elementos aplicables
role=menu	Define un menú de elementos.	`ul`, `div`
role=menuitem	Indica un elemento de menú.	`li`, `a`, `button`
aria-haspopup=true	Anuncia que un elemento controla un submenú.	Botones, enlaces
aria-expanded	Indica si está desplegado un contenedor.	Acordeones, menús colapsables
aria-controls	Relaciona el elemento con su contenido expandible.	Botones, pestañas

3. Implementación en menús de navegación

3.1 Menú horizontal simple

Un menú de navegación básico puede reforzarse con ARIA:

ltnav role=navigation aria-label=Menú principalgt
  ltul role=menu style=list-style:none margin:0 padding:0 display:flexgt
    ltli role=menuitem style=margin-right:20pxgt
      lta href=/inicio aria-current=pagegtIniciolt/agt
    lt/ligt
    ltli role=menuitem style=margin-right:20pxgt
      lta href=/serviciosgtServicioslt/agt
    lt/ligt
    ltli role=menuitem style=margin-right:20pxgt
      lta href=/contactogtContactolt/agt
    lt/ligt
  lt/ulgt
lt/navgt

3.2 Menú desplegable (drop-down)

Para submenús, combinamos aria-haspopup y aria-expanded:

ltdiv role=menu aria-label=Menú principal style=position:relative display:inline-blockgt
  ltbutton role=menuitem aria-haspopup=true aria-expanded=false aria-controls=submenu1 
          style=padding:8px 12px background:#fff border:1px solid #ccc cursor:pointergt
    Herramientas
  lt/buttongt
  ltul id=submenu1 role=menu hidden 
      style=list-style:none margin:4px 0 0 padding:0 position:absolute background:#fff border:1px solid #ccc box-shadow:0 2px 6px rgba(0,0,0,0.1)gt
    ltli role=menuitem style=padding:8px 12px cursor:pointergtEditorlt/ligt
    ltli role=menuitem style=padding:8px 12px cursor:pointergtAnalizadorlt/ligt
    ltli role=menuitem style=padding:8px 12px cursor:pointergtConfiguraciónlt/ligt
  lt/ulgt
lt/divgt

El JavaScript debe alternar aria-expanded y el atributo hidden.

4. ARIA en bloques y secciones

Además de menús, ARIA es muy útil en estructuras de contenido:

4.1 Acordeones

ltdiv role=region aria-labelledby=acc-title-1 style=margin-bottom:16pxgt
  lth3 id=acc-title-1 style=margin:0gtSección 1lt/h3gt
  ltbutton aria-expanded=false aria-controls=acc-panel-1 
          style=display:block width:100% padding:8px border:none background:#ddd cursor:pointergt
    Mostrar contenido
  lt/buttongt
  ltdiv id=acc-panel-1 role=region hidden style=padding:12px border:1px solid #cccgt
    Contenido detallado de la sección 1.
  lt/divgt
lt/divgt

4.2 Pestañas (tablist)

ltdiv role=tablist aria-label=Panel de pestañas style=display:flex border-bottom:1px solid #cccgt
  ltbutton role=tab aria-selected=true aria-controls=tab1 id=tab-btn-1
          style=padding:8px 16px border:none background:transparent cursor:pointergtNoticiaslt/buttongt
  ltbutton role=tab aria-selected=false aria-controls=tab2 id=tab-btn-2
          style=padding:8px 16px border:none background:transparent cursor:pointergtBloglt/buttongt
lt/divgt
ltdiv id=tab1 role=tabpanel aria-labelledby=tab-btn-1gt
  Contenido de Noticias.
lt/divgt
ltdiv id=tab2 role=tabpanel aria-labelledby=tab-btn-2 hiddengt
  Contenido de Blog.
lt/divgt

5. Ejemplos prácticos adicionales

Barra lateral expandible: role=complementary, aria-expanded.
Modal: role=dialog, aria-modal=true, aria-labelledby, aria-describedby.
Sliders: role=slider, aria-valuemin, aria-valuemax, aria-valuenow.

6. Pruebas de accesibilidad

Para verificar la correcta implementación ARIA:

Utilizar Especificaciones ARIA W3C.
Analizar con herramientas automáticas: axe DevTools, Accessibility Insights.
Probar manualmente con lectores de pantalla: NVDA, VoiceOver o JAWS.
Verificar el flujo de teclado: Tab, Shift Tab, flechas de dirección, Esc.

7. Conclusiones y referencias

Implementar atributos ARIA en bloques y menús mejora significativamente la experiencia de usuarios con discapacidad. Al combinar HTML semántico, roles ARIA y pruebas rigurosas, conseguimos interfaces accesibles, robustas y escalables.

Para profundizar:

Este artículo proporciona una guía detallada para elevar la accesibilidad de tus menús y bloques. Adopta buenas prácticas ARIA, prueba con herramientas y usuarios reales, y mantén la mejora continua.

Acepto donaciones de BAT's mediante el navegador Brave 🙂

Implementar atributos ARIA en bloques y menús