12 Ejemplos Grandiosos de Sitios Web Accesibles Que Destacan

Aquí, en DreamHost, creemos que todo el mundo debería poder usar cualquier sitio web en internet, sin importar la discapacidad que puedan tener. Sin embargo, mientras que nos preocupamos por la accesibilidad web, también entendemos que diseñar un sitio web que sea accesible y visualmente atractivo puede ser un reto. 

Las buenas noticias son que puedes diseñar sitios web accesibles sin sacrificar el impacto visual. De hecho, algunos sitios web hermosos que hay allá afuera están diseñados pensando en la accesibilidad — de lo cual podríamos aprender un par de cosas. 

[glossary_term_es title=”Accesibilidad” text=”La accesibilidad es la práctica de hacer que un sitio web sea accesible para tantos usuarios como sea posible. Los sitios web accesibles pueden ser vistos por cualquier persona usando cualquier dispositivo.”]

En esta publicación, comenzaremos por mostrarte cómo se ve la accesibilidad web correcta, y cubriremos algunos estándares de accesibilidad web diseñados para ayudar a democratizar el acceso a los sitios web. Luego, te mostraremos 12 de los mejores ejemplos de accesibilidad web en internet y veremos lo que puedes aprender de ellos.

¡Manos a la obra!

Cómo Se Ve La Accesibilidad Web Grandiosa

Según El Banco Mundial, más del 15% de la población mundial tiene algún tipo de discapacidad. Estas pueden incluir:

• Discapacidades Visuales: Algunos usuarios tienen discapacidades visuales que inhiben su habilidad de ver claramente o percibir contrastes de color. Un rango de personas puede entrar en esta categoría, incluyendo usuarios ciegos, o aquellos que son daltónicos. Para estos usuarios discapacitados, es recomendado que utilices descripciones de audio o combinaciones accesibles de color (por ejemplo, evita usar colores de texto oscuros en fondos oscuros). 
• Discapacidades Auditivas: Los usuarios con discapacidad auditiva pueden incluir personas sordas y aquellas con pérdida parcial de la audición (personas con dificultades auditivas/HoH). Los subtítulos para el contenido de audio pueden proporcionar a estos usuarios una experiencia más accesible.
• Discapacidades Físicas: Algunas personas tienen discapacidades de movilidad que pueden afectar su destreza y habilidad para realizar movimientos precisos, lo que posiblemente dificulte el uso de un mouse. Aquellos con discapacidades físicas pueden ser usuarios de tecnología de asistencia. Asegúrate de que tu sitio esté correctamente codificado para dispositivos de asistencia con el fin de proporcionar contenido accesible para usuarios con discapacidades físicas.
• Discapacidades Cognitivas: Algunos usuarios pueden tener discapacidades cognitivas como dislexia, demencia o trastorno del procesamiento auditivo. Puedes considerar el uso de una fuente específica, como Dyslexie. También debes asegurarte de que cualquier contenido de audio tenga una transcripción disponible para aquellos con discapacidades del procesamiento auditivo.

Es importante mantener todas estas discapacidades muy en cuenta cuando estés creando tu sitio web para asegurarte de que no haya barreras para los usuarios con discapacidades. Para ayudar a los diseñadores web con esto, W3C ha desarrollado un conjunto de Directrices de Accesibilidad de Contenido Web (WCAG).

Una buena accesibilidad web quiere decir que te estás apegando a estas directrices y que estás siguiendo con cuidado los 4 principios de accesibilidad de contenido web. Estos principios establecen que todos los sitios web deberían:

1. Perceptible
2. Operable
3. Entendible
4. Robusto

Asegurar que tu sitio web sea “operable” puede significar implementar una navegación amigable con el teclado, para aquellas personas que no usan un mouse. “Perceptible” puede significar asegurarte de usar altos contrastes de color para las personas con impedimentos visuales.

¿Estás listo para ver cómo se ven estos principios en la práctica? A continuación, te mostramos 12 ejemplos de sitios web que están ejerciendo el diseño accesible de forma correcta. 

12 Grandiosos Ejemplos de Accesibilidad Web Para Inspirarte

A continuación enumeramos nuestros ejemplos favoritos de accesibilidad web. Estos 12 sitios web han puesto el estándar cuando se trata de accesibilidad.

1. Scope

Scope es una organización benéfica de igualdad y discapacidad ubicada en Wales e Inglaterra dedicada a crear una sociedad más justa e igualitaria. Como líder de la igualdad y discapacidad, esperarías que el sitio web de esta organización sea tan accesible como sea posible — y lo es.

No solo se adhiere completamente a las directrices WCAG 2.0 y WCAG 2.1, sino que también el sitio es inclusive personalizable para usuarios individuales. Por ejemplo, los usuarios pueden cambiar los colores del sitio, incrementar el tamaño del texto, o inclusive encender narración de texto para que el contenido les sea leído en voz alta.

Si ves la parte superior izquierda de la página inicial, verás una pestaña llamada Accessibility. Haz clic en ella y el sitio te llevará a su página de accesibilidad, la cual incluye instrucciones sobre cómo adaptar la experiencia a tus necesidades, se enlaza con tecnologías de asistencia, y una lista de problemas de accesibilidad conocidos en los que se está trabajando actualmente.

Scope, usa frases cortas y fuentes claras, grandes a través del sitio para una legibilidad máxima. Además, el sitio es completamente compatible con software de lectura de pantalla.

A pesar de ser un fantástico ejemplo de accesibilidad web, el equipo de Scope continúa realizando mejoras. Cada 4 meses, ellos prueban la accesibilidad del sitio web y realizan actualizaciones donde sea necesario.

2. Harvard University

La educación de Harvard no es su único punto fuerte. El sitio web de la universidad de renombre mundial también se destaca por su accesibilidad, ofreciendo una variedad de herramientas de lectura, subtítulos multilingües en videos y esquemas de color cuidadosamente seleccionados que satisfacen las necesidades de los visitantes con discapacidades visuales.

El menú de navegación de Harvard también merece elogios por su accesibilidad. Es simple pero efectivo, con texto grande y fácil de leer en un color de alto contraste. Además, es claro y fácil de encontrar.

3. Paralympic.org

Paralympic.org es el sitio oficial del Comité Internacional de Paralímpicos (IPC). El IPC es un poderoso defensor de la inclusión social y su sitio web es el testamento de eso. 

Cuenta con navegación de pestañas amigable con el teclado y un botón de “regreso al inicio” instantáneo para hacer fácil la movilidad en la página. Las imágenes y videos son grandes y altamente visibles, y hay suficiente espacio en blanco para resaltar los elementos visuales. 

Si vas a la página inicial, notarás una funcionalidad para ajustar el tamaño del texto en la esquina superior derecha. Es fácilmente visible y le permite a los usuarios con impedimentos visuales personalizar rápidamente el tamaño del texto para que se ajuste a sus necesidades.

4. Walmart

Uno de los requisitos de WCAG para sitios web accesibles es que deben ser “visibles al enfoque”, lo que significa que la parte del sitio que se está utilizando está resaltada. El sitio web de Walmart es un excelente ejemplo de esto. Tiene una gran cantidad de elementos interactivos como botones, enlaces y campos de formulario, pero los visitantes solo pueden enfocarse en uno a la vez, y el que están utilizando está claramente resaltado para una máxima visibilidad.

También es fácil navegar entre diferentes elementos interactivos, desde el menú de navegación hasta diferentes botones, la barra de búsqueda, enlaces a tu página de cuenta y carrito de compras, y más, ya sea que utilices la navegación con mouse o teclado.

5. KidsWish

KidzWish es una organización que proporciona terapias, servicios de apoyo y una fiesta anual de Navidad para niños con desventajas o discapacidades. Sirve a muchas personas con diferentes discapacidades, entonces, naturalmente, tenían que construir un sitio web que fuera tan accesible como fuera posible.

Y definitivamente alcanzaron esa meta. El sitio web de KidzWish está perfectamente diseñado, con una estructura lógica, navegación amigable con el teclado, colores de alto contraste y textos con fuentes grandes. Además, es fácil navegar con elementos prominentes e interactivos.

El diseño también es amigable con los niños. Presume un esquema de colores atrevidos y brillantes, y muchos gráficos divertidos.

6. Nomensa

Nomensa es una agencia estratégica de diseño de experiencia de usuario (UX) con sede en Londres. Ponen tanto énfasis en el diseño accesible que ofrecen una prueba de accesibilidad web que sus clientes actuales y potenciales pueden tomar para ver cómo sus sitios se comparan con los estándares internacionales.

La agencia luego ofrece servicios de diseño para ayudar a los clientes a corregir cualquier problema descubierto por la herramienta de prueba de accesibilidad.

¡Adivina qué! El cofundador de la firma es copresidente del Consorcio World Wide Web (W3C) y ayudó a escribir las pautas WCAG que dirigen las mejores prácticas de accesibilidad web. ¡No es de extrañar que Nomensa tome las soluciones de accesibilidad tan en serio!

7. Ovo Energy

Ovo Energy es una empresa energética con sede en el Reino Unido. Su sitio web presenta información sobre tarifas y paquetes e incluye un portal de inicio de sesión principal para que los clientes administren sus cuentas.

La empresa ha hecho un trabajo maravilloso al hacer que el sitio sea accesible para todos mediante el uso de texto grande y legible y una interfaz clara. También incorpora la navegación por teclado para facilitar la navegación por el sitio.

Los diseñadores se esforzaron al máximo para garantizar que el sitio sea accesible para usuarios con discapacidades visuales y auditivas. Hay servicios de SignVideo para usuarios de lenguaje de señas británico, y el contraste de color cumple con las pautas de WCAG.

Los clientes también pueden solicitar facturas en braille y formatos más grandes. Además de todo esto, el sitio es compatible con tecnología de asistencia.

8. Bleacher Report

El sitio de noticias deportivas Bleacher Report hace algo diferente que resulta extremadamente útil para los usuarios que acceden a su sitio utilizando lectores de pantalla o controles de teclado. Los primeros puntos de enfoque son la notificación de cookies, la Política de Privacidad y los Términos de Uso, y si haces clic en el enlace externo para estos, se abren en una nueva ventana.

Para los usuarios sin discapacidades, esto puede no parecer importante, pero esto brinda a todos los visitantes del sitio de Bleacher Report acceso a información legal importante. En la mayoría de los sitios, las alertas legales y de cookies están al final de la página, lo que significa que los visitantes que usan controles de teclado o lectores de pantalla las encuentran al final de su visita, después de navegar por el resto del sitio. Este es un pequeño cambio con un gran impacto para las personas con discapacidades.

9. BBC iPlayer

BBC iPlayer es el servicio de streaming en línea de la BBC. Su sitio web es donde los usuarios van a ver los programas en línea. También es otro fantástico ejemplo de accesibilidad web del que podemos aprender.

Primero, el sitio web es muy fácil de navegar y compatible con tecnología de asistencia. Puedes moverte por la página al hacer clic en el botón Tab. Navegar en el logo de iPlayer muestra una opción para obtener ayuda con Accesibilidad, la cual enlaza a una página de recursos con mucha información útil para usuarios con discapacidades.

El contenido está diseñado lógicamente, y todos los botones usan un diseño visual claro con colores de alto contraste. También hay burbujas de información accesibles a través del teclado y mouse que proveen información adicional para los usuarios y texto alternativo descriptivo para todas las imágenes.

El contenido de video también es accesible. Todos los programas de la BBC en iPlayer contienen subtítulos. 

10. Metropolitan Transportation Authority

Además de tener un sitio web receptivo que es fácil de usar en dispositivos con pantallas de todos los tamaños, la Autoridad de Transporte Metropolitano de la Ciudad de Nueva York también tiene una experiencia de búsqueda incorporada que ayuda a los usuarios a encontrar la información que están buscando de manera más rápida y fácil. ¿Cómo? La función de búsqueda aún proporciona resultados incluso si los usuarios escriben mal las palabras o ingresan información en formatos incorrectos.

Por ejemplo, si un usuario ingresa una dirección o vecindario en el planificador de viajes de la MTA con un error tipográfico, la barra de búsqueda seguirá sugiriendo direcciones basadas en su mejor suposición de lo que el usuario estaba buscando.

11. NSW Government

El sitio web NSW Government es el eje central del área de New South Wales en Australia. Está perfectamente diseñado para hacer fácil que los residentes de todos los contextos y habilidades puedan usarlo.

Este sitio cuenta con navegación de pestañas, haciendo fácil navegar las páginas usando un teclado o lector de pantalla. Gracias a las fuentes de tipografía grandes y colores que contrastan, también es extremadamente legible y es compatible con tecnología de asistencia.

12. GOV.UK

GOV.UK es el centro para todas las páginas web del gobierno de Inglaterra. Puede ser usado para acceder a todo, desde información sobre beneficios y ayuda por discapacidades para visas y soporte de inmigración.

El Gobierno de Inglaterra ha hecho un increíble trabajo al hacer que su sitio sea accesible para cualquiera que lo necesite. El sitio cuenta con navegación con el teclado y atributos ARIA, haciendo fácil encontrar páginas y navegar el sitio. También está adaptado para soportar un zoom de 300% para los usuarios con discapacidades visuales.

Haz Una Declaración de Accesibilidad

Asegurarte de que tu sitio web sea lo más accesible posible es tanto una obligación moral como profesional. Puede parecer un desafío, pero te prometemos que vale la pena. Los ejemplos anteriores te guiarán en la creación de un sitio web inclusivo que será accesible para todos los usuarios.

¿Listo para construir tu sitio web accesible? Permítenos ocuparnos del aspecto técnico por ti, para que puedas dedicar más tiempo y energía en lo que realmente importa: el diseño. Regístrate en nuestro Plan de Hosting Shared Unlimited y obtén hosting seguro e ilimitado para todos tus sitios web.

Nota: Realizamos una amplia investigación sobre el lenguaje inclusivo para discapacidades para nuestros artículos. Recuerda utilizar tus recursos al crear contenido accesible y, si tienes dudas, siempre pregunta.