CMS: prácticas recomendadas de accesibilidad

Implementa las prácticas recomendadas de accesibilidad en el CMS (Sistema de gestión de contenido) de modo que tu sitio sea utilizable para todos los visitantes, incluidos aquellos que dependen de tecnologías de asistencia. Estas prácticas incluyen agregar nombres accesibles a los botones, usar texto alternativo eficaz para todos los archivos multimedia y colocar elementos en secciones o contenedores con atributos ARIA. Usa estas pautas para ayudar a todos a navegar e interactuar con el contenido más fácilmente.

El texto alternativo es esencial para proporcionar contexto a las imágenes, los videos y las formas vectoriales. Al escribir texto alternativo, describe el contenido multimedia de manera clara y concisa, como si la IA o los lectores de pantalla lo estuvieran interpretando. Mantén el texto alternativo por debajo de los 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 las imágenes y las galerías.

Recomendamos crear un campo de texto en la colección del CMS a fin de usarlo como texto alternativo para cada elemento multimedia. Para mantener la colección organizada, coloca este campo junto al campo multimedia que representa y asígnale un nombre claro, como "Texto alternativo [nombre de la galería/imagen]".

Para los elementos de video, la propiedad de texto alternativo se denomina "Descripción del video" en el panel de conexión del conjunto de datos. Para las imágenes o formas vectoriales, usa la opción  El texto alternativo se conecta a. Para las imágenes de fondo en secciones, franjas, columnas o ítems repetidores (solo en el Editor de Wix), usa El texto alternativo del fondo se conecta a.

El texto alternativo de las imágenes decorativas y los archivos multimedia que no transmiten un contenido significativo puede dejarse en blanco. Esto permite que los lectores de pantalla los omitan y reduce las distracciones.

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.

Puedes agregar nombres accesibles a los botones que se conectan al CMS. Los nombres accesibles funcionan como texto alternativo, pero son específicos de los botones. Ayudan a los lectores de pantalla a describir para qué sirve el botón o adónde conduce. Agregar nombres accesibles a los botones mejora la accesibilidad de tu sitio y ayuda a todos los visitantes a navegar por el contenido con mayor facilidad.

Cuando conectas un botón al conjunto de datos, usa el menú desplegable El nombre accesible se conecta a para conectar el nombre accesible a un campo de texto en la colección. Este campo debe describir la acción o el destino del botón de manera clara y concisa.

Por ejemplo, en lugar de un nombre genérico como "Haz clic aquí", usa "Más información sobre nuestros servicios" o "Envía tu solicitud". 

Si es necesario, puedes usar expresiones para combinar texto estático con valores de los campos de la colección. De esta manera, los lectores de pantalla proporcionan descripciones significativas para cada botón sobre la base del contenido. Por ejemplo, puedes crear un nombre accesible como el siguiente:

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.