Accesibilidad web para principiantes

Introducción

Hoy en día, crear aplicaciones o sitios web accesibles no es la norma. Esto se debe a que la mayoría de los desarrolladores conocen la idea de la accesibilidad, aunque en la práctica a menudo se la descuida y no es una práctica común en el mundo del desarrollo web. Según las estadísticas del Banco Mundial, aproximadamente el 15 % de la población mundial padece algún tipo de discapacidad.

En este tutorial, aprenderá qué significa la accesibilidad web para los desarrolladores, cómo afecta a los usuarios de la web y también formas de mejorar las aplicaciones y herramientas para aprovechar y mejorar la accesibilidad en su flujo de trabajo.

¿Qué es la accesibilidad web?

La accesibilidad web, o a11y como a menudo se la llama, es una práctica mediante la cual se diseñan y desarrollan sitios web, herramientas y tecnologías para que las personas con discapacidades puedan usarlos.

La palabra “accesibilidad” suele denotarse como “a11y” porque hay 11 letras entre la “A” y la “Y” en la palabra “accesibilidad”. Este patrón se conoce como numerónimo.

La accesibilidad consiste en hacer que la web sea accesible para todos, incluidas las personas con todo tipo de discapacidades, incluidas las siguientes:

• Cognitivo
• Neurológico
• Físico
• Discurso
• Visual
• Discapacidades auditivas

La accesibilidad abarca la discapacidad y también da cuenta de los casos en que las personas que utilizan la web tienen las siguientes limitaciones:

• Mala conectividad a Internet.
• Lesiones temporales, por ejemplo, un brazo roto.
• Personas que usan dispositivos con pantallas más pequeñas, como relojes inteligentes o televisores inteligentes.

El principio POUR

El principio POUR es lo que guía la creación de sitios web accesibles. Este principio ayuda a poner a las personas en el centro del proceso. Todo sitio web debe cumplir con los siguientes principios:

• Perceptible: el contenido de la web debe ser perceptible. Esto significa que la web debe estar disponible para los sentidos (vista, tacto y audición) ya sea a través del navegador o mediante tecnologías de asistencia como lectores de pantalla, ampliadores de pantalla y otros.
• Operable: el contenido de la web debe ser operable. Esto significa que los usuarios pueden interactuar con todos los controles y elementos interactivos mediante el ratón, el teclado o un dispositivo de asistencia. Si no se puede navegar por el contenido, este es inaccesible.
• Comprensible: El contenido de la web debe ser claro, conciso y fácil de entender. Trate de reducir al máximo los errores ortográficos y la gramática compleja. Esto se debe a que, como desarrolladores web, nunca debemos dar por sentado que el usuario tiene conocimientos.
• Robustez: es muy importante que haya coherencia en toda la web. Esto significa que ¿estás maximizando la compatibilidad con las herramientas para las que estás creando? ¿Tu sitio funciona de la misma manera en todas las plataformas, es decir, navegadores, sistemas operativos y tamaños de dispositivos, etc.?

Consejos para que su sitio sea accesible en la Web

Existen diversas formas de incorporar la accesibilidad en su rutina habitual al crear sitios web. La mayoría de estos consejos se pueden implementar sin afectar la apariencia general de su sitio web.

• Agregue texto alternativo para imágenes: cuando use imágenes en sus sitios web, una cosa importante que la gente pasa por alto es agregar el alt="" atributo a las imágenes. Aquí hay un ejemplo de una etiqueta de imagen accesible.

img src="./cat.png' alt="A cat sitting on a chair"

La gran diferencia entre tener el atributo alt en todas las imágenes y no incluirlo es que los lectores de pantalla pueden anunciar las etiquetas alt para personas con discapacidades visuales y cognitivas. Una pauta importante es asegurarse de que la descripción alt sea relevante, es decir, que describa el contenido y la intención de la imagen real. En el ejemplo anterior, A cat sitting on a chairdescribe todo el contenido de la imagen, en lugar de solo catla descripción.

• Utilice HTML semántico: esta es otra regla importante que muchos desarrolladores pasan por alto. La mayoría de los desarrolladores utilizan etiquetas divpara representar todo y se olvidan de las etiquetas adecuadas para encabezados, listas y tablas. HTML5 proporciona elementos adicionales, como nav, sectiony aside, para estructurar mejor su contenido. Este es un ejemplo de una página bien estructurada que utiliza HTML semántico.

body  header    h1Shop/h1  /header  main    article      h2An inside look at the new Shop v2/h2      pDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum./p    /article  /main  footer    p© Shop Inc./p  /footer/body

• Proporcionar siempre una opción para saltar al contenido principal: para los usuarios que dependen de lectores de pantalla y teclado, esta función es muy importante porque proporciona la opción de saltar al contenido principal. La técnica para lograr esto es agregar un enlace para saltar al contenido principal y hacerlo invisible hasta que el elemento reciba el foco del teclado. Un ejemplo de esto es el sitio web oficial de BBC.com. Al usar el teclado para navegar, la opción de saltar al contenido principal se proporciona cuando el teclado se centra en ese elemento y este es visible.

• Identificar el idioma de la página y los cambios de idioma: Recuerde siempre indicar el idioma principal de cada página mediante el langatributo en la HTMLetiqueta. Por ejemplo, html. Utilice el langatributo en elementos específicos cuando el idioma del elemento sea diferente al del resto de la página.

htmlhead  .../headbody.../body/html

• Asocie una etiqueta a cada elemento del formulario: siempre que sea posible, utilice el labelelemento para asociar texto con elementos del formulario de forma explícita. El foratributo de la etiqueta debe coincidir exactamente con el iddel control del formulario. En situaciones específicas, puede ser aceptable ocultar labelelementos visualmente, pero en la mayoría de los casos, se necesitan etiquetas para ayudar a todos los lectores a comprender la entrada requerida.

form  label for="username"Username/label  input type="text" name="username"  label for="email"Email/label  input type="email" name="email"/form

Herramientas que se pueden aprovechar al crear sitios accesibles

Hay infinidad de herramientas disponibles para ayudarte a crear sitios accesibles. A continuación, te presentamos algunas que puedes usar para que tus sitios sean más accesibles y para obtener más información sobre a11y en general:

• a11y.css
• Información sobre accesibilidad
• hacha
• Vox cromado
• Comprobador de contraste
• Faro
• Sin café
• Pa11y
• Total11 años
• Espiga
• Voz en off
• Ola

Puede encontrar más herramientas para aprovechar en la Lista compilada de herramientas de evaluación de accesibilidad web, junto con algunos otros recursos generales:

• Pautas de accesibilidad al contenido web (WCAG 2.1)
• Iniciativa de Accesibilidad Web del W3C
• Lista de verificación de WebAIM
• Lista de verificación del proyecto a11y
• a11y yo

Conclusión

En este artículo, aprendiste qué es la accesibilidad web y qué significa que los usuarios con diferentes capacidades puedan utilizar un sitio web accesible. También aprendiste sobre los distintos métodos que puedes utilizar para que los sitios sean accesibles para todos los usuarios. Por último, examinaste ejemplos de HTML accesible para comprender cómo implementar cada una de las sugerencias de este tutorial.