Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

La Accesibilidad cada vez toma más fuerza en el ámbito de desarrollo y diseño Web, pero a la vez, es un poco confuso aprender sobre el tema o cómo dar el primer paso para iniciar con ellos. Muchos desarrolladores planeamos un proyecto sin considerar algún aspecto relativo a la accesibilidad web.

Hace un par de años mientras trabajaba en mis tareas diarias y para el proyecto que actualmente desarrollo, nos solicitaron unirnos a una llamada y detener todo el trabajo que veníamos haciendo, seguidamente nos pasaron un document de google docs con cientos de Bugs de Accesibilidad y nos dijeron – Person fixing maximum bugs gets a surprise.

El tema del “Surprise” me llamó la atención, pero lo que más captó mi interés fue enterarme que el sitio para el cual trabajo todos los días tenía esa gran cantidad de bugs en accesibilidad en los que nunca había pensado, y además ni me había importado. Es un sitio que recibe millones de visitas diarias y no estaba disponible para todas las personas. 

Pensando en el negocio, es una gran pérdida, pero no es solo el negocio, si no que hay que pensar en la inclusión y crear sitios y aplicaciones que estén disponibles para todos, incluidos aquellos con discapacidades. 

¿Qué es Accesibilidad?

Laura Kalbag define la accesibilidad web como:

“El grado en el que un sitio web es accesible para tantas personas como sea posible”

La Accesibilidad es lo correcto legal y moralmente, pero además, un sitio accesible puede traer más usuarios o clientes a nuestros sitios web, lo cual puede darnos bastantes beneficios económicos.

Teniendo en cuenta lo anterior, ¿por dónde debemos empezar?

¿Por dónde empezar? 

Podemos encontrar un estándar global para la accesibilidad web en las pautas de accesibilidad al contenido web (WCAG), este fue desarrollado a través del proceso W3C y  su objetivo es explicar cómo hacer que el contenido web sea más accesible para las personas con discapacidades y está dirigido a desarrolladores.(https://www.w3.org/TR/WCAG21/).

Además, he encontrado algunas conferencias en Youtube que me ayudaron a saber por dónde empezar, como este video de Sara Soueidan https://youtu.be/are7ZZgA86I, tambien sigo a personas que todos los días me enseñan más sobre accesibilidad, por ejemplo el caso de Ted Drake en twitter: https://twitter.com/ted_drake 

¿Qué podemos hacer ya mismo?

Podemos Empezar con los siguientes pasos:

Navegación por teclado

Por default, todo sitio web debería poder ser navegado por medio del teclado.

El uso de Alt-tags

Es el atributo para describir una imagen.

Este texto será el que el lector de pantalla usará para interpretar el contenido. 

<img src="path-de-la-imagen" alt="acá va la descripción de la imagen">

Usar Puntos de referencia ARIA

Los puntos de referencia de ARIA permiten a los desarrolladores proporcionar acceso programático a secciones o “puntos de referencia” de una página web. Puede asignar “roles” a los elementos de una página para identificar secciones de su página.

Por ejemplo, Podemos crear un header e indicar el role de esta sección de la siguiente manera:

<div id="header" role="banner">Bienvenido</div>

Igualmente con el resto de las secciones, y de esta forma podemos crear cierta orientación y facilitar la navegación dentro de la página para los usuarios que dependen de las tecnologías de asistencia.

Usar etiquetas HTML predeterminadas

Utilicemos botones para los botones, y no un etiqueta <a>, utilicemos los headings (h1, h2, h3…) para los títulos, utilicemos etiquetas <a> para los links. Creo que este es el mejor ejemplo que puedo usar.

De forma contraria podemos confundir a los lectores de pantalla.

¿Que más?

Esta es una lista de herramientas que podemos utilizar para validar sitios web accesibles:

Les recomiendo seguir a Sara Soueidan, siempre tiene posts muy interesantes en sus redes sociales relacionados con sitios web accesibles, además, en su sitio web tiene un blog donde podemos encontrar temas de accesibilidad. Y por último, en Youtube tiene algunas conferencias relacionadas con el tema de Accesibilidad.

Como conclusión y entendiendo que excluir este tipo de herramientas en nuestros desarrollos podrían significar pérdidas en el negocio, creo que lo más importante es comprender que tenemos un deber social desde nuestra parte como profesionales en el área de desarrollo, de brindar oportunidades para todos

Team Member

Allan

Tech Lead

May 4, 2021