7 Cybertips que te ayudarán a mejorar la accesibilidad web de tu tienda en línea

¿Quieres mejorar la accesibilidad web de tu tienda en línea o blog? ¡Perfecto! Porque el día de hoy te vamos a contar un par de secretos que te ayudarán a incrementar la UX de tu página web. ¿Estás list@ para descubrirlo?

Internet: el espacio que se ha convertido en el segundo hogar de todos los cibernautas

Como de seguro habrás notado, Internet se ha convertido en el principal centro de investigación, información y entretenimiento al que acuden las personas. ¿La razón? Hoy en día, cada vez son más las actividades, tareas o acciones que podemos realizar vía digital. Lo cual, ha facilitado la vida cotidiana de muchos, incluyendo la de los usuarios con discapacidad, puesto que ya no tienen que desplazarse hasta algunos lugares para obtener una respuesta o adquirir algún servicio o producto.

Aunque hemos logrado llevar un par de tecnología a sus manos ¡Algunas siguen sin estar verdaderamente optimizadas para ellos! Esto, nos lleva a preguntarnos: ¿de verdad Internet es un buen espacio para los discapacitados?

Lo lógico sería decir que sí, pero, la verdad es que a esta plataforma digital aún le falta mucho por recorrer en este sentido.

Ahora, ¿te gustaría ser parte de este progreso y ayudar a estos users a tener una vida más sencilla? Entonces, sigue leyendo y no cambies de post, puesto que más abajo te explicaremos cómo mejorar la accesibilidad web de tu e-commerce o blog para que estos cibernauas puedan navegar con gusto (y sin problemas), por tu página web.

¿Qué es la accesibilidad web?

La accesibilidad web es una propiedad de SEO y del diseño web que tiene como único objetivo: lograr que un portal web pueda ser empleado por la mayoría de los users que ingresen en él, independientemente de los conocimientos o capacidades que tengan.

Es decir, es un aspecto que el desarrollador web debe de cuidar, ya que gracias al mismo, los usuarios podrán gozar de una increíble UX, sin importar si tienen (o no), algún tipo de discapacidad física, mental o motora. Interesante, ¿verdad?

¿A qué nos referimos con la palabra “discapacidad”?

Cuando hablamos de “discapacidades”, es normal que se nos vengan un par a la cabeza. Pero, ¿conoces realmente todos los tipos de discapacidad que existen? En caso de que tu respuesta sea un «no» ¡Tranquil@! Que te los compartimos a continuación:

• Visual: Son enfermedades que afectan la visión del ojo. Por ejemplo, la ceguera.
• Auditiva: Es cuando la persona tiene una pérdida parcial o total de la audición.
• Motora: Este tipo de discapacidad dificulta o limita el movimiento del cuerpo. El Parkinson, por ejemplo.
• Cognitiva: Es la limitación o dificultad que tienen un grupo de personas para desarrollar habilidades sociales e intelectuales.
• Discapacidad permanente: Son enfermedades que duran toda la vida y pueden llegar a ser degenerativas. Por ejemplo, el Alzheimer.
• Discapacidad temporal: Son aquellas que duran un pequeño período de tiempo. Por ejemplo, una fractura o pérdida temporal de la visión
• Discapacidad condicional: Ocurren cuando la persona no puede realizar algún tipo de acción por factores externos a su cuerpo. Por ejemplo, no poder hacer una reunión por Zoom, debido a que hay mucho ruido en el ambiente.

Como de seguro notarás, son muchos usuarios requieren un acceso web adecuado ¡Súmate a esta interesante iniciativa! Y ayúdanos a crear un Internet más segura y accesible para todos.

Trucos para mejorar la accesibilidad web de tu blog o e-commerce

Ahora que ya conoces qué es la accesibilidad web y el por qué deberías prestarle más atención, es momento de revelarte los 7 cybertips que te ayudarán a agilizar y aumentar esta propiedad de SEO y del diseño web.

Por ende, ¡Corre a buscar donde apuntar! Porque de seguro vas a querer a notar todo lo que te diremos a continuación.

1. Permite que la navegación con teclado sea sencilla

En la versión de escritorio, es normal que utilicemos el ratón para hacer una exploración de una web (menos cuando vamos a rellenar alguna casilla o cuadro de texto). Hacemos scroll para bajar en la página, clic en enlaces o clic para ver más opciones, etc.

Vale ¡Eso es genial! ¿El único problema? No todos pueden usar un mouse en el ordenador, ya sea por algún tipo de discapacidad motora o porque no tienen uno.

Ahora, ¿como navegan estos usuarios por tu tienda en línea si la opción del ratón no es viable? ¡Sencillo! Activan TAB para moverse entre elementos y las flechas direccionales para hacer scroll o desplegar más opciones.

Por eso, debemos de hacer que nuestro site sea sencillo de navegar, para que estas personas puedan recorrer todo nuestro portal web, sin trabas, complicaciones o dificultades. Así que al momento de armar tu web o actualizarla, hazle una prueba con la navegación de teclado y comprueba la facilidad que tienes al emplear las flechas direccionales.

2. ¡No te olvides de utilizar el atributo alt en tus imágenes!

El atributo alt es un código del HTML que sirve para describir imágenes, videos o cualquier elemento que no pueda cargar en una página web.

¿Por qué deberíamos de aplicarlo? ¡Sencillo! Son una herramienta que le permite a las personas con dificultades visuales, saber qué imagen, fotografía, video o componente visual hay dentro de tu website.

De seguro te preguntarás: ¿Cómo lo hacen?

Pues, los users que tienen este tipo de discapacidades suelen navegar por las redes y páginas web usando un lector de pantalla que convierte todo el texto en sonidos.

Por ese motivo, el atributo alt es importante para mejorar la accesibilidad web, dado que es el responsable de ayudar a que estos usuarios puedan saber de qué van todos los elementos gráficos que hay en nuestra web, sin la necesidad de tener que observarlos.

Aparte, cuando una persona está en un área con conexión a internet inestable, puede que las imágenes no terminen de cargarle, al mostrar tu tienda. Gracias a este atributo, las mismas pueden conocer de qué iba tu fotografía y saber sí coincide o no con la búsqueda que están realizando.

Tip Extra:

Escribir atributos Alt es una muy buena estrategia para mejorar tu SEO,  ya que los bots de Google también verifican este apartado en busca de keywords para posicionar ¡Así que no te olvides de escribirlos!

3. Pasa el tamaño de tus fuentes a unidades rem

Cuando estás diseñando una web, es muy habitual que uses píxeles para definir el tamaño de la tipografía que vas a usar. Eso está genial. El verdadero problema llega cuando una persona con discapacidad visual aumenta el tamaño del site para poder leer los textos que están en el portal.

¿Por qué esto vendría a ser un inconveniente?

Las tipografías definidas en píxel siempre se mostrarán del mismo tamaño, aunque hayas establecido en tu móvil u ordenador la medida exacta en la que quieras ver las tipografías. En cambio, las que están en unidades rem, se agrandarán o achicarán de acuerdo al zoom que hayas establecido como usuario.

Ahora bien, imagínate que alguien mayor con discapacidad visual (y que no sabe nada acerca de las configuraciones del ordenador), ya tenga un tamaño de letra definido y entre a tu blog o e-commerce a navegar. ¿Qué crees que pasará? ¡Exacto! Se saldrá de tu web y buscará otra porque tus tipografías están muy chicas para él.

Entonces, como dice el dicho «es mejor prevenir que curar», lo mejor será que realices tus fuentes de texto en unidades rem y no píxel para que las personas con discapacidad visual puedan explorar tu página web y evites la pérdida de un posible comprador por no tener una buena accesibilidad.

4. Mantén una buena estructura en los headings

Antes de explicarte este punto, ¿estás segur@ de saber qué es un heading? Si tu respuesta es un “sí” ¡Perfecto! Solamente debes de echarles un vistazo antes de subirlo y comprobar que sí están siguiendo un orden jerarquico.

En cambio, si tu respuesta es “no” o “más o menos” ¡No te preocupes! Ya te damos una microclase.

Los headings son elementos del HTML que sirven para darle estructura y contexto al contenido o cuadros de texto que hay dentro de una web y su utilidad es necesaria para hacerle saber al cibernauta qué es lo siguiente que va a encontrar en la página.

Una cosa que debes de saber, es que estos elementos del HTML no hay que emplearlos únicamente por su tamaño o porque quedan genial en el diseño. Más bien, hay que emplearlos para generar una jerarquía de contenido para que, tanto Google como los usuarios, conozcan el verdadero orden en que está estructurada tu web. Por ejemplo:

H1 > H2 > H3 > H4…

Si te parece un poco de complicado ¡Calmaos! También lo puedes ver de la siguiente manera para que no se te haga tan complicado:

Título > Subtítulo > Categorías que están dentro del subtítulo > Subcategorías…

Como ahora conoces esta truco, deberías de correr a tu web y checar todos tus headings.

¡Ah! Y si te preguntas por alguna herramienta que te pueda facilitar el trabajo, te recomendamos usar la extención de HeadingsMap.

5. Préstale atención a los colores y los contrastes que tiene tu web

Imagínate que entras a un website que tiene el fondo blanco y las letras gris claro. Sería poco legible, ¿verdad?

Ahora piensa cómo será para esas personas que tienen discapacidad visual. Lo sabemos, dirán automáticamente: Esto no se lee, mejor me voy a otra.

Por eso, el contraste es fundamental al momento de diseñar una web, dado que el mismo ayudará a que las personas puedan entender los textos o elementos gráficos que coloquemos para decorar el blog o negocio online.

¿Y qué pasa con el color?

Recordemos que vivimos en una sociedad con personas que tienen defectos en la visión cromática de sus ojos (daltonismo, deuteranopia, protanopia, etc.), por lo que hay que cuidar un poco la paleta de colores que empleamos en una web para que ellos también puedan entender los textos e imágenes que usamos para decorar nuestra página web.

6. Elabora formularios accesibles

¡No tengas miedo de agregar etiquetas o explicaciones a tus formularios! Hay muchas personas que les cuesta comprender muy bien lo que deben de hacer, lo cual, termina desencadenándole episodios de ansiedad o estrés. ¿El motivo? Temen colocar algún valor que esté mal o enviar el formulario con datos incompletos.

Por ende, te recomendamos que introduzcas mensajes explicativos en los cuadros de tus formularios (junto a una advertencia textual), y un código de color que indique si el campo ha sido completado satisfactoriamente. De esta manera, evitarás crear confusión en tus usuarios y aumentarás la cantidad de formularios en tu web, por tan solo evitar «pequeños momentos de estrés» a tus usuarios.

7. Dile “sí” a los subtítulos en vídeos

¿Te acuerdas que te mencionamos que las personas con discapacidades auditivas tenían una herramienta que les leía todos los textos que había en una página? Lo mismo pasa con los vídeos.

Plataformas como YouTube, Netflix y TikTok son algunas de principales pioneras en dejar que los users agreguen subtítulos explicativos a sus vídeos, para que este grupo de cibernavegantes puedan disfrutar también del mundo del arte y el entretenimiento.

Si haces vídeos tutoriales en alguna plataforma que cuente con esta opción ¡anímate a activarlos! Y haz que tu contenido llegue a esta audiencia especial.

Consejo extra

Tener subtítulos hace que puedas editar los textos a otros idiomas, por lo que tu público se extenderá mucho más allá de la comunidad hispanohablante.

Si deseas saber más trucos para mejorar la accesibilidad web o te gustaría que un equipo de diseño web checara tu tienda online ¡No dudes en contactarnos! Nuestro equipo Dinamita estará encantado de trabajar contigo para mejorar la accesibilidad de tu página.