Vídeos sobre accesibilidad web

Tres vídeos de un seminario sobre la accesibilidad web. El contenido está bien, pero el sonido es muy malo.

Legibilidad de una página web

En ¿Tu Sitio es Entendible y Fácil de Leer? nos presentan la herramienta TxReadability (versión en español) que evalúa la facilidad de lectura de una página web, para textos en español, inglés y japonés.

El W3C, en la pauta 14 de sus Pautas de Accesibilidad al Contenido en la Web 1.0 nos dice:

Pauta 14. Asegúrese de que los documentos sean claros y simples.

Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos.

La maquetación coherente de páginas, los gráficos reconocibles y el lenguaje fácilmente comprensible benefician a todos los usuarios. En particular, ayudan a personas con discapacidades cognitivas o con dificultades en la lectura. (Por tanto, asegúrese de que las imágenes tienen textos equivalentes para los ciegos, los de baja visión o para cualquier usuario que no puede o ha elegido no ver los gráficos. Consulte también la pauta 1).

La utilización de un lenguaje claro y simple promueve una comunicación efectiva. El acceso a la información escrita puede ser difícil para personas con discapacidades cognitivas o de aprendizaje. La utilización de un lenguaje claro y simple también beneficia a las personas cuyo primer idioma es diferente al del autor, incluidos aquellos que se comunican principalmente mediante lengua de signos.

Puntos de verificación:

14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. [Prioridad 1]
Técnicas para el punto de verificación 14.1.

14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página. [Prioridad 3]
Consultar también la pauta 1.
Técnicas para el punto de verificación 14.2.

14.3 Cree un estilo de presentación que sea coherente para todas las páginas. [Prioridad 3]
Técnicas para el punto de verificación 14.3.

Esta herramienta nos puede ayudar a cumplir esta pauta.

Nuevo borrador de WCAG 2.0

Con fecha 11/12/07 se ha publicado un nuevo borrador de las Web Content Accessibility Guidelines 2.0. La fecha límite para enviar comentarios es el 01/02/08. ¿Para cuándo la recomendación definitiva?

En la entrada ¿Qué pasa con WCAG 2.0? comenté los problemas que está teniendo esta nueva recomendación.

JavaScript no molesto (5): validación de formularios

En la entrada JavaScript no molesto (4): separación del JavaScript se explicó cómo aprovechar el atributo class para separar el código JavaScript del código XHTML. En esta entrada se va a explicar cómo utilizar la misma técnica para validar formularios.

Los formularios se deben validar en el navegador por varias razones, las más importantes son:

• Disminuye el tiempo de respuesta de la aplicación: el usuario no tiene que esperar a que se envíen los datos al servidor, se validen en el servidor y se reciba una respuesta para saber si los datos están bien o están mal.
• Se reduce la carga de trabajo del servidor (no del todo, como ahora se explicará): en el servidor no se tienen que validar los formularios de todos los usuarios, en el navegador de cada usuario se validan los datos que ha introducido.

La segunda razón no es verdad en parte, porque SIEMPRE hay que validar los datos que se reciben en el servidor, ya que un usuario malicioso los puede enviar directamente, sin pasar antes por la validación de nuestro formulario. Por tanto, la solución que vamos a ver para separar el JavaScript del XHTML no supone un problema cuando no se dispone de JavaScript, ya que los datos serán validados en el servidor.

Sí que puede haber problemas cuando se emplea JavaScript para actualizar un control del formulario o una página web en función de las acciones del usuario. Por ejemplo, el típico caso de las listas desplegables en cascada (una lista que muestra sus valores en función de lo que se ha elegido en otra lista) realizado con JavaScript no funcionaría si está desactivado. Este problema es distinto al que se explica en esta entrada y merece una para él solo.

Consejo 1: no se debe usar botones de tipo button con el evento onclick para enviar un formulario

El código siguiente presenta un grave problema de accesibilidad: cuando JavaScript no está disponible, el formulario no se puede enviar.

function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}

<input type="button" value="Enviar" onclick="validar()">Para solucionar este problema, se deben emplear los botones de tipo submit y utilizar el evento onsubmit para llamar al código de validación:

function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}

<form action="unapagina.php" onsubmit="return validar()"></form>Consejo 2: utiliza múltiples clases para indicar el tipo de validación que requiere cada control de un formulario

En el artículo A Guide to Unobtrusive JavaScript Validation se presentan técnicas para separar el código JavaScript que realiza la validación de un formulario:

• Utilizar campos ocultos (hidden) para indicar las validaciones que se tienen que realizar (valor requerido, correo electrónico, código postal).
• Utilizar el atributo class para indicar el tipo de validación.
• Crear un DTD propio para añadir atributos que indican el tipo de validación.

La primera opción es poco práctica, ya que no es adecuada para formularios complejos con muchos campos. La tercera opción tampoco es práctica, ya que una página web basada en un DTD propio no es una página válida respecto a XHTML. Por tanto, la opción más recomendable es la segunda.

En el class se pueden añadir valores para indicar el tipo de validación que requiere el control:

• required
• notrequired
• email
• integer
• date

Por ejemplo:

<input type="text" name="correo" class="required email">
Para más información sobre cómo lograr un manejo de formularios correcto con JavaScript:

• A Guide to Unobtrusive JavaScript Validation
• Unobtrusive Javascript
• Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)

III Premios TAW 2007

He encontrado esta noticia en el periódico El País: Los portales del Ministerio de Fomento y Ayuntamiento de Madrid los más accesibles. TAW ya ha otorgado sus premios anuales a las páginas web más accesibles. En la página Los portales del Ministerio de Fomento y Ayuntamiento de Madrid ganan los III Premios TAW a las web públicas más accesibles podemos encontrar la nota de prensa de TAW y en la página Premiados 2007 la lista de premiados que reproduzco:

Reunido el jurado para la concesión de los III Premios TAW a la Accesibilidad Web, el día 15 de Noviembre de 2007 en la sede de la Fundación CTIC, resuelven conceder los premios por categorías a:
T.1. Premio TAW a la Web pública más Accesible I.
GANADOR: Sitio web Ministerio de Fomento
Finalista: Sitio web Ministerio de Cultura
Finalista: Sitio web Autoridad Administrativa CITES
T.2. Premio TAW a la Web pública más Accesible II.
GANADOR: Sitio Web Ayuntamiento de Madrid
Finalista: Sitio web Ayuntamiento de Ermua
Finalista: Sitio web Ayuntamiento de Murcia
T.3. Premio TAW a la Web Empresarial más Accesible I.
GANADOR: Sitio web Cajastur
Finalista: Sitio web Gamesa
Finalista: Sitio web Babel Sistemas de información
T.4. Premio TAW a la Web Empresarial más Accesible II.
GANADOR: Sitio web Cafetto Kaldi
Finalista: Sitio web Serviweb S.L.
Finalista: Sitio web Gateway S.C.S.
T.5. Premio TAW a la Web de entidades sin ánimo de lucro más Accesible.
GANADOR: Sitio web Aspaym Cantabria
Finalista: Sitio web Asociación Síndrome Prader-Willi
Finalista: Sitio web Fundación Estudios e Análises
T.6. Premio TAW al Mejor Proyecto en Accesibilidad Web.
El jurado declara desierta esta categoría.

Facilidades para el acceso a la administración electrónica

He encontrado esta noticia en el periódico El Mundo: El acceso a la administración electrónica para los discapacitados, más fácil. La noticia dice:

Las personas con discapacidad podrán acceder a la administración electrónica con mayor facilidad, gracias a la firma de un convenio firmado entre la Fundación ONCE y la Fundación Europea para la Sociedad de la Información y la Administración Electrónica.

El convenio, entre otros puntos, incluye el desarrollo de una herramienta informática para permitir el uso de todos los programas del Servicio Administratel a las personas con discapacidad, incluyendo aquellas que poseen una discapacidad visual severa.

¿Qué es Administratel? Pues no lo sé, pero esta es la página web de Administratel.

Esquinas redondeadas

Las esquinas redondeadas, como las que se pueden ver en esta misma página, son un estilo visual muy empleado por su vistosidad. Sin embargo, tienen varios problemas de los que me gustaría destacar dos:

• Se suelen basar en el empleo de imágenes, lo que origina un aumento en el peso de la página (aumenta el tiempo de carga) y origina problemas de mantenimiento (por ejemplo, si se desea cambiar los colores hay que cambiar las imágenes).
• Al utilizar imágenes puede ocasionar problemas de accesibilidad o, al menos, molestar a los usuarios que empleen un lector de pantallas.

Acabo de encontrar Esquinas redondeadas sin emplear imágenes: sólo CSS y JavaScript. Se trata de una traducción de la página Nifty Corners Cube. Desde estas páginas nos podemos descargar un script en JavaScript que permite tener esquinas redondeadas (y algunas cosas más) sin tener que utilizar imágenes. Y si JavaScript no está disponible, no pasa nada, las esquinas salen cuadradas pero la página se ve bien.


Un ejemplo de página que usa este script:



¿Cómo se consigue? En Nifty Corners: rounded corners without images (la primera versión de este script) se explica el truco.

Lector de pantalla para teléfonos móviles

He encontrado esta noticia en el periódico El Mundo: 'Mobile Speak', una aplicación para personas ciegas que lee la pantalla del móvil. Según dice, es el primer lector de pantalla para teléfono móvil que se lanza en el mercado español. Parece que sólo está disponible para el sistema Symbian y supongo que también permitirá navegar con los navegadores integrados en los teléfonos móviles.

Control cerebral del ordenador

He encontrado esta noticia en el periódico El Mundo: Los discapacitados motrices podrían jugar en el mundo virtual de Second Life. La noticia nos cuenta que en la Universidad Keio de Japón (la misma que junto con el MIT y el INRIA fundaron el W3C a mediados de los noventa) están experimentando con un sistema que consiste en unos electrodos que se conectan al cuero cabelludo del usuario y le permite moverse por Second Life simplemente con el pensamiento.

Esta técnica se conoce como control cerebral o control neural. Evidentemente, no se tiene que limitar exclusivamente a Second Life, se puede emplear para cualquier otra tarea, como por ejemplo navegar por Internet.

Hay más gente que está trabajando en este tema e incluso ya hay algunas empresas que venden estos dispositivos, aunque por ahora no son muy precisos y requieren de un entrenamiento previo largo (que el ordenador aprenda a interpretar las señales que emite el cerebro). Algunso artículos sobre el tema:

• Control cerebral
• Casco de 'ondas cerebrales' controla un ordenador
• El reto del control remoto neural

JavaScript no molesto (4): separación del JavaScript

La entrada de ayer terminaba con la pregunta ¿No se puede separar el código JavaScript del código HTML como se hace con CSS?

Sí, sí que se puede. Una página web se puede construir mediante capas:

• Capa de contenido: la estructura y el contenido con etiquetas de XHTML.
• Capa de presentación: la presentación del contenido definida con CSS.
• Capa de comportamiento: el comportamiento del contenido (por ejemplo, la respuesta ante una acción del usuario) definido con JavaScript.

Con un diseño basado en capas logramos reducir el acomplamiento entre los distintos componentes (contenido, presentación y comportamiento), lo que se traduce en importantes beneficios: disminución de los errores, reducción en los costes de mantenimiento, etc. Pero además, una página web construida de esta forma (que se conoce como progressive enhancement) casi siempre es graceful degradation, y por tanto la página web funcionará correctamente aun en el caso de que falte algún tipo de componente (CSS o JavaScript).

¿Cómo se puede lograr esto? En el código HTML no vamos a escribir ni una sola línea de código JavaScript. Más aun, tampoco se van a emplear los manejadores de eventos como onclick, onblur, etc.

Desde JavaScript, se puede asignar código de JavaScript a un manejador de eventos con el siguiente código:

elemento.evento = acccion;

Para seleccionar un elemento de la página web (una celda en una tabla, un botón en un formulario, un enlace, etc.) se puede emplear:

• getElementById(id): selecciona el emento indicado por el id.
• Usar una combinación de getElementsByTagName(etiqueta) y getAttribute(atributo) para seleccionar elementos con un atributo específico.

En la entrada JavaScript no molesto (3): las ventanas emergentes se puso como ejemplo los enlaces que se abren en ventanas emergentes. Para indicar que un enlace es de este tipo, vamos a añadir al atributo class un valor que no se emplea en el CSS, pero que desde CSS nos va a permitir saber que se trata de una ventana emergente:

<a href="http://www.ua.es/" class="estilo popup">Universidad de Alicante</a>
En el atributo class, el valor estilo se emplea en el CSS para asignar una presentación concreta, mientas que el atributo popup se emplea en JavaScript para identificar los enlaces que se tienen que abrir en ventanas emergentes:

window.onload = prepareLinks;
function prepareLinks() {
  var links = document.getElementsByTagName("a");
  for (var i=0; i= 0) {
      links[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }

}

function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

En el código anterior se realizan los siguientes pasos:

1. Se asigna al evento onload la función prepareLinks: esta función será llamada automáticamente cuando la página termine de cargarse.
2. La función prepareLinks obtiene un array con todos los enlaces de la página web.
3. Para cada enlace, se comprueba si el atributo class contiene el valor popup.
4. Si el enlace está marcado como popup, le asigna una función de JavaScript al evento onclick.

Para más información sobre cómo lograr la separación del código JavaScript:

• DHTML no intrusivo
• Nociones básicas de JavaScript no intrusivo
• Behavioral Separation
• Unobtrusive Javascript
• Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)
• 7 reglas de oro para hacer un javascript no obstructivo

JavaScript no molesto (3): las ventanas emergentes

Una ventana emergente (popup window) es una ventana independiente del navegador que se abre de forma automática (por ejemplo, las molestas ventanas emergentes de publicidad que se abren al cargar una página) o de forma manual como respuesta a una acción del usuario de una página (por ejemplo, al pulsar sobre un enlace).

En el caso de estas últimas, lo normal es que se abran tras pulsar el usuario sobre un enlace o un botón. El uso de botones con el evento onclick se debería evitar, ya que supone una barrera de accesibilidad en el caso de que JavaScript no esté disponible. Por tanto, nos vamos a centrar en las ventanas emergentes activadas al pulsar sobre un enlace.

En el href de un enlace se puede utilizar directamente JavaScript. Por ejemplo, suponiendo que tenemos la función popUp que abre una ventana emergente:

function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}

simplemente tenemos que escribir javascript:popUp('http://www.ua.es/') en la dirección del enlace. También se puede emplear el evento onclick y dejar la dirección en blanco o poner el símbolo "#":

<a href="" onclick="popUp('http://www.ua.es/');">UA</a>Cualquiera de las dos posibilidades impide que los usuarios sin JavaScript puedan acceder al contenido indicado.

La solución es muy sencilla:

• Añadir en el enlace una URL al contenido que se desea visualizar.
• En el código JavaScript, añadir return false; al final para evitar que se ejecute el enlace cuando se ejecute el código JavaScript. La URL del enlace indicada con href sólo será empleada cuando JavaScript no esté disponible.

Con esta solución, la funcionalidad se ve reducida para los usuarios sin JavaScript porque no se abre en una nueva ventana, pero no falla completamente.

La solución anterior se puede mejorar para evitar el tener que repetir la URL tanto en el enlace como en el evento onclick:

<a href="http://www.ua.es/" onclick="popUp(this.getAttribute('href')); return false;">UA</a>o también:

<a href="http://www.ua.es/" onclick="popUp(this.href); return false;">UA</a>Pero esta solución aún se puede mejorar más, ya que el código JavaScript está escrito directamente en las etiquetas HTML, lo cual ocasiona algunos problemas:

• Dificulta la escritura.
• Dificulta la lectura.
• Dificulta el mantenimiento.

¿No se puede separar el código JavaScript del código HTML como se hace con CSS?

Uso de la propiedad float de CSS

El uso de la propiedad float de CSS es un poco confuso. Si se hacen pruebas sin haber leído antes una explicación sobre cómo se usa es difícil sacar conclusiones. Pero esta propiedad es muy importante si se quiere lograr un diseño (layout) de una página web que sea válido para diferentes resoluciones de pantalla.

En la sección 9.5 Floats de Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification podemos encontrar la explicación oficial de esta propiedad. Pero para aprender a usar la propiedad float, es mucho mejor consultar Floatutorial. Este tutorial ofrece explicaciones muy claras sobre el uso de este atributo y termina explicando como se puede utilizar para lograr un diseño a 2 columnas o a 3 columnas líquido (que se adapte a diferentes resoluciones de pantalla).

Página con muchos recursos

Acabo de encontrar la página web Web Design References: Accessibility. Es una página web muy buena, ya que contiene multitud de enlaces a páginas web donde explican temas relacionados con la accesibilidad. Los temas que contiene son:

• Abbreviations & Acronyms
• Accessibility Statements
• Accesskeys
• Alt Attributes , Alt Text, Long Descriptions
• Assistive Technology
• Baseline
• Benefits (Why accessibility?)
• Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart)
• Checklists
• Cognitive Disabilities
• Definitions and Overviews
• Device Independence and Graceful Degradation
• Deprecated Features
• Flicker
• Forms
• Language
• Law, Lawsuits, Policies
• Lists
• Mailto
• Multimedia
• Open Source
• Plugins, PDF, PowerPoint, etc.
• Relative sizing
• Scripts
• Structure & Semantics
• Style Sheets (Accessibility)
• Tables
• Testing, Checking, Validating
• Text Links
• Text Only Versions
• Usability and Accessibility
• Zoom Layouts
• Articles & Related Links

Libro electrónico: Access by Design Online

Gracias a Gabriel Porras y su página Libros Gratis he encontrado el libro Access by Design Online. No está en formato PDF para descargar, sólo está en formato HTML para consultarlo en línea.

El libro está estructurado a modo de catálogo de consejos con múltiples ejemplos de páginas web reales. Incluye consejos sobre el HTML que se debe utilizar para cumplir el consejo, pero no incluye ejemplos completos de código, por lo que en algunos casos se queda corto de contenido y será necesario consultar otras fuentes para entender cómo se hace.

Ya encajan "casi" todas las piezas de la accesibilidad de las páginas web en España

En los últimos días, con la aprobación del RD 1494/2007 se ha aclarado una cuestión que para muchos era un misterio y que es muy importante: ¿qué nivel de accesibilidad debe tener una página web en España? Por ahora, las páginas web de las empresas no están obligadas a alcanzar ningún nivel, pero las páginas web de las Administraciones públicas ya no tienen excusa.

¿Por qué es necesario este reglamento si ya existía la Ley 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSI)?

Recordemos lo que dice esta ley:

Disposición adicional quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.

Uno. Las Administraciones públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005.
Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

Pero también dice:

Disposición final séptima. Habilitación al Gobierno.
Se habilita al Gobierno para desarrollar mediante Reglamento lo previsto en esta Ley.

La LSSI no establece el nivel de accesibilidad que deben cumplir las páginas web a las que se refiere (páginas web de las Administraciones públicas y páginas web financiadas por las Administraciones públicas). Casi todo el mundo entendió que la frase "de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos" indicaba que al no definir un nivel el Gobierno de España, se aplicaría lo indicado por la Unión Europea, es decir, el nivel AA del WAI del W3C. Pero una ley no puede (o no debería) dejar abiertas las puertas a diferentes interpretaciones.

Como aclara Gabriel Porras, el reglamento del RD 1494/2007 desarrolla la LSSI, define mediante la norma UNE 139803:2004 el nivel de accesibilidad que se debe alcanzar y establece un calendario para ello. Pero este calendario entra en contradicción con lo establecido en la LSSI, ya que sobrepasa la fecha del 31/12/2005 que se fijó en la LSSI.

¿Por qué la norma UNE 139803:2004 si tenemos las WCAG 1.0 del WAI?

Fran Tarifa nos aclara el misterio. Según una cita del presidente de la Fundación SIDAR, Loïc Martínez Normand:

[...] parece ser que en España no se puede referenciar en la legislación a documentos técnicos que no provengan de organismos oficiales de normalización (como AENOR, CEN e ISO) y, por desgracia, el W3C no lo es.

Es decir, que la norma UNE, que es una copia de las pautas del WAI, es un medio para referirse a las WCAG 1.0 y que tenga validez legal en España.

Trabajo en un ayuntamiento (diputación, instituto, universidad, etc.). ¿Qué pasa si no cumplo el reglamento?

Pues no lo sé. Se supone que en algún momento existirá un regimen sancionador. Hace unos días publiqué el comentario Sanciones por discriminar a discapacitados donde comenté que el Congreso debatía una ley que establece sanciones de hasta un millón de euros por discriminar a discapacitados. En concreto, la noticia decía:

El proyecto de ley considera infracciones administrativas las discriminaciones directas o indirectas, acosos, así como el incumplimiento de las exigencias de accesibilidad las que están sometidas las entidades.

Dentro de esta explicación se puede incluir la accesibilidad de las páginas web. Pero por el resto de la noticia parece que esta nueva ley se refiere a las empresas y no a las Administraciones públicas.

Mitos sobre la accesibilidad

He encontrado la página web Mitos y Conceptos Erróneos sobre la Accesibilidad. Es una traducción de la página web Accessibility myths and misconceptions. En este artículo se desmontan una serie de mitos que existen sobre la accesibilidad web. La lista de mitos es:

1. La accesibilidad es sólo para personas ciegas.
2. Los sitios accesibles son feos y aburridos.
3. La accesibilidad es costosa y difícil.
4. Ofrecer una versión sólo texto es suficiente.
5. Personalización y la funcionalidad de lectura en voz alta.

JavaScript no molesto (2): cómo desactivar JavaScript

Antes de analizar algunas técnicas para conseguir que JavaScript "no moleste" en la página, vamos a ver cómo desactivar el intérprete de JavaScript en los navegadores más comunes. De esta forma, podremos comprobar si una página que contiene código JavaScript sigue siendo funcional y accesible cuando el código JavaScript no se ejecuta.

En Microsoft Internet Explorer 7, en el menú Herramientas --> Opciones de Internet --> Seguridad --> Nivel personalizado... se abre el cuadro de diálogo Configuración de seguridad; en la categoría Automatización (Scripting) hay que deshabilitar la opción Active scripting, tal como podemos ver en la siguiente imagen:

En Microsoft Internet Explorer también es interesante desactivar la opción Scripting de applets de Java.

En Mozilla Firefox 2.0, en el menú Herramientas --> Opciones --> Contenido tenemos que desactivar la opción Activar JavaScript que podemos ver en la siguiente imagen:

En Opera 9 hay dos formas de desactivar JavaScript:

• Menú Herramientas --> Opciones más a mano --> Activar JavaScript
• Menú Herramientas --> Opciones --> Avanzado --> Activar JavaScript, como podemos observar en la siguiente imagen.

Entradas anteriores:

• JavaScript no molesto (1): Definición

Norma UNE 139803:2004

En la entrada de ayer Aprobado reglamento sobre condiciones básicas de accesibilidad comenté que el reglamento aprobado establece que la Norma UNE 139803:2004 regula el nivel de accesibilidad de las páginas web en España.

Esta norma antes era de pago y estaba prohibida su reproducción sin el consentimiento de AENOR. Ahora ya se puede descargar de forma gratuita desde Norma UNE 139803:2004.

JavaScript no molesto (1): Definición

El término JavaScript no molesto es la traducción del inglés unobtrusive JavaScript. En muchas páginas (por ejemplo, en la Wikipedia) aparece mal traducido como JavaScript no obstructivo o no intrusivo. Ni obstructivo ni intrusivo existen en el Diccionario de la lengua española de la Real Academia Española, por lo que no se deben usar. Unobtrusive se traduce al español como discreto o no molesto.

La Wikipedia contiene la definición de JavaScript no obstructivo:

JavaScript no obstructivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:

• Separación de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de un página.
• Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad).

El objetivo final es que las páginas web sean totalmente funcionales para aquellos usuarios que no puedan o no quieran hacer uso de JavaScript.

Cuando escribí sobre Hijax: Ajax accesible ya comenté que esta técnica se basa en lo que se conoce en inglés como progressive enhancement y graceful degradation, dos estrategias que permiten que un sistema informático (en este caso, una página web) funcione correctamente aun en el caso de que falte algún tipo de componente. Mientras que con progressive enhancement se parte de una versión básica completamente operativa (se parte de una página web compatible con la mayoría de los navegadores y con el menor uso posible de tecnologías complementarias como CSS o JavaScript), con graceful degradation se parte del extremo contrario: se crea una página web para los últimos navegadores, con la posibilidad de que funcione en navegadores antiguos.

¿Hay gente que navega por Internet y su navegador no admite JavaScript? En la página Browser Statistics podemos ver que en enero de 2007 había un 6% de usuarios sin JavaScript.

Pero los beneficios no son sólo para los posibles visitantes de nuestro sitio web: nosotros mismos nos beneficiaremos al tener separados la estructura de la página (HTML), la presentación (CSS) y la lógica (JavaScript). Los costes de mantenimiento de una página web son menores si lo tenemos todo bien separado y en su sitio.

¿Qué se tiene que hacer para tener JavaScript no molesto? En próximas entradas comentaré algunas de las técnicas más comunes. Recomiendo la lectura de la página Javascript no obstructivo, Manual de buenas maneras, que ofrece una extensa explicación del tema.

Aprobado reglamento sobre condiciones básicas de accesibilidad

Hoy se ha publicado en el BOE el REAL DECRETO 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.

El reglamento cubre diferentes medios de comunicación, como son la televisión, las telecomunicaciones y las páginas web. Respecto estas últimas, llamadas "páginas de internet", el Artículo 5. Criterios de accesibilidad aplicables a las páginas de internet de las administraciones públicas o con financiación pública dice:

1. La información disponible en las páginas de internet de las administraciones públicas deberá ser accesible a las personas mayores y personas con discapacidad, con un nivel mínimo de accesibilidad que cumpla las prioridades 1 y 2 de la Norma UNE 139803:2004.
Esta obligación no será aplicable cuando una información, funcionalidad o servicio no presente una alternativa tecnológica económicamente razonable y proporcionada que permita su accesibilidad.
Asimismo, respecto a la lengua de signos, las citadas páginas de internet tendrán en cuenta lo dispuesto en la Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas.

2. Excepcionalmente, las administraciones públicas podrán reconocer la accesibilidad de páginas de internet conforme a normas técnicas distintas de las que figuran en el apartado 1 de este artículo, siempre que se compruebe que alcanzan una accesibilidad similar a la que estas normas garantizan.

3. Las páginas de Internet de las administraciones públicas deberán contener de forma clara la información sobre el grado de accesibilidad al contenido de las mismas que hayan aplicado, así como la fecha en que se hizo la revisión del nivel de accesibilidad expresado.

[...]

Respecto a los plazos para el cumplimiento de este reglamento, la Disposición transitoria única. Plazos establece:

2. Las páginas de internet de las administraciones públicas o con financiación pública deberán adaptarse a lo dispuesto en el artículo 5 de dicho reglamento, en los siguientes plazos:
a) Las páginas nuevas deberán ajustarse a la prioridad 1 de la Norma UNE 139803:2004 desde la entrada en vigor del real decreto.
b) Las páginas existentes deberán adaptarse a la prioridad 1 de la Norma UNE 139803:2004 en el plazo de 6 meses desde la entrada en vigor.
c) Todas las páginas, actualmente existentes o de nueva creación, deberán cumplir la prioridad 2 de la Norma UNE 139803:2004 a partir del 31 de diciembre de 2008.
No obstante, este plazo de adaptación y la citada norma técnica de referencia podrán ser modificados a efectos de su actualización mediante orden ministerial conjunta, en los términos establecidos en la disposición final tercera de este real decreto.

En resumen:

• Los niveles de la Norma UNE 139803:2004 equivalen prácticamente a los niveles de las WCAG del W3C.
• Las nuevas páginas web se tienen que ajustar al nivel 1 desde la entrada en vigor del reglamento (el día siguiente al de su publicación en el BOE, es decir, 22/11/2007).
• Las páginas web existentes se tienen que adaptar al nivel 1 en el plazo de 6 meses (22/05/2008).
• Todas las páginas tienen que cumplir el nivel 2 a partir del 31/12/2008.

¿Por qué una norma UNE propia y no las del W3C? ¿Quién va a realizar las certificaciones? En la página Medidas en materia de accesibilidad a servicios de la Sociedad de la Información en España se aclaran algunas confusiones que pueden existir al respecto de esta normativa.

Sanciones por discriminar a discapacitados

Leo la noticia El Congreso debate hoy la ley que establece sanciones de hasta un millón de euros por discriminar a discapacitados. Según la noticia, se está debatiendo el régimen sancionador ante las infracciones que vulneren la Ley 51/2003, de 2 de diciembre, de Igualdad de Oportunidades, No Discriminación y Accesibilidad Universal de las Personas con Discapacidad. Las infracciones podrán ser leves, graves o muy graves y conllevarán multas que oscilarán entre un mínimo de 301 euros hasta un máximo de un millón de euros.

¿Se aplicarán la Administraciones Públicas su propia medicina cuando sus páginas web no cumplan los niveles de accesibilidad que por la Ley 34/2002, del 11 de Julio, de Servicios de la Sociedad de la Información y del Comercio Electrónico, se deberían cumplir desde antes del 31 de diciembre de 2005?

Informe sobre el acceso de las personas con discapacidad a las telecomunicaciones y a la sociedad de la información

He leído en varias páginas (por ejemplo, El acceso de las personas con discapacidad a las telecomunicaciones y a la sociedad de la información) que el CERMI y Telefónica han publicado un informe titulado "El acceso de las personas con discapacidad a las telecomunicaciones y a la sociedad de la información. Informe del Consejo Nacional sobre Discapacidad de los Estados Unidos de América".

Se trata de una traducción de un informe elaborado por el Consejo Nacional sobre Discapacidad de los EE.UU. en diciembre de 2006. Este informe posee 103 páginas y se puede descargar de la página Colección Telefónica Accesible, más concretamente, se puede descargar en formato PDF.

Lo más interesante sobre la accesibilidad web se encuentra en la página 97: Aclarar la cobertura de la Ley de Estadounidenses con Discapacidad (ADA) sobre páginas web: cambio legislativo o normativo.

Americans with Disabilities Act of 1990 (ADA) es una ley que protege los derechos civiles de las personas con discapacidad y prohibe la discriminación basada en la discapacidad. En su Título III (Public Accommodations and Commercial Facilities) se indica que nadie puede ser discriminado e impedido a disfrutar de los bienes y servicios que ofrece un comercio público debido a una discapacidad.

El grado en que el Título III de la ADA cubre los servicios online de empresas privadas sigue siendo objeto de conflictivas decisiones del tribunal federal. En la página web WHEN THE AMERICANS WITH DISABILITIES ACT GOES ONLINE:Application of the ADA to the Internet and the Worldwide Web se puede consultar un informe del año 2003 sobre este conflicto.

Total Validator

Gracias a un mensaje que me ha enviado Paco, un lector de este blog, conozco una nueva herramienta de validación: Total Validator.

Esta herramienta no se limita únicamente a validar la accesibilidad web, sino que también valida el HTML, verifica que no haya enlaces rotos y permite ver una captura (screenshot) de la página web en distintos navegadores.

Esta herramienta se ofrece en varias versiones (todas gratuitas, excepto la profesional que es de pago):

• Versión en línea.
• Versión para descargar como extensión para Firefox.
• Versión para descargar como herramienta de escritorio.
• Versión profesional para descargar como herramienta de escritorio: ahora mismo no es posible descargar esta versión, porque está en preparación un nuevo programa que la sustituirá en el 2008.

Según me indica Paco:

Te la recomiendo porque, incluso en su versión teóricamente menos potente, que es la extensión para Firefox, presenta advertencias que no encuentras en las otras herramientas habituales (algunas son resultado de un "exceso de celo" y quizás se podrían pasar por alto, pero otras son realmente útiles y no las detecta ninguna de las otras).

Gracias Paco.

Herramienta para subtitulado

Acabo de encontrar la página del Carl and Ruth Shapiro Family National Center for Accessible Media (NCAM). Este sitio web está dedicado a mejorar la accesibilidad de los contenidos multimedia.

Entre varios recursos interesantes destaca el programa Media Access Generator (MAGpie). Este programa permite crear subtítulos (closed captions) y descripciones del audio (audio descriptions) para elementos multimedia como los vídeos. Está hecho en Java y, por tanto, necesita una Máquina Virtual Java para ejecutarse.

Esta herramienta es muy sencilla de utilizar. En primer lugar se tiene que elegir el estilo (tipo de letra, tamaño, color, etc.) de los subtítulos.

A continuación se tienen que crear los subtítulos, para ello se define el instante inicial y final de aparición de cada subtítulo.

Por último se exporta el proyecto al formato de salida. Como se puede ver en la siguiente imagen, esta herramienta permite exportar a SMIL o a SAMI.

Para más información sobre multimedia y subtítulos:

• Subtítulos y lengua de signos todo junto
• Serie "Guía breve": Multimedia
• SMIL y la accesibilidad web

Un curso sobre accesibilidad web

El Instituto de Ciencias del Hombre ofrece un curso llamado Curso avanzado sobre diseño de sitios web accesibles. La inscripción ya está abierta y el curso de desarrollará de diciembre 2007 a marzo 2008.

Tecnologías para mejorar la accesibilidad web de IBM

He encontrado el artículo Web accessibility technology at the IBM Tokyo Research Laboratory (también disponible en formato PDF). En este artículo se describen una serie de herramientas desarrolladas por IBM para mejorar la accesibilidad de las páginas web. El nivel del artículo es un poco alto, así que se lo recomiendo a la gente que quiera "saber más".

En este artículo podemos encontrar la descripción de las siguientes herramientas:

• Home Page Reader: navegador web para usuarios ciegos que incluye un lector de pantallas.
• Transcoding technology: tecnología que permite modificar la presentación y la estructura de una página web para adaptarla a usuarios ciegos.
• Accessibility Designer (aDesigner): permite a los diseñadores conocer los problemas a los que se enfrentan los usuarios discapacitados al navegar por la web. Ofrece dos modos de funcionamiento: cómo ve la página web una persona completamente ciega que utilice un lector de pantallas o cómo ve una página web con una visión reducida (por la edad o por alguna enfermedad).
• Accessibility Observer: permite relacionar los errores de accesibilidad que se localizan en una página web (en el HTML) con el código de la página JSP o servlet que lo ha generado.

Accesibilizando la Web

He encontrado las transparencias de una presentación muy interesante llamada Accesibilizando la Web de Eugenia Jongewaard, que se realizó hace unos días en Buenos Aires. El audio de la presentación se puede descargar de la página Accesibilizando la Web: Audio. Las explicaciones son muy claras y sencillas y se incluyen ejemplos muy significativos. Recomiendo esta presentación al que tenga problemas en entender qué es la accesibilidad web.

Accesibilidad de las webs de las universidades españolas

Juan Carlos García, en su web Úsalo, ha realizado una serie sobre Malas prácticas universitarias. Para realizar este estudio ha analizado 26 indicadores que se pueden agrupar en cuatro apartados:

• Criterio político en el diseño: organizar según el organigrama jerárquico, "Saludo del rector", etc.
• Legibilidad: abusar del lenguaje administrativo, documentos poco escaneables, etc.
• Diseño: abuso de menús desplegables, uso de frames, no hacer diseño líquido, etc.
• Ayuda al acceso a la información: buscadores perdidos o inexistentes, ausencia de RSS, etc.

Las entradas que resumen su estudio son:

• Principales 10 malas prácticas en web universitarias
• Ranking de Universidades
• Malas prácticas en el diseño de webs universitarias

Serie "Guía breve": Figuras y diagramas

Consejo 6: Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc.

Este consejo está relacionado con el consejo 1 Imágenes y animaciones. El uso del atributo longdesc lo comenté hace tiempo en otra entrada:

El atributo longdesc complementa al atributo alt y se emplea para ofrecer una descripción más larga del elemento que la proporcionada por el atributo alt. Las etiquetas de XHTML que admiten este atributo en la versión 1.0 son: img, iframe y frame. Su valor tiene que ser una Uniform Resource Identifier (URI), la dirección de un recurso en Internet.

Mientras que el atributo alt contiene el texto alternativo de la imagen, el atributo longdesc contiene una dirección de Internet a otra página web o a la misma página web donde se encuentra la descripción larga de la imagen. El atributo longdesc se emplea en situaciones donde la descripción es muy larga para ser incluida en el atributo alt, por ejemplo, cuando la imagen es un cuadro o un gráfico.

¿Los navegadores actuales utilizan el atributo longdesc? Ni Internet Explorer 7, ni Firefox 2, ni Opera 9 lo soportan. Incluso Amaya, el navegador oficial del W3C, lo utiliza.

Pero sí que existe un complemento para Firefox llamado Longdesc que añade al menú contextual (botón derecho del ratón) una nueva opción llamada View Image Longdesc que permite navegar a la URL que tenga asignada la imagen, como podemos ver en la siguiente imagen que es una captura de la página firefox longdesc extension - demo page del autor del complemento:

WAI-ARIA

Acabo de encontrar la página Roadmap for Accessible Rich Internet Applications (WAI-ARIA Roadmap) del W3C. ¿Qué es esto? Es una iniciativa del W3C para estudiar y solucionar los problemas que presentan las páginas web actuales que se basan en contenido dinámico, como por ejemplo las páginas web que emplean AJAX. Otra página donde se puede leer una introducción a este tema es Accessible Rich Internet Applications Suite (WAI-ARIA) Overview.

Las páginas web, mejor dicho, los sitios web que contienen contenido dinámico que se actualiza en el cliente (navegador) sin tener que recargar la página se conocen como Rich Internet Applications. En español se puede traducir como Aplicaciones ricas de Internet.

Serie "Guía breve": Organización de las páginas

Consejo 5: Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.

Las páginas web tienen que estar correctamente estructuradas. Para ello, se tienen que explear las etiquetas de HTML que definen la estructura de una página, como son:

<title>, <h1>, <h2>, ..., <ul>, <ol>, <p>, <blockquote>

Toda página web debe tener un título definido con la etiqueta title que resuma el contenido o la función de la página.

El contenido de las páginas se tiene que estructurar con las etiquetas de encabezado h1, h2, ... La mayoría de los lectores de pantalla y algunos navegadores como Opera permiten al usuario desplazarse dentro de una página web "saltando" de un encabezado a otro encabezado. Eso permite llegar de una forma más rápida a la información que se busca. Por ejemplo, la siguiente página web está estructurada en diversos apartados: Presentación, Formación académica, Investigación, Docencia, Libros, etc.

En la siguiente imagen de Fangs, que simula el comportamiento de un lector de pantallas, podemos observar la lista de encabezados (Heading list) de la página anterior. Cada encabezado lleva asociado un número que indica en nivel de encabezado (del 1 al 6).

Para maquetar una página web nunca se deben utilizar las tablas, ya que suponen un grave problema de accesibilidad. Una página web se puede y debe maquetar con CSS y obtener el mismo resultado que se obtendría con tablas. Un par de enlaces sobre cómo maquetar sin tablas:

• Porqué el diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas
• CSS Layout Techniques: for Fun and Profit

Serie "Guía breve": Enlaces de hipertexto

Consejo 4: Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite "pincha aquí".

Algunos navegadores y algunos los programas de ayuda que emplean las personas con discapacidad (por ejemplo, los lectores de pantalla) ofrecen al usuario la posibilidad de mostrar, normalmente una ventana aparte, la lista de enlaces que contiene una página web. Esta lista de enlaces normalmente permite activar un enlace y navegar a la página de destino. Si el texto de un enlace no tiene sentido fuera de su contexto, el enlace no tendrá sentido en esta lista de enlaces.

Por otro lado, si los enlaces poseen un estilo especial para resaltarlos, los usuarios suelen fijar su atención en ellos, por lo que es importante que el texto de los enlaces sea lo más claro y significativo.

Por ejemplo, elPeriódico.com tiene una sección llamada Encuestas en la que se muestran todas las encuestas que existen. Cada encuesta tiene un enlace asociado con el texto Ver Resultados para visualizar los resultados de la encuesta seleccionada, como podemos ver en la siguiente imagen:

El complemento Fangs para Firefox que simula el comportamiento de un lector de pantalla posee una ventana para visualizar los enlaces que contiene una página web. En la siguiente imagen podemos ver la lista con los primeros enlaces (Portada, Opinión, Internacional, etc.) de la página web mostrada anteriormente:



Como todas las encuestas tienen un enlace con el texto Ver Resultados, cuando se consulta la lista de enlaces no se sabe a qué encuesta se refiere cada enlace, como podemos observar en la siguiente imagen:

Por tanto, esta página presenta un grave problema de accesibilidad, ya que no se puede seleccionar un enlace en la lista de enlaces.

Para finalizar, unos breves consejos para escribir enlaces correctos:

• Tiene que ser claro y corto, pero no tan corto que sea casi inapreciable para el usuario cuando lo escuche.
• Tiene que tener sentido fuera de contexto, por ejemplo, cuando se lea él sólo o como parte de una lista de enlaces de una página.
• Tiene que tener sentido en el contexto, por ejemplo, cuando se lea como parte del resto de la página.

Para ampliar estos consejos, recomiendo la lectura de los siguientes artículos:

• Evitando el “click aquí”: el arte de enlazar, traducción al castellano del artículo Don't Click Here: The Art of Hyperlinking.
• Enlazar es importante.
• Affordance: un botón es un botón

(Actualización 22/11/2007) También hay gente que defiende lo contrario: si le dices a la gente "pulsa aquí" (click here) aumentará el porcentaje de usuarios que lo hagan. Además, ayuda a los usuarios poco familiarizados con la navegación web. Lo explican en el artículo Does Telling Someone to “Click Here” Actually Matter?.

(Actualización 30/11/2008) El artículo Enlaces para “leer más” que sean simples y accesibles explica cómo emplear CSS para solucionar el problema de los enlaces poco descriptivos.

Ajax y Jaws

Las páginas web que se desarrollan con Ajax presentan importantes problemas de accesibilidad, como podemos leer en estas páginas:

• AJAX and Accessibility
• Accessibility of AJAX Applications
• AJAX and Screenreaders: When Can it Work?

Básicamente, los problemas se deben a que con Ajax el contenido de una página web puede cambiar sin que el usuario tenga conocimiento de ello y eso es un problema para todos los usuarios en general y muy en especial para los usuarios discapacitados que utilizan algún software de apoyo.

Acabo de encontrar el artículo Improving Ajax applications for JAWS users. En este artículo se describe un modo de mejorar la accesibilidad de las páginas web basadas en Ajax para que funcionen correctamente cuando se visitan utilizando un lector de pantallas como Jaws.

El método propuesto en este artículo se basa en actualizar mediante JavaScript el buffer virtual que emplea Jaws para leer la página web. Pero este método depende de que el desarrollador de la página web la prepare para trabajar con el buffer virtual de Jaws, lo cual es mucho pedir.

¿Accesibilidad, usabilidad, navegabilidad?

Tres términos que mucha gente confunde, ya que en algunos aspectos se solapan y los tres defienden el mismo objetivo: mejorar la experiencia de los usuarios cuando visitan un sitio web.

¿Qué es la accesibilidad web? Según la Wikipedia:

La accesibilidad web o de la interfaz, indica la capacidad de acceso a la Web y a sus contenidos por todas las personas, independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.

En la definición de la Wikipedia ya se relaciona accesibilidad y usabilidad. ¿Y qué es usabilidad? Según la Wikipedia:

[...] En castellano significa capacidad de uso, es decir, la característica que distingue a los objetos diseñados para su utilización de los que no. Sin embargo la acepción inglesa es más amplia y se refiere a la facilidad o nivel de uso, es decir, al grado en el que el diseño de un objeto facilita o dificulta su manejo.

¿Y qué es la navegabilidad? La Wikipedia no tiene definido en castellano este término, así que lo he editado y he creado una nueva entrada (esperemos que la acepten) a partir de la definición proporcionada en Navegabilidad de páginas web:

La navegabilidad o navegabilidad web es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web. Para lograr este objetivo, un sitio web debe proporcionar un conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario.
Las interfaces de navegación tienen que ayudar a los usuarios a responder a tres
preguntas fundamentales relacionadas con la navegación:

• ¿Dónde estoy?
• ¿Dónde he estado?
• ¿Dónde puedo ir?

En el artículo Accesibilidad vs Usabilidad se puede encontrar una buena comparación de estos dos términos.

Subtítulos y lengua de signos todo junto

Acabo de encontrar una demostración muy interesante y útil de SMIL: Example of Sign language with two Smil synchronized video tracks, FLV format. Incluyo una captura de pantalla:



Se trata de un visor de SMIL desarrollado con Flash que permite utilizar dos flujos (streams) de vídeo de forma conjunta. De esta forma se puede ofrecer un vídeo, los subtítulos, la descripción del audio y un segundo vídeo con la lengua de signos todo en uno. El reproductor permite activar o desactivar las distintas opciones (subtítulos, descripciones y lengua de signos). ¡Una maravilla!

Buscador de guías de accesibilidad web

Acabo de encontrar la página Index of Government Guidelines for Web Sites. Se trata de un índice de guías de accesibilidad web y de creación de sitios web gubernamentales por países. ¡España no está!

Que yo sepa, en España no existen unas guías específicas propuestas por el "Gobierno de España". Lo que se suele aplicar es:

• Ley de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSI), que no especifica un nivel de accesibilidad (A, AA o AAA), sino "[...] de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos [...]".
• La norma UNE 139803:2004 de AENOR, que es prácticamente una copia-resumen de las WCAG 1.0 del WAI.

Evolución de la accesibilidad web

He encontrado el artículo La hora de la accesibilidad web. Ya tiene dos años (una eternidad), pero es interesante porque hace una pequeña exposición de cómo ha evolucionado el interés por la accesibilidad web desde los inicios de la Web.

Serie "Guía breve": Multimedia

Consejo 3: Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.

Los elementos multimedia que tanto se utilizan en las páginas web hoy en día pueden ocasionar graves problemas de accesibilidad, ya no sólo a las personas con algún tipo de discapacidad, sino a todo el mundo en general. ¿Por qué?

Porque al ser elementos que no son HTML requieren, en la mayoría de los casos, la instalación de un visor específico (plug-in, add-in o extensión) que sea capaz de interpretar el elemento multimedia. Y no todo el mundo tiene su ordenador actualizado con los últimos visores.

Por tanto, como regla general, no se debe abusar de los elementos multimedia y el diseñador de una página web se tiene que preguntar, antes de incluirlo en una página web, si es un elemento esencial que no se puede eliminar o sustituir por otro más accesible.

Si nos centramos en los problemas de accesibilidad que pueden tener las personas con discapacidad, los elementos multimedia más problemáticos son los vídeos, las grabaciones sonoras y las animaciones.

Respecto a los vídeos y las grabaciones sonoras, en ambos casos se tiene que proporcionar una transcripción de los dialógos y una descripción de los sonidos. En el caso de los vídeos también se tiene que proporcionar una descripción del vídeo en sí (de la imagen). Un par de artículos sobre subtítulos y descripciones: Captioning y Audio description.

Hoy en día existen tecnologías que permiten sincronizar los subtítulos o una transcripción con un vídeo o una grabación sonora. Las dos tecnologías que más se emplean son Synchronized Multimedia Integration Language (SMIL), una tecnología promovida por el W3C, y por otro lado Microsoft Synchronized Accessible Media Interchange (SAMI). Hace unos días publiqué una entrada llamada SMIL y la accesibilidad web donde comento brevemente estas dos tecnologías.

En el caso de las animaciones, lo más normal hoy en día es que se realicen con Adobe (Macromedia) Flash. Para conocer los problemas de accesibilidad que presentan los elementos multimedia creados con Flash y cómo hacer que sean accesibles, recomiendo la lectura de las siguientes páginas:

• Flash y Accesibilidad Web: una relación complicada: en este artículo podemos leer que la accesibiliad de Flash sólo esta disponible en el sistema operativo Microsoft Windows y con el navegador Microsoft Internet Explorer, ya que Flash utiliza la tecnología tecnología Microsoft Active Accesibility (MSAA) para ofrecer las carecterísticas de accesibilidad.
• Creating Accessible Macromedia Flash Content
• Flash 8 Accessibility Design Guidelines: de Adobe.
• Flash 8 Accessibility Design Guidelines: similar al anterior.
• Best Practices for Accessible Flash Design: de Adobe.

(Actualización 22/11/2007) Otro tipo de elemento problemático, que no es del todo multimedia, pero que se puede incluir dentro de este consejo son los documentos PDF (Portable Document Format). Algunos páginas donde nos explican cómo hacer que un PDF sea accesible:

• Técnicas para el desarrollo de documentos PDFs accesibles
• PDF accesibles
• Creating accessible Adobe PDF Files
• Guía Accesibilidad en Documentos PDF

Adobe ofrece un servicio llamado Online conversion tools for Adobe PDF documents que convierte un documento PDF a HTML o texto plano para aquellos usuarios que no dispongan de un visor de PDF o que su lector de pantalla no sea compatible con Adobe Acrobat Reader.

Serie "Guía breve": Mapas de imagen

Consejo 2: Mapas de imagen: Use el elemento map y texto para las zonas activas.

¿Qué son los mapas de imagen? Veamos lo que dice el W3C en el apartado 13.6 Mapas de imagen de la especificación HTML 4.01:

Los mapas de imágenes permiten a los autores especificar regiones en una imagen u objeto y asignar una acción específica a cada región (p.ej., abrir un documento, ejecutar un programa, etc.). Cuando la región es activada por el usuario, se ejecuta la acción.

Un mapa de imágenes se crea asociando un objeto con una especificación de las áreas geométricas sensibles del objeto.

Hay dos tipos de mapas de imágenes:

• En el lado del cliente. Cuando un usuario activa una región de un mapa de imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son interpretadas por el agente de usuario. El agente de usuario selecciona el vínculo especificado por la región activada y lo sigue.
• En el lado del servidor. Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al agente del lado del servidor especificado por el atributo href del elemento A. El agente del servidor interpreta las coordenadas y realiza alguna acción.

Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en el servidor por dos razones: son accesibles a las personas que utilizan agentes de usuario no gráficos y permiten saber en todo momento si el apuntador está sobre una región activa o no.

Por tanto, se tienen que emplear los mapas de imagen en el lado del cliente para evitar problemas de accesibilidad.

¿Cómo se crea un mapa de imagen en el lado del cliente? Un mapa de imagen en el cliente se define con la etiqueta map y cada una de las zonas activas se define con la etiqueta area. La etiqueta area posee los atributos shape coords (su valor depende del valor de shape), que se emplean para definir la forma geométrica de la zona activa, y el atributo href, que se emplea para indicar la acción asociada:

• shape="default": define la acción por defecto para toda la imagen.
• shape="rect": define una región rectangular; el atributo coords contiene las coordenadas de la esquina superior izquierda y de la esquina inferior derecha del rectángulo.
• shape="circle": define una región circular; el atributo coords contiene las coordenadas del centro del círculo y del radio.
• shape="poly": define una región poligonal; el atributo coords contiene las coordenadas de cada uno de los puntos que forman el polígono; el último punto tiene que coincidir con el primero para que el polígono se cierre.

Para que el mapa de imagen sea accesible, se tiene queproporcionar un texto alternativo con el atributo alt para cada etiqueta area. Como cada zona activa realiza la misma función que un enlace, el texto alternativo tiene que ser eficaz, en especial, el texto alternativo tiene que tener sentido cuando se lea fuera de contexto. Desgraciadamente, la etiqueta area no posee el atributo longdesc para proporcionar una descripción más larga que con el atributo alt.

El siguiente código define un mapa de imagen que contiene tres enlaces:
<img alt="" src="logopp.gif" usemap="#map1" /><map name="map1" id="map1"><area href="http://www.ua.es/en/index.html" shape="rect" coords="342,104,490,134" alt="University of Alicante"><area href="http://www.ua.es/es/index.html" shape="rect" coords="160,104,325,134" alt="Universidad de Alicante"><area href="http://www.ua.es/va/index.html" shape="rect" coords="0,104,145,134" alt="Universitat d'Alacant"></map>Un lector de pantalla que esté preparado para interpretar los mapas de imagen comunicará al usuario el texto alternativo de cada una de las zonas sensibles definidas en el mapa de imagen. Por ejemplo, en la siguiente imagen podemos observar como lo interpreta la herramienta aDesigner de IBM:



Sin embargo, Fangs no lo interpreta correctamente y no muestra nada. El W3C propone el uso de la etiqueta object en vez de la etiqueta img, ya que la etiqueta object permite incluir contenido alternativo que se muestra en el caso de que el agente de usuario (navegador) no pueda mostrar la etiqueta object. El ejemplo anterior con la etiqueta object se escribe:

<object data="logopp.gif" type="image/jpg" usemap="#map1"><map name="map1" id="map1"><p>Navegar por este sitio: <a href="http://www.ua.es/en/index.html" shape="rect" coords="342,104,490,134">University of Alicante</a><a href="http://www.ua.es/es/index.html" shape="rect" coords="160,104,325,134">Universidad de Alicante</a><a href="http://www.ua.es/va/index.html" shape="rect" coords="0,104,145,134">Universitat d'Alacant</a></p></map></object>Con este código Fangs muestra de forma correcta el contenido alternativo como sustituo de la imagen, como podemos ver en la siguiente imagen:


aDesigner también muestra correctamente el contenido alternativo, como podemos ver en la parte derecha de la siguiente imagen, pero desgraciadamente Internet Explorer no es capaz de interpretar correctamente la etiqueta object (muestra unas barras de desplazamiento y el mapa de imagen no funciona), como podemos ver en la parte izquierda:

¿Qué pasa con la etiqueta object en Internet Explorer? Su soporte es muy malo, como podemos leer y ver en las siguientes páginas:

• Object test suite
• Object and Internet Explorer
• Robin's HTML 4.0 Conformance Test: Objects

Términos relacionados con la accesibilidad

Acabo de encontrar la página Accesibilidad al alcance de todos. En esta página podemos encontrar definiciones de los siguientes términos:

• Tiflotecnología.
• Lector de pantalla.
• Sintetizador de voz.
• Magnificador de pantalla.
• ¿Cuándo es una aplicación accesible?
• ¿Que se necesita para desarrollar una aplicación accesible?

Noticia en formato mp3

Acabo de encontrar la noticia Cuatro de cada diez webs municipales suspenden en accesibilidad. La noticia comenta un estudio realizado por una compañía española que ha analizado los portales municipales de todas las capitales de provincia. Según este estudio, "44 por ciento de las páginas web municipales españolas no cumplen los niveles mínimos de accesibilidad".

Este estudio confirma que no se cumplen las leyes ni los anuncios "a bombo y platillo" que realizan los políticos de vez en cuando. Recordemos algunas noticias pasadas que he comentado desde aquí:

• El acceso electrónico a la Administración, garantizado por ley a los discapacitados
• Garantizada la accesibilidad de los discapactiados en sus relaciones con la Administración
• La accesibilidad web: una asignatura pendiente

Además del contenido de la noticia, me ha llamado mucho la atención que en la página exista una opción para escuchar la noticia o descargarla en formato mp3. ¿Cuál es la finalidad? ¿A qué tipos de discapacitados y en qué condiciones ayuda esta opción? Una persona ciega suele utilizar un lector de pantallas y no necesita de esta ayuda, a no ser que no se encuentre en su ordenador, pero en ese caso, ¿cómo llega hasta el enlace para activar la audición? Se admiten comentarios.

Serie "Guía breve": Imágenes y animaciones

Consejo 1: Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual.

En comentarios anteriores he explicado el uso del atributo alt (El atributo alt) y del atributo longdesc (El atributo longdesc). Además, he explicado cómo los agentes de usuario (navegadores) emplean el atributo alt (¿Qué hace el atributo alt?).

¿Para qué sirve el atributo alt? En el apartado 13.8 Cómo especificar texto alternativo de la Especificación HTML 4.01 (HTML 4.01 Specification) encontramos la siguiente definición:

Definiciones de atributos
alt = texto [CS]
Este atributo especifica texto alternativo para agentes de usuario que no puedan mostrar imágenes, formularios o aplicaciones. El idioma de este texto alternativo está especificado por el atributo lang.

Varios elementos no textuales (IMG, AREA, APPLET e INPUT) permiten a los autores especificar texto alternativo que sirva como contenido cuando el elemento no pueda ser representado normalmente. El especificar texto alternativo ayuda a los usuarios que no tengan terminales gráficas, a los usuarios cuyos navegadores no soporten formularios, a los usuarios con discapacidades visuales, a aquellos que utilicen sintetizadores de voz, a aquellos que hayan configurado sus agentes de usuario para no mostrar imágenes, etc.

El atributo alt debe especificarse para los elementos IMG y AREA. Es opcional para los elementos INPUT y APPLET.

Si bien el texto alternativo puede ser muy útil, hay que tratarlo con cuidado. Los autores deberían seguir las siguientes pautas:

• No especificar texto alternativo irrelevante cuando las imágenes incluidas sólo sirven para dar formato a una página, por ejemplo, alt="bola roja" sería inapropiado para una imagen que añade una bola roja para decorar un título o un párrafo. En tales casos, el texto alternativo debería ser la cadena vacía (""). En cualquier caso se aconseja a los autores que eviten usar imágenes para dar formato a las páginas, y que utilicen hojas de estilo en su lugar.
• No especificar texto alternativo sin significado (p.ej., "relleno"). Esto no solamente frustrará a los usuarios, sino que ralentizará a los agentes de usuario que deban convertir texto a salida por voz o Braille.

Los implementadores deberían consultar la sección sobre accessibilidad para información sobre cómo tratar los casos en que se omite el texto alternativo.

¿Cómo utiliza un lector de pantalla el atributo alt? Normalmente, los lectores de pantalla tienen opciones para configurar como tratar el atributo alt y qué hace caso de que no esté. Si no está el atributo alt, normalmente leen el valor del atributo src de la imagen, lo cual no suele ser muy útil.

Para que se entienda lo que hacen los lectores de pantalla, que suelen ser difíciles de utilizar para una persona que no está acostumbrada a ellos, vamos a utilizar el programa aDesigner y la extensión Fangs para Mozilla Firefox. Estos dos programas ofrecen una representación textual de lo que un lector de pantalla lee.

La siguiente imagen muestra una página web con varias imágenes que se corresponde con el siguiente código HTML:

<h1><a href="anterior.html"><img alt="Flecha roja que apunta a la izquierda" src="flecha-izq.gif" /></a><a href="indice.html">Índice</a><a href="siguiente.html"><img alt="Flecha roja que apunta a la derecha" src="flecha-der.gif" /></a></h1><p>Lista de senderos de pequeño recorrido en la provincia de Alicante:<br /><a href="marinabaja.html"><img alt="Senderos en la Marina Baja" src="bullet.gif" />Senderos en la Marina Baja</a><br /><a href="marinaalta.html"><img alt="Senderos en la Marina Alta" src="bullet.gif" />Senderos en la Marina Alta</a><br /><a href="vegabaja.html"><img alt="Senderos en la Vega Baja" src="bullet.gif" />Senderos en la Vega Baja</a></p><p>Teléfono de contacto: <img alt="Teléfono de contacto del servicio técnico" src="telefono.gif" /></p>

Cuando la página anterior se visualiza en aDesigner se obtiene el siguiente resultado:

Con el programa Fangs obtenemos la siguiente representación textual de la página:

Fangs ofrece más información que aDesigner, ya que indica la aparición de algunos elementos de la página, como los enlaces (Link) o las imágenes (Graphic).

En esta página existen varios problemas:

• El texto alternativo que tienen las flechas describe las imágenes, pero no indica su función que es moverse hacia la anterior o la siguiente página.
• Las imágenes que se han empleado en las listas tienen como texto alternativo el mismo texto que las acompañan, por lo que aparece repetido dos veces.
• La imagen que contiene un número de teléfono tiene un texto alternativo que no es nada útil ("Teléfono de contacto del servicio técnico").

Para que está página sea accesible, podemos modificar el texto alternativo de la siguiente forma:

• El texto alternativo de las flechas pasa a ser "Anterior" y "Siguiente". También se podría poner una descripción más larga como "Pasar a la página anterior" si "Anterior" puede ser ambiguo dentro del contexto de la página.
• El texto de las imágenes de las listas lo dejamos vacío, ya que es simplemente decorativo y no aporta ningún contenido útil.
• En el texto alternativo de la imagen con un número de teléfono ponemos el número de teléfono.

Una vez corregido el texto alternativo de las imágenes de la página web de ejemplo se obtiene lo siguiente con aDesigner y Fangs:

Podemos ver que en Fangs aparece un problema nuevo que no aparecía en aDesigner: cuando una imagen no tiene texto alternativo o el texto alternativo es nulo (alt=""), Fangs muestra el valor del atributo src como representación alternativa. En la mayoría de los casos, este valor no es muy útil, ya que suele incluir nombres de directorios y el nombre del fichero que contiene la imagen puede no tener sentido. Para resolver este problema lo mejor es no incluir las imágenes decorativas directamente en el HTML, sino emplear CSS para su inclusión. Pero eso ya lo explicaré otro día.