¿Está su sitio web 'cerrado la puerta', pone millones de clientes? Abra la accesibilidad web de la lista de verificación (WCAG) que todos deben saber.

Imagina ... tienes un gran presupuesto de marketing. Disparar en gran medida el sitio web está diseñado maravillosamente. Pero hay un grupo de personas que "quieren comprar" sus productos estarán desaparecidos pero no pueden ... no porque no tenga dinero sino porque su sitio web "usó" para él

Ese grupo de personas puede tener discapacidad visual utilizando lectores de pantalla, pero su sitio web no tiene una explicación. O puede ser el anciano que las manos comienzan a temblar te hace hacer clic en tu botón pequeño o incluso a una persona con brazos temporales que no pueden usar el mouse fácilmente ... son todos los "clientes" que estás presionando sin saberlo.

Este problema no es un asunto pequeño. Y ya no es un asunto lejano en una época en la que todos hablan sobre la igualdad, tener un sitio web al que todos puedan acceder o la accesibilidad web no es solo "cosas buenas para hacer", sino que es "el estándar que necesita" para desbloquear las enormes oportunidades comerciales. Y prevenir el riesgo legal que pueda ocurrir en el futuro

‍

Aviso: imágenes de pantalla dividida en comparación. Un lado es una imagen de un cliente sonriendo fácilmente. El otro lado es una imagen de un cliente que tiene defectos oculares. (Puede haber un símbolo del personal blanco al lado). Estoy decepcionando al intentar usar el mismo sitio web. Pero la pantalla de su computadora muestra una distorsión que transmite obstáculos para acceder

‍

¿Por qué el hermoso sitio web se está convirtiendo en un "muro" que bloquea a los clientes?

Este problema surge de "puntos ciegos" que muchas empresas pasan por alto. Tendemos a estar obsesionados con el diseño de la Web a "hermosa" a los ojos de la mayoría de las personas hasta que olvidamos que la "buena experiencia" de cada persona no es la misma. La razón principal es de:

• Concéntrese en "imágenes" en lugar de "estructura": los diseñadores y los especialistas en marketing tienden a centrarse en la belleza del diseño, el color y la animación, pero descuidando la estructura HTML correcta, que es la clave para ayudar a la tecnología (tecnología de asistencia), como el lector de pantalla, puede "comprender" y "comunicación" en la web.
• Problema y malentendido: muchas personas piensan que la accesibilidad web es una cuestión de "pequeñas personas con discapacidad", pero en verdad está relacionada con muchas personas. Tanto los ancianos, las personas con discapacidades temporales (como los brazos rotos) o incluso las personas en una situación limitada (como el uso de la red al sol que no se ve en un pequeño color contrastante). De los datos en 2022, Tailandia tiene alrededor de 4,19 millones de personas con discapacidades, o aproximadamente el 6% de la población total. Este es un mercado que no puede pasar por alto.
• Creo que es una técnica que "complicada y costosa": la palabra "estándar" o "wcag" puede sonar aterrador y lleno de términos técnicos. Hacer que el propietario del negocio sienta que es un asunto lejano y tiene que invertir alto a pesar de que realmente comenzar la accesibilidad puede comenzar desde un pequeño punto que puede usar muy poco presupuesto

‍

Aviso: las imágenes infográficas simples muestran una imagen cerebral con equipo en el interior, pero hay algunos equipos que salen con íconos, orejas y manos en forma de ojo, con un breve mensaje "enfóquese solo en imágenes", "falta de conciencia", "parece complicado" para transmitir la causa del problema.

‍

Vete ... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡Fio El impacto cuando su sitio web "no da la bienvenida" a todos

Introducción a la accesibilidad web no solo faltan oportunidades de negocios, sino que es el riesgo de su marca en muchas dimensiones.

• Pérdida de ingresos y clientes: este es el efecto más claro. Está cerrando la oportunidad de vender con un gran grupo de clientes con poder adquisitivo. Ya sea directamente a los discapacitados o sus familias y amigos que eligen apoyar a las marcas que se preocupan por todos los grupos
• Riesgo legal: en muchos países del mundo hay muchas empresas privadas que no hacen un sitio web para discapacitados. Para la propia Ley de Tailandia para la promoción y desarrollo de la calidad de vida de los discapacitados 2007 y las regulaciones ministeriales pertinentes, que promueve el derecho a acceder a la información y los servicios. Aunque el 100% actual del sector privado puede no ser tan intenso como las agencias gubernamentales, esta es la tendencia del mundo de que el negocio que parece muy lejos debe estar preparado.
• Rompe la credibilidad de la marca (Trust de marca): en la época en que los consumidores eligen apoyar la marca desde "valor" que la marca tiene un sitio web que desalienta a un grupo de personas capaz de crear una imagen negativa y destruida que la composición crea confianza en el sitio web. Que intentas crear
• Afectando el SEO: Google es muy importante para la experiencia del usuario (UX). El sitio web de Hard Access a menudo tiene una alta tasa de rebote, baja página, que es una mala señal para SEO. Además, muchos elementos de accesibilidad, como el uso de etiquetas de rumbo correctas, texto alternativo y estructuras claras también tienen un buen efecto directo en la clasificación y los vitales de la web central .

‍

Aviso: La imagen muestra 4 efectos en forma de 4 tarjetas: la primera tarjeta tiene una imagen de dinero volando, las segundas hojas son el martillo, la tercera hoja es un logotipo de marca rota y las cuartas hojas son los gráficos de SEO que tienen un tono rojo para transmitir el riesgo.

‍

Abrir las Escrituras para resolver problemas: comenzando con 4 principios de WCAG

No te preocupes. Hacer el acceso web no es tan difícil como crees. Su corazón se encuentra en un estándar internacional llamado Directrices de accesibilidad de contenido web (WCAG) , que se divide en 4 principios principales que son fáciles de recordar "verter". Veamos cuál es cada elemento y qué lista de verificación comienza de inmediato.

1. Perceptible (percepción): permite a los usuarios reconocer el contenido a través de varios sentidos

• [] Todas las imágenes deben tener una explicación (texto alt): escriba para explicar cuál es esa imagen. Para que el programa del lector de pantalla se pueda leer para la discapacidad visual
• [] Los archivos de video y audio deben tener otras opciones: como subtítulos para sordos o descripción de audio para personas ciegas y transcripción.
• [] El color que debe contradicho correctamente: el texto y el fondo deben tener una relación de contraste suficiente (al menos 4.5: 1 para el texto normal) para que las personas con borracha o ceguera sean fáciles de leer.
• [] No se comunique solo con colores: como hacer un enlace solo al rojo sin debajo puede causar ceguera en color, no sé si es un enlace

2. Operble (disponible): permite a los usuarios controlar y usar varios componentes web.

• [] Todas las funciones deben usarse a través del teclado: los usuarios que no pueden usar el mouse deben poder presionar la pestaña para deslizarse hacia el enlace, el botón y varios formulario.
• [] Sin "Trap de teclado": los usuarios deben usar el teclado para moverse y "salir" desde varias partes del sitio web, no atascado en la ventana emergente.
• [] Dé suficiente tiempo de usuario: si hay una sesión automática, debería haber opciones para que los usuarios soliciten oportunamente.
• [] Evite el contenido intermitente severo: la luz que parpadea (más de 3 veces por segundo) puede estimular las convulsiones en algunas personas.

3. Ajustable (fácil de entender): hacer que el contenido y el uso no son demasiado complicados.

• [] Use un lenguaje claro y simple: evite el vocabulario técnico o el vocabulario de la industria sin explicaciones.
• [] Se debe predecir la navegación y la navegación: Diseñe el menú y el diseño para ser consistente en cada página para que los usuarios aprendan y usen fácilmente.
• [] Hay un error claro: cuando el usuario llena el formulario mal, debe tener un mensaje claro de que "dónde está mal" y "cómo solucionar" no solo decir "error"

4. Robusto (duradero): permitiendo que la web funcione con varias tecnologías estables

• [] Uso del código HTML estándar: estructura de código limpia y correcta (como usar la etiqueta
  ,
  , Ser responsable) ayudará al programa a ayudar a leer el mejor trabajo
• [] Comunique el estado y los cambios al programa para ayudar a leer: Por ejemplo, cuando el producto se agrega a la canasta, debe haber un código que advierte al programa para ayudar a leer y anunciar.

Si desea estudiar más información en profundidad, la fuente oficial de la Iniciativa de Accesibilidad Web W3C (WAI) y la comunidad como el proyecto A11Y es un excelente punto de partida.

‍

Aviso: Hermosa infografía, dividida en 4 partes de acuerdo con Pour (perceptible, operial, desordenado, independiente, robusto). Cada parte tiene un ícono principal (como forma de mano, forma del cerebro, engranajes) y una lista de verificación corta 2-3 debajo.

‍

Ejemplos de lo real: cuando las "tiendas en línea" aumentan las ventas del 20% con accesibilidad.

Imagine "Baan Bakery", una famosa tienda de postres en línea. Al principio, el sitio web es muy hermoso. Pero recibió los comentarios de los clientes mayores de que las letras pequeñas eran difíciles de leer y que el "botón de agregar a la canasta" era tan ligero que no se podía ver que el equipo decidiera revisar. Gran accesibilidad

Qué hacer: no desmantelan la web. Pero comenzando con la actualización de acuerdo con el nivel AA WCAG. Ajustan el botón de color para que sea más oscuro. Aumente el tamaño de la fuente un poco más grande, agregue el texto alternativo a cada pedazo de pastel que "fresa, pastel suave, cubierto con salsa de bayas" y asegúrese de que los clientes puedan ordenar cada paso usando solo el teclado.

Resultados sorprendentes: solo 3 meses después de las ventas de "Baan Bakery" aumentaron en casi un 20%, no solo de los ancianos. Pero aún así, obtenga nuevos clientes que admire la atención de la marca que recibieron reseñas de 5 estrellas con comentarios que "gracias por hacer un sitio web para que nuestros padres los usen fácilmente". Este es el poder del diseño para todos. Eso cambia del diseño de UX/UI a Normal para crear una experiencia de "cobertura" y "crear ventas"

‍

Aviso: las imágenes de la página del producto en el sitio web "Bake Bakery" en el lateral muestran los botones de color ligero y las letras pequeñas. El posterior muestra el botón oscuro que contrasta con el fondo claramente. Las letras son más fáciles de leer. Con un pequeño gráfico que muestra el aumento de las ventas

‍

Lista de verificación lista para comenzar! Comienza a "actualizar" su sitio web de inmediato.

Lee aquí que probablemente quieras hacerlo, ¿verdad? Intente usar esta lista de verificación de abreviatura para explorar su sitio web. Y comience con una pequeña victoria (victorias rápidas):

1. Explore la página de inicio: todas las imágenes importantes, ¿tienen un texto alternativo que significa? Intente usar la herramienta de extensión en el navegador para verificar.
2. Pruebe con el teclado: intente dejar el mouse hacia abajo. Y use solo la pestaña, la pestaña Shift+, el botón Ingrese y la barra espaciadora para navegar en su sitio web. ¿Puede ir al menú, presionar el botón y completar el formulario con éxito?
3. Color de contraste checo: usando herramientas en línea (buscando "verificación de contraste de color") para soltar el color de los caracteres y el color de fondo del botón (como el botón de compra, el botón de contacto).
4. Lea su contenido nuevamente: ¿Hay una terminología o oración que sea demasiado complicada? Intente ajustarlo a un idioma que la gente generalmente entienda.
5. Mira tus videos fuera de escala: ¿Todavía entiendes todo el contenido a través de subtítulos?

Recién comenzando a partir de estos 5 elementos, se considera un gran paso. Y si va a crear un nuevo sitio web que traiga estas historias a parte del sitio web organizacional del desde el principio, ayudará a ahorrar mucho tiempo y costos.

‍

Aviso: Imágenes de la lista de verificación que tienen un cuadro barato con íconos para cada elemento, como iconos, iconos de ketch, círculos de dos cuores (en lugar de contraste), íconos de libros e iconos de botón de reproducción.

‍

Preguntas que las personas tienden a preguntarse (y la respuesta clara)

P1: ¿Hacer accesibilidad y el sitio web se verá aburrido no tan hermoso como antes?

A: ¡No es cierto! Este es el malentendido más común. El diseño accesible es un diseño "inteligente", no un diseño "aburrido". Capaz de crear un sitio web que sea hermoso y disponible para todos al mismo tiempo, es un desafío que ayuda a mejorar la creatividad incluso.

P2: ¿Necesita mucho presupuesto? ¿Es nuestra pequeña empresa que debe hacerlo?

R: No tienes que hacer todo 100% perfecto. Comenzando desde "fruta de poca espada" o algo que es fácil de solucionar, como agregar texto alternativo o ajustar el botón de color. Casi no necesita gastar más presupuestos en el valor más valioso es crear "conciencia" en su equipo y para las pequeñas empresas, esta es la oportunidad de crear una ventaja en la competencia y crear una base de clientes leales para su marca.

P3: WCAG tiene un nivel A, AA, AAA. ¿A qué nivel debemos apuntar?

R: Para la mayoría de los sitios web y organizaciones de negocios, AA es un estándar de oro que se acepta en todo el mundo. Crea un buen equilibrio durante el acceso de cobertura y las posibilidades en la práctica. El cumplimiento de este estándar también está en línea con las directrices de los requisitos para las empresas que cotizan en el sitio web o la credibilidad para las oficinas web que enfatiza la transparencia y el estándar.

P4: ¿Qué herramientas puedes verificar?

R: Hay muchas herramientas automáticas excelentes para comenzar, como Wave, Ax Devtools (extensión del navegador) o faro en Chrome Devtools. Accesibilidad básica, pero recuerde que estas herramientas pueden ayudar a detectar solo el 30-40% del problema. Las pruebas mediante pruebas reales siguen siendo lo más importante.

‍

Aviso: la imagen de una persona sentada cruzada en una silla cómoda. Junto con un símbolo de preguntas y respuestas flotando a su alrededor. El rostro sonriente muestra confianza y alivio de la ansiedad.

‍

Es hora de abrir la puerta para dar la bienvenida a todos los clientes.

En este punto, espero que vea esa accesibilidad web no solo una cuestión de técnicas complejas o una carga legal aterradora, sino que es el "corazón" de hacer negocios en la nueva era. Es cambiar la opinión de preguntar "¿qué estamos vendiendo?" Preguntar "¿Cómo podemos dar la mejor experiencia a 'todos'?"

La inversión en accesibilidad es una inversión que proporciona rendimientos en términos de números (ventas, tasa de conversión), amor de marca, confianza y, lo más importante, es parte de la creación de una sociedad digital artificial y no deja atrás a nadie.

No espere a que su sitio web se convierta en un "obstáculo" que más bloquee a los clientes. Comience a explorar su sitio web hoy con una lista de verificación simple que proporcionamos e hizo la apertura de la puerta para dar la bienvenida a los clientes "todos" es el nuevo estándar de su negocio.

Desea que su sitio web no solo sea hermoso sino que también esté listo para dar la bienvenida a todos los clientes y crear resultados comerciales tangibles, ¿verdad? Consulte a un experto en UX/UI y accesibilidad web. ¡El nuestro se libera! Estamos listos para ayudarlo a crear un gran sitio web para todos.

‍