La semana pasada tuve el honor de participar en el Epuel (Encuentro por una Educación Libre), a través de un video y una charla por Skype.
Transcribo aquí el contenido del video:
Hola, me llamo Iris Fernández, quiero hablarles acerca de la accesibilidad web. Cuando hablamos de crear una página web accesible nos referimos a una página que no presente barreras de acceso a ninguna persona. Es decir: cualquier persona, independientemente de que tenga una discapacidad o que esté en una máquina con muy poco ancho de banda o que navegue a través de un dispositivo móvil, cualquier persona tiene que poder acceder al contenido de la página que creamos.
Para crear un sitio web accesible hay que seguir una serie de pautas que determina el consorcio de la triple W (w3c). Estas pautas son muy complejas, tienen muchísimo para estudiar, pero podemos nombrar diez puntos básicos para enseñarles a nuestros alumnos a tener presente siempre el tema de la accesibilidad:
1.-Separar el contenido del formato, es decir que el contenido tiene que estar en un archivo HTML, y el formato -colores, tipo de letra, el color de fondo-, tiene que estar en una hoja de estilo, en un archivo de tipo CSS (hoja de estilo en cascada
2.-Usar correctamente las etiquetas de HTML: H1 para el primer encabezado, H2 para otro título, no indentar usando listas… es decir, cuando existe una etiqueta para crear listas, hay que usarla para crear listas, cuando existe una etiqueta para crear párrafos hay que usarla para crear párrafos y no para los títulos. De esta manera una persona invidente que escucha la página web con un lector de pantallas puede pedir que el programa le lea solamente los títulos, solamente los ítems de la lista, saltear los ítems de una lista, etc.
3.-Siempre tenemos que poner un texto alternativo correcto cuando insertamos una imagen, es decir si hay una imagen de una casa, el texto alternativo tiene que decir “una casa” y no “imagen 1”. Es decir el texto alternativo es una herramienta para los invidentes o para las personas que navegan con un dispositivo que no les muestra la imagen.
4.-Cuando insertamos audios o videos tenemos que ofrecer texto alternativo. Transcribir los audios, describir los videos.
5.-Cuando insertamos enlaces, links, no tiene que decir “clic aquí”, “aquí”… tiene que decir “Biblioteca Nacional”, “Biblioteca del Congreso”, el enlace se tiene que describir a sí mismo, para los casos en que una persona invidente esté navegando por un sitio y con la tecla tab esté recorriendo los enlaces.
6.-Cuando insertamos un organigrama, un gráfico estadístico, una historieta, tenemos que acompañarla por una descripción larga (longdesc). De esta manera, todo el contenido por ejemplo de un organigrama tiene que estar en versión texto para que un invidente pueda acceder a él.
7.-Si usamos scripts de Java, applets, plugins, etc. tenemos que siempre ofrecer texto alternativo, contenido alternativo, que pueda funcionar si alguien no tiene activado Java Script, si no tiene el plugin, etc.
8.-No usar tablas para diseñar. Si nosotros queremos poner contenido de un lado y del otro no tenemos que usar tablas, tenemos que usar DIVs.
9.-En el caso de necesitar efectivamente una tabla, es decir, el contenido encolumnado, tenemos que asegurarnos de que se puede leer de manera horizontal, para que los invidentes que escuchan la página leída puedan entender el contenido.
10.-El punto más importante: permanentemente tenemos que chequear la validez de nuestro código y controlar la accesibilidad de nuestro sitio. Es decir, tenemos que mantenernos informados, tenemos que usar validadores automáticos y saber que cada vez que actualizamos el sitio tenemos que volver a controlar que el código sea correcto.
Bueno, muchas gracias.
Después del video mostré algunos ejemplos de cómo separar el contenido del formato.
Muestro aquí un ejemplo muy sencillo de esta separación.
En el archivo HTML se escribe el contenido, vinculándolo con un archivo CSS, de esta manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>El cuento de Caperucita Roja</title>
<link rel="stylesheet" type="text/css" href="cuento.css"/>
</head>
<body>
<h1>Este es el cuento de Caperucita roja</h1>
<h2>Versión irreconocible</h2>
<p>Había una vez una nena que se llamaba Juanita.</p>
<p>Su madre se llamaba Juana, su abuela se llamaba Pepita.</p>
<p>Una vez Pepita le dijo a Juana: la cara de tu hija me suena de algún lado. ¡Ah! ¡Ya sé! ¡Es igual a Caperucita Roja!</p>
<p>Fin.</p>
</body>
</html>
En la hoja de estilo (que debe llamarse en este caso cuento.css) definimos el aspecto de cada elemento:
body {
width: 80%;
font: 1em "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;
color: #ffffff ;
background-color: #b0c6f4;
margin-left: auto;
margin-right: auto;
}
p {
margin-left: 1em;
}
h1 {
font: 1.4em "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;
color:#112868;
text-align: center;
border-bottom: 0.05em solid;
}
h2 {
font-size: 1.2em;
color:#112868;
text-indent: 0em;
}
Cuando visualizamos el archivo HTML podemos verlo así:
Genial! Estaría bueno que más gente se ocupe de lo que vos haces Iris. Te felicito.
Excelente. Me hizo pensar en muchos aspectos relacionados con la accesibilidad que estaba descuidando. Los voy a compartir en mi blog. Gracias por hacérmelos ver
Me gustan todas las iniciativas de accesibilidad Web. Me parece importante divulgar todo lo relacionado con accesibilidad.
Una cosa importante es que con HTML5 se agregan muchos elementos semánticos que marcan una evolución en lo que fue hasta ahora HTML4 y XHTML. El div no muere, pero nacen nuevos elementos, como los hermosos header, nav, section, article y footer.
Un universo nuevo entre nosotros 🙂