¿Qué deberías hacer verdaderamente?
Su sitio web probablemente se vea ocurrente. Has hecho que los diseñadores trabajen en su encanto, tomadas fotos profesionales y la copia elaborada a la perfección. Pero, ¿qué tipo de experiencia ofrece a determinado que no interactúa con ella de la forma típica? Piense en los usuarios que navegan con un conferenciante de pantalla, utilizando herramientas de entrada adaptativas o incluso complementos de navegador que alteran cómo se muestra el contenido.
Ejecutar el Útil de evaluación de accesibilidad web (Wave) en su sitio. Es una utensilio gratuita y automatizada que escanea sus páginas web para problemas de accesibilidad comunes. Wave destaca visualmente las áreas problemáticas en la página, identifica el código subyacente y ofrece recomendaciones para ayudarlo a solucionarlas.
Figura 1- Descomposición de la utensilio Wave del sitio web de CitizenM
Algunos de los resultados pueden parecer un poco demasiado técnicos y jerganizados (¡esta es una palabra efectivo!) Pero no se preocupe, hemos enumerado algunas de las áreas esencia para centrarse. Estos son algunos de los problemas de accesibilidad más comunes que hemos antitético al auditar los servicios digitales. Ya sea que todavía esté en la escalón de diseño o que vuelva a arreglar un sitio en vivo, abordarlos puede marcar una diferencia efectivo en cuán útil y accesible es su sitio.
¡Vamos a sumergirnos!
1. Texto alt
Las imágenes son excelentes, agregan vida a un sitio web y pueden ayudar a apoyar su contenido. Algunas imágenes son puramente decorativas, como una foto de una de las mesas de comedor en su hotel. Otros son más informativos, como íconos o una foto que muestra cómo se decora su suite de fastuosidad.
Pero, ¿qué pasa con las personas que no pueden ver esas imágenes? Piense en usuarios de lectores de pantalla ciega o usuarios neurodivergentes que eligen deshabilitar las imágenes para una experiencia más enfocada. ¿Cómo se acomoda?
Ahí es donde entra el texto posible (texto alt). Es una descripción de texto corta agregada a una imagen que transmite su propósito o contenido a los usuarios que no pueden verlo. Inicio por preguntarse: ¿Esta imagen agrega valencia al contenido? Y si es así, ¿Qué debe describirse exactamente?
Si una imagen es puramente decorativa, marque como tal usando el texto posible infructifero (alt = ””). De esa forma, los lectores de pantalla lo saltarán y evitarán sumar desorden auditivo innecesario.
✅ buen texto posible: “suite de fastuosidad con presencia al mar y cama king-tamaño”
❌ Text mal posible: “IMG_2837” o “Foto”
2. Contraste en color
Probablemente tenga una paleta de colores que coincida con su marca, y eso es ocurrente. Pero lo que verdaderamente debes tener en cuenta es si el relación de contraste entre el texto y el fondo es lo suficientemente detención. Esto no significa que tengas que ser completamente enfadado sobre blanco (a menos que ese sea el bullicio noble y elegante que buscas), pero hace significa que su contenido debe ser inteligible.
El mal contraste hace que el contenido sea más difícil de adivinar para todos, especialmente personas con desprecio visión o ceguera en color. Todavía puede ser un problema para cualquiera que use su dispositivo a la luz del sol brillante.
Herramientas como OLA Problemas de contraste automáticamente afectado: cualquier cosa por debajo de una proporción de 4.5: 1 Para el texto ordinario se considera una descompostura. Entonces, revise sus combinaciones de colores; Debe comprobar de que el contraste entre sus códigos hexadecimales cumpla con el imperceptible 4.5: 1 para abastecer su contenido percibible para todos los usuarios.
Figura 1 – Comparación de relaciones de contraste de texto altas y bajas
3. Cabezas y estructura de página
Al igual que los encabezados y el diseño, ayudan a los usuarios avistados a escanear rápidamente una página (porque seamos honestos, quién en ingenuidad ¿Lee todo?), Todavía son esenciales para los usuarios de tecnología de subsidio como aquellos que usan lectores de pantalla.
Los usuarios de conferenciante de pantalla a menudo navegan por encabezados, por lo que estos deben codificarse correctamente. Eso significa usar etiquetas de encabezado HTML reales como
Los encabezados igualmente deben seguir una orden clara. El título de su página principal debe ser un
Los encabezados estructurados adecuadamente no solo mejoran la accesibilidad, sino que igualmente facilitan su contenido para todos navegar.
4. Navegación del teclado
La accesibilidad no se alcahuetería solo de usuarios de conferenciante de pantalla; Todavía debe considerar a las personas que utilizan métodos de entrada alternativos. Esto incluye a los usuarios que no navegan con un mouse o toque, sino que confían en cosas como joysticks, interruptores, comandos de voz o gestos de deslizamiento en dispositivos móviles.
¿La forma más sencilla de efectuar esto? Pon a prueba tu sitio con solo un teclado. Los usuarios de teclado generalmente se desplazan usando la tecla Tab, que cambia el enfoque de un sujeto interactivo a otro. Activan cosas usando Enter o Space.
Esto es lo que debe tener en cuenta:
- Todos los utensilios interactivos (enlaces, chico, formularios, menús) deben incluirse en el orden de pestaña.
- Debe poseer un indicador de enfoque visible (como un esquema o resaltado) para que los usuarios puedan ver dónde están en la página.
- Cada sujeto debe ser completamente operable solo con el teclado; No se requiere mouse.
Pruébelo en su propio sitio: presione la pestaña para avanzar y cambiar + pestaña para moverse cerca de detrás. Si te encuentras atrapado o no estás seguro de dónde está el enfoque … ese es un problema que vale la pena solucionar.
5. Labelas y texto de enlace claro
Los formularios se encuentran entre las interacciones más comunes en los sitios web de hoteles, por lo que deben ser accesibles. Cada entrada, ya sea para fechas de check-in o tipos de habitación, debe tener una rótulo clara y visible. Los mensajes de error deberían explicar qué salió mal y cómo solucionarlo, no solo grita “¡Error!” en rojo. Y al igual que el resto de su sitio, los formularios deben funcionar con un conferenciante de teclado y pantalla. Sin excusas.
Mientras lo hace, eche un vistazo a su texto de enlace. Los usuarios de conferenciante de pantalla a menudo saltan del enlace al enlace, por lo que las frases vagas como “Haga clic aquí” o “más” no lo corten. Use un texto descriptivo y significativo como “Vea nuestras habitaciones accesibles” o “Reserve una suite de fastuosidad”.
El objetivo es simple: disminuir la imprecisión y comprobar de que las etiquetas, los enlaces y las instrucciones sean claras para todos, no solo para aquellos que usan tecnología de subsidio.
