Cuando hablamos sobre el diseño del sitio, por lo general se trata de cómo nos ven visualmente esos sitios: cómo los colores y la tipografía funcionan juntos, cómo se colocan y posicionan los elementos de la página y si los enlaces de navegación se colocan en las ubicaciones correctas. Sin embargo, no todos interactúan con las páginas web de esta manera, por lo que también debemos considerar los aspectos no visuales del diseño.
Se estima que en los EE.UU. más de siete millones de personas experimentan una discapacidad visual que requiere «métodos alternativos para participar en cualquier actividad que las personas con vista normal harían con sus ojos». Muchas de estas personas confían en la tecnología de asistencia, como lectores de pantalla para usar sitios web y otros contenidos digitales. Como diseñador, desarrollador y/o propietario de un sitio web, debe hacer que su sitio web sea accesible para esta audiencia.
Esta guía explica qué es un lector de pantalla y cómo funciona. A continuación, explicaré algunas prácticas recomendadas para hacer que su sitio web sea más accesible para las personas que usan lectores de pantalla para garantizar que su contenido sea accesible y agradable para todos.
¿Qué es un lector de pantalla?
Un lector de pantalla es un software de computadora que convierte el texto digital en una forma audible y/o táctil. Los lectores de pantalla permiten a los usuarios interactuar con los dispositivos de una manera no visual y son utilizados principalmente por personas ciegas o con problemas de visión, así como por personas con limitaciones cognitivas que les impiden ver el texto y los medios en la pantalla. Muchos lectores de pantalla tienen funciones adicionales para ayudar a los usuarios a navegar por sitios web, aplicaciones de escritorio e interfaces de sistemas operativos.
Los lectores de pantalla son una tecnología de asistencia importante y popular. Permiten el uso independiente de dispositivos digitales por parte de quienes de otro modo no podrían o tendrían dificultades significativas.
Si bien los lectores de pantalla son más utilizados por personas ciegas o con problemas de visión, también ayudan a quienes:
- experimentan dificultades cognitivas o de aprendizaje como la dislexia.
- tiene dificultad para leer la letra impresa.
- aprenden el idioma.
- prefieren escuchar el contenido que leer.
Algunos también pueden usar lectores de pantalla junto con visión reducida. Por ejemplo, puede interactuar visualmente con imágenes y medios en un sitio web utilizando un lector de pantalla para contenido de texto.
¿Cómo funcionan los lectores de pantalla?
Un lector de pantalla es una aplicación que se instala en un dispositivo (o, en algunos casos, como una extensión del navegador) y se usa con otras aplicaciones en ese dispositivo. Hay muchos lectores de pantalla gratuitos y premium disponibles para Windows, macOS, Linux, iOS y Android.
El usuario controla su lector de pantalla con el teclado. El lector de pantalla viene con una biblioteca de comandos de teclado que le indica al lector de pantalla que haga cosas como comenzar/detener la lectura, volver a leer secciones de texto, deletrear palabras, saltar a diferentes partes de la página, mover el cursor/enfocar, reproducir un archivo multimedia o haga clic en un enlace, botón u otro elemento interactivo.
Los lectores de pantalla pueden traducir información textual en dos formas, voz y braille. La mayoría de las veces, los lectores de pantalla usan la tecnología de texto a voz (TTS) para leer el contenido del texto en voz alta con una voz humana sintetizada. Los usuarios competentes de lectores de pantalla TTS a menudo aumentarán su velocidad de lectura muy por encima de lo que la persona promedio puede leer visualmente.
Además de TTS, algunos lectores de pantalla pueden convertir el texto que se muestra en su pantalla a Braille. Con esta característica, los usuarios conectan un dispositivo externo llamado pantalla Braille actualizable que genera caracteres Braille en el teclado cuando un lector de pantalla escanea el texto. Así es como se ve una pantalla braille actualizable típica:
Algunos usuarios también prefieren usar TTS y una pantalla Braille actualizable juntos.
Los lectores de pantalla también están disponibles para dispositivos móviles. Dado que la mayoría de los teléfonos inteligentes y las tabletas no tienen teclados físicos, los lectores de pantalla para estos dispositivos dependen de las interacciones de la pantalla táctil (deslizar, tocar y tocar y mantener) para controlar la navegación y la reproducción de la página.
Cómo diseñar tu sitio web para lectores de pantalla
Dada la popularidad y la importancia de los lectores de pantalla actuales, los propietarios y desarrolladores de sitios web deben tener en cuenta la disponibilidad de los lectores de pantalla al crear y mantener sus servicios en línea. Esto asegura que todos los visitantes tengan acceso al mismo contenido y una experiencia óptima.
Los lectores de pantalla traducen páginas web leyendo archivos HTML directamente, por lo que todo lo que necesita el lector debe incluirse en este archivo. Estos son algunos pasos básicos que puede seguir para facilitar que los lectores de pantalla procesen sus páginas y hacer que su sitio sea más fácil de navegar para los usuarios de lectores de pantalla. Para aprovechar al máximo esta sección, le recomendamos que actualice el código HTML si es necesario.
Organice su código HTML con las etiquetas correctas.
Los lectores de pantalla usan etiquetas HTML para comprender el contenido y las regiones de una página y los elementos que un usuario puede seleccionar. Por ello, la forma más eficaz de alojar páginas web es estructurar tu código HTML con etiquetas de alto contenido semántico.
Cuando decimos que una etiqueta es «semánticamente rica», queremos decir que el nombre de la etiqueta en sí le dice al lector de pantalla su propósito. Etiquetas como
, ,
,
,
y ![]()
es una imagen y por lo tanto una. Por otra parte, Escribir HTML de esta manera es importante por varias razones. En primer lugar, los lectores de pantalla permiten a los usuarios recorrer etiquetas del mismo tipo. Un uso común para esto es para encabezados, un método de navegación importante para los usuarios de lectores de pantalla. Cuando el lector de pantalla detecta el uso
por ejemplo, permite a los usuarios saltar entre H2 de una manera similar a cómo los usuarios videntes pueden escanear una página leyendo los encabezados.
En segundo lugar, algunos elementos HTML como
). En su lugar, utilice la etiqueta adecuada si es posible.Finalmente,
Indique el idioma en la etiqueta.
Un lector de pantalla necesita saber en qué idioma está escrita una página web para saber cómo pronunciar las palabras a un usuario con TTS.
Los lectores de pantalla buscarán primero lengua atributo dentro etiqueta para información de idioma en toda la página. Por ejemplo, si una página está escrita en inglés, ábrala la etiqueta diría:
<html lang="en">
En caso de que aparezcan palabras extranjeras en el sitio web, lengua el atributo se puede colocar dentro de cualquier otra etiqueta, generalmente
para marcar un cambio de idioma temporal:
<html lang="en">
<body>
<p>I’m a paragraph in English.</p>
<p>“Hello” in Spanish is <span lang=“es”>hola</span>.</p>
<p lang="fr">Je suis un paragraphe en Français.</p>
</body>
</html>
Utilice roles ARIA.
funciones ARIA son valores que indican la función de un elemento de página o región para los lectores de pantalla. Se pueden colocar dentro
y Por ejemplo, si desea indicar que la lista de enlaces es un menú de navegación, puede colocar un punto de referencia ARIA de la siguiente manera:
<div role=”navigation”>
<ul>
<li>Product</li>
<li>Solutions</li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
Aquí, rol = «navegación» es un hito
También tenga en cuenta que los puntos de referencia de ARIA solo deben usarse en
y Si bien no todos los lectores de pantalla pueden detectar los puntos de referencia de ARIA, es una buena práctica usarlos en cualquier área de la página para la que la función no sea clara en función de los nombres de las etiquetas únicamente.
Escribe títulos descriptivos y primeras oraciones.
Así como los usuarios videntes navegan visualmente por el contenido de la página, los usuarios de lectores de pantalla pueden obtener una vista previa de los encabezados y párrafos para ver si el contenido es relevante para ellos. Por lo tanto, es una buena práctica hacer que sus títulos sean lo más descriptivos posible y comenzar sus párrafos para que sus lectores entiendan el contenido que viene.
Usa texto alternativo.
Si bien esto es sin duda un beneficio, el objetivo principal de Alt Text no es el SEO: es proporcionar a los lectores de pantalla subtítulos alternativos para su contenido multimedia. Cuando se encuentra con una imagen, video u otro elemento multimedia, su lector de pantalla leerá el texto alternativo de forma predeterminada, si está disponible. Si no se proporciona ningún texto alternativo, los lectores de pantalla ignoran la imagen o leen el nombre del archivo de la imagen.
Para mantener sus páginas accesibles, agregue siempre texto alternativo legible y descriptivo a cada pieza de contenido que no sea de texto, como imágenes, videos, íconos y elementos incrustados. Por ejemplo, un texto alternativo adecuado para esta imagen…
…quizás:
alt="professional baseball player Hank Aaron of the Atlanta Braves swinging a baseball bat in a baseball stadium”
Para obtener más consejos sobre cómo optimizar el texto alternativo para los lectores de pantalla y la clasificación de búsqueda, consulte nuestra guía de texto alternativo de imágenes.
Usa la puntuación correctamente.
Aquí hay otro consejo que ayuda a todos los visitantes del sitio, con la ayuda de un lector de pantalla y no. Para simular el habla, el lector de pantalla TTS se detiene por puntos, comas, párrafos nuevos y otros signos de puntuación. Para obtener la mejor experiencia posible, asegúrese de ingresar la puntuación correctamente.
Ejecute pruebas de accesibilidad del lector de pantalla.
Después de implementar las medidas anteriores, pruebe sus sitios web con un lector de pantalla para asegurarse de que las medidas de accesibilidad funcionan correctamente. Puede ejecutar estas pruebas usted mismo o contratar a un probador de accesibilidad para evaluar su sitio. También puede probar la Herramienta de prueba de accesibilidad web para respaldar su esfuerzo.
Si decide probar su propio sitio web, elija un editor de texto gratuito para su sistema operativo. Acceso a NV es una opción popular para los usuarios de Windows mientras que los dispositivos macOS lo hacen Narración Lector de pantalla incorporado.
Entonces conozca su lector de pantalla y conozca todas sus funciones básicas. Si prevé realizar más pruebas de accesibilidad, comprométase a desarrollar suficiente competencia en lectores de pantalla para navegar por sitios web con el monitor apagado. También le recomendamos que siga a los usuarios experimentados de lectores de pantalla para comprender cómo esos usuarios interactúan realmente con su sitio web.
Diseño de sitios web accesibles para lectores de pantalla
Al codificar y diseñar sus sitios web de acuerdo con los principios de accesibilidad, no solo hace que su sitio web sea agradable para los usuarios de lectores de pantalla, sino que también demuestra que se preocupa por su base de usuarios y se esfuerza por brindar la mejor experiencia posible para todos. En otras palabras, se trata simplemente de hacer lo correcto para quienes son más importantes para su negocio.
Relacionados
Escribir HTML de esta manera es importante por varias razones. En primer lugar, los lectores de pantalla permiten a los usuarios recorrer etiquetas del mismo tipo. Un uso común para esto es para encabezados, un método de navegación importante para los usuarios de lectores de pantalla. Cuando el lector de pantalla detecta el uso
por ejemplo, permite a los usuarios saltar entre H2 de una manera similar a cómo los usuarios videntes pueden escanear una página leyendo los encabezados.
En segundo lugar, algunos elementos HTML como
Finalmente,
Indique el idioma en la etiqueta.
Un lector de pantalla necesita saber en qué idioma está escrita una página web para saber cómo pronunciar las palabras a un usuario con TTS.
Los lectores de pantalla buscarán primero lengua atributo dentro etiqueta para información de idioma en toda la página. Por ejemplo, si una página está escrita en inglés, ábrala la etiqueta diría:
<html lang="en">
En caso de que aparezcan palabras extranjeras en el sitio web, lengua el atributo se puede colocar dentro de cualquier otra etiqueta, generalmente
para marcar un cambio de idioma temporal:
<html lang="en">
<body>
<p>I’m a paragraph in English.</p>
<p>“Hello” in Spanish is <span lang=“es”>hola</span>.</p>
<p lang="fr">Je suis un paragraphe en Français.</p>
</body>
</html>
Utilice roles ARIA.
funciones ARIA son valores que indican la función de un elemento de página o región para los lectores de pantalla. Se pueden colocar dentro
Por ejemplo, si desea indicar que la lista de enlaces es un menú de navegación, puede colocar un punto de referencia ARIA de la siguiente manera:
<div role=”navigation”>
<ul>
<li>Product</li>
<li>Solutions</li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
Aquí, rol = «navegación» es un hito
También tenga en cuenta que los puntos de referencia de ARIA solo deben usarse en
Si bien no todos los lectores de pantalla pueden detectar los puntos de referencia de ARIA, es una buena práctica usarlos en cualquier área de la página para la que la función no sea clara en función de los nombres de las etiquetas únicamente.
Escribe títulos descriptivos y primeras oraciones.
Así como los usuarios videntes navegan visualmente por el contenido de la página, los usuarios de lectores de pantalla pueden obtener una vista previa de los encabezados y párrafos para ver si el contenido es relevante para ellos. Por lo tanto, es una buena práctica hacer que sus títulos sean lo más descriptivos posible y comenzar sus párrafos para que sus lectores entiendan el contenido que viene.
Usa texto alternativo.
Si bien esto es sin duda un beneficio, el objetivo principal de Alt Text no es el SEO: es proporcionar a los lectores de pantalla subtítulos alternativos para su contenido multimedia. Cuando se encuentra con una imagen, video u otro elemento multimedia, su lector de pantalla leerá el texto alternativo de forma predeterminada, si está disponible. Si no se proporciona ningún texto alternativo, los lectores de pantalla ignoran la imagen o leen el nombre del archivo de la imagen.
Para mantener sus páginas accesibles, agregue siempre texto alternativo legible y descriptivo a cada pieza de contenido que no sea de texto, como imágenes, videos, íconos y elementos incrustados. Por ejemplo, un texto alternativo adecuado para esta imagen…
…quizás:
alt="professional baseball player Hank Aaron of the Atlanta Braves swinging a baseball bat in a baseball stadium”
Para obtener más consejos sobre cómo optimizar el texto alternativo para los lectores de pantalla y la clasificación de búsqueda, consulte nuestra guía de texto alternativo de imágenes.
Usa la puntuación correctamente.
Aquí hay otro consejo que ayuda a todos los visitantes del sitio, con la ayuda de un lector de pantalla y no. Para simular el habla, el lector de pantalla TTS se detiene por puntos, comas, párrafos nuevos y otros signos de puntuación. Para obtener la mejor experiencia posible, asegúrese de ingresar la puntuación correctamente.
Ejecute pruebas de accesibilidad del lector de pantalla.
Después de implementar las medidas anteriores, pruebe sus sitios web con un lector de pantalla para asegurarse de que las medidas de accesibilidad funcionan correctamente. Puede ejecutar estas pruebas usted mismo o contratar a un probador de accesibilidad para evaluar su sitio. También puede probar la Herramienta de prueba de accesibilidad web para respaldar su esfuerzo.
Si decide probar su propio sitio web, elija un editor de texto gratuito para su sistema operativo. Acceso a NV es una opción popular para los usuarios de Windows mientras que los dispositivos macOS lo hacen Narración Lector de pantalla incorporado.
Entonces conozca su lector de pantalla y conozca todas sus funciones básicas. Si prevé realizar más pruebas de accesibilidad, comprométase a desarrollar suficiente competencia en lectores de pantalla para navegar por sitios web con el monitor apagado. También le recomendamos que siga a los usuarios experimentados de lectores de pantalla para comprender cómo esos usuarios interactúan realmente con su sitio web.
Diseño de sitios web accesibles para lectores de pantalla
Al codificar y diseñar sus sitios web de acuerdo con los principios de accesibilidad, no solo hace que su sitio web sea agradable para los usuarios de lectores de pantalla, sino que también demuestra que se preocupa por su base de usuarios y se esfuerza por brindar la mejor experiencia posible para todos. En otras palabras, se trata simplemente de hacer lo correcto para quienes son más importantes para su negocio.
