Saltar al contenido

20 grandes ejemplos de sitios web accesibles

abril 7, 2021

A principios de este año, presentamos una solución llamada accessiBe * que hace que los sitios web sean accesibles con solo un fragmento de código.

Somos usuarios orgullosos de accessiBe en Convince & Convert. La interfaz permite a cada visitante del sitio web con accessiBe instalado ajustar el diseño del sitio web, la interfaz de usuario y la accesibilidad a sus necesidades específicas.

Soy una gran solucion. Para darle una idea de cómo son los sitios web con accessiBe y cómo ayudan a los usuarios con discapacidades, he compilado esta lista de ejemplos de sitios web que son accesibles con accessiBe.

* Para brindar total transparencia: somos clientes de Access, y accessiBe también es cliente de Convince & Convert.

Aquí hay 20 ejemplos asombrosos de sitios web accesibles.

Parte 1: Hostelería y viajes

1. Hilton

Perfil seguro para convulsiones

El Hilton Columbus at Easton es uno de los hoteles favoritos entre los viajeros de negocios y de placer, los lugareños y los grupos por igual. Para atender a todos sus visitantes en línea, el uso de accessiBe en su sitio web permite a los visitantes elegir el perfil de accesibilidad adecuado para sus propias preferencias.

La función Perfil seguro para convulsiones elimina los frascos y reduce el color de la pantalla. El perfil permite a los usuarios epilépticos y con convulsiones navegar rápidamente por el sitio web al reducir el riesgo de convulsiones causadas por animaciones destellantes o sesgadas y combinaciones de colores peligrosas.

2. Hotel Cóndor

Perfil de discapacidad visual

Perfil del sitio web de Condor para personas con discapacidad visual

Además de más funciones proporcionadas por accessiBe, la función Visually Impaired Profile mejora los sitios web de los clientes para adaptarse a la mayoría de las discapacidades visuales, incluida la visión de túnel, las cataratas y el glaucoma. Aquí, cuando los huéspedes de Condor navegan por su sitio web para encontrar una tienda en Brooklyn, pueden hacerlo fácilmente ya que el programa cambia las orientaciones rápidamente.

3. Snacknation

Perfil cognitivo de la discapacidad

Ejemplo de sitio web accesible de Snacknation

Snacknation es un servicio de entrega de bocadillos para aquellos que desean enviar cajas de bocadillos a su personal, amigos e incluso a su propia casa.

Examinar todas las opciones de bocadillos sin capacidad de acceso puede ser un desafío para algunos visitantes, especialmente aquellos con discapacidades cognitivas, como autismo, dislexia y CVA.

Sin embargo, el perfil de discapacidad cognitiva ayuda al público a leer y concentrarse. Este perfil proporciona funciones auxiliares que se centran en las funciones esenciales del sitio web, como las opciones de encabezado y barra de menú en un cuadro.

4. Planeta único

Un perfil compatible con el TDAH

El perfil compatible con TDAH ayuda a los visitantes a centrarse en partes específicas del sitio web y a eliminar las distracciones. Este perfil está especialmente diseñado para ayudar a las personas con TDAH y trastornos del neurodesarrollo a navegar, leer y dirigirse al sitio web fácilmente, y es una excelente manera de mantener a los usuarios enfocados en lograr los objetivos de conversión.

5. DELSEY

Fuente legible para personas con discapacidad visual

Como todos sabemos, una buena tipografía ayuda a un cliente potencial a sentirse más seguro acerca de su lista de productos, su negocio e incluso los anuncios en línea. Los ajustes de contenido de AccessiBe permiten que las personas utilicen la función “Fuente legible”. El sitio web cambia rápidamente a una fuente simple mientras conserva el mismo diseño y elementos de diseño de la marca.

Parte 2: Servicios legales y automotrices y financieros

6. Distribuidor

Títulos destacados para personas con discapacidad visual

Ejemplo de sitio web accesible de DealerON

7. Yokohama

Enlaces destacados para personas con discapacidad visual

Ejemplo de sitio web accesible de Yokohama

Si necesita ayuda para enfocarse en ciertos aspectos de un sitio web, pero no necesita funciones adicionales que proporcionen ajustes de ‘Perfil’ de AccessiBe, puede usar algunas de las opciones de ajuste más simples, como Resaltar títulos y Resaltar enlaces. Como se muestra en las páginas de inicio de DealerON y Yokohama, esta función crea recuadros con los principales títulos y enlaces en los sitios web para que los visitantes puedan determinar rápidamente dónde están y adónde deben ir.

8. StepStone

Lupa de texto para personas con discapacidad visual

Ejemplo de sitio web accesible de Stepstone

A veces, el texto es pequeño y difícil de leer. Debido a que puede agrandar o acercar el texto, hace que sea más fácil y cómodo de leer. Especialmente para aquellos con discapacidades visuales, el ajuste AccessiBe Text Magnifier permite a los usuarios mover el cursor sobre el contenido y agrandar el texto automáticamente.

9. Fiscal del Estado de Miami

Alinear el centro para personas con discapacidad visual

Centro de alineación para personas con discapacidad visual

Como se muestra en el sitio web del Fiscal del Estado de Miami, la herramienta de alineación del centro AccessiBe captura perfectamente todo el texto. Esta función funciona perfectamente para partes de sitios web que contienen una gran cantidad de texto en la pantalla. El texto alineado al centro es más fácil de leer para las personas con discapacidad visual. Además, los visitantes también tienen la opción de alinear el texto de izquierda a derecha.

10. Colegio de Abogados de Florida

Contraste oscuro para personas con discapacidad visual

Contraste oscuro para personas con discapacidad visual

Muchos programas y aplicaciones ahora tienen “modo oscuro” en nuestros dispositivos móviles. Gracias a accessiBe, muchas marcas ahora pueden tener una función similar en sus sitios web.

Los visitantes pueden ajustar los colores según sus necesidades y reducir la fatiga visual con la función de contraste oscuro. Esto también está dirigido a personas con sensibilidad leve y que no pueden navegar por sitios web con fondos brillantes.

Parte 3: Salud y tecnología

11. Departamento de Salud de Louisiana

Monocromo para personas con discapacidad visual

Monocromo para personas con discapacidad visual

Al igual que la función de contraste oscuro, la función monocromática de accessiBe funciona muy bien para reducir los colores brillantes en los sitios web. Además, es una gran solución para quienes sufren de discapacidad visual del color. Como se muestra en la página de inicio del Departamento de Salud de Louisiana, la función monocromática convierte las páginas en un tono gris claro sin obstruir el contenido.

12. Dexcel

Monocromo para discapacitados visuales

Dexcel Monochrome para personas con discapacidad visual

En este ejemplo en el sitio web de Dexcel, accessiBe proporciona ajuste de color de áreas de contenido específicas en un sitio web. Ya sea que se trate de texto o título, es posible que los espectadores con diferentes niveles de daltonismo no puedan ver sus botones o vínculos debido al color. Esta característica les permite ajustar fácilmente los colores de acuerdo con sus necesidades visuales.

13. Pacific Life

Modo de lectura para discapacidades visuales, motoras y cognitivas

del ejemplo del modo de lectura de Pacific Life

En este ejemplo, puede ver cómo un espectador también puede ajustar la orientación de la pantalla. Esta sección está diseñada específicamente para ayudar a las personas con discapacidad visual, cognitiva y motora. El modo de lectura elimina con todos los gráficos e imágenes en movimiento y mantiene todo el texto en la pantalla para que los espectadores puedan concentrarse completamente en la información. Además, esta función también es fácil de imprimir, ya que le ahorra tinta si decide utilizarla para sus necesidades físicas.

14. Belkin

Resaltar ejemplo de desplazamiento

Uno de los conceptos clave detrás de las funciones de orientación de AccessiBe es que ayuda a reducir las distracciones y el ruido al proporcionar elementos de orientación. En el sitio web de Belkin, puede ver cómo la función de desplazamiento destacado permite a los espectadores usar el cursor para hacer clic en partes específicas del sitio. Esto se enfoca directamente en el tema ya que el programa enfatiza la parte que necesita.

15. Mobileye

Ocultar imágenes para discapacidades visuales, motoras y cognitivas

Ocultar imágenes de Mobileye para la discapacidad cognitiva motora visual

Muchos sitios web contienen imágenes en movimiento o animaciones que pueden resultar difíciles para algunos visitantes. Con accessiBe, los visitantes tienen la opción de ocultar imágenes para reducir las distracciones. Con todo el espacio en blanco que queda en la pantalla, el diseño general y las dimensiones del sitio web se mantienen fieles a sí mismos, por lo que las marcas no tienen que preocuparse de que su contenido se reconstruya de una manera inusual.

Parte 4: Ropa y venta al por menor

16. Allsaints

Enlaces útiles para discapacidades visuales, motoras y cognitivas

Enlaces útiles para el ejemplo de discapacidad visual

Para los visitantes a quienes les resulta difícil navegar por un sitio web, la útil función de accesibilidad de enlaces les brinda a los visitantes un acceso rápido a un menú desplegable con todos los enlaces de un sitio web.

17. DC Shoes

Ajustes de fuentes y letras para discapacidades visuales, motoras y cognitivas

Si bien las funciones del perfil de acceso están predefinidas, los espectadores pueden elegir otros elementos que se adapten a sus necesidades. Por ejemplo, en la página de inicio de DC, puede ver lo fácil que es ajustar el tamaño de fuente o el espaciado de letras cuando sea necesario. Esta personalización permite a las personas obtener la vista de pantalla perfecta para su discapacidad y preferencias particulares.

18. Gafas de EE. UU.

Alto contraste para personas con discapacidad visual

19. Kappa

Baja saturación para personas con discapacidad visual

Sitio web de baja saturación para personas con discapacidad visual

Las personas con discapacidad visual deben tener la opción de ajustar el brillo de las pantallas para mejorar la legibilidad y el diseño. La función de alto contraste funciona como un filtro para hacer que las imágenes y el texto sean más fáciles de leer y que el color sea más notorio.

Aquellos con visión limitada o baja pueden ver mejor el contenido usando un alto contraste, en comparación con un esquema de color normal. La saturación baja funciona de manera similar para adaptarse a aquellos que son sensibles a imágenes brillantes y audaces.

La página de inicio de GlassesUSA muestra la función de alto contraste, donde se mejoran los colores de las sombras, y en la página de inicio de Kappa, la baja saturación supera las imágenes, como se ve en la camiseta de la modelo.

20. Taylor Guitar

Navegación con teclado para personas con problemas de motor

Navegación con teclado para personas con problemas de motor

Con la función de usuario ciego, el sitio web de Taylor Guitar es compatible con los lectores de pantalla instalados en la computadora o el teléfono inteligente del usuario.

La función de navegación por teclado permite a las personas con discapacidades motoras operar el sitio web utilizando sus teclados con atajos como “M” para menús y “H” para títulos.

Conclusión

La accesibilidad del sitio web es más importante que nunca. Para brindar igualdad de oportunidades y experiencias a las personas con discapacidad, es fundamental que su sitio web sea accesible para todos. De esa manera, sus relaciones con sus consumidores crecen mucho más allá de la pantalla de una computadora.