Que es accesibilidad web ?
La accesibilidad web es la practica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.
Cuando hablamos de accesibilidad o un diseño accesible nos enfocamos principalmente en el Frontend, el diseño web/interfaz de proyecto es el encargado de cumplir con estándares para ser legible por cualquier persona, incluyendo a personas con discapacidad visual, auditiva, física, cognitiva, neurológica y del habla.
Lectura de interés ---> Acciones para un sitio accesible en MEXICO
a11y --> es el numeronimo de accessibility
Por que es importante la accesibilidad web ?
Implementar un diseño accesible para todos los usuarios es importante para incluir a personas en situaciones de discapacidad, incluso en algunos lugares es requerido por ley.
Ejemplo en EEUU existe una ley que menciona que, si tus usuarios están en el país, ellos tienen el derecho de que todos los productos o servicios que ellos desean utilizar sean accesibles.
Existen casos como el de Domino’s Pizza, que fue denunciado por qué el sitio no era accesible y un ciudadano los demando por eso, terminaron siendo multados millones de dólares.
Americans with Disabilities Act (ADA) became law in 1990.
Quien regular la accesibilidad ?
WCAG ---> Web Content Accessibility Guidelines (Guía de Accesibilidad para el Contenido Web). Esta Guía fue creada por la W3C (World Wide Web Consortium) a través de la WAI (Web Accessibility Initiative)
---> Actualmente esta iniciativa va en la version 2.0
Como se mide la accesibilidad ?
La accesibilidad se mide en tres niveles
- [ ] A - Es el nivel mas bajo, es una accesibilidad basica para nuestros proyectos.
- [ ] AA - Es el nivel intermedio
- [x] AAA - Es el nivel mas alto, este nivel es la meta para paginas de universidades y gobiernos.
Cuales son las Pautas WCAG 2.0?
Perceptible
Los criterios de conformidad bajo este principio se enfocan en asegurar que todo el contenido que es importante se pueda interpretar de varias maneras.
Operable
Cuando hablamos de ser operable, queremos asegurarnos que nuestro sitio es fácil de usar y navegar, que se puede navegar de diferentes maneras y con mouse y/o teclado
Comprensible
Hacer que nuestro sitio web sea comprensible nos asegura que un rango de personas lo pueden usar, desde la persona que vive con una discapacidad mental que necesita patrones comunes para saber cómo usar la web hasta la persona que va de carrera y necesita consultar algo rápido
Robusto
Cuando hacemos productos que funcionan en muchos lados, abrimos las posibilidades que cualquier persona los use sin importar su ubicación, máquina, navegador o condición
Como puedo implementarlo ?
HTML Semántico
Tal vez a ti como a mi nos mencionaron mucho de la importancia de una estructura de HTML semántico, aquí todo toma sentido.
Para que la web sea accesible se han desarrollado varios tipos de programas especiales para que personas con alguna discapacidad física puedan navegar la web, por ejemplo, un lector de pantalla. Este tipo de programas lo que hacen es leer las etiquetas de HTML y darles jerarquía para la lectura en voz alta. Por ejemplo, en la etiqueta < head > colocamos meta información que no se lee en voz alta, en < body > tenemos:
< h1, ..., h6 >,
< img >
< a >
< buttons >
< sections >
y más etiquetas que nos organizan la información, algunos si se leerán en voz alta, incluso el atributo "alt" de una imagen debe ser una breve descripción de la imagen para quien no puede ver la imagen
< img src=" .../nombre.jpg " alt="breve descripción de imagen" >
a continuación te dejo un ejemplo de una estructura de HTML semántico
<html>
<head> .... </head>
<body>
<header> ... </header>
<main>
<section> ... </section>
<section>
<article> ... </article>
</section>
</main>
</body>
</html>
Html no semántico
<html>
<head> .... </head>
<body>
<div> ... </div>
<div>
<div> ... </div>
<div>
<div> ... </div>
</div>
</div>
</body>
</html>
Por último debes saber que existe unos atributos 'aria' para todo tu HTML, aria es un acrónimo
Accessible Rich Internet Applications
Pronto hare una publicación hablando solo de los atributos 'aria'
CSS Legible
Con CSS Legible no me refiero a la facilidad de leer el código CSS, me refiero a que este de los estilos correctos para nuestro proyecto, haciendo contraste correcto de los colores, textos guía para elementos como iconos que puedan no ser de uso común, aplicación de un skip links, definición de estilos 'focus y hoves' para elementos importantes, entre otros.
- CSS Estilizado
- JavaScript Funcional
Top comments (0)