Accesibilidad para diseñadores web

por Natalia Ventre el 13/06/2013 ・ podés leerlo en 8 minutos ・

Para desarrollar un sitio web para una audiencia muy específica, por ej. para personas ciegas hay que entender a fondo qué tecnologías de asistencia utilizan y cómo navegan la web, pero con sólo seguir algunas pautas se puede puede crear un sitio web accesible, es decir usable para la mayor cantidad de usuarios posible, incluyendo a aquellos que tienen discapacidades no sólo visuales sino también auditivas, motrices y cognitivas (dificultades de aprendizaje, desórdenes de atención, etc.).

Un sitio web accesible también se llama inclusivo en referencia a que contribuye a la inclusión social de personas con discapacidades, adultos mayores, usuarios de dispositivos móviles, personas con conexiones lentas, personas con bajo nivel de alfabetización y personas con discapacidades temporales (por ej. con un brazo enyesado).

¿Por qué es importante la accesibilidad?

  • Igualdad de oportunidades: Los sitios web accesibles permiten que las personas con capacidades diferentes accedan a más oportunidades de educación y empleo y a que puedan participar en actividades que damos por sentado, como leer noticias, etc.
  • Ley: Es un requisito legal en algunos casos y una buena práctica en general. Saber cómo hacer un sitio web accesible puede ser una oportunidad laboral para diseñadores y desarrolladores web.
  • Beneficia a todos: Un sitio web fácil de leer, fácil de navegar, etc. es beneficioso para todos los usuarios. Se pueden hacer diseños que comuniquen los valores del producto o servicio, que sean visualmente agradables y accesibles al mismo tiempo.

Diseño

El color debe ser una ayuda, pero no el único medio para trasmitir un mensaje. Por ej. en los errores de los formularios, tenés que indicar que falta completar un campo además de ponerle un borde rojo. Algunas aplicaciones de diseño como por ej. ColorSchemer Studio simulan el daltonismo.

Suficiente contraste entre el color de fondo y el color del texto hace al sitio web más fácil de leer para todos. Una técnica para evaluar el contraste de cualquier diseño es verlo en escala de grises. Contrast Ratio es una herramienta online para calcular el contraste entre 2 colores. Indica si es o no aceptable y en qué contexto.

Calculadora online Contrast Ratio

Los carruseles, acordeones y otros elementos con movimiento son recursos populares para llamar la atención, ¿pero realmente valen la pena? Hay estadísticas sobre la interacción con los carruseles que prueban que son poco efectivos y estudios de usabilidad que afirman que los carruseles automáticos molestan a los usuarios. El contenido en movimiento es también un problema para la accesibilidad porque afecta la concentración y dificulta o inclusive hace imposible la lectura. Si vas a incluir un carrusel en tu diseño, preguntáte si realmente es necesario, aseguráte que los intervalos de tiempo son adecuados, que tenga controles para pausar/reanudar y no lo inicies automáticamente1.

Código

WAI-ARIA es una especificación para que las tecnologías de asistencia, como por ej. un software de lectura de pantalla reconozca y puedan interactuar correctamente con los elementos de una página web, por ej. navegando con el teclado.

Ej. de documento HTML5 con ARIA landmark roles:

<header role="banner">
	<a title="ir a la home page" href="/"><img src="imagenes/logo.png" alt="Nombre de la Empresa"/></a>
	<nav role="navigation">
		<ul>
			<li><a href="/acerca/">Acerca</a></li>
			<li><a href="/servicios/">Servicios</a></li>
			<li><a href="/contacto/">Contacto</a></li>
		</ul>
	</nav>
</header>
<section role="main">
	<!-- Contenido principal -->
</section>
<aside role="complementary">
	<!-- Artículos relacionados, etc. -->
</aside>
<footer role="contentinfo">
	© 2013 Nombre de la Empresa
</footer>

Los ARIA landmarks roles son mojones o indicadores de las secciones de un sitio web para que el usuario de un lector de pantalla pueda saltar de una sección a otra. Es una mejora a los rudimentarios enlaces “saltar al contenido principal”. Aseguráte de que no te quede contenido huérfano, todo el contenido debe quedar dentro de alguna de las siguientes secciones:

  • banner: contenido orientado al sitio y no a la página en particular que puede incluir el logotipo de la empresa, un buscador, etc. Conceptualmente es similar al elemento header2.
  • navigation: un conjunto de enlaces para navegar el documento o el sitio. Equivalente al elemento nav.
  • search: buscador
  • main: contenido principal.
  • complimentary: contenido relacionado al contenido principal. Equivalente al elemento aside.
  • contentinfo: metadata del contenido principal. Por ej.: notas al pie, derechos de autor, etc.

No deberías marcar más de un elemento en la página con role=banner, role=main o role=contentinfo.

Más información sobre ARIA landmarks roles:

Si modificás el estilo por defecto de los enlaces en :focus, dejá una indicación visual para quienes navegan con el teclado.

a:focus{
	outline: thin dotted;
	/* o algo más obvio como background-color: yellow*/
}

Pensando en las personas con discapacidades motrices y cualquiera que use una pantalla táctil, hacé las zonas clickeables grandes, por ej. con display: block y/o con padding generoso.

Para hacer accesibles los formularios, tenés que usar apropiadamente las etiquetas label e indicar antes del input si el campo es requerido. Si por razones estéticas no querés mostrar las etiquetas, en el HTML5 Boilerplate hay varias helper classes, una de ellas sirve justamente para ocultar un elemento visualmente, pero dejarlo disponible para screenreaders:

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

Es importante que los títulos (h1–h6) se usen para representar la estructura del documento y no solamente el estilo visual porque los lectores de pantalla arman una tabla de contenidos que le sirve al usario para saber de qué se trata el documento y saltar a lo que le interesa. Por ej. el h1 es el título de la página (o la entrada de blog, o el nombre del producto, etc.), cualquier subtítulo debería ser un h2 y así sucesivamente. Entonces, si dejás que el cliente ingrese contenido a través de un editor de texto enriquecido (por ej. CKEditor, TinyMCE, etc.) deberías configurarlo, forzando pegar como texto plano, eliminando lo que no corresponda de la barra de herramientas y a su vez darle opciones para que pueda destacar textos sin interferir en la semántica.

El orden de tabulación por defecto funciona bien, generalmente no es necesario que especifiques el tabindex. Las access keys son otra característica asociada a accesibilidad, si las usás, aseguráte de no sobreescribir accesos del teclado del software lector de pantalla o del navegador3.

Contenido

El diseñador no es responsable directo del contenido pero puede educar al cliente sobre la importancia de:

  • Atributos alt: El texto alt debe ser una descripción útil de las imágenes que se usan como contenido y se deja vacío (alt=”“) para imágenes decorativas. Palabras como “foto”, “imagen”, etc. son redundantes. En Image ALT Tag Tips hay tips y ejemplos de cómo escribir buenos textos alternativos.
  • Subtítulos o transcripciones: Ofrecer transcripciones para contenido en audio (y video) beneficia a las personas con discapacidades auditivas y además resulta beneficioso para el SEO (optimización para motores de búsqueda). También es útil para los usuarios que no quiere subir el volumen para no molestar a otras personas que estén alrededor o que simplemente prefieren leer.
  • Legibilidad: Escribir claro y simple beneficia no sólo a los usuarios con discapacidades cognitivas, sino también a los que leen por arriba, a los visitantes internacionales con conocimientos básicos del idioma del sitio, etc. Los enlaces deben tener sentido fuera de contexto porque los lectores de pantalla ofrecen la posibilidad de listar todos los enlaces de una página y una lista de múltiples “haga click aquí” no tiene sentido.

Tests

WAVE es una herramienta online gratuita para evaluar la accesibilidad web. En vez de un reporte clásico, muestra la página y le superpone iconos e indicaciones. WAVE es una buena guía, pero como todo test automatizado, no sustituye al análisis que puede hacer un experto.

La Web Accessibility Checklist es una lista de puntos a tener en cuenta para hacer un sitio web accesible.

Conclusión

Un sitio web accesible es un trabajo en conjunto del diseñador web, el desarrollador front-end y el creador de contenido que beneficia a las personas con capacidades diferentes y al público en general.


  1. Más información sobre cómo implementer un carrousel inclusive en Movement on a website: 5 things to consider.

  2. En HTML5 cada sección o artículo puede tener su propio header y footer. role=banner y role=contentinfo son únicos y se refieren al sitio, no a la página.

  3. Más información sobre los contras de las access keys en Why Access Keys Are Mostly Useless for Accessibility Purposes.