Accesibilidad Web
Guía Práctica

Mini Charlas Tecnológicas @ UTN 2013

Pablo Botta

Pablo Botta

Algunos detalles para que me conozcan un poco mejor...

Organización de la charla

  • Primera parte: Tomar conciencia sobre una problemática existente: la innaccesibilidad del contenido presente en la Web.
  • Segunda parte: Acercar soluciones simples para mejorar la accesibilidad Web. Útiles tanto para desarrolladores Web como para creadores de contenidos.

Accesibilidad Web

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos a la misma.

Fuente: Introducción a la Accesibilidad Web - W3C

Analogía para entender la
accesibilidad Web

En nuestro entorno cotidiano (la web) y a pesar de que las personas (usuarios) cuenten con herramientas, tales como una silla de ruedas, para disminuir sus dificultades (tecnologías de apoyo, por ejemplo un lector de pantalla) existen lugares públicos o privados (sitios web) que NO tienen las condiciones para recibirlos (Accesibilidad Web).

Discapacidad en números

Aproximadamente el 15% de la personas en el mundo están afectadas por algún tipo de discapacidad. (13 veces la población Argentina)
Fuente: World Report on Disability 2011 - OMS

En Argentina aproximadamente el 7.1% de la población sufre de algún tipo de discapacidad (equivaldría a toda la población de la provincia de Santa Fe).
Fuente: Encuesta Nacional de Personas con Discapacidad 2002-2003. INDEC

¿Por qué no se desarrolla accesible?

(Opinión Personal)

La accesibilidad Web NO es una tendencia

Términos como HTML5, CSS3 o Internet Explorer tienen mayor interés que Accesibilidad Web

Personas con discapacidad versus uso de IE 6 y 7 (combinado)

Argentina Mundial
Internet Explorer 6 y 7 2.0% 8.0%
Población con discapacidad 7.1% 15.0%

Existe la creencia entre los desarrolladores y los dueños de negocio que no existe público beneficiado por la Accesibilidad Web, además que no es tema de gran debate.

Fuente: Google Trends, Net Market Share y Stats Counter

¿Por qué debería aplicarla entonces?

Imagen cortesía de Tsahi Levent-Levi

La accesibilidad Web es para TODOS

Su implementación en sitios Web beneficia a todas las personas y no solo a aquellas que tienen un algún tipo de dificultad.

Si la accesibilidad Web mejora la experiencia de usuario para las personas con discapacidades, por qué no lo haría en personas sin dificultades.

"Discapacitados temporales"

Las estadísticas anteriores no tienen en cuenta que todos podemos quedar temporalmente disminuidos, siendo entonces el número de personas afectadas, en un período de tiempo, aún mayor.

Imagen cortesía de Cameron Parkins

Otros grupos beneficiados directamente

  • Personas mayores
  • Personas sin estudios o que no sean nativas en la lengua del sitio Web
  • Personas con conexiones lentas o que utilizan tecnologías desactualizadas
  • Nuevos usuarios o usuarios infrecuentes del sitio


Fuente: Web Accessibility Web Standards and Regulatory Compliance

Aumenta las conversiones

La aplicación de técnicas de Accesibilidad Web mejora la facilidad de uso, legibilidad y comprensión del contenido en la Web.

La empresa Legal & General aumentó un 300% sus conversiones y disminuyó un 10% su tasa de rebote tras aplicar un nuevo diseño accesible.

Legal & General recibe 34 mil visitantes únicos diarios según Alexa.

Este ejemplo de aumento de conversiones por aplicar accesibilidad Web fue presentado por Karl Groves en su blog.

Por normativa

En Argentina como en otros países del mundo ciertos grupos de páginas o sitios Web están obligados a ser accesibles.

La ley de ACCESIBILIDAD DE LA INFORMACION EN LAS PAGINAS WEB número 26.653 se encuentra en vigencia desde el .

Esta ley obliga a los sitios alcanzados (poderes del Estado Nacional, organismos autárquicos o descentralizados, entes públicos, empresas públicas y las empresas privadas contratistas del Estado) a desarollar sus sitios de manera accesible o a adecuar sus sitios actuales a las normativas de Accesibilidad Web Internacionales (WCAG).

Pautas de Accesibilidad para el contenido Web (WCAG)

Estado actual de los sitios Web Gubernamentales en Argentina

El 98% de los sitios gubernamentales alojados bajo los dominios gob.ar y gov.ar presentan al menos una barrera de acceso al contenido.

Estos sitios fallan en algunos de los criterios de nivel A propuestos en las pautas WCAG.

Fuente: Accesibilidad Web Gubernamental - 2012

Otros beneficios

  • Aumenta la usabilidad del sitio
  • Mejora el rendimiento de los usuarios
  • Aumenta la interoperabildad
  • Mejora la performance

Finalmente ...

Para ser un buen tipo

Imagen cortesía de Kelly Sue

¿Cómo la aplico?

Técnicas prácticas de Accesibilidad Web

Consejos 80-20 (*)

Concentrarnos en un pequeño número de técnicas que tendrán efecto en una gran cantidad de barreras (Principio de Paretto).

Con un pequeño esfuerzo podemos mejorar ampliamente la accesibilidad Web de nuestros sitios.

(*) 80-20 es marketinero y no 100% real.

1 - HTML correcto y semnático

Problemas de accesibilidad

  • Personas accediendo a la Web con medios no tradicionales (distintos a los navegadores) encuentra obstáculos para acceder a la información.
  • Personas esperando un determinado comportamiento de la Web se encuentran con uno diferente.
  • Lo que es en realidad (por ejemplo un button) no es lo que se dijo (div).

Utilizar HTML correcta y semánticamente

  • Un
    <div class="boton-guardar">
    no es un botón (
    <button class="boton-guardar">
    ).
  • Un
    <span onclick="document.location='index.html'">
    no es un link (
    <a href="index.html">
    ).
  • Un
    <span class="etiqueta">
    no es una etiqueta (
    <label for="algun-input" class="etiqueta">
    ).
  • Un
    <div class="page-title">
    no es un título (
    <h1 class="page-title">
    ).

API de Accesibilidad

Son un conjunto de funciones que otorga un sistema operativo para facilitar la accesibilidad de cualquier aplicación.

Los navegadores Web implementan esta API sobre los elementos HTML presentes en cada sitio.

Usar elementos nativos con un cierto significado, es asegurarse que tengan su correspondiente acceso a la API.

Utilizar HTML de manera incorrecta o no semántica anula el acceso a las API de accesibilidad, afectando entre otros a las siguientes interacciones: foco, estados, acceso por teclado.

Etiquetas para campos de entrada de datos

Los controles sin etiquetas no comunican a las personas con dificultades en la visión el objetivo de dicha entrada y tampoco los requisitos del mismo (ejemplo: es obligatorio).

Ejemplo: API Santa FE - Reimpresión de boleta.

<label title="Este campo es obligatorio" for="ctal">Número de Partida:</label>
<input type="text" name="cta1" id="cta1" />
                       	

Beneficios del uso correcto del marcado

  • Obtener comportamiento nativo para los elementos presentes en una Web, idéntico al de otras aplicaciones de la plataforma, compatible con el comportamiento que los usuarios están acostumbrados a esperar.
  • Mejora la usabilidad, porque muchos de estos controles ya traen comportamiento nativo. Por ejemplo, los enlaces y botones ya tienen acceso por teclado o al hacer click en una etiqueta se hace foco en una control.

2 - Alternativas textuales a elementos
visuales

Problemas de accesibilidad

  • Personas con discapacidad visual no pueden acceder al contenido no textual
  • Toda información transmitida por una imagen, video o cualquier otro elemento visual debería tener una alternativa textual
  • No todo se resuelve incluyendo el atributo alt

No todo es lo que parece

Las imágenes de fondo (en CSS) también requieren de alternativas textuales

La página de la Municipalidad de Rosario contiene elementos visuales sin alternativas textuales.

Posibles soluciones

Utilizar el atributo title en aquellos elementos que su contenido va a ser una imagen de fondo en CSS.

Como usar el atributo alt de manera correcta (primera parte)

  • Utilizar el atributo alt en todas imágenes de la página, el contenido del atributo debe describir la función de la imagen y no la imagen en si misma.
  • Asegurarse que la descripción de la imagen sea útil. Por ejemplo, si la imagen es el logo de una empresa el alt debería ser el nombre de la empresa y no "logo".
  • Las imágenes dentro de enlaces deben describir hacia donde se dirijen. Por ejemplo, si el logo de la empresa está enlazado a la página principal debería marcarse como alt="Principal"
  • No empenzar el contenido del atributo con "foto de ..." o "imagen de ...", ya que las tecnologías de apoyo actualmente ya realizan esto.

Como usar el atributo alt de manera correcta (segunda parte)

  • Utilizar el atributo vacío alt="" cuando la imagen que se está describiendo cumple una función decorativa o no es necesaria para la comprensión del contenido. Por ejemplo si la imagen es un gráfico cuya información se encuentra descripta en el texto de la página, no existe necesidad de repetir la información.
  • Utilizar la misma imagen varias veces en una página Web no significa que el contenido del atributo alt tenga que ser el mismo para cada una, ya que el contenido del mismo cambia con el contexto de la imagen. Por ejemplo, ya vimos que un logo podría reemplazar a el nombre de la empresa alt="Mi empresa", puede utilizarse en un enlace alt="Principal" o pudiera ser simplemente un decorado alt="".

Cómo ocultar contenido a los usuarios videntes

En ocaciones para dar una alternativa textual requerimos de texto extra que visualmente puede estropear el diseño de una página Web.

Existen técnicas en CSS para ocultar texto visualmente mientras que continuan siendo leídos por los programas de lectura de pantalla. Por ejemplo la clase "visuallyhidden" del HTML5 Boilerplate.

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
						

Esta técnica puede ser útil por ejemplo para ocultar visualmente contenido que tenga sentido a la vista pero no a la lectura. Por ejemplo un sistema de pestañas.

CAPTCHA: Separando humanos de máquinas desde 1998

Se trata de una prueba desafío-respuesta utilizada para determinar cuándo el usuario es o no un ser humano. Mal implemetada puede resultar ser una barrera para personas con dificultades.

El sitio de ANSES presenta un CAPTCHA sin alternativa para las personas con alguna discapacidad visual.

CAPTCHA accesible

Utilizar sistemas que sean accesibles como reCAPTCHA.

El servicio Web reCaptcha ofrece una alternativa sonora para la comprobación de si somos humanos o no.

Otra alternativa es realizar directamente preguntas textuales.

Prueba que eres humano, ¿cuanto es dos más dos?

WAI-ARIA: Aplicaciones Web Accessibles

Es una especificación de la W3C que describe como incrementar la accesibilidad de las páginas Web, en particular, aquellas con contenido dinámico y con componentes de interfaz desarrollados con HTML, CSS y JavaScript.

  • <button aria-label="cerrar">x</button> será leído como "botón cerrar".
  • aria-hidden="true" representaría contenido textual que no debería ser leído.

Beneficios de las alternativas textuales

  • Permite el acceso a personas con discapacidad visual.
  • Incrementa el SEO del sitio. El ejemplo más concreto son las infografías en la Web. Que sin su alternativa textual, nunca su contenido sería indexado por los buscadores.

3 - Accesible por teclado

Problemas de accesibilidad

  • Personas con imposibilidad de utilizar un mouse no pueden acceder al contenido diseñado para ser accedido únicamente por ese dispositivo.
  • Toda acción que pueda realizarse mediante el mouse debería poder efectuarse utilizando el teclado u otro dispositivo o medio.
  • No todo se resuelve utilizando el atributo accesskey

Ejemplo del problema

En el sitio de Garbarino hay lugares de la página que no se pueden acceder por teclado.

Cómo lograr que un elemento pueda recibir foco

En ocaciones requerimos lograr que un elemento HTML(que no recibe foco de manera nativa) pueda recibir foco.

Mediante el atributo tabindex podemos lograr que un elemento reciba foco. Si marcamos el valor en 0 recibirá foco de acuerdo al flujo natural del documento.

<div tabindex="0" class="x-widget"><!-- contenido --></div>
						

Nunca retirar el outline de los elementos

Retirar el outline provoca que no se pueda saber que elemento tiene el foco, afecta a personas que navegan utilizando la vista y el teclado.

Ejemplo de lo que no hay que hacer: Página de trámites Santa Fe.

Algunos reset de CSS o templates incluyen erroneamente el siguiente código:

*:focus {
    outline: 0;
}
                        

Solución: No eliminar el outline del navegador, o proveer uno de mayor contraste.

Cuestiones a comprobar

  • Comprobar que todos los elementos que provean interacción (enlaces, botones, campos de textos, controles, etc.) puedan obtener foco mediante teclado.
  • Cuando sea necesario romper con el orden lógico del flujo del documento, el foco de los elementos debe ser movido programáticamente. Por ejemplo al utilizar un diálogo modal.
  • Que existan disparadores alternativos a las acciones que se activan en el estado "sobre" (hover).
  • Que se puedan disparar todas las funciones mediante mouse y teclado simultaneamente.
  • Que existan teclas rápidas para ejecutar las funciones más comunes.

Beneficios de la navegación mediante teclado

  • Permite la navegación y utilización del sitio a personas con alguna discapacidad motora.
  • Permite el acceso a las personas con dificultades visuales porque este grupo también requiere de la utilización del teclado para navegar una Web.
  • Aumenta la productividad de los usuarios en la utilización del sitio. Cuando una aplicación permite la utilización de atajos de teclado y la operabilidad utilizando el mismo esta se vuelve más productiva.

4 - Contraste de colores y texto legible

Problemas de accesibilidad

  • Personas con moderada o baja visión y personas con algún grado de daltonismo pueden encontrar dificultad en leer texto con bajo contraste.
  • Personas con dificultades cognitivas, del lenguaje o de aprendizaje pueden no percibir el texto y/o perder el foco de lectura si el texto es presentado de una manera que sea compleja de leer. Por ejemplo si las distintas líneas del texto están muy cerca entre si o si el texto se encuentra justificado hacia algunos de los bordes del recuadro.
  • Personas con dificultades en la visión o en la lectura de texto pueden enfrentar problemas en mantener el foco y seguir el flujo de largas líneas de texto o si es necesario realizar scroll horizontal para poder continuar leyendo el texto presentado en pantalla.

Problema con la legibilidad de un texto

Cuando un texto no es presentado de manera correcta incluso a cualquier persona le puede resultar difícil poder leerlo e interpretarlo.

Ejemplos: Sitio Web UTN - Regional Rosario y Portal de trámites Santa Fe

Soluciones

  • Las líneas de texto deben contener un número aproximado de 80 carácteres. (Ver herramientas)
  • El alto de cada línea (line-height) debe ser al menos de una vez y media (1.5em) del tamaño de la fuente.
  • El contraste de color entra la fuente y el color de fondo tiene que ser suficiente. (Ver herramientas)

Beneficiones de mejorar la legibilidad

  • Disminuir la cantidad de rebotes en las páginas Web, haciendo que el texto sea más agradable y fácil de leer.
  • Permitir el acceso a personas con dilexia, personas con problemas en la visión o personas con problemas de aprendizaje.
  • Mejora la visualización en ambientes de mucha luz o con dispositivos en modo de ahorro de energía activado.

Mitos sobre Accesiblidad Web

  • MITO: Es incompatible con JavaScript. Sin embargo, por ejemplo el 98% de personas que navegan utilizando un lector de pantalla, tienen JavaScript activado [fuente].
  • MITO: Convierte a los sitios web en feos y aburridos. Sin embargo, con el mismo código HTML se pueden hacer maravillas de diseños solo con CSS [ejemplos en Zen Garden]. Únicamente hay que evitar introducir barreras con nuestro CSS.
  • MITO: Requiere mucho más tiempo. Pero si se incluye dentro del proceso de desarollo no debería aumentar el costo de las soluciones.
  • MITO: No aporta ningún beneficio extra. Salvo que mejora la usabilidad de nuestro sitio al mismo tiempo que los tiempos de carga y el SEO.

Herramientas

Resumen

  • Otorgar a cada elemento la etiqueta HTML que le corresponda, utilizando el lenguaje de una manera válida.
  • Etiquetar correctamente todo campo de entrada de un formulario.
  • Proveer alternativas textuales a elementos visuales, utilizando el atributo alt de manera correcta y CAPTCHA accesibles.
  • Permitir el acceso y utilización de cada elemento en una Web mediante teclado
  • El contenido del sitio tiene que ser legible.

Preguntas

No todas las preguntas las responde Google

Cortesía de Jay Gooby

Gracias

Accesibilidad es pensar en todos


Contacto

@pablo_botta en Twitter - p4bl1t0 en GitHub - Pablo en Google Plus Mail: pabloluisbotta(arroba)gmail.com