Según la Organización Mundial de la Salud, en 2010 hubo 285 millones personas con discapacidad visual en el mundo, 39 millones de las cuales son ciegas. En 2021, hubo a nivel mundial al menos 2.2 mil millones personas que tenían una discapacidad visual de cerca o de lejos.

¿Por qué es importante crear sitios web para personas con discapacidad visual?

En el pasado, para leer un boletín, una revista u otro tipo de contenido, las personas con discapacidad visual tenían que encontrar una versión en audio, usar el sistema braille o que alguien lo leyera en voz alta. Hoy, gracias a internet, las personas con discapacidad tienen opciones más fáciles.

Por ejemplo, las personas ciegas pueden usar un software de lectura de pantalla, las personas con discapacidades motoras pueden usar dispositivos de asistencia y las personas sordas o con problemas auditivos pueden usar subtítulos y transcripciones multimedia para acceder al contenido en la web.

A pesar de esto, la accesibilidad web a menudo se pone en un segundo plano cuando se desarrolla un sitio web cuando debería ser una prioridad. Como resultado, el potencial de Internet sigue estando en gran medida fuera del alcance de las personas con discapacidad.

La importancia de la accesibilidad web y el diseño web para personas con discapacidades

Antes de entrar en cómo hacer que su sitio web sea accesible para personas con discapacidad visual, explicaremos la importancia de la accesibilidad web en su conjunto, junto con sus muchos beneficios.

Diseñar su sitio web teniendo en cuenta la accesibilidad web no solo es una obligación legal y lo correcto, pero también es bueno para el sitio web y el rendimiento comercial. Estas son las razones más importantes por las que debe hacer que su sitio web sea accesible:

Razones éticas

La primera razón se reduce a la ética. Como empresa, es su responsabilidad brindar igualdad de acceso a su sitio web a las personas con discapacidades. Un sitio web accesible ayuda a las personas con discapacidad a participar activamente en la sociedad.

Internet se ha convertido en una parte fundamental de la vida moderna, y para tener pleno acceso a la información y los recursos, es necesario poder acceder a Internet. Pero no todas las personas tienen las mismas habilidades para acceder a la web. Además de eso, para algunas personas con discapacidades, es más fácil comunicarse y hacer negocios en línea que en persona.

Cómplice legal

La accesibilidad web es un requisito legal en muchos países. En los EE.UU., el Ley de Rehabilitación de la Fuerza Laboral de 1973 requiere que la tecnología de la información y las comunicaciones proporcionada por las agencias federales sea accesible para las personas con discapacidades.

Si los usuarios con discapacidades no pueden acceder a información importante porque su sitio web no es accesible, pueden demandar a su empresa por discriminación digital. En 2018, aproximadamente 2,250 demandas fueron presentados en un tribunal federal solo en los EE. UU.

Reputación de marca mejorada

Hacer que su sitio web sea accesible hará que su marca se presente como socialmente responsable y demostrará que su empresa se preocupa por los demás. Esto mejorará la imagen de su marca entre toda su audiencia y, en última instancia, generará más ventas.

La investigación ha encontrado que 62% de los consumidores Prefiere comprar de empresas que defienden temas que reflejan sus valores y alejarse de aquellas que no lo hacen. Asegúrese de que su sitio web y su empresa sean socialmente responsables al priorizar la accesibilidad del sitio web.

Acceso a un gran mercado

Se informa que uno de cada cuatro adultos estadounidenses tiene una discapacidad. Incluso si las personas con discapacidades no son sus clientes principales, lo más probable es que formen parte de su audiencia.

¿Cree que estos consumidores comprarían en un sitio web que no es accesible y difícil de usar? Más del 80% de las personas con discapacidad no confíe en un proveedor de servicios debido a problemas, principalmente causados ​​por una accesibilidad web insatisfactoria. Un estudio de encuesta en el Reino Unido encontró que, en 2019, 4 millones de personas abandonó un sitio web minorista debido a dificultades de accesibilidad, lo que resultó en una pérdida de £ 17,1 mil millones (casi $ 24 mil millones).

Además, tenga en cuenta que los usuarios de Internet que usan dispositivos de asistencia tienen un gran poder adquisitivo (más de $ 350 mil millones solo en los Estados Unidos). Al dirigirse a este mercado de manera efectiva, está poniendo su negocio frente a una audiencia que a menudo está dispuesta a pagar más por un servicio premium.

SEO y experiencia de usuario mejorados

Las mejores prácticas de accesibilidad web coinciden con las de SEO, diseño web móvil (por ejemplo, velocidad) y usabilidad (garantizar que su sitio web sea fácil de usar).

Por ejemplo, agregar texto alternativo a las imágenes y transcripciones a los videos son las mejores prácticas tanto para la accesibilidad web como para el SEO.

La accesibilidad web también requiere que tenga su sitio web extremadamente bien organizado en términos de estructura de navegación, títulos y encabezados, contenido y más. Esto mejorará no solo sus esfuerzos de SEO, sino también la experiencia general del usuario y la facilidad de uso de su sitio.

Finalmente, una mejor práctica de accesibilidad web es tener un código limpio. Esto dará como resultado un mejor sitio web en general, con menos errores y un tiempo de carga más rápido.

Si bien en esta guía nos enfocamos en cómo crear un sitio web para personas con discapacidades visuales, tenga en cuenta que la accesibilidad web debe incluir elementos dirigidos a todo tipo de discapacidad, así como a las personas sin discapacidad que tienen otros impedimentos. Las principales categorías de discapacidad son:

• Auditivo (incluidas la sordera y los problemas de audición)
• Cognitivo (incluyendo problemas de aprendizaje, distracción e incapacidad para recordar grandes cantidades de información)
• Visual (incluyendo ceguera, baja visión y daltonismo)
• Motricidad (incluida la incapacidad para usar un mouse, tiempo de respuesta lento y control motor fino limitado)
• Neurológico
• Físico
• Discurso

También se debe diseñar un sitio web accesible para personas mayores, personas con discapacidades temporales o limitaciones situacionales, personas con conexiones lentas a Internet y personas que usan diferentes dispositivos, como teléfonos móviles o tabletas.

El proceso de hacer que su sitio web sea accesible será más concreto si comprender cómo las personas con discapacidad visual navegan por su sitio. Estas son las herramientas más comunes que utilizan las personas con discapacidad visual para navegar por la web:

1. Lectores de pantalla

Los lectores de pantalla son programas de software que convertir texto y otro contenido de un sitio web en voz sintetizada y permitir a los usuarios acceder al contenido En maneras diferentes. Los usuarios pueden dejar que este dispositivo lea todo de arriba a abajo, una línea a la vez, título por título, enlace por enlace y más.

Algunos de los lectores de pantalla más comunes son JAWS, NVDA y VoiceOver. Estos dispositivos también pueden ser utilizados por personas sordas y ciegas mediante un dispositivo de sistema Braille que convierte texto en Braille. Los teléfonos inteligentes y las tabletas tienen lectores de pantalla incorporados que se usan con gestos táctiles o de deslizamiento.

2. Navegadores especiales

Los navegadores especiales, como WebbIE, EIA y PnC Net, están diseñados específicamente para usuarios con discapacidades visuales. Estos pueden detectar la estructura de una página web y pasar la información al usuario en consecuencia.

La desventaja de los navegadores especiales es que no están tan desarrollados como los navegadores populares (como Google Chrome o Safari), por lo que es posible que no admitan algunas funciones nuevas, como integraciones con aplicaciones y extensiones, y disponibilidad en todo tipo de dispositivos.

3. Lupas de pantalla

No todas las personas con discapacidad visual necesitan un dispositivo de voz para acceder a Internet. Algunos de ellos, por ejemplo, aquellos con baja visión, usarán lupas de pantalla o funciones integradas en el dispositivo para mejorar la legibilidad.

Esto tiene un inconveniente: sin una estructura de página web diseñada para este uso, las relaciones entre los elementos de una página pueden perderse y los usuarios solo verán una parte de la pantalla a la vez.

Problemas comunes que experimentan las personas con discapacidad visual al navegar por la Web

Para comprender los problemas que enfrentan las personas con discapacidad visual en línea, es importante saber quiénes son las personas con discapacidad visual. Las discapacidades visuales se dividen en tres categorías principales:

• Algunas personas tienen discapacidades visuales irreversibles — la falta total de visión es el extremo de la escala de la ceguera. La mayoría de las personas “legalmente ciegas” (con un campo visual de 20 grados) tienen algo de visión.
• gente con visión baja (que es más común entre los ancianos) son aquellos cuya visión no se puede corregir a cerca de 20/20.
• personas con un daltonismo discapacidad (también conocida como color deficiencia visual) son incapaces de ver los colores de forma normal.

WebAIM realizó una evaluación de accesibilidad de 1,000,000 de páginas de inicio y descubrió que 97,4% de ellos tenían detectable Pautas de accesibilidad al contenido web (WCAG) 2.0 fracasos (en particular, en orden de prevalencia, estos fueron texto de bajo contraste, texto alternativo faltante para imágenes, enlaces vacíos, etiqueta de entrada de formulario faltante, botones vacíos y lenguaje de documento faltante).

Estos son algunos de los problemas más comunes que enfrentan las personas con discapacidad visual en un sitio web:

Áreas no accesibles a través del lector de pantalla

Los lectores de pantalla no pueden acceder fácilmente a algunos tipos de contenido, como elementos visuales, tablas y gráficos. Tome las tablas de datos como ejemplo. Sin usar etiquetas HTML específicas, un lector de pantalla no puede comprender la relación entre los elementos de las filas y las columnas.

Lo mismo ocurre con las imágenes. Si bien los lectores de pantalla son herramientas muy poderosas para las personas con discapacidad visual, no pueden analizar imágenes para extraer significado. Para comprender el contenido visual, estos dispositivos necesitan Texto alternativo.

Del mismo modo, los elementos interactivos (como menús, información sobre el mouseover, texto contraíble y reproductores multimedia) deben marcarse correctamente con el elemento HTML adecuado.

Contenido de la página no estructurado con encabezados

Mientras que un usuario sin discapacidades visuales puede escanear una página web y comprender cómo está organizada la página según el diseño, la proximidad o el diseño visual, un lector de pantalla no puede. Solo a través de una estructura adecuada con encabezados relevantes y asociaciones de códigos, las personas con discapacidad visual pueden tener una experiencia web comparable.

Títulos que no siguen una estructura

Una secuencia lógica y semántica en los encabezados es fundamental para los usuarios de lectores de pantalla.

Para encontrar información relevante, los usuarios con discapacidad visual utilizarán lectores de pantalla para buscar las secciones que les interesan. Para hacerlo con un lector de pantalla, utilizan una función que enumera los encabezados. Por eso es importante no solo que uses encabezados, sino que los uses en una secuencia lógica y ordenada.

Enlaces y botones sin descripción accesible

Algunos usuarios de lectores de pantalla utilizan una función que enumera todos los enlaces de una página. Por ejemplo, este es el caso cuando los usuarios buscan recursos específicos.

En este caso, tener texto ancla general en enlaces y botones (como “haga clic aquí”) no será de mucha utilidad y puede ser muy frustrante para un usuario con discapacidad visual. Los peores casos son los enlaces y botones vacíos y las URL no válidas. Tener enlaces rotos en su sitio web confundirá a los lectores y su experiencia general será mala. Del mismo modo, asegúrese de que se pueda hacer clic en todos sus botones de CTA y que se vinculen a las páginas de destino correctas.

Entradas sin etiquetas asociadas

Las etiquetas son importantes para ayudar a los usuarios a entender la entrada requerida en un control de formularioque es un control de interfaz de usuario que funciona como enlace entre el usuario y el servidor (como cuadros de lista, botones de opción y botones de comando).

Por ejemplo, tratar de completar un formulario con cuadros puede ser imposible para un usuario con discapacidad visual si no agrega etiquetas apropiadas y lógicas (por ejemplo, Nombre, Apellido, Dirección de correo electrónico, etc., con "Enviar" al final es una estructura lógica para un formulario).

Contenido no accesible por teclados

La mayoría de los usuarios de lectores de pantalla utilizan un teclado como herramienta principal para acceder a la web. Las características web que solo funcionan cuando se usa un mouse o una pantalla táctil (como hacer clic en un enlace) son inútiles en este caso.

Este es un tema importante no solo para los usuarios con discapacidad visual, sino también para aquellos que usan un teclado debido a discapacidades motoras.

Información de idioma faltante

Los lectores de pantalla asumen que todo el contenido de un sitio web está en el idioma predeterminado del usuario. Esto puede crear problemas cuando el software lee el contenido en un idioma extranjero utilizando las reglas de pronunciación del inglés. El texto puede ser una combinación de varios idiomas (por ejemplo, "Él la miró y dijo 'C'est la vie' antes de irse"). En casos como este, los usuarios pueden confundirse si el lector de pantalla no está programado para las reglas de pronunciación que debe usar.

Cómo hacer que su sitio web sea accesible para personas ciegas y deficientes visuales

Hay algunos factores clave en lo que respecta a la accesibilidad web para personas con discapacidad visual. Para ser accesible a las personas ciegas, un sitio web debe ser:

• Perceptible: En primer lugar, las personas deben poder comprender la información de su sitio. Por obvio que parezca, este principio a menudo se ignora en el desarrollo web. Por ejemplo, las personas ciegas no pueden percibir información visual como gráficos y diseño.
• Operable: La interfaz de un sitio web no puede exigir a los usuarios que realicen ninguna acción que no puedan realizar. Algunas personas con discapacidad visual usan dispositivos adaptables que emulan teclados en términos de funcionalidad, por lo que su sitio web no debería requerir que los usuarios usen un mouse. Es importante hacer que el contenido web sea accesible mediante teclado.
• Comprensible: El contenido debe ser fácil de seguir y comprender para todos los usuarios. Tiene que ser lo más simple y claro posible. Tenga en cuenta que es posible que sus usuarios no puedan comprender oraciones complejas debido a problemas de aprendizaje o cognitivos.
• Robusto: Por último, el contenido debe ser compatible con las tecnologías de asistencia y los dispositivos que utilizan las personas con discapacidad visual.

Si bien algunos sitios web eligen crear una versión separada de su sitio web que sea compatible con lectores de pantalla y diseñada para personas ciegas, generalmente no es una buena idea a menos que se actualice periódicamente.

Sugerimos crear una versión separada solo si las otras formas de hacer que su sitio web sea accesible para personas con discapacidades visuales parecen no funcionar, si puede actualizar el segundo sitio web regularmente o si está tratando específicamente de dirigirse a personas con discapacidades visuales. y proporcionar la mejor experiencia de usuario posible.

En la mayoría de los casos, puede use las siguientes mejores prácticas para hacer que su sitio web sea accesible para personas ciegas y deficientes visuales.

Proporcione suficiente contraste de color

Utilice un alto contraste entre el color de fondo y el texto. Esto es especialmente importante para los usuarios daltónicos. Como mínimo, debe cumplir WCAG 2.0 Requisitos AA, que requieren una relación de contraste de 4,5:1 para texto normal y 3,1 para texto grande. El texto grande se considera una fuente de 14 o 18 puntos o texto en negrita.

Puede utilizar una herramienta como Colorzilla para comprobar el valor de cualquier elemento. Además, la mayoría damas de contraste de color comprobar el cumplimiento de esta norma.

Dado que muchos usuarios con problemas de visión resaltan el texto como un truco para aumentar el contraste, evite usar técnicas de JavaScript o CSS que impidan que los usuarios resalten. Como consejo final, no use patrones de fondo abarrotados o con marcas de agua que puedan ser difíciles de leer o que distraigan a algunos usuarios.

Limite el color y no confíe en él

El uso de demasiados colores puede distraer y confundir. También puede dificultar que los usuarios identifiquen elementos importantes, así que trate de limitar la cantidad de colores que usa.

Para las personas daltónicas, es especialmente importante que no se base únicamente en el color para transmitir información (p. ej., "haga clic en el botón rojo"). Para hacer eso, apéguese a algunos colores e intente no usar verde sobre rojo o rojo sobre verde para evitar confusiones para los usuarios daltónicos.

Evite el texto sobre las imágenes de fondo

Agregar texto sobre imágenes de fondo a menudo resulta en un problema, ya que es posible que la imagen no tenga suficiente contraste con el color del texto. A menos que se asegure de que haya suficiente contraste usando herramientas en línea para probar esto, evite usar texto sobre imágenes de fondo por completo.

Si elige usar texto sobre imágenes de fondo, asegúrese de usar los colores correctos y asegúrese de que haya suficiente contraste para que el texto sea fácil de leer incluso para los usuarios daltónicos.

Habilitar el ajuste manual del tamaño de fuente

El tamaño de fuente es uno de los problemas más comunes con la accesibilidad web para personas con problemas de visión.

Dado que no existe el mejor tamaño de fuente, debe tener páginas adaptables donde los usuarios puedan ajustar manualmente el tamaño de fuente. Dicho esto, haz el tamaño de fuente predeterminado lo suficientemente grande (al menos 10 puntos) para que la mayoría de los usuarios no tengan que ajustarlo manualmente.

Si la mayoría de sus visitantes son personas mayores o personas con problemas de visión, aumente el tamaño de fuente predeterminado y considere agregar un botón que cargue un tamaño de fuente más grande. Finalmente, asegúrese de que el diseño del contenido de su sitio web no se rompa cuando el zoom de solo texto esté habilitado. Eso podría hacer que el texto se superponga con el contenido adyacente y se vuelva ilegible.

Priorizar información importante

Tener el contenido más importante en la parte superior de la página es bueno para todos los usuarios y también para los motores de búsqueda. Pero es particularmente útil para las personas que usan tecnología de asistencia, quienes pueden decidir rápidamente si una página incluirá la información que están buscando.

Ya sea una publicación de blog o una página de producto, asegúrese de describir brevemente el contenido e incluir la información más importante desde el principio.

Haga que su sitio web solo sea accesible desde el teclado

Dado que algunos usuarios con discapacidades visuales dependen solo de los teclados para navegar por la web, permita los atajos de teclado y los comandos para que sea más fácil navegar por su sitio. En general, no haga que los dispositivos como un mouse sean un requisito.

Por ejemplo, los usuarios que utilizan un teclado utilizarán el botón de tabulación para avanzar campos al completar un formulario de contacto. Para brindar una buena experiencia, debe usar el atributo "tabindex" para indicar el orden correcto de los campos a seguir.

Limite el número de enlaces

Debe limitar la cantidad de enlaces en sus páginas, incluso sin tener en cuenta la accesibilidad web, ya que eso puede ser frustrante para los usuarios (y tener demasiados enlaces salientes es malo para el SEO).

Pero limitar los enlaces en una página se vuelve especialmente importante cuando se diseña un sitio web para personas con discapacidad visual. Con algunos lectores de pantalla, lo primero que escuchan los usuarios cuando llegan a una página es la cantidad de enlaces, lo que puede ser abrumador si hay muchos.

Agregar texto de anclaje relevante

Algunos lectores de pantalla tienen un modo de navegación que hace que la herramienta lea todos los enlaces de una página si el usuario está buscando recursos específicos. En este caso, tener un texto de anclaje como "Haga clic aquí" será inútil y molesto.

Cuando se trata de elegir las palabras en las que insertará sus enlaces, asegúrese de agregar texto que describa cuál es la página enlazada (p. ej., "infórmese sobre los mejores creadores de sitios web disponibles").

Proporcionar contenido alternativo

Para las personas con discapacidad visual que utilizan la tecnología para acceder al contenido, se vuelve importante brindar alternativas para algunos tipos de contenido.

Recuerde que los lectores de pantalla solo pueden leer texto y código, por lo que los usuarios no pueden obtener información que está presente en los recursos visuales. Si una imagen no tiene texto alternativo, el lector de pantalla lo omitirá. Si tiene texto alternativo, describirá el tipo de contenido (por ejemplo, "imagen") y leerá el texto alternativo.

Incluya texto alternativo para imágenes, atributos alternativos para gráficos y contenido alternativo para todos los demás medios. (por ejemplo, transcripciones o descripciones de contenido de video o imágenes en movimiento). Asegúrese de que sean breves y vayan al grano rápidamente, e inclúyalos solo si la información es importante.

Usar texto alternativo vacío

Para los activos visuales que no son necesarios, podría ser mejor que los lectores de pantalla los omitan por completo. Dado que los lectores de pantalla leen código y no solo texto, algunos elementos pueden resultar molestos para los usuarios con problemas de visión cuando intentan acceder al contenido.

Por ejemplo, si tienes imágenes decorativas que realmente no agregan valor o información para las personas con discapacidades visuales, use texto alternativo vacío para indicar a los lectores de pantalla que omitan este código.

Organice el contenido con un título y encabezados descriptivos

Los lectores de pantalla leen el título como lo primero que hacen los usuarios cuando llegan a una página, y luego los usuarios tienen la opción de saltar de un título a otro. Haga que su título sea lo más descriptivo posible e incluya una tabla con "

” elementos en la parte superior para ayudar a los usuarios a identificar los encabezados.

Use CSS correcto para el diseño y HTML para la estructura. Por ejemplo "

” para párrafos, “

,” ”

”, etc., para encabezados, y “

• ,” “

• • ," y "

• 1. ” para listas. Esto ayudará a los lectores de pantalla a comprender la estructura de su contenido y comunicarlo de manera efectiva.
     

     Reduzca la cantidad de anuncios en su página

     Tener demasiados anuncios en su sitio web puede crear una mala experiencia para el usuario, especialmente para los usuarios de lectores de pantalla que no pueden distinguir fácilmente este tipo de contenido de otro contenido en su página.

     Para los anuncios visuales, tenga en cuenta las mismas consideraciones que tendría para otros tipos de contenido visual (p. ej., agregar texto alternativo), pero también considere colocar la palabra "anuncio" al principio del texto alternativo. De esta forma, las personas con discapacidad visual sabrán de qué tipo de contenido se trata y podrán decidir si quieren consumirlo o no.

     Agregar información de idioma

     Agregar información de idioma es especialmente importante si su sitio web tiene una audiencia internacional y contenido escrito en varios idiomas.

     Especifique el idioma usando un atributo "lang" para que los dispositivos de asistencia puedan descifrarlo y usar las reglas de pronunciación adecuadas. De esta forma, un lector de pantalla sabrá cuándo encuentra contenido que está en un idioma extranjero y evitará causar confusión a los usuarios con discapacidad visual.

     Usa las herramientas adecuadas

     Afortunadamente, existen muchas herramientas en línea gratuitas que los diseñadores y desarrolladores web pueden usar para garantizar que un sitio web cumpla con los estándares de accesibilidad. Estas son algunas de las herramientas más útiles:

     • Color seguro proporciona sugerencias de colores compatibles con AA y AAA basadas en los elementos existentes de su sitio web.
     • Analizador de contraste de color encuentra elementos de texto que no son compatibles en términos de contraste de color.
     • NVDA le ayuda a ver un sitio web desde la perspectiva de una persona con discapacidad visual.
     • Onda de WebAIM encuentra errores en cuanto a la accesibilidad a su sitio web.

     Conclusión: creación de un sitio web que sea accesible para todos

     En un mundo experto en la web con personas con discapacidad visual una gran parte de los usuarios de Internet, aplicar estas buenas prácticas para que tu sitio web sea accesible es fundamental. Teniendo en cuenta que uno de cada cuatro adultos en los Estados Unidos tiene una discapacidad, tener un sitio web accesible para todos no solo es socialmente responsable sino también beneficioso para su negocio.

     Además de las complicaciones legales, puede salvarlo, un sitio web accesible para todos mejorará la reputación de su marca, mejorará el SEO y elevará la experiencia del usuario.

     Al crear un sitio web para personas con discapacidad visual, recuerde, en un alto nivel, que sea perceptible, operable, comprensible y sólido. Las personas con discapacidad visual no solo deberían poder acceder a su contenido, sino que también es importante que puedan hacerlo de la manera más fácil posible, sin distracciones ni complicaciones.

     Recursos adicionales de accesibilidad web para ciegos

     Encuentre recursos adicionales de accesibilidad web para desarrolladores web, diseñadores web y usuarios con discapacidades visuales a continuación.

     Para desarrolladores web

     Para diseñadores web

     • Los 15 mejores software de diseño web: una guía para elegir el software de diseño web adecuado.
     • El laboratorio de color— Seleccione un color y vea cómo se ve junto a otro, con diferentes combinaciones de fondo (en escenarios simulados de daltonismo).
     • Vischeck — Cargue una imagen para comprobar la visibilidad de los gráficos y el texto y para ver cómo se ven las personas con daltonismo y otras discapacidades visuales.
     • Colores web seguros — Información y herramientas de diseño para comprender qué colores se pueden confundir y cómo evitar perder pistas de color.

     Para usuarios con discapacidad visual: