Entries RSS Comments RSS

Archive for the ‘Accesibilidad’ Category

Mapas de imagen

Martes, diciembre 24th, 2013

¿Qué es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aquí muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opción donde se dividió la gran imagen en tres imágenes, y se aplicó el intercambio de imágenes explicado en el post anterior.

Mapa de imagen con zonas sensibles y enlaces externos

Para realizarlo, se utiliza una imagen de base con la propiedad usemap, que vincula la imagen con el mapa que describimos previamente, siempre utilizando el atributo ALT, de acuerdo a las recomendaciones de accesibilidad.

Mapamundo Kepler

America septentrionalis Septentrio Terra Australis Incognita Mar di India

Detenga el mouse en los continentes para leer su nombre

El problema que encontré en este caso, es que en el celular con Android no se muestran los Titles ni los ALT. Este es el código del mapa de imagen anterior:

<img alt=”Mapamundo Kepler” src=”800px-Kepler-world.jpg” usemap=”#mapa1″ width=”600″ border=”0″ />

<map id=”mapa1″ name=”mapa1″>

<area title=”America septentrionalis” alt=”America septentrionalis” coords=”10,10,120,234″ shape=”rect” href=”http://……” />

<area title=”Septentrio” alt=”Septentrio” coords=”150,10,350,225″ shape=”rect” href=”http://……” />

<area title=”Terra Australis Incognita” alt=”Terra Australis Incognita” coords=”150,225,350,450″ shape=”rect” href=”http://……” />

<area title=”Mar di India” alt=”Mar di India” coords=”350,10,550,450″ shape=”rect” href=”http://……” /> </map>

<p style=”text-align: center;”>Detenga el mouse en los continentes para leer su nombre</p>

Ejemplo sin mapa de imagen

Utilizando lo explicado en el post anterior, dividimos la imagen grande en varias imágenes pequeñas, a las cuales les cambiamos el aspecto al pasar sobre ellas:

America septentrionalis
Septentrio y Terra Australis Incognita
Mar di India

Cómo ganar dinero con la accesibilidad web

Lunes, octubre 7th, 2013

Hace muchos años que tengo el honor de dar diversas charlas en eventos vinculados con el software libre, con la educación, o con ambas. Incluso he organizado varios de estos eventos, junto a otros profesionales muy queridos y muy capaces.

Los años, la experiencia, y sobre todo los fracasos me fueron mostrando que en mis charlas sobre Accesibilidad web, los asistentes eran pocos, y si bien solía interesarles el tema en el momento, lo aprendido solía quedar en esa hora y en ese lugar, si lograr encender la llama de la curiosidad y el deseo de profundizar (salvo honrosas excepciones, de gente super interesante con la que continúo en contacto).

Sin embargo, cuando comencé a crear grupos y a dar charlas vinculadas -por ejemplo- con Moodle, el éxito fue inmediato. ¿Cuál era la diferencia? ¿Por qué todo el mundo quería saber sobre Moodle y nadie sobre accesibilidad web? ¿Es que a la gente no le interesa que aquellas personas que tienen alguna limitación para moverse puedan hacer trámites por internet, comprar en el supermercado virtual y estudiar desde su casa?

Crear sitios accesibles es un tema realmente complejo. Hay que aprender, hay que saber, hay que informarse. Y tanto esfuerzo, tanta energía, ¿para qué? Para algo tan importante como no dejar a nadie afuera. 

Las personas con discapacidad no tiene necesidades especiales: como me lo enseñó Jarmila Havlik (nunca olvido sus enseñanzas), las personas con discapacidad necesitan soluciones especiales para las mismas necesidades que tenemos todos los seres humanos: trabajar, estudiar, hacer nuestros trámites, y sobre todo, valernos por nosotros mismos. Y es eso lo que necesitan quienes se ven beneficiados por la accesibilidad web. Un discapacitado visual, una persona sorda, alguien con movimientos poco controlados, con epilepsia fotosensible, con un yeso en un brazo, con un mouse que no funciona, o amamantando a un bebé… ¿no merecen nuestro esfuerzo?

Y ahora, retomando el título del post, me pregunto ¿Cómo ganar dinero con la accesibilidad web? Digo, me lo pregunto porque no tengo ni la menor idea, pero lo único de lo que sí estoy segura, es que el dinero moviliza a la gente, convoca y motiva; no así la sensibilidad social o el deseo de hacer mejor la vida de los otros. Si alguien tiene la respuesta a mi pregunta, le pido que la comparta; a ver si logramos que la accesibilidad empiece a salir en la tele y a enseñarse en las academias…

 

Dedicado a Martín Baldassarre, y a Claudio Segovia, amigos que no dejan de poner energías en esto que a veces parece una lucha contra molinos de viento. Inspirada por una charla con Pablo Medrano.

Discapacidad: Visibilicemos la diversidad

Jueves, abril 11th, 2013

El sábado empecé el curso de “Asistente en discapacidad“, que dicta la Fundación artistas discapacitados los sábados a la mañana en la sede de la facultad de Filosofía y Letras de la UBA (Puan 480, CABA).

Las docentes de la primera clase fueron María Pia Venturiello y Marcela Ego. La clase me resultó sumamente interesante y a la vez movilizante. Hablamos sobre el concepto de discapacidad, su evolución histórica y los diferentes paradigmas.

Tomé nota de muchos conceptos sumamente interesantes, pero me gustaría mencionar algunos paradigmas (los primeros, obsoletos, pero que aún pueden verse vigentes entre las personas) acerca de la discapacidad:

  • El paradigma previo a la modernidad, veía al discapacitado como alguien a quien el designio divino lo llevó a estar en esa situación.
  • A partir de la revolución industrial, comenzó a mirarse a quienes no podían producir al ritmo de los demás como personas que no aportaban lo suficiente. Empiezan a existir las instituciones de encierro, y los hospitales, cárceles y manicomios se ocupan de las personas que no cumplían con lo que la sociedad esperaba.
  • En época de posguerra, por la enorme cantidad de heridos, toma preeminencia el paradigma médico: la discapacidad es un problema individual; hay que curar a esas personas y ellas tienen que luchar con su voluntad para reinsertarse.
  • A partir del movimiento Vida Independiente (década del ’70), empieza a comprenderse que la diversidad funcional se debe atender a nivel social. La responsabilidad de que alguien sea autónomo o dependa de ayuda externa es de la sociedad, y no del individuo.

A partir de todo ello quiero invitarlos a pensar: ¿Qué tal si pasamos de ver una persona normal y muchas personas “fuera de la norma” (diferentes), y pasamos a entender que las personas venimos en diferentes formatos? Cuando hacemos un edificio, una página web o un objeto de uso cotidiano, tenemos que pensar que hay gente que no ve, gente que no oye, gente que no distingue todos los colores, gente que no tiene sus dos brazos o sus dos piernas, etc. Somos responsables de permitir o dificultar la autonomía de las personas. De todas las personas.

Como dijo la profesora al cierre de la clase, logrando que yo lagrimee hasta llegar a casa: si uno tuvo la posibilidad de ser, el otro también.
personas

Descripción de la imagen: En un primer recuadro hay una figura humana con dos piernas y dos brazos, encerrada en un óvalo y con la etiqueta “Persona normal”, y dos personas con una pierna o un brazo y el rótulo “Persona diferente”. En el segundo recuadro hay tres figuras humanas, en el mismo óvalo, con el rótulo “Personas”. Dos de ellas tienen sólo un brazo o sólo una pierna.

 

 

Haciendo magia con CSS

Martes, agosto 7th, 2012

Estoy trabajando una plataforma Moodle 2, y debo decir que los muchachos se pasaron con los cambios… ¡cuánto cuesta adaptarse a las novedades!

Sin embargo,  voy entendiendo y encontrando la lógica poquito a poco.

Hoy quiero comentar cómo hice algunas cosas espectaculares con CSS.

Yo tenía una página con links (página de categoría) y quería poner al lado de cada enlace una imagen que cambiara cuando pasaba el mouse sobre el link.

Si tuviera acceso al HTML, esto se resuelve de una forma muy simple: creando clases para los enlaces:

En la página Html:

<a class="enlaceazul" href="http://esteenlaceesazul">Este enlace es de color azul</a>
<a class="enlacerojo" href="http://esteenlaceesrojos">Este enlace es de color rojo</a>

En la hoja de estilo CSS, podemos configurar un estilo para cada clase, para su estado “normal”, para el enlace ya visitado y para el enlace en el momento en que el mouse está sobre él:

a.enlaceazul { color: #000099;}
a.enlaceazul:visited { color: #000088;}
a.enlaceazul:hover { color: #0000FF;}

a.enlacerojo {color: #990000;}
a.enlacerojo:visited {color: #880000;}
a.enlacerojo:hover {color: #FF0000;}

Lo que yo necesitaba era poner una imagen a la derecha, así que en lugar de cambiar el color, cambiaba la imagen de fondo, lo cual en cualquier página web puede hacerse utilizando por ejemplo:

background: url(http://imagen.png) no-repeat center right;

En Moodle la cosa se complica porque las imágenes se toman de una manera diferente:

a {background-image:url([[pix:theme|nombredelaimagen]]);}

Pero mi mayor complicación era hacer todo esto… ¡sin tocar el código PHP de la página de Moodle!

Entonces estuve buscando de qué manera podía poner estilos diferentes a enlaces diferentes… de acuerdo al texto del enlace. Y me encontré con un link maravilloso que explica esa y otras cosas geniales: 19 tips y trucos para CSS.

Lo que hacemos es decirle que aquellos enlaces (a) que tienen dentro del texto del enlace (href*) lo que está entre comillas, tienen que tener determinado estilo:

a[href*="texto_del_enlace.html"] {
height: 50px; /* Cambiando la altura del link de acuerdo a la altura de mi imagen */
background: url([[pix:theme|matematica]]) no-repeat right top;
}
a[href*="texto_del_enlace.html"]:hover {
height: 129px; /* Cambiando la altura del link de acuerdo a la altura de mi imagen */
background: url([[pix:theme|matematica2]]) no-repeat right top;
}

En este post se aclara qué son los corchetes en CSS: CSS para pestañas:

Los corchetes se usan para seleccionar atributos, por ejemplo:

[type=radio] {}, con esto seleccionas todos los elementos que tengan el atributo “type” y que éste sea igual a “radio”.

La “viborita” selecciona elementos con el mismo padre, y que respeten el orden del selector, es un selector de hermanos, por ejemplo:
[type=radio]:checked ~ label {}, selecciona todos los elementos “label” que sean hermanos de un elemento con “type” igual a “radio” seleccionado y que ademas, se cumpla que el label esta despues del radio button, lo particular de este selector es que los elementos no tienen que estar exactamente juntos, puede haber otro elemento entre ellos, y aun asi funcionaran.

Aquí una explicación bien detallada de algunos elementos utilizados: CSS: Formatos

Mi charla en el Epuel: accesibilidad web

Miércoles, septiembre 28th, 2011

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.
Video sobre accesibilidad web

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í:

Visualización de la página y la hoja de estilo anterior

Te leo un cuento: repositorio de cuentos para niños invidentes

Lunes, julio 4th, 2011

Te leo un cuento es un repositorio de cuentos para niños invidentes. Nació en diciembre de 2008 como una idea de un regalo de navidad, y fue creciendo lentamente con la colaboración de un equipo muy valioso.
La dificultad mayor fue siempre conseguir textos, pero ahora descubrí que en Wikisource hay cuentos, fábulas y leyendas libres que podemos grabar.
Así que los invito a grabar un cuento, una fábula o una leyenda… sólo para empezar les pido que elijan uno de este listado (antes de empezar consultar lista de textos en proceso de grabación):

Después, es fundamental que avisen: “estoy grabando tal texto” y nos envíen el link, así lo incorporamos a la lista de textos en proceso de grabación.

¡Esperamos sus aportes!

Posts relacionados

Para navidad, regalemos un cuento libre
¿Qué es eso de las licencias Creative Commons?
 

Ley de accesibilidad de la información en las páginas web – Argentina

Jueves, noviembre 4th, 2010

Quiero difundir esta excelente noticia, no sólo para los discapacitados sino para toda la gente, con o sin limitaciones físicas, ya que todos en algún momento podemos tener un brazo enyesado o un bebé en brazos y necesitar navegar con una sola mano, por ejemplo, entre tantas otras situaciones.
Se aprobó en Argentina la Ley de accesibilidad de la información en las páginas web. Copio aquí el artículo primero:

ARTÍCULO 1º.- El Estado nacional, entiéndanse los tres poderes que lo constituyen, sus organismos descentralizados o autárquicos, los entes públicos no estatales, las empresas del Estado y las empresas privadas concesionarias de servicios públicos, empresas prestadoras o contratistas de bienes y servicios, deberán respetar en los diseños de sus páginas Web las normas y requisitos sobre accesibilidad de la información que faciliten el acceso a sus contenidos, a todas las personas con discapacidad con el objeto de garantizarles la igualdad real de oportunidades y trato, evitando así todo tipo de discriminación.

El texto completo: Ley de accesibilidad de la información en las páginas web

Quitter: cliente Twitter para invidentes

Lunes, junio 14th, 2010

Ayer empezó a seguirme Martin Baldassarre en Twitter*; le pregunté qué cliente está usando para manejarse con Twitter y me habló de Quitter. Es un cliente Twitter muy liviano para Windows.

Ya lo instalé, me bajé el paquete de sonidos The Beatles, pero todavía no logré dominarlo… ¡paso a paso!
Por ahora, cada vez que llega un tweet, escucho el aviso.
También escribí mi primer Tweet desde Quitter.
Por lo pronto puedo decir que se trata de un cliente que no abre ventanas ni necesita el navegador abierto, que permite acceder a múltiples cuentas de Twitter, responder, acceder a los perfiles de los usuarios, listados de seguidores y seguidos, y todas las funcionalidades de un cliente de twitter estándar.

Mi primer twit en quitter

*Aclaración necesaria: en Twitter se llama Seguir a la acción de leer las publicaciones de un usuario.

Interpretación de Lenguaje de Señas – Buenos Aires

Martes, enero 5th, 2010

Reenviemos este mensaje. Se necesita difusión para que la carrera -que es gratuita- tenga alumnos y no cierre.
Está abierta la inscripción para el ciclo lectivo 2010 del IFTS (Instituto de Formación técnica Superior) Nº 27 que dicta la Tecnicatura Superior en Interpretación de Lenguaje de Señas Argentina, única carrera gratuita con título oficial que permite a los egresados desempeñarse como intérpretes en los ámbitos judiciales, educativos, de salud y de medios de comunicación.
Para información e inscripción los interesados tienen que dirigirse a
Av.Asamblea 1221 – Ciudad de BUENOS AIRES, Argentina, en el horario de 19 a 21.
Teléfono (5411) 4923-0115.
A principios de este año esta escuela estuvo a punto de cerrar sus puerta por falta de alumnos. La colaboración de todos ustedes hizo que la escuela siguiera adelante. Ahora, al cierre de este año lectivo, es que les pido si pueden publicarlo o reenviarlo a sus contactos, para que esta escuela no cierre sus puertas y continúe brindando la formación en esta carrera con titulo oficial y gratuita y de gran ayuda para la comunidad.

Mar del Plata, plaza Mitre: juegos para chicos discapacitados

Sábado, enero 2nd, 2010

Hace unos cuántos años que veraneo en Mar del Plata, y siempre uno de los paseos más esperados es el de la plaza Mitre, donde alquilan bicicletas y kártings.
Esta vez la plaza nos sorprendió positivamente cuando llegamos y vimos nuevos juegos, pero esta vez muy especiales:
Sube y baja para sillas de ruedas
Un sube y baja para dos sillas de ruedas.
calesita para sillas de ruedas
Una calesita para cuatro sillas de ruedas.
hamaca para sillas de ruedas
Una hamaca para una silla de ruedas.
alfabeto dactilográfico
El alfabeto dactilográfico.
hamacas diferentes
Hamacas para chicos acostados o sentados (con respaldo).
cartel explicativo: Primera plaza integradora de la ciudad de Mar del Plata
Y el cartel que nos explica de qué se trata todo esto tan maravilloso.
Me encantaría ver plazas como esta en mi querida ciudad de Buenos Aires…

Por supuesto que la ciudad me permitió sacar unas cuantas fotos (varios cientos en pocos días!), de las que compartí algunas en Wikimedia Commons.