¿Cómo puedo hacer que mi sitio de Website Builder sea más accesible?
Un sitio web accesible garantiza que todos los usuarios, incluidas las personas con discapacidad, puedan navegar, comprender e interactuar con tu contenido. Si usas Website Builder, puedes mejorar la accesibilidad ajustando elementos clave y siguiendo las mejores prácticas, como añadir texto alternativo a las imágenes y asegurarte de que el diseño y el contenido de tu sitio estén claramente estructurados. Encontrarás una lista de recomendaciones y recursos en este artículo.
Si tiene alguna pregunta general sobre la accesibilidad del sitio web, puede consultar nuestra guía: Preguntas frecuentes sobre accesibilidad del sitio web.
Nota: En one.com, hacemos todo lo posible para darte las herramientas necesarias para que puedas crear y mantener un sitio web que cumpla con los requisitos de accesibilidad. Sin embargo, al final eres tú quien es responsable del cumplimiento total. Por eso, te recomendamos encarecidamente que te familiarices con las leyes locales o regionales de accesibilidad, ya que puede que tengas requisitos que no se abordan en este artículo.
Elementos visuales
Textos alternativos para imágenes, iconos y gráficos
El texto alternativo sirve como descripción legible de una imagen y puede actuar como sustituto si el visitante del sitio web no puede verlo. Un lector de pantalla puede leerlo. Puede encontrar instrucciones sobre dónde agregar texto alternativo a imágenes u otros elementos visuales en estas guías:
- Imágenes (también aplica a SVGs e iconos): ¿Cómo agrego una imagen a mi sitio de Website Builder?
- Uso del componente logotipo en Website Builder
- Imágenes de producto (Tienda online): Gestiona productos en tu Tienda online
- Galería y control deslizante de imágenes: Cómo usar los componentes Galería y control deslizante de imágenes en Website Builder
- Imágenes del blog: Empezando con Blogs en Website Builder
No es necesario añadir texto alternativo a las imágenes de fondo, ya que suelen tener fines decorativos. El texto alternativo solo debe añadirse a imágenes que transmitan contenido importante, tengan fines informativos o requieran la interacción del visitante del sitio web.
Para indicar que una imagen sirve como una imagen que las herramientas de asistencia pueden omitir, puedes ir a SEO en la configuración de imagen y deslizar el selectro Establecer como elemento decorativo a ON.
Para garantizar el cumplimiento total, te recomendamos que revises todas las imágenes de tu sitio web y les des texto alternativo o las configures como elementos decorativos.
Idioma de la página
Configurar el idioma de cada página de tu sitio garantiza que los lectores de pantalla puedan leer la página correctamente. Consulta esta guía paso a paso: ¿Cómo configuro el idioma de una página en Website Builder?
Elementos auditivos
Subtítulos y transcripciones para audio y vídeo
No es posible añadir subtítulos ni generar transcripciones con la opción de vídeo alojado en el servidor en Website Builder. Sin embargo, hay dos soluciones alternativas para esto:
- Sube videos a través de YouTube. Esto garantizará que los videos se muestren con subtítulos. Puedes leer más sobre esta función en nuestra guía: Agrega un video de YouTube a tu sitio web.
- Agregue las transcripciones por separado como un archivo de fácil acceso en su sitio. Puede usar el documento para esto, sobre el cual puede leer más en nuestra guía: ¿Cómo puedo incrustar un documento en mi sitio de Website Builder?
Estructura y diseño
Encabezados semánticos
Utilice la jerarquía de encabezados semánticos (H1, H2, H3, párrafo) en el diseño del texto de su sitio web. Esta jerarquía refleja una forma de organizar el contenido de forma lógica y significativa mediante etiquetas en sitios HTML. Las tecnologías de asistencia, como los lectores de pantalla, la utilizan para comprender el contenido y presentarlo en el orden correcto al visitante del sitio web.
En el editor de Website Builder, cada encabezado se marca claramente (encabezado 1, encabezado 2, etc.) cuando usas un componente de texto. Puedes seleccionar un encabezado en el panel lateral al añadir un nuevo componente de texto a tu sitio o editar el encabezado en el panel de propiedades de los componentes de texto existentes.
Las plantillas de Website Builder incluyen encabezados y etiquetas claras y, de forma predeterminada, siguen la lógica descrita anteriormente.
Relación de contraste para texto
Cuando se trata del texto del sitio web, estos son los requisitos mínimos para la relación de contraste:
- Encabezados: 3:1
- Párrafos: 4.5:1
Puedes ajustar la relación de contraste del texto en Website Builder así:
Si la función de tema de color está configurada en ON:
Si estás usando un tema de color en tu sitio, deberías editar la relación de contraste desde la configuración del tema de color. Esta guía explica cómo hacerlo: Usar un tema de color en Website Builder.
Si la función de tema de color está desactivada:
Cuando la función de tema de color esté desactivada, deberá editar la relación de contraste a través de la configuración global:
- Ve a Configuración de la plantilla en la esquina inferior derecha del editor de Website Builder.
- Haz clic en Editar estilos de plantilla en el menú que aparece.
- Ahora verás un resumen de todos los estilos de texto usados en tu sitio web (texto, enlaces, menú, botón y tabla). Haz clic en el icono de color de texto de cada elemento para acceder a la configuración de color. Puedes seleccionar un color mediante el selector de color o introducir un código hexadecimal.
Nota: El Website Builder no puede indicarle las proporciones exactas de su sitio, pero puede usar herramientas externas para analizarlo y obtener los valores necesarios. Por ejemplo, puede probar , esta herramienta de WebAIM. Aquí puede introducir los códigos hexadecimales del primer plano y el fondo, y luego ajustar el color hasta obtener la relación de contraste correcta y los códigos hexadecimales correspondientes. Después, puede copiar y pegar estos códigos en el Creador de Sitios Web.
Contraste no textual
Los elementos coloridos de tu sitio web que no incluyen texto, como los colores de fondo en las secciones o los colores de los botones, se pueden ajustar completamente a través de la configuración del tema de color o la Configuración de la plantilla global, como se describe arriba.
El estilo de cada elemento se puede ajustar aún más mediante la configuración de su componente. Por ejemplo, si haces clic en una sección, encabezado o pie de página, verás la opción para cambiar el color o el estilo del elemento.
Navegación
Acceso al teclado
Te recomendamos que utilices contenido claro en tu sitio web y evites elementos complejos, como contenido que se activa al enfocar o . Estos últimos se pueden reemplazar con imágenes y enlaces normales.
Ten en cuenta que los menús desplegables son accesibles con el teclado.
Pausar, detener u ocultar contenido
Debe ser posible controlar u ocultar manualmente todos los elementos móviles o interactivos de tu sitio web. Aquí hay un par de cosas que deberías revisar si las tienes en tu sitio web:
- Imagen slider: La función de reproducción automática de este componente viene activada por defecto, pero puedes desactivarla y añadir controles manuales. Ve a tu componente de imagen slider, haz clic en Configuración de imagen slider y luego selecciona Navegación para acceder a esta configuración.
- GIFs: Evita subir GIFs a través del componente de imagen si no incluyen controles.
- Imágenes de fondo y vídeos: Estos elementos actualmente no tienen función de reproducción/pausa, pero estamos trabajando en una solución para satisfacer este requisito. Mientras tanto, recomendamos evitar imágenes de fondo o vídeos con movimiento.
- Vídeos: Asegúrate de tener controles visibles para los vídeos y de que la reproducción automática esté desactivada. Puedes leer más sobre la configuración de vídeo en nuestra guía: ¿Cómo agrego un vídeo a mi sitio de Website Builder?
Contenido intermitente
Contenido que incluya más de tres destellos por segundo debería evitarse. El Website Builder no contiene contenido intermitente estándar, pero puedes subirlo. Sin embargo, te recomendamos evitarlo o, al menos, permitir que el visitante lo controle y lo omita manualmente.
Artículos relacionados: