Centro de ayudaAccesibilidad digital
Panorama de la accesibilidad de los bloques en los sitios web Tilda y de las funciones de los bloques para mejorarla.
La mayoría de los bloques de la biblioteca de bloques de Tilda ya están optimizados para ser utilizados por personas con discapacidades constantes, temporales o situacionales. En este artículo, te explicaremos qué posibilidades existen y qué ajustes puedes configurar para mejorar la accesibilidad de tu sitio web.
Breve lista de comprobación para mejorar la accesibilidad de los sitios web
- 1Compruebe si los títulos SEO están configurados para los bloques de encabezamiento
- 2Establecer textos alternativos para las imágenes y asegurarse de que revelan el contenido de la imagen.
- 3Compruebe si los bloques de menú se encuentran en la página de cabecera y el pie de página en la página de pie de página.
- 4En la configuración del contenido de los bloques con formularios en línea, compruebe si cada campo tiene un encabezamiento y si se especifica el mensaje de éxito tras el envío del formulario.
- 5Compruebe el contraste de las fuentes del sitio web y asegúrese de que no hay textos sobre un fondo de color similar o imágenes que lo hagan menos legible.
- 6Compruebe si el idioma del proyecto está configurado en Configuración del sitio → Más
- 7Compruebe las pautas de accesibilidad de los elementos en Zero Block
Optimización del lector de pantalla
Un lector de pantalla es un programa informático que reproduce en voz alta lo que aparece en la pantalla. A menudo, los lectores de pantalla ya están preinstalados y se utilizan a través de la configuración de accesibilidad del sistema operativo. Los bloques de
Tilda se optimizan automáticamente para funcionar con lectores de pantalla o incluyen la configuración necesaria para marcar el contenido de modo que el lector de pantalla lo locute correctamente.
Tilda se optimizan automáticamente para funcionar con lectores de pantalla o incluyen la configuración necesaria para marcar el contenido de modo que el lector de pantalla lo locute correctamente.
Etiquetas H1-H6 Titile
Si el contenido del sitio web tiene una estructura clara, puedes establecer etiquetas H1, H2 y H3 para los encabezados. Los encabezados de diferentes niveles ayudarán al lector de pantalla a interpretar mejor la estructura de la página, así como a pasar de un contenido a otro utilizando el teclado.
Puede establecer etiquetas H1-H3 en la configuración de cualquier bloque que tenga un título en "SEO: Etiqueta de título". En otros bloques, por ejemplo, en los subtítulos de las fichas, puede establecer títulos de otros niveles hasta H6.
Puede establecer etiquetas H1-H3 en la configuración de cualquier bloque que tenga un título en "SEO: Etiqueta de título". En otros bloques, por ejemplo, en los subtítulos de las fichas, puede establecer títulos de otros niveles hasta H6.
Importante. Sólo puede haber una única etiqueta H1 en cada página. Puede tener cualquier número de etiquetas de otros niveles, siempre que se respete la jerarquía (por ejemplo, nada de títulos H2 dentro de H3).
Texto alternativo (Alt) para imágenes
El texto alternativo de las imágenes es legible por el lector de pantalla, por lo que merece la pena configurarlo para que las personas con discapacidad visual puedan entender de qué trata la imagen. El texto alternativo también se muestra en caso de otras limitaciones de accesibilidad, como una conexión lenta.
Para configurar el texto alternativo de una imagen, abre la pestaña Contenido del bloque y haz clic en los tres puntos situados junto a la imagen cargada.
Para configurar el texto alternativo de una imagen, abre la pestaña Contenido del bloque y haz clic en los tres puntos situados junto a la imagen cargada.
Si la imagen es simplemente decorativa, como fondo de algún elemento de la página, puede que no necesite texto alternativo, téngalo en cuenta.
Para añadir una etiqueta alt a las imágenes de los bloques de la categoría "Galería", abra la pestaña Contenido y haga clic en "Texto" junto a la imagen cargada. A continuación, en el campo "Image alt for SEO" especifica la descripción de la imagen.
A continuación se explica cómo especificar el texto alternativo de una imagen en la pestaña Contenido de un bloque en Tilda
Para aumentar la accesibilidad, el texto alternativo debe comunicar con precisión el contenido de la imagen y dirigirse a los visitantes que, por una razón u otra, no puedan ver la imagen.
Tomemos esta foto como ejemplo:
Malos ejemplos de textos alt:
"Perro"
"Caniche".
Un buen ejemplo de texto alt:
"Un cachorro de caniche está sentado en la hierba en el patio trasero de una casa de ladrillo"
Malos ejemplos de textos alt:
"Perro"
"Caniche".
Un buen ejemplo de texto alt:
"Un cachorro de caniche está sentado en la hierba en el patio trasero de una casa de ladrillo"
Consejos para diseñar pies de página y cabeceras
Los bloques del encabezado y del pie de página se marcan automáticamente de forma que el lector de pantalla reconozca que el visitante se encuentra en ese bloque. Por ejemplo, en el encabezado, puede saltarse la lectura de todos los elementos del menú e ir directamente al contenido principal de la página.
Los bloques que contienen el encabezado y el pie de página deben estar necesariamente en páginas separadas de Encabezado y Pie de página para que el marcado sea correcto.
Los bloques que contienen el encabezado y el pie de página deben estar necesariamente en páginas separadas de Encabezado y Pie de página para que el marcado sea correcto.
Para configurarlo correctamente, vea este vídeo tutorial o consulte el artículo Encabezado y pie de página en el Centro de ayuda.
Consejos para rellenar formularios en línea
La mayoría de los campos de entrada de los bloques de la categoría "Formularios" son accesibles para el lector de pantalla. Los mensajes de éxito o error son emitidos por el lector de pantalla.
Además, asegúrese de especificar los títulos de los campos de entrada, de modo que quede claro para cada campo qué es exactamente lo que hay que escribir en él.
Además, asegúrese de especificar los títulos de los campos de entrada, de modo que quede claro para cada campo qué es exactamente lo que hay que escribir en él.
El proceso de personalización de los campos del formulario y los mensajes emergentes sobre la finalización correcta del formulario se describe en nuestro tutorial en vídeo sobre la configuración de formularios en línea.
Consejos sobre contraste y tamaño de letra
Un contraste de fuentes suficiente ayuda a los visitantes a percibir el texto del sitio web con mayor facilidad. No sólo es importante seguir las pautas de contraste porque pueda tener visitantes con problemas de visión, el contraste adecuado mejora la experiencia del usuario en general.
Existe una norma en la web para determinar el contraste del fondo y del texto, que se basa en las WCAG (Web Content Accessibility Guidelines). Según esta norma, el contraste se define como el número de veces que difiere el brillo del color más claro y el más oscuro y se escribe como la proporción de ese brillo: 3:1, 4.5:1, 10:1. Cuanto menor sea el valor, menor será el contraste (la relación de contraste máxima es 21:1).
Para que el sitio web sea accesible a las personas con discapacidad visual, debe aumentar el contraste de las fuentes; a continuación se describen algunos rangos de valores específicos para los elementos.
Puede utilizar la herramienta de contraste de fondo y color de fuente para obtener el valor de contraste y comprobarlo con los valores que se indican a continuación. Para ello, basta con copiar los valores de fondo y color de los bloques prediseñados o Zero Block, añadirlos al servicio especificado a continuación y obtener la relación de contraste.
Existe una norma en la web para determinar el contraste del fondo y del texto, que se basa en las WCAG (Web Content Accessibility Guidelines). Según esta norma, el contraste se define como el número de veces que difiere el brillo del color más claro y el más oscuro y se escribe como la proporción de ese brillo: 3:1, 4.5:1, 10:1. Cuanto menor sea el valor, menor será el contraste (la relación de contraste máxima es 21:1).
Para que el sitio web sea accesible a las personas con discapacidad visual, debe aumentar el contraste de las fuentes; a continuación se describen algunos rangos de valores específicos para los elementos.
Puede utilizar la herramienta de contraste de fondo y color de fuente para obtener el valor de contraste y comprobarlo con los valores que se indican a continuación. Para ello, basta con copiar los valores de fondo y color de los bloques prediseñados o Zero Block, añadirlos al servicio especificado a continuación y obtener la relación de contraste.
Para un texto normal, el valor mínimo de contraste necesario para que el texto sea distinguible es de 4,5:1. Valores de 7:1 y superiores significarán ya que el texto tiene un contraste aumentado (en las categorías estándar - AAA). Los valores de 7:1 y superiores ya significarán que el texto tiene un contraste aumentado (en las categorías estándar - AAA).
Para textos de mayor tamaño (como los encabezados), el valor mínimo de contraste es de 3:1. A partir de 4,5:1, el texto se considera mejorado, es decir, apto para ser utilizado por personas con deficiencias visuales.
Para los elementos no textuales (botones, controles de navegación, etc.) es necesario y suficiente mantener una relación de contraste superior a 3:1.
Para textos de mayor tamaño (como los encabezados), el valor mínimo de contraste es de 3:1. A partir de 4,5:1, el texto se considera mejorado, es decir, apto para ser utilizado por personas con deficiencias visuales.
Para los elementos no textuales (botones, controles de navegación, etc.) es necesario y suficiente mantener una relación de contraste superior a 3:1.
También puede utilizar el servicio en línea Wave (Web Accessibility Evaluation Tools) para comprobar el contraste y la accesibilidad de una página. Muestra visualmente posibles problemas de contraste y accesibilidad de los elementos del sitio web. Sin embargo, no todas las recomendaciones que ofrece este servicio pueden ser pertinentes y correctas; en concreto, es posible que no todos los elementos requieran texto alternativo.
Cómo especificar el idioma del sitio web
Para mejorar la accesibilidad, asegúrese de especificar el idioma del sitio web en Configuración del sitio → Más. Esto ayudará al software de terceros a interactuar mejor con el sitio web.
Navegación entre bloques de páginas web con el teclado
Para algunos tipos de limitaciones, es más cómodo utilizar el teclado para navegar por el contenido del sitio web. Los bloques Tilda están diseñados para ayudar a la navegación con el teclado, concretamente:
- Cuando se navega con el teclado, hay un marco de enfoque de color para entender con qué elemento se está interactuando en ese momento.
- Los bloques con menús, submenús, formularios, mosaicos, reproductores de vídeo, pestañas y controles deslizantes se etiquetan automáticamente para poder navegar por ellos con el teclado.
Consejos de accesibilidad Zero Block
Actualmente se sigue trabajando en la accesibilidad de todos los elementos de Zero Block . No obstante, es importante seguir las directrices generales que se describen a continuación.
Mantenga las capas en el orden correcto. Para los visitantes que interactúan con la página utilizando el teclado, el orden correcto de los puntos de enfoque es esencial.
Al desplazarse por los elementos con la tecla Tabulador, los elementos se seleccionarán en el orden en que aparecen en el diseño de la página. Para asegurarse de que este orden es correcto, coloque los elementos en el orden correcto. La navegación se realizará en el orden inverso al especificado en las capas, del último elemento al primero.
Al desplazarse por los elementos con la tecla Tabulador, los elementos se seleccionarán en el orden en que aparecen en el diseño de la página. Para asegurarse de que este orden es correcto, coloque los elementos en el orden correcto. La navegación se realizará en el orden inverso al especificado en las capas, del último elemento al primero.
No deje elementos vacíos, especialmente si tienen una función semántica, como la etiqueta H1. Incluya enlaces, etiquetas SEO y texto dentro de los elementos. Para las imágenes que no sean decorativas, utilice texto alternativo (alt).
