Tecnología y Coaching para Emprendedores

Introducción a la Accesibilidad Web

sublime-text

Según la W3C, la accesibilidad web implica que las personas con discapacidades puedan usar la Web. Más específicamente, la accesibilidad web significa que las personas con discapacidades puedan percibir, comprender, navegar e interactuar con la Web y, además, que puedan contribuir a ella.

Son pocos los sitios web diseñados en base a la accesibilidad, pero debemos tener en cuenta que sólo en España un 10% de la población tiene una discapacidad diagnosticada, por no decir las personas que por motivos de edad han perdido parte de sus facultades y tienen dificultades en el uso de la Web. En el concepto de accesibilidad, también hay que englobar los diferentes terminales de navegación, las resoluciones de pantalla y las velocidades de conexión, pues en muchos países todavía se navega con módem.

En este artículo resumimos los principales puntos a tener en cuenta cara a diseñar un sitio web desde el punto de vista de la accesibilidad.

Directrices  Básicas de Accesibilidad Web

Ofrecer alternativas en formato texto.

Hay muchas personas que no pueden ver las imágenes (por ejemplo, porque son ciegas), ni acceder a los audios o vídeos de nuestro sitio web. Por eso, la WCAG recomienda lo siguiente:

  • Utilizar el atributo alt para las etiquetas img, input y applet.
  • Para contenido complejo (por ejemplo tablas), ofrecer alternativas, por ejemplo longdesc con img o frame o un enlace dentro de un object.
  • Para imágenes de mapas, utilizar el atributo alt con area, o utilizar el elemento map con elementos a.
  • En el caso de una presentación multimedia, ofrecer la posibilidad de un audio que explique los elementos gráficos.

Ofrecer alternativas sin color

Hay personas que tienen dificultades en distinguir determinados colores o que usan monitores monocromos. Si dejamos que la información relevante quede determinada por el uso del color, estas personas tendrán serias dificultades en navegar por nuestra web.

  • Asegurarnos que la información transmitida a través del color también se transmite sin el uso del mismo.
  • Buscar el contraste entre el fondo de pantalla (background color) y la parte principal (foreground color).

Utilizar de manera correcta el markup de la web

Se trata de estructurar la web de manera que lo que sea un titular vaya entre etiquetas <h1>..<h6>, esto no sólo favorece a las personas con discapacidad, sino también nuestro SEO.

  • Utilizar el markup adecuado a cada ocasión, separando la estructura del aspecto visual.
  • Crear un código que valide por la W3C.
  • Utilizar CSS para el aspecto visual.
  • Utilizar las etiquetas <h1>…<h6> para titulares.
  • Marcar las listas con  elementos de lista como<ul><li>
  • Utilizar la etiqueta quote siempre que se trate de una cita.

Utilizar un markup que permita su lectura e identificación

Hay personas que navegan con screen readers, por lo que necesitan saber en qué idioma está el texto para que lo lea con la pronunciación correcta.

  • En HTML usar el atributo lang, en XMLxml:lang.

Permitir una navegación escalable conforme al “progressive enhancement”.

Hay muchos usuarios que navegan con el JavaScript activado o con navegadores antiguos, como IE7 o IE8. No se trata de diseñar nuestras webs cara a IE7, sino de permitir una experiencia de usuario positiva para alguien que aún navegue con este navegador. O que alguien que no tenga JavaScript activado no pueda tener una buena experiencia de usuario en la web.

  • Ofrecer una web navegable con JavaScript desactivado.
  • Ofrecer una web navegable con las imágenes desactivadas. Esto es, si hay titulares que son en formato imagen, ofrecer una alternativa de texto.
  • Estructurar el contenido de manera jerárquica, de modo que si el CSS está desactivado, se pueda distinguir un titular del que no lo es.

Estas son las principales pautas a tener en cuenta para el diseño de sitios web accesibles, para más información, os recomiendo ir a la web de WCAG (en inglés).