Publicado por Viv Dehaes on 19-06-2002
0

Guía casera y personal de aplicación de las pautas de accesibilidad

Siempre me resultaron complicados para leer los documentos del WAI, más cuando debía realizar una página o hacer los testeos de la misma, si bien con el tiempo me acostumbré un dia me senté y me fabriqué un machete con el que me guío cada vez que debo rever la accesibilidad de una interface, siempre hablando de la prioridad 1.

Las pautas de accesibilidad tienen mucho que ver con la cocina de una web, es decir con la forma correcta de contruir un archivo, por ejemplo en HTML, la persecusión de los estándares sirve para que los desarrolladores de dispositivos accesibles brinden cada vez mayor cantidad de prestaciones y que las mismas se vuelvan universales. Esto tiene mucho que ver con la posibilidad de una experiencia satisfactoria de las personas con algún tipo de discapacidad en su interacción con un sitio derterminado.

Este "ayuda memoria" está pensado para diseñadores y desarrolladores web que trabajan con el código fuente o por lo menos que pretenden hacerlo…

Pautas de accesibilidad para la prioridad 1

Proporcionar alternativas equivalentes de contenido visual y auditivo

Este punto basicamente se refiere a la incorporación del atributo "alt" en el tag img de html en caso de que sea un texto corto y si la explicación es más grande se recomienda la utilización del atributo "longdesc" el cual especifica una url con el documento que contiene una descripción más exaustiva de la imagen. Por ejemplo:

<img src="ave.jpg" width="50" heigth="100" alt="foto de un ave volando en el cielo">
<img src="navbarra.jpg" width="500" heigth="80" alt="Barra de Navegación" longdesc="navbarra_desc.html">

No basarse sólo en el color

Esta pauta se refiere básicamente a dos premisas: que la información que se comunica a través del color debe estar disponible si el mismo es dehabilitado y que cuando se combinen colores de texto y fondo éstos deben presentar el suficiente contraste para poder ser leídos en cómodamente, por ejemplo, un texto escrito en color blanco o amarillo sobre fondo de color fuerte (negro, azul, verde etc.) es cómodamente legible. También es fácil de leer un texto en carácteres en color negro sobre fondo blanco, aunque es preferible adoptar fondo oscuro y carácteres de colores contrastados.

Utilizar marcadores y hojas de estilo apropiadamente

Aquí se trata de utilizar de forma correcta los tags, o sea para la función que fueron creados y no para dar un formato particular a un documento ya que no ayudará a la comprensión del documento por parte de personas que no puedan verlo. El caballito de batalla más utilizado es el de los tags "h1" "h2" etc, que deben ser utilizados para los headers y subheaders, utilizarlos para resaltar una palabra. Por ejemplo:

<h4>El río más ancho del mundo es el Río de la Plata </h4> (no recomendado)
<strong>El río más ancho del mundo es el Río de la Plata</strong> (recomendado)

Identificar el lenguaje natural utilizado en un documento y los cambios del idioma

El lenguaje natural de la página debe incluirse ya que de esta forma el lector de pantalla podrá acomodar la pronunciación al idioma citado, también se recomienda que cada cambio del idioma en el texto del documento sea destacado mediante tags. Por ejemplo, el lenguaje natural de un documento html se pone con el atributo "lang" en el tag "html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"<html lang="es">  <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 	 <title>Titulo de la página</title>  </head>  <body>   Este es el cuerpo del documento  </body></html>

Utilizar tablas que se transformen correctamente

Si bien el W3 recomienda que no se utilicen las tablas para maquetar una página, o sea para darle formato, por lo menos acepta que se haga esto si se tienen en cuenta una serie de pasos como por ejemplo: se deben identificar los headers, aquellas tablas que tienen dos o más niveles lógicos deben utilzar tags para asociar las celdas de datos y las celdas de encabezamientos, proporcionar resúmenes y abreviaturas para las etiquetas de los encabezamientos, como se puede ver en el ejemplo siguiente: 

<TABLE border="1" summary="Tabla que representa los indices de fumadores y su  relaci&oacute;n con la satisfacci&oacute;n laboral">  <CAPTION>Relaci&oacute;n entre fumadores y Satisacci&oacute;n laboral</CAPTION>     <TR>	   	<TH scope="col">Sexo</TH>		<TH scope="col">&iquest;Fuma?</TH>		<TH scope="col">&iquest;Satisfecho en el trabajo?</TH>	 </TR>	 <TR>		<TD>Masculino</TD>		<TD>Si</TD>		<TD>No</TD>	 </TR>	 <TR>		<TD>Femenino</TD>		<TD>No</TD>		<TD>S&iacute;</TD>	 </TR></TABLE>

el modo incorrecto sería el siguiente, encuentre las 5 diferencias ;o)

<TABLE border="1">  <TR> <TD>Sexo</TD>	 <TD>&iquest;Fuma?</TD>	 <TD>&iquest;Satisfecho en el trabajo?</TD>	 </TR>	 <TR>		<TD>Masculino</TD>		<TD>Si</TD>		<TD>No</TD>	 </TR>	 <TR>		<TD>Femenino</TD>		<TD>No</TD>		<TD>S&iacute;</TD>	 </TR></TABLE>

Nota: Si, ya se que los datos de la tabla son ridículos.¡Pero están siendo usados a modo de ejemplo!

Las páginas que incorporan nuevas tecnologías deben transformarse correctamente

recomienda que si el dispositivo no puede interpretarlos, la página pueda cumplir su funcion independientemente de ellos, por ejemplo, que sea visible aún cuando se le saa la hoja de estilo, o que no se nos ocurra basar nuestra barra de navegación en un applet java que realice un roll-over, ya que el navegador que no soporte java o tenga la opción desconectada, directamente no podrá navegar nuestro sitio, si se nos ocurre poner el applet, por lo menos pongamos un contenido altenativo para que pueda ser utilizado como sustento de la navegación.

Otra regla a tener en cuenta es que si tuvimos que proporcionar un contenido alternativo ya que no pudimos transformar el original en accesible, que este contenido alternativo tenga el mismo ritmo de actualización que el original, ya que repetidas veces pasa que los contenidos alternativos terminan siendo obsoletos.

Asegurar el control sobre los cambios de los contenidos tempo-dependientes

Esto que parece tan dificil se resume en evitar que la pantalla parpadee o se desplace, más allá de que es muy molesto, puede provocar epilepsia en algunas personas el parpadeo, y no es broma pero no me acuerdo de la explicación científica. Evite utilizar los tags: 

<blink> <marquee>

Diseñar con independencia del dispositivo

Los mapas de imagen deben estar del lado del cliente y no del lado del servidor, esto tiene sentido dentro del contexto de diseñar con independencia del dispositivo ya que los mapa de imagen del lado del cliente usan dentro del tag AREA, el atributo ALT que nos permite conocer el significado del destino para cada área del mapa. Los mapas de imagenes del lado del servidor generalmente no poseen este tipo de atributos que provea al usuario de información adicional. Si no queda otra alternativa que diseñar con mapas de imagenes del lado del servidor, se deberán implementar medidas alternativas que provean al
usuario de la información necesaria.

<img src="img/ej_map.gif" alt="ejemplo de c&oacute;digo mapa de imagen client-side" width="100" height="100" usemap="#Map"><map name="Map">	<area shape="rect" coords="0,1,47,47" href="#" alt="Ir al link 1">	<area shape="rect" coords="51,2,97,47" href="#" alt="Ir al link 2">	<area shape="rect" coords="1,53,47,100" href="#" alt="Ir al link 3">	<area shape="rect" coords="52,52,98,99" href="#" alt="Ir al link 4"></map>

ejemplo de código mapa de imagen client-side

Ir al link 1 Ir al link 2 Ir al link 3 Ir al link 4

Utilizar las tecnologías y pautas W3C

Si, luego de tratar de implementar los puntos anteriores, no se puede lograr una página accesible, debemos construir una página alternativa que use las tecnologías y recomendaciones del W3C, la cual debe ser:

  • accesible
  • equivalente a la orginal
  • actualizada con la misma dinámica de la original

Proporcionar información de contexto y orientación

Titular cada frame para su identificación y navegación.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 FRAMESET//EN">
	<html>
	<head>
	<title>ejemplo de documento html con frames</title>
	</head>
	<frameset cols="15%,85%" title="página principal de interacciones">
	<frame src="nav.html" title="barra de navegación">
	<frame src="doc.html" title="contenido">
	<noframes>
	<a href="doc1.html" title="página sin frames de interacciones"> ir a Interacciones</a>
	</noframes>
	</frameset>

Utilizar el lenguaje apropiado más claro y simple para el contenido del sitio

Creo que esta pauta no tiene mucha explicación adicional ya que se entiende por sí misma. basicamene es eso.

Hasta la próxima.

Enlaces relacionados con el tema:

Esperando comentarios

Dejá tu comentario