Accesibilidad: prácticas recomendadas para el CMS

La implementación de prácticas recomendadas de accesibilidad en el CMS (Sistema de gestión de contenido) garantiza que todo el mundo pueda usar tu sitio, incluidas aquellas personas que dependen de las tecnologías de asistencia. Estas prácticas incluyen agregar nombres accesibles a los elementos, usar texto alternativo efectivo para imágenes y galerías, y colocar elementos en secciones o contenedores con atributos ARIA. 

Al seguir estas pautas, es posible crear un sitio web más inclusivo que se adapte a todos los usuarios, lo que les facilitará la navegación y la interacción con tu contenido.

El texto alternativo es esencial para proporcionar contexto a las imágenes y las galerías. Al escribir texto alternativo, debes centrarte en describir la imagen como si la IA la estuviera interpretando. Mantenlo conciso (menos de 125 caracteres) y evita frases como "imagen de". Para obtener instrucciones más detalladas sobre cómo escribir texto alternativo eficaz, consulta el artículo Accesibilidad: preparar tus imágenes y galerías.

En general, recomendamos crear un campo de colección para usarlo como texto alternativo para las imágenes y las galerías conectadas al CMS. Para mantener la colección organizada, puedes colocar el campo de texto alternativo junto a la imagen o la galería que representa y darle un nombre "Texto alternativo (nombre de la imagen o de la galería)". Ten en cuenta que las imágenes decorativas no necesitan necesariamente texto alternativo. Consulta la sección de imágenes decorativas a continuación para obtener más información. 

Al agregar imágenes no decorativas al CMS, es fundamental proporcionar texto alternativo descriptivo. Recomendamos agregar un tipo de campo 'Texto' separado en tu colección del CMS que represente el texto alternativo de las imágenes. Céntrate en usar un lenguaje específico y descriptivo en el texto alternativo. Por ejemplo, en lugar de escribir el texto alternativo como "una mujer", usa "una mujer plantando margaritas en un jardín". 

Cuando conectes la imagen en el editor al conjunto de datos, haz clic en el campo El texto alternativo se conecta a y selecciona el campo de texto alternativo que creaste. Esto permite que los lectores de pantalla describan la imagen y su propósito, lo que hace que tu sitio sea más inclusivo. 

Por lo general, las imágenes decorativas no transmiten contenido significativo y no requieren texto alternativo. Si una imagen tiene un propósito puramente decorativo, puedes dejar el texto alternativo desconectado en el conjunto de datos. Esto ayuda a los lectores de pantalla a omitir la imagen y evita, entonces, distracciones innecesarias.

Si un enlace de imagen se conecta a una acción del conjunto de datos, como abrir la página dinámica de ítem, el texto alternativo debe describir la acción, y no solo la imagen en sí. Por ejemplo, si hacer clic en una imagen lleva a los visitantes a una página de perfil, el texto alternativo podría ser "Más información sobre Guillermo Santos". 

Con las expresiones, puedes combinar texto estático (por ejemplo, "Leer más") con valores de campo de colección dinámicos (por ejemplo "Willis McSmoot") para garantizar que el texto alternativo varíe según la imagen. De esta manera, los visitantes pueden comprender el propósito de la imagen cuando usan tecnologías de asistencia. 

Para las galerías que se conectan a los tipos de campo 'Imagen', es importante proporcionar texto alternativo para cada imagen. Crea un tipo de campo 'Texto' separado en la colección del CMS, específicamente para el texto alternativo de las imágenes. Al conectar la galería al conjunto de datos, conecta el menú desplegable  El texto alternativo se conecta a al campo de texto alternativo correspondiente. Esto garantiza que los lectores de pantalla puedan proporcionar descripciones de las imágenes dentro de la galería, lo que mejora la accesibilidad.

Conectar una galería al campo 'Galería de contenido multimedia' es una excelente manera de mostrar numerosas imágenes o videos sobre un ítem en una página dinámica de ítem. Al hacerlo, agrega texto alternativo para cada archivo multimedia directamente dentro del campo 'Galería de contenido multimedia' en la colección. Haz clic en el campo 'Galería de contenido multimedia' junto al ítem correspondiente de la colección para agregar texto alternativo a cada archivo multimedia. Allí, también puedes ingresar el título y la descripción de cada archivo. Esto permite que los lectores de pantalla transmitan contexto tanto para las imágenes como para los videos, lo que garantiza que todo el contenido multimedia de la galería sea accesible.

Al agregar un botón 'Mostrar más' en el Editor de Wix Studio, mantén todo lo que esté debajo del repetidor o la galería en una sección separada. Si colocas algún elemento en la misma sección que el repetidor o la galería, y directamente debajo del repetidor o la galería, los elementos se superpondrán cuando se haga clic en el botón 'Mostrar más'. Esta superposición puede causar confusión a los visitantes, ya que dificulta la visibilidad y la accesibilidad.

Para evitar este problema, asegúrate siempre de que cualquier elemento que desees colocar debajo del repetidor o de la galería, incluido el botón 'Mostrar más', esté adjunto a una sección separada. De esta manera, cuando los usuarios hacen clic en el botón 'Mostrar más', la galería o el repetidor se expande de manera adecuada sin superponerse, lo que proporciona una experiencia más clara y fácil de usar.

En las páginas estáticas, si los visitantes pueden hacer clic en los botones "Ítem siguiente" e "Ítem anterior" que hacen que los elementos conectados al CMS cambien de contenido, adjunta los elementos que se muestran a un solo contenedor. Luego, configura los atributos ARIA (Aplicaciones de Internet Enriquecidas y Accesibles) del contenedor para que los lectores de pantalla puedan anunciar los cambios en el contenido cuando los visitantes hagan clic en los botones.

Solo necesitas adjuntar los elementos que muestran el contenido cambiante. No es necesario que los botones 'Siguiente ítem/ítem anterior' estén adjuntos a un contenedor.

Si muestras el recuento de ítems del conjunto de datos en un elemento de texto y los visitantes pueden hacer clic en un elemento de entrada para cambiar el recuento de ítems, adjunta el texto a un contenedor. Luego, configura los atributos ARIA (Aplicaciones de Internet Enriquecidas y Accesibles) del contenedor para que los lectores de pantalla puedan anunciar el recuento de ítems cuando cambie.

Esto puede ser relevante cuando los visitantes hacen clic en las entradas que filtran contenido o las entradas que recopilan contenido. Siempre que los visitantes tengan la posibilidad de alterar el recuento de ítems que se muestra, adjunta el texto que muestra el recuento de ítems a un contenedor para que los lectores de pantalla puedan anunciar el cambio.

Cuando tienes elementos de entrada configurados para filtrar contenido, los filtros se aplican de forma predeterminada en cuanto un visitante hace una selección. Puedes cambiar este comportamiento al agregar un botón 'Aplicar filtros'. 

Por cuestiones de accesibilidad, es mejor agregar un botón "Aplicar filtros". Con este botón, el contenido no se filtra hasta que los visitantes hacen clic en él. Esto crea una mejor experiencia, especialmente si los usuarios desean establecer varios filtros antes de aplicarlos todos a la vez. 

Para que las barras de paginación sean más accesibles, agrega nombres accesibles tanto a la barra en sí como a los botones. Estos nombres no son visibles en la pantalla, pero son esenciales para los lectores de pantalla, ya que ayudan a los usuarios a comprender cómo navegar por las páginas. Por ejemplo, puedes nombrar la barra de paginación "Navegación por la página" y asignar nombres claros a los botones como "Próxima página", "Página anterior", o personalizarlos según el contenido (por ejemplo, "Siguiente historia" o "Producto anterior").

Haz clic a continuación para obtener respuestas a las preguntas más frecuentes sobre accesibilidad.