Establecer el idioma de la página
Las imágenes deben tener texto alternativo
Los elementos del formulario <input> deben tener etiquetas
Configurar el "Lector de pantalla" NUEVA
Configuración del "Modo Lector" de Guidebot NUEVA BETA
La actualización temporizada no debe existir
El zoom y la escala no deben estar desactivados
Los botones, enlaces y elementos de menú ARIA deben tener un nombre accesible.

El widget Guidebot ayuda a hacer accesible su sitio web. Funciona inmediatamente tras una sencilla instalación, ampliando la accesibilidad de su sitio web.

Guidebot funciona tanto con plantillas precompradas como con entornos HTML/CSS escritos a medida. Para una experiencia perfecta, hay algunas cosas que debes tener en cuenta.

# Establecer el idioma de la página

Al configurar un lector de pantalla, los usuarios seleccionan un idioma por defecto. Si no se especifica el idioma de una página web, el lector de pantalla asume que es el idioma por defecto establecido por el usuario. La selección del idioma se convierte en un problema para los usuarios que hablan varios idiomas y acceden al sitio web en más de uno. Es esencial especificar un idioma y asegurarse de que es válido para que el texto del sitio web se pronuncie correctamente.

Los lectores de pantalla utilizan diferentes bibliotecas de sonidos para cada idioma, en función de la pronunciación y las características de ese idioma. Los lectores de pantalla pueden cambiar fácilmente entre estas bibliotecas de idiomas, pero sólo si los documentos especifican qué idioma(s) leer. Si no se especifica el idioma, el lector de pantalla lee el documento en el idioma por defecto del usuario, ¡lo que resulta en una experiencia confusa!

Ejemplo de configuración del idioma actual:

        
<html lang="es">
<head>
...
        
    

# Las imágenes deben tener texto alternativo

Los lectores de pantalla no tienen forma de traducir una imagen en palabras que puedan ser leídas por el usuario, aunque la imagen sólo conste de texto. Por ello, es necesario que las imágenes tengan un texto alternativo breve y descriptivo para que los usuarios de lectores de pantalla entiendan claramente el contenido y el propósito de la imagen.

Si no puedes ver, todos los tipos de información visual, como las imágenes, son completamente inútiles a menos que se proporcione una alternativa de texto digital para que los lectores de pantalla puedan convertir ese texto en sonido o braille. Lo mismo ocurre, en mayor o menor grado, con las personas con baja visión o daltonismo.

Hay tres formas principales de añadir texto alternativo a una imagen:

        
Utilizar un atributo alt: <img src="..." alt="drawing of a cat"> 

Utilización de una aria-tag: <img src="..." aria-label="drawing of a cat"> 

Utilización de un atributo aria-labelledby: <img src="..." arialabelledby="labelID">
        
    

# Los elementos del formulario <input> deben tener etiquetas

Para que los formularios sean accesibles, se necesitan etiquetas eficaces. La finalidad de los elementos de un formulario, como casillas de verificación, botones de radio, campos de entrada, etc., suele ser evidente para los usuarios videntes, aunque el elemento del formulario no esté etiquetado mediante programación. Los usuarios de lectores de pantalla necesitan etiquetas útiles para identificar los campos del formulario. Añadir una etiqueta a todos los elementos del formulario elimina la ambigüedad y contribuye a crear un producto más accesible.

El método recomendado para la mayoría de las circunstancias es utilizar el elemento label y una asociación explícita mediante los atributos for e id.

        
<label for="firstname">First name:</label> <input type="text" id="firstname">
        
    

# Configurar el "Lector de pantalla" NUEVA BETA

El lector de pantalla es capaz de leer el contenido de la página web mediante síntesis de voz. Cuando está activado, Guidebot indica el contenido de la página que se puede leer. Haga clic en el contenido o en la insignia para iniciar la lectura. El Guidebot resalta el texto que se está leyendo.
Para que el lector funcione correctamente, tenemos que definir el contenido que se puede leer añadiendo una etiqueta HTML data-gb-speech. Si se especifica la etiqueta HTML sin un valor, el lector tomará como base su contenido de datos. Si esto se modifica, o si el contenido es tal que no hay nada que leer (por ejemplo, una imagen) puede especificar el contenido que debe leerse como valor de la etiqueta. En el caso de botones y enlaces (siempre que el lector de pantalla esté activo), el contenido se leerá en el primer clic, la página navegará en el segundo clic.

Ejemplos de la configuración correcta:

        
Sin valor:
<div data-gb-speech>Este contenido se leerá en voz alta</div>
<a href="#" data-gb-speech>Este es un enlace</a>
<button type="button" data-gb-speech>Título del botón</button>

Con valor:
<div data-gb-speech="Este contenido se leerá en voz alta">Y este contenido sólo se mostrará</div>
<img src="..." data-gb-speech="Haga clic en la imagen para leer su contenido"/>
        
    

# Configuración del "Modo Lector" de Guidebot NUEVA BETA

El modo Lector recoge el contenido textual de la página y lo muestra en un formato fácil de leer, libre de distracciones. Para que el modo lector funcione correctamente, debemos definir el elemento que contiene el contenido de la página incluyendo una etiqueta HTML data-gb-content.

Ejemplos de la configuración correcta:

        
<main data-gb-content>...</main>
        
    

# La actualización temporizada no debe existir

Dado que los usuarios no esperan que una página se actualice automáticamente, esta actualización puede desorientarles. La actualización también desplaza el foco programático a la parte superior de la página, lejos de donde lo tenía el usuario. Esto resulta frustrante para los usuarios.

Elimine el atributo http-equiv="refresh" de cada metaelemento en el que esté presente.

Mal ejemplo:

        
<meta http-equiv="refresh" content="10" url="http://www.domain.com/index.html">
        
    

# El zoom y la escala no deben estar desactivados

El parámetro user-scalable=no dentro del atributo content del elemento <meta name="viewport"> desactiva el zoom en una página. El parámetro maximum-scale limita la cantidad de zoom que el usuario puede utilizar. Esto es problemático para las personas con baja visión que dependen de lupas de pantalla para ver correctamente el contenido de una página web.

Elimine el parámetro user-scalable=no del atributo content del elemento <meta name="viewport"> para permitir el zoom y asegúrese de que el parámetro maximum-scale no sea inferior a 2.

Mal ejemplo:

        
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
        
    

# Los botones, enlaces y elementos de menú ARIA deben tener un nombre accesible.

Los usuarios de lectores de pantalla no son capaces de discernir el propósito de los elementos con role="link", role="button", o role="menuitem" que no tienen un nombre accesible.

La regla aria-command-name tiene cuatro patrones de marcado que superan los criterios de la prueba:

        
<div role="link" id="al" aria-label="Name"></div>

<div role="button" id="alb" aria-labelledby="labeldiv"></div>

<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>

<div role="link" id="title" title="Title"></div>