Olalla Ruiz Olalla Ruiz {blog}

Técnicas de Accesibilidad (AA)

En alguna ocasión he tenido que maquetar sitios cumpliendo los requisitos de accesibilidad que marca la WCAG 2.0 (traducción al español). EL nivel que he tenido que cumplir siempre ha sido el AA, el nivel medio de los tres que actualmente hay.

Es fácil cumplir los requerimientos básicos de accesibilidad (Prioridad 1), de hecho, antes de saber qué era una web accesible ya maquetaba las webs en el nivel A sin saberlo, personalmente considero que es esencial generar códigos limpios, claros y útiles en cualquier web. En ocasiones nos encargan un sitio accesible para personas con ciertas discapacidades, y entonces tenemos que cuidar mucho más lo que estamos maquetando.

Aquí muestro algunas, no todas, de las técnicas requeridas para poder cumplir los requisitos de la WCAG 2.0 en el nivel AA (el resto se pueden ver en http://www.w3.org/TR/WCAG20-TECHS/, un documento un poco difícil de entender al principio). Exceptuando el fijar las medidas de las capas en porcentajes %, el resto son técnicas que no nos cuesta nada incluir en nuestras páginas y estaría bien que usásemos en todas las webs siempre que nos sea posible, nos encarguen o no hacerla accesible.

Aquí algunas de las técnicas:

  • Declarar el tipo de documento como XHTML 1.0 Strict, de manera que una escritura estricta y correcta del código permita una correcta visualización del documento.
  •  Realizar un correcto uso de las etiquetas META para identificar cada página:
    Keywords: palabras clave que identifiquen el contenido.
    Description: una breve descripción del contenido de la página.
  • Establecer el idioma a la página.
    <meta http-equiv="content-language" content="es" />
  • No incluir palabras en otros idiomas (por ejemplo, en el menú deberíamos poner “Inicio” en lugar de ”home”), para facilitar la comprensión del usuario. En caso de tener que utilizar palabras en otros idiomas hay que identificarlas, por ejemplo <span lang="fr">je ne sais quoi</span>.
  • Separar los estilos completamente del código HTML, de manera que la web se pueda visualizar perfectamente sin la necesidad de la hoja CSS. En ambos casos (utilizando o no hojas de estilos) se ofrece la misma información, las hojas de estilo CSS se emplean únicamente como herramienta de diseño.
  • Proporcionar información sobre la maquetación general de un sitio (por ejemplo, mapa del sitio o tabla de contenidos).
  • Maquetar el sitio en HTML con una estructura lógica, de manera que en caso de no poder leerse el CSS, la web pueda leerse en un orden lógico (cabecera > menú > contenido > pie de página).
  • Con relación al punto anterior, mantener el mismo orden en todos los elementos repetidos en distintas páginas del sitio, de esta forma na nueva ubicación del mismo elemento no despista al usuario.
  • Emplear el uso de encabezados dentro de la estructura lógica (h1 > h6)
  • Añadir información a todas las imágenes, para que en caso de no poder visualizarse la imagen, el texto añadido proporcione la mayor información posible acerca de la misma:
    · alt: texto corto sustituto de la imagen.
    · longdesc: incluiremos una URL en la que se encuentre una descripción larga de la imagen, por ejemplo, en una gráfica con datos escribiremos en un nuevo documento la información detallada de la gráfica.
    Ejemplo: <p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p> y crearíamos el documento “chartdesc.html” en el que incluiríamos el texto descriptivo de la gráfica. (*1)
  • Incluir información extra en los enlaces para señalar el destino del mismo a través de la etiqueta title, y así facilitar la navegación. Es aconsejable utilizar textos concretos e identificables para el nombre del enlace y evitar por ejemplo enlaces con el texto “pinche aquí”.
  • Evitar el uso de imágenes para transmitir información siempre que exista otra alternativa.
  • Utilizar la medida relativa “em” para establecer el tamaño de las fuentes. Este tipo de medida relativa permite adaptar el tamaño del texto a las necesidades del usuario.
    Para que resulte más sencillo su uso, podemos establecer en la etiqueta body el tamaño de fuente a 0.625 em, y así nos resulta más fácil saber qué medida em es la que corresponde a la medida en px que queremos.
    Ejemplo: programando body {font-size: 0.625em} hacemos que p {font-size: 1.2em}  tenga el mismo valor que p {font-size: 12px}
  • Establecer las unidades de medida en porcentajes “%”, tanto para divs como padding y margin. Se establece este tipo  de medida relativa para que el usuario pueda aumentar o disminuir el tamaño general de la web sin perder apariencia. Aunque los navegadores modernos ya modifican el tamaño de las webs sin que afecte a su diseño.
  • Respecto a los dos puntos anteriores, en general evitar el uso de medidas absolutas (px) y utilizar medidas relativas como em o porcentajes salvo que sea inevitable, como en el caso de las imágenes.
  • Marcar correctamente las listas y los ítems de las listas.
  • Marcar las citas con la etiqueta <blockquote>.
  •  No utilizar colores para transmitir información, por ejemplo, para destacar una palabra se debe utilizar la etiqueta  <strong> en lugar de un color distinto.
  • Establecer el contraste suficiente entre fondo y texto. De esta manera el usuario con problemas de percepción de color puede visualizar correctamente el contenido.
  • Utilizar tablas únicamente para lo que son, para tabular datos, no para maquetar el sitio.
  • Escribir correctamente el código de las tablas:
    · Identificar los encabezados de las filas y columnas en las tablas de datos. <th id=”header1”>Nombre</th>.
    · summary: resumen del contenido de la tabla, descripción larga.
    · <caption>: título de la tabla
    En la web Codexexempla.org enseñan muy bien a realizar tablas accesibles.
  • Validar el código HTML y CSS
  • Validar nuestro código para comprobar si cumple los requisitos de accesibilidad. Hera, TAW son unas buenas herramientas de validación de la accesibilidad, aunque nada mejor que la validación humana :).
0 comments
Submit comment