{"id":2395,"date":"2011-09-28T19:39:05","date_gmt":"2011-09-28T22:39:05","guid":{"rendered":"http:\/\/irisfernandez.com.ar\/betaweblog\/?p=2395"},"modified":"2022-05-22T15:03:00","modified_gmt":"2022-05-22T18:03:00","slug":"mi-charla-en-el-epuel-accesibilidad-web","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2011\/09\/28\/mi-charla-en-el-epuel-accesibilidad-web\/","title":{"rendered":"Mi charla en el Epuel: accesibilidad web"},"content":{"rendered":"

La semana pasada tuve el honor de participar en el Epuel<\/a>\u00a0 (Encuentro por una Educaci\u00f3n Libre)<\/em>, a trav\u00e9s de un video y una charla por Skype<\/em>.
\n\"Video<\/a><\/p>\n

Transcribo aqu\u00ed el contenido del video:<\/p>\n

Hola, me llamo Iris Fern\u00e1ndez, quiero hablarles acerca de la accesibilidad web. Cuando hablamos de crear una p\u00e1gina web accesible nos referimos a una p\u00e1gina que no presente barreras de acceso a ninguna persona. Es decir: cualquier persona, independientemente de que tenga una discapacidad o que est\u00e9 en una m\u00e1quina con muy poco ancho de banda o que navegue a trav\u00e9s de un dispositivo m\u00f3vil, cualquier persona tiene que poder acceder al contenido de la p\u00e1gina que creamos.<\/p>\n

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\u00edsimo para estudiar, pero podemos nombrar diez puntos b\u00e1sicos para ense\u00f1arles a nuestros alumnos a tener presente siempre el tema de la accesibilidad:<\/p>\n

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<\/p>\n

2.-Usar correctamente las etiquetas de HTML: H1 para el primer encabezado, H2 para otro t\u00edtulo, 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\u00e1rrafos hay que usarla para crear p\u00e1rrafos y no para los t\u00edtulos. De esta manera una persona invidente que escucha la p\u00e1gina web con un lector de pantallas puede pedir que el programa le lea solamente los t\u00edtulos, solamente los \u00edtems de la lista, saltear los \u00edtems de una lista, etc.<\/p>\n

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.<\/p>\n

4.-Cuando insertamos audios o videos tenemos que ofrecer texto alternativo. Transcribir los audios, describir los videos.<\/p>\n

5.-Cuando insertamos enlaces, links, no tiene que decir “clic aqu\u00ed”, “aqu\u00ed”… tiene que decir “Biblioteca Nacional”, “Biblioteca del Congreso”, el enlace se tiene que describir a s\u00ed mismo, para los casos en que una persona invidente est\u00e9 navegando por un sitio y con la tecla tab est\u00e9 recorriendo los enlaces.<\/p>\n

6.-Cuando insertamos un organigrama, un gr\u00e1fico estad\u00edstico, una historieta, tenemos que acompa\u00f1arla por una descripci\u00f3n larga (longdesc). De esta manera, todo el contenido por ejemplo de un organigrama tiene que estar en versi\u00f3n texto para que un invidente pueda acceder a \u00e9l.<\/p>\n

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.<\/p>\n

8.-No usar tablas para dise\u00f1ar. Si nosotros queremos poner contenido de un lado y del otro no tenemos que usar tablas, tenemos que usar DIVs.<\/p>\n

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\u00e1gina le\u00edda puedan entender el contenido.<\/p>\n

10.-El punto m\u00e1s importante: permanentemente tenemos que chequear la validez de nuestro c\u00f3digo y controlar la accesibilidad de nuestro sitio. Es decir, tenemos que mantenernos informados, tenemos que usar validadores autom\u00e1ticos y saber que cada vez que actualizamos el sitio tenemos que volver a controlar que el c\u00f3digo sea correcto.<\/p>\n

Bueno, muchas gracias.<\/p><\/blockquote>\n

Despu\u00e9s del video mostr\u00e9 algunos ejemplos de c\u00f3mo separar el contenido del formato.<\/p>\n

Muestro aqu\u00ed un ejemplo muy sencillo de esta separaci\u00f3n.<\/p>\n

En el archivo HTML se escribe el contenido, vincul\u00e1ndolo con un archivo CSS, de esta manera:
\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">
\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"es\" lang=\"es\">
\n<head>
\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=iso-8859-1\" \/>
\n<title>El cuento de Caperucita Roja<\/title>
\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"cuento.css\"\/><\/span>
\n<\/head>
\n<body>
\n<h1>Este es el cuento de Caperucita roja<\/h1>
\n<h2>Versi\u00f3n irreconocible<\/h2>
\n<p>Hab\u00eda una vez una nena que se llamaba Juanita.<\/p>
\n<p>Su madre se llamaba Juana, su abuela se llamaba Pepita.<\/p>
\n<p>Una vez Pepita le dijo a Juana: la cara de tu hija me suena de alg\u00fan lado. \u00a1Ah! \u00a1Ya s\u00e9! \u00a1Es igual a Caperucita Roja!<\/p>
\n<p>Fin.<\/p>
\n<\/body>
\n<\/html><\/code><\/p>\n

En la hoja de estilo (que debe llamarse en este caso cuento.css) definimos el aspecto de cada elemento:<\/p>\n

body {
\nwidth: 80%;
\nfont: 1em \"Lucida Sans Unicode\", \"Lucida Sans\", verdana, arial, helvetica;
\ncolor: #ffffff ;
\nbackground-color: #b0c6f4;
\nmargin-left: auto;
\nmargin-right: auto;
\n}
\np {
\nmargin-left: 1em;
\n}<\/p>\n

h1 {
\nfont: 1.4em \"Lucida Sans Unicode\", \"Lucida Sans\", verdana, arial, helvetica;
\ncolor:#112868;
\ntext-align: center;
\nborder-bottom: 0.05em solid;
\n}
\nh2\u00a0 {
\nfont-size: 1.2em;
\ncolor:#112868;
\ntext-indent: 0em;
\n}<\/code><\/p>\n

Cuando visualizamos el archivo HTML podemos verlo as\u00ed:<\/p>\n

\"Visualizaci\u00f3n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

La semana pasada tuve el honor de participar en el Epuel\u00a0 (Encuentro por una Educaci\u00f3n Libre), a trav\u00e9s de un video y una charla por Skype. Transcribo aqu\u00ed el contenido del video: Hola, me llamo Iris Fern\u00e1ndez, quiero hablarles acerca de la accesibilidad web. Cuando hablamos de crear una p\u00e1gina web accesible nos referimos a … Continuar leyendo “Mi charla en el Epuel: accesibilidad web”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2395","post","type-post","status-publish","format-standard","hentry","category-accesibilidad-y-usabilidad"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/2395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=2395"}],"version-history":[{"count":1,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/2395\/revisions"}],"predecessor-version":[{"id":6717,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/2395\/revisions\/6717"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=2395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=2395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=2395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}