{"id":41689,"date":"2024-04-26T09:00:12","date_gmt":"2024-04-26T07:00:12","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=41689"},"modified":"2025-03-12T10:06:42","modified_gmt":"2025-03-12T09:06:42","slug":"acordeones-accesibles-web","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/acordeones-accesibles-web\/","title":{"rendered":"C\u00f3mo implementar Acordeones Accesibles en una web"},"content":{"rendered":"

Los acordeones o \u201cExpand and collapse<\/em>\u201d<\/strong> son elementos com\u00fanmente utilizados en los sitios web para presentar y organizar el contenido de tal manera que reduzca el desorden, la confusi\u00f3n y la carga de trabajo mental<\/strong> de la persona usuaria. Funciona presentando la informaci\u00f3n al hacer clic, expandiendo o contrayendo el bloque de texto seg\u00fan se requiera.<\/p>\n

Se est\u00e1n usando bastante en dispositivos m\u00f3viles, ya que colapsan u ocultan el contenido y hace que las dimensiones, altura y longitud, de las p\u00e1ginas sean m\u00e1s manejables. En escritorio, tambi\u00e9n reducen la complejidad a nivel visual y permiten que los usuarios enfoquen su atenci\u00f3n en el contenido m\u00e1s importante o relevante. Por lo tanto, resultan esenciales para la optimizaci\u00f3n de la experiencia de usuario<\/strong> en un sitio web.<\/p>\n

Como todo componente web, para garantizar la accesibilidad es fundamental que la construcci\u00f3n de estos componentes siga las pautas de la Web Content Accessibility Guidelines WCAG 2.2.<\/strong><\/p>\n

En este art\u00edculo, repasaremos las praxis recomendadas y requisitos clave para crear acordeones accesibles<\/strong>.<\/p>\n

 <\/p>\n

El patr\u00f3n \u00abAccordion\u00bb de WAI-ARIA para implementar acordeones accesibles<\/h2>\n

WAI-ARIA (Accessible Rich Internet Applications) es una especificaci\u00f3n desarrollada por el World Wide Web Consortium (W3C) que proporciona una serie de atributos y roles adicionales para mejorar la accesibilidad<\/strong> de las aplicaciones web din\u00e1micas y del contenido interactivo.<\/p>\n

WAI-ARIA permite a los desarrolladores web agregar informaci\u00f3n sem\u00e1ntica adicional a elementos HTML, lo que ayuda a las tecnolog\u00edas de asistencia, como los lectores de pantalla<\/strong>, a interpretar y comunicar correctamente la estructura y la interacci\u00f3n de la aplicaci\u00f3n web a las personas usuarias.<\/p>\n

El patr\u00f3n que hay que seguir se llama \u201cAccordion\u201d. En un acorde\u00f3n puede haber varias secciones abiertas<\/strong>, de lo contrario, si solo se abre una secci\u00f3n a la vez, estar\u00edamos en el caso de pesta\u00f1as verticales con el patr\u00f3n \u201cTabs\u201d, que tienen una implementaci\u00f3n distinta.<\/p>\n

\"Acorde\u00f3n
\nAcorde\u00f3n con todas las secciones contra\u00eddas<\/em><\/p>\n

 <\/p>\n

Paso 1: Estructura HTML b\u00e1sica<\/h2>\n

Un acorde\u00f3n se divide en distintas secciones. Cada secci\u00f3n consta de un bot\u00f3n de encabezado y un contenedor de contenido asociado.<\/p>\n

\"Acorde\u00f3n
\nAcorde\u00f3n con la primera secci\u00f3n expandida<\/em><\/p>\n

 <\/p>\n

Encabezado<\/h3>\n

El encabezado suele constar del t\u00edtulo que describe el cuerpo,<\/strong> o la secci\u00f3n inferior, y el indicador de la visibilidad del cuerpo, com\u00fanmente mediante un icono. Este encabezado sem\u00e1nticamente debe ser un <button><\/span>, ya que se puede interactuar con \u00e9l mediante teclado o rat\u00f3n.<\/p>\n

 <\/p>\n

Cuerpo<\/h3>\n

Contiene la informaci\u00f3n relevante de la secci\u00f3n.<\/strong> Cuando el acorde\u00f3n est\u00e1 contra\u00eddo, el cuerpo debe estar oculto para el usuario, tanto visualmente como para los productos de apoyo de accesibilidad, como un lector de pantalla. Si el cuerpo contiene elementos interactivos, como podr\u00edan ser enlaces o botones, no deben poder recibir el foco de teclado cuando est\u00e1n ocultos visualmente, porque la secci\u00f3n esta contra\u00edda.<\/p>\n

Se puede utilizar el elemento <section><\/span> para que la persona usuaria de lector de pantalla pueda navegar por los puntos de referencia del acorde\u00f3n. Evita utilizar <section><\/span> en un acorde\u00f3n que contiene m\u00e1s de aproximadamente 6 secciones que se pueden expandir al mismo tiempo.<\/p>\n

\"\"<\/p>\n

Uso de ARIA en lugar de elementos HTML nativos<\/h3>\n

Es preferible utilizar los elementos HTML nativos siempre que sea posible en lugar de depender exclusivamente de los atributos ARIA, por ejemplo se puede implementar un bot\u00f3n mediante HTML nativo:<\/p>\n

\"\"<\/p>\n

o mediante roles y atributos de ARIA:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Paso 2: Contextualizar los elementos dentro de los acordeones accesibles<\/h2>\n

El siguiente paso es relacionar los elementos del acorde\u00f3n entre s\u00ed, esto es, asignar un id<\/span> \u00fanico a cada encabezado y cuerpo asociado.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Despu\u00e9s haremos uso del atributo aria-controls<\/span> para especificar el control que ejerce el encabezado a la hora de expandir o contraer el cuerpo.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Por \u00faltimo, el atributo aria-labelledby<\/span> nos garantiza que se identifique y relacione correctamente el cuerpo con su encabezado.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Paso 3: Marcar y comunicar los estados<\/h2>\n

El componente acorde\u00f3n tiene dos estados<\/strong> principales: colapsado y expandido<\/strong>. El icono al final del acorde\u00f3n indica en qu\u00e9 estado se encuentra el acorde\u00f3n.<\/p>\n

Los acordeones comienzan, por defecto, en el estado colapsado, con todos los paneles de contenido cerrados. Empezar en un estado colapsado da a la persona usuaria una visi\u00f3n general de alto nivel de la informaci\u00f3n disponible. As\u00ed, puede ampliar cada secci\u00f3n del acorde\u00f3n de forma independiente, lo que permite abrir varias secciones a la vez.<\/p>\n

Para esto, haremos uso del atributo aria-expanded<\/span>. Estableceremos su valor en aria-expanded<\/span>=\u201dtrue\u201d<\/span>, en caso de estar abierto, y en aria-expanded<\/span>=\u201dfalse\u201d<\/span>, en caso de estar cerrado.<\/p>\n

Por \u00faltimo, ya que debemos evitar que las personas usuarias de teclado y lector de pantalla accedan a la informaci\u00f3n contra\u00edda, una buena pr\u00e1ctica es ocultarlo mediante el estilo display:none<\/span> o mediante el atributo hidden<\/span>. De esta forma, no solo ocultamos el panel de forma visual, sino que tambi\u00e9n lo hacemos inaccesible para todos los usuarios.<\/p>\n

\"\"<\/p>\n

<\/h3>\n

\u00bfC\u00f3mo indicar que una secci\u00f3n est\u00e1 siempre visible y no se permite cerrarla?<\/h3>\n

Si el panel de acorde\u00f3n asociado con un encabezado de acorde\u00f3n es visible y si el acorde\u00f3n no permite contraer el panel, el elemento del bot\u00f3n del encabezado debe tener el atributo aria-disabled<\/span>=\u201dtrue\u201d<\/span>.<\/p>\n

<\/h3>\n

\u00bfC\u00f3mo tratar los iconos con las flechas en cada encabezado de acorde\u00f3n?<\/h3>\n

Los iconos que usamos, v\u00e9ase alg\u00fan tipo de flecha hac\u00eda arriba o abajo, deben estar marcados correctamente como iconos decorativos, para que los usuarios con tecnolog\u00edas de asistencia solo tengan la informaci\u00f3n relevante en su lectura de la p\u00e1gina.<\/p>\n