CMS: prácticas recomendadas de accesibilidad
14 min
En este artículo
- Prácticas recomendadas para el texto alternativo del CMS
- Para imágenes no decorativas
- Para imágenes decorativas
- Para imágenes que sirven como botones en los que se puede hacer clic
- Para galerías conectadas a los tipos de campo "Imagen"
- Para galerías conectadas a los tipos de campo 'Galería de contenido multimedia'
- Nombres accesibles para los botones
- (Solo el Editor de Wix Studio) Adjuntar elementos a secciones separadas al usar los botones 'Mostrar más'
- (Solo páginas estáticas) Adjuntar los botones 'Siguiente ítem/ítem anterior' a los contenedores
- Adjuntar texto que indica 'recuento de ítems' a un contenedor
- Hacer que los elementos de entrada sean accesibles
- Hacer que las barras de paginación sean accesibles
- Preguntas frecuentes
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.
Prácticas recomendadas para el texto alternativo del CMS
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.
Para imágenes no decorativas
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.

Para imágenes decorativas
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.
Para imágenes que sirven como botones en los que se puede hacer clic
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 usar expresiones a fin de crear texto alternativo personalizado:
- Conecta la imagen correspondiente al conjunto de datos que se conecta a tu colección.
- Haz clic en el menú desplegable El texto alternativo se conecta a en el panel Conectar imagen y selecciona Expresión.

- Haz clic en el campo Expresión e ingresa una función que cree el texto alternativo que necesitas. Por ejemplo, podrías ingresar la siguiente función para combinar "Leer más sobre" con un campo de "título" que contenga los nombres:
1CONCAT("Leer más sobre ",título)
Más información sobre cómo usar expresiones para combinar valores de varios campos.
Para galerías conectadas a los tipos de campo "Imagen"
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.
Más información sobre cómo conectar galerías a los elementos de la colección del CMS.
Para galerías conectadas a los tipos de campo 'Galería de contenido multimedia'
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.
Más información sobre cómo conectar galerías a los campos 'Galería multimedia'.
Nombres accesibles para los botones
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:
1CONCAT("Leer más sobre", título)
(Solo el Editor de Wix Studio) Adjuntar elementos a secciones separadas al usar los botones 'Mostrar más'
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.

Más información sobre cómo agregar un botón 'Mostrar más':
(Solo páginas estáticas) Adjuntar los botones 'Siguiente ítem/ítem anterior' a los contenedores
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.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Agrega un contenedor.
- Haz clic en CMS
a la izquierda del editor.
- Haz clic en Tus colecciones.
- Haz clic en los elementos que muestran contenido de CMS y arrástralos al contenedor para adjuntarlos.

- Habilita la codificación si aún no lo has hecho:
- Haz clic en Modo desarrollador en la parte superior.
- Haz clic en Activar.
- Habilita las herramientas de desarrollo de accesibilidad:
- Haz clic en Ajustes en la parte superior del editor.
- Selecciona Asistente de accesibilidad.
- Haz clic en Herramientas de desarrollo de accesibilidad en el panel de la derecha.
- Activa la palanca junto a Mostrar ajustes de accesibilidad avanzados en el editor.
- Haz clic con el botón derecho en el contenedor que tiene elementos adjuntos que muestran el contenido de la colección del CMS.
- Selecciona Accesibilidad.

- Haz clic en Agregar atributo.
- Haz clic en el menú desplegable Atributo y selecciona aria-live.
- Haz clic en el menú desplegable Valor del atributo y selecciona polite.
- Haz clic en Agregar.
- Publica tu sitio cuando esté todo listo para implementar los cambios.
Adjuntar texto que indica 'recuento de ítems' 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.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Agrega un contenedor.
- Haz clic en el elemento de texto que muestra el recuento de ítems del conjunto de datos y arrástralo al contenedor para adjuntarlo. Si tienes otro elemento de texto que explique lo que representa el recuento de ítems, adjúntalo también al contenedor (por ejemplo, "Resultados").
- Habilita la codificación si aún no lo has hecho:
- Haz clic en Modo desarrollador en la parte superior.
- Haz clic en Activar.
- Habilita las herramientas de desarrollo de accesibilidad:
- Haz clic en Ajustes en la parte superior del editor.
- Selecciona Asistente de accesibilidad.
- Haz clic en Herramientas de desarrollo de accesibilidad en el panel de la derecha.
- Activa la palanca junto a Mostrar ajustes de accesibilidad avanzados en el editor.
- Haz clic con el botón derecho en el contenedor que tiene los elementos de texto adjuntos.
- Selecciona Accesibilidad.

- Agrega el primer atributo:
- Haz clic en Agregar atributo.
- Haz clic en el menú desplegable Atributo y selecciona aria-atomic.
- Haz clic en el menú desplegable Valor del atributo y selecciona true.
- Haz clic en Agregar.
- Agrega el segundo atributo:
- Haz clic en Agregar atributo.
- Haz clic en el menú desplegable Atributo y selecciona aria-live.
- Haz clic en el menú desplegable Valor del atributo y selecciona polite.
- Haz clic en Agregar.
- Publica tu sitio cuando esté todo listo para implementar los cambios.
Hacer que los elementos de entrada sean accesibles
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.

Al mostrar el recuento de ítems del conjunto de datos:
Si los visitantes pueden hacer clic en las entradas que cambian el recuento de ítems, asegúrate de adjuntar a un contenedor el texto que muestra el recuento de ítems. Consulta la sección anterior a esta para obtener más información.
Hacer que las barras de paginación sean accesibles
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").

Consejo:
En el Editor de Wix Studio, si tienes un botón "Cargar más", asegúrate de colocar la barra de paginación y cualquier otra cosa que se muestre debajo del repetidor o la galería en una sección separada.
Preguntas frecuentes
Haz clic a continuación para obtener respuestas a las preguntas más frecuentes sobre accesibilidad.
¿Cómo debo titular el campo de texto alternativo en el CMS?
¿Qué sucede si la imagen del repetidor usa una combinación de imágenes decorativas y no decorativas?
¿Puedo agregar una descripción emergente a una imagen que aparece cuando los visitantes pasan el cursor sobre la imagen?
¿Los mensajes de éxito o de error de mi formulario de CMS son accesibles?