Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Mejora la accesibilidad web de tus proyectos

Accesibilidad Web

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles de como podemos mejorar la accesibilidad web de nuestros sitios y aplicaciones web.

La accesibilidad web garantiza que nuestros proyectos puedan ser consumidos por cualquier persona, a pesar de sus discapacidades.

Tim Berners-Lee, Director del W3C e inventor de la World Wide Web, dice:

"El poder de la web está en su universalidad".

Como personas creadoras de proyectos en la web, es nuestra responsabilidad garantizar que todos tengan acceso a ellos. La accesibilidad pareciera complicada, pero es mucho más fácil de lo que suena.

A continuación te daré un par de consejos para asegurar que todos tus proyectos sean universales, esto no sólo ayudará a los usuarios de lectores de pantalla, sino también mejorará la experiencia de navegación para conexiones lentas. 

¿Qué es la Accesibilidad Web?

Según W3C, la accesibilidad web significa que cada persona puede percibir, comprender, navegar, interactuar y contribuir a la web . En este sentido, la accesibilidad abarca todas las condiciones que afectan el acceso a la web, incluyendo discapacidades visuales, auditivas, físicas, del habla, cognitivas y neurológicas.

Encontrarás un montón de contenido sobre este tema en la web de la Iniciativa de Accesibilidad Web (WAI). Con esto en mente, aquí mis consejos:

1. No dependas del color.

El color es una poderosa herramienta que a menudo usamos para expresar emociones y comunicar mensajes en la web. Sin embargo, no debemos poner toda nuestra fe en el color para transmitir significado e información a nuestros usuarios.

¿Por qué? Por ejemplo, es ampliamente conocido que el verde significa "correcto" y el rojo significa "incorrecto", pero ¿qué sucede cuando usamos esto como nuestro único medio de comunicación?

Si mostramos mensajes importantes en nuestras interfaces de usuario usando sólo color para transmitir información, dejamos fuera al 4,5% de la población que sufre de ceguera del color (daltonismo). 

El color debe complementar un mensaje de error o de confirmación, pero no puede ser la única herramienta que usamos. Con el fin de estar seguros de que llegamos a todos nuestros usuarios, siempre debemos agregar etiquetas o iconos que muestren si la información rellenada en un formulario es correcta o incorrecta.

Accesibilidad de color

2. No bloquees el zoom.

En el responsive design, podríamos cometer errores irresponsables. Uno de ellos es la aparición de la escala máxima = 1.0, que deshabilita la funcionalidad para ampliar las páginas web mediante dispositivos móviles.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

El astigmatismo afecta a entre 30 y 60% de los adultos en el mundo, pero la visión borrosa puede afectar a personas de todas las edades. La capacidad de acercarse es una herramienta para simplificar la vida cotidiana de estas personas. Así que la próxima vez que estés construyendo un sitio web recuerda pensar en cada usuario con visión borrosa.

Además de permitir a los usuarios hacer zoom libremente en dispositivos móviles, recuerda también comprobar que su diseño se ve bien en un zoom de hasta 200% en los navegadores de escritorio.

3. Usa el atributo alt.

El atributo alt es obligatorio para cada etiqueta img pero un atributo alt vacío es completamente válido. Si una imagen es decorativa o no es necesaria para entender el contenido de la página se puede utilizar alt = "". Los lectores de pantalla le dicen al usuario que una etiqueta <img> es una imagen.

La función de una imagen es tan importante como su significado: si un logotipo se vincula a la página de inicio del sitio web, su texto alternativo debe ser algo así como "Home Page" en lugar de "Logo".

El texto alternativo no es sólo accesibilidad. A veces, los usuarios con conexiones de datos lentas desactivan las imágenes para lograr una experiencia de navegador más rápida. Ten a esos usuarios en mente siempre que escribas los atributos alt.

Pero no todas las imágenes en su sitio web son etiquetas img, ¿verdad? Puede que tengas un SVG o dos por ahí o un sistema de iconos SVG completo.

¿Cómo podemos hacer SVG accesible para todos? Afortunadamente para nosotros, el estándar de gráficos vectoriales escalables nos ha cubierto. Para describir nuestros vectores tenemos las etiquetas <title> y <desc> para descripciones cortas y largas.

<svg xmlns="http://www.w3.org/2000/svg">
    <title>Título</title>
    <desc>Descripción</desc>
    <g fill="none" fill-rule="evenodd"><g><g><g><path d="M51.488 2.5v45H6.278v-45h45.21zM54 0H3.767v50H54V0zM40.563 25.75l-1.193-.5c-2.072-.875-2.95-1.438-2.95-2.875 0-1.188.878-2.063 2.322-2.063 1.38 0 2.26.563 3.077 2.063L45.585 20c-1.57-2.75-3.767-3.813-6.844-3.813-4.333 0-7.033 2.75-7.033 6.313 0 3.875 2.323 5.75 5.776 7.25l1.193.5c2.197.938 3.515 1.563 3.515 3.188 0 1.374-1.255 2.374-3.265 2.374-2.386 0-3.704-1.25-4.772-2.937l-3.893 2.25c1.382 2.75 4.333 4.875 8.79 4.875 4.585 0 7.975-2.375 7.975-6.688-.063-4-2.323-5.812-6.467-7.562zm-12.935 7V16.375h-4.835v16.313c0 2.374-1.005 3-2.574 3-1.634 0-2.325-1.126-3.078-2.438l-3.956 2.375C14.316 38 16.576 40 20.406 40c4.27 0 7.222-2.25 7.222-7.25z" fill="#FFBF00"/><ellipse fill="#FFF" cx="5.023" cy="35" rx="5.023" ry="5"/></g></g></g></g>
</svg>

4. Agrega subtítulos a videos.

Esta podría ser una de las cosas más difíciles de lograr, no debido a una dificultad técnica, sino porque puede llevar mucho tiempo.

Tomemos YouTube como ejemplo. Una vez que subas un video a la plataforma, puedes habilitar subtítulos. Estos se generan automáticamente y pueden resultar imprecisos en algunas circunstancias, dependiendo del idioma, el ruido de fondo o el acento del hablante. Sin embargo, estos son muy fáciles de implementar y pueden funcionar hasta cierto punto bien.

Si estamos buscando 100% de subtítulos exactos es difícil confiar en YouTube para obtener una buena copia, por lo que debemos escribir los subtítulos nosotros mismos. YouTube tomará los formatos de subtítulos más comunes (.srt, .sub y .sbv) y nos permitirá escribir los subtítulos en la propia plataforma, lo cual puede ser muy conveniente si no tenemos ningún software de subtítulos.

Pero tal vez no quieras utilizar YouTube, tal vez quieras utilizar un video HTML5 alojado en tu servidor. ¡No te preocupes! HTML5 incluye la etiqueta <track>, que puede utilizar para adjuntar fácilmente tantos subtítulos y subtítulos como desee usando el formato WebVTT.

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track label="English Captions" kind="captions" srclang="en" src="captions.vtt" default>
    <track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>

5. Semántica.

A pesar de la creencia común, la semántica no nació con HTML5. Ésta ya estaba desde la primera página HTML y ha mejorado mucho desde entonces. Con el estándar HTML5, se introducen nuevas etiquetas semánticas para nuestro uso diario como section, article, aside, footer, header, nav, main, figure, figcaption, etc.

Cuando escoges conscientemente una etiqueta <h1> sobre un <p> o un <span>, estás cambiando deliberadamente el significado de un elemento, proporcionando jerarquía y construyendo una estructura de árbol de la información de tu documento.

Los lectores de pantalla no son ajenos a esto. De hecho, la semántica es una de sus armas más útiles. Como dice el Tio Ben Parker "un gran poder conlleva una gran responsabilidad", así que asegúrate de utilizar la etiqueta semántica adecuada para cada elemento.

6. Utiliza la etiqueta correcta.

Como un seguimiento al punto anterior me gustaría discutir el uso correcto de las etiquetas HTML por  ejemplo:

<button> vs <a>


Las etiquetas <a> tienen por objeto vincular un archivo a otro o abrir vínculos en una nueva pestaña o en la actual. Sin embargo, esta etiqueta no es ideal cuando queremos activar acciones como menús de hamburguesas o galerías de imágenes. El elemento de <button> es la opción correcta para estas situaciones.

<button> vs <input type="button">

Además, la etiqueta <button> puede confundirse fácilmente con el elemento de entrada botón de formulario <input type="button">, pero la diferencia depende de que el primero pueda tener más contenido (texto, imagen o incluso ambos). Adicionalmente hay que considerar que si el contenido de un botón no es suficientemente explícito (por ejemplo una "X" en un botón de cierre), debemos añadir un atributo aria-label para ayudar a explicar la función.

<button aria-label="Close">X</button>

7. Usar roles cuando sea necesario.

Con el fin de decir a los usuarios de lectores de pantalla que nuestro enlace desencadena una acción y no es, de hecho, una etiqueta <a> común, debemos agregar el atributo de función con el valor "botón".

¡Pero cuidado! 

Al escribir tu JavaScript necesitas llamar tus funciones no sólo en el tecleo sino también cuando el usuario presiona la barra espaciadora. Esto es necesario porque el comportamiento utilizado para los botones es diferente del utilizado para los enlaces y el usuario debe ser capaz de activar la acción en cualquiera de estos comandos.

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
    Abrir Gatito
</a>
function handleBtnClick(event) {        
    // Tu código
}

function handleBtnKeyPress(event) {
    // Checa si se ha presionado enter o barra espaciadora
    if (event.keyCode === 32 || event.keyCode === 13) {
        // Preeven la acción predeterminada de la tecla
        event.preventDefault();
        
        // Tu código
    }
}

Ten en cuenta que los roles aria no suelen ser necesarios a menos que rompa las reglas, como en el ejemplo anterior. Los elementos semánticos HTML tienen un rol predeterminado ya aplicado: "navegación" para la etiqueta <nav>, "enlace" para la etiqueta <a>, etc. Esto significa que un atributo de función sólo es necesario cuando deseamos cambiar estos valores predeterminados. Aquí puedes leer más al respecto.

8. Técnicas de ocultación.

Hay algunos métodos disponibles para ocultar las cosas con HTML y CSS. Esta tabla te ayudará a encontrar la mejor alternativa para cada situación:

  • CSS visibility: hidden. Oculta el elemento desde la vista, pero su espacio original permanece ocupado (como opacidad 0).
  • CSS display: none. Oculta el elemento de la vista y su espacio original se pierde, el siguiente elemento en el flujo tomará su lugar.
  • HTML5 hidden attribute. Igual que display:none
  • Aria-hidden = “true". El contenido se muestra en el navegador, pero no se transmite al usuario a través de la tecnología de asistencia

9. Sigue los estándares de accesibilidad web.

La accesibilidad en la web es difícil y las normas y directrices están aquí para ayudar. Puede ser aburrido al principio, pero te aseguro que descubrirás código y prácticas que nunca supiste que existían. Aquí te dejo la documentación de los estándares de la W3C y las directrices de WCAG.

10. Auditoría y revisión.

Una vez que hayas aplicado todo este conocimiento, es hora de probarlo. Aquí hay una lista de las mejores herramientas para auditar la accesibilidad de los sitios web:

  • ChromeVox: disponible para usuarios de Mac y Windows, esta extensión de Chrome es un lector de pantalla que puede usar para probar su sitio web.
  • Accessibility Developer Tools for Chrome: Otra extensión para este navegador que agrega una opción de auditoría de accesibilidad en las herramientas de desarrollo de todos los días.
  • Colorblind Web Page Filter: Prueba tu sitio web para diferentes tipos de ceguera de color con esta herramienta en línea.
  • Validator W3C: Esta herramienta oficial de W3C te permitirá saber si tu marcado HTML sigue las reglas de accesibilidad web.
  • FREE WCAG 2.0 AA REPORT: La Oficina de Accesibilidad a Internet ofrece un informe detallado que proporciona una visión general de cómo tu sitio web se cotiza cuando se compara con los puntos de control AA / AA de WCAG.
  • WAVE:  Una herramienta de evaluación de accesibilidad web hecha por WebAIM.
     

La accesibilidad de un sitio web no siempre es fácil de implementar, pero si lo haces parte de tu flujo de trabajo diario (en lugar de una lista de comprobación de última hora), la implementación y las pruebas se harán más fáciles con el tiempo.

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... 

...bye ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal