El último día, que también fue impartido por Raúl Mosquera de INTECO continuó el repaso de la Norma UNE 139803:2004 y las WCAG 1.0.

Contenidos

Partimos del punto en el que se recomienda agrupar contenidos y dividir los bloques largos de información. Por ejemplo, se deben utilizar la etiqueta Fieldset para agrupar los controles de los formularios:

<FORM action="http://example.com/adduser" method="post">
   <FIELDSET>
   <LEGEND>Personal information</LEGEND>
   <LABEL for="firstname">First name: </LABEL>
   <INPUT type="text" id="firstname" tabindex="1">
   <LABEL for="lastname">Last name: </LABEL>
   <INPUT type="text" id="lastname" tabindex="2">
   ...more personal information...
   </FIELDSET>
   <FIELDSET>
   <LEGEND>Medical History</LEGEND>
   ...medical history information...
   </FIELDSET>
</FORM>

También se comentó la importancia de estructurar los textos. Cada párrafo debe centrarse y explicar una única idea, y para marcarlo debemos utilizar la etiqueta <p>.

Respecto a esto, se nombró también el abuso que la gente hace de la etiqueta de salto de línea <br />. Ésta sólo debe utilizarse para separar una línea de texto de otra dentro de un párrafo, pero siempre y cuando esté relacionada con la idea que da sentido al párrafo.

Debemos recordar que existen las listas de definición:

<div class="exampleDL">
  <dl>
    <dt>Accesibilidad</dt>
    <dd>Término usado para describir la facilidad con que una página web puede ser accesada por cualquier persona.</dd>
    <dt>Byte</dt>
    <dd>Es una unidad de medida. Un byte equivale a un caracter simple. Un byte de información equivale a 8 bits.</dd>
    <dt>Cookie</dt>
    <dd>Fichero que se envía a un navegador por medio de un servidor web, para registrar las actividades que realizan usuarios en un sitio.</dd>
    <dt>DHTML</dt>
    <dd>(Dinamic HTML) Es la combinación de HTML con lenguajes para crear páginas web animadas.</dd>
  </dl>
</div>

Tras esto hicieron repaso a otras pautas orientadas a hacer el contenido más accesible. Entre las más importantes, debemos recordar:

• Usaremos lenguaje claro y sencillo, con las ideas principales al principio de los párrafos.
• Debemos asignar el lenguaje al documento y marcar los cambios de idioma.
• Etiquetar todos los controles de los formularios y poner texto por defecto.
• Se deben actualizar los elementos no dinámicos al mismo tiempo que los programados.
• El contenido se adaptará a las características del usuario. Por ejemplo, cargaremos la web en el idioma que tenga configurado el navegador, permitiendo cambiarlo y recordando sus opciones.

Contenidos Dinámicos

Respecto a los contenidos dinámicos, me ha gustado el ejemplo de un contador de visitas:

Ejemplo Código erróneo: <p>Número de visitas: <img src=”<?include(‘contador.php?id=src’)”?> alt=”contador”><p>

Ejemplo Codigo correcto: <p>Número de visitas: <img src=”<?include(‘contador.php?id=src’)”?> alt=”<?include(‘contador.php?id=numero_visitas’)”><p>

Otra de las cosas a tener el cuenta es el crear alternativas a  los objetos flash. Una técnica que lleva un poco más de trabajo, pero que sin duda da muchos mejores resultados es la “degradación de objetos”, que no es más que anidar objects mostrando cada vez una alternativa menos exigente. Un ejemplo conceptual (no real):

<object data=”http://www.youtube.com/v/SkGNPkpofPc&hl=en&fs=1″ type=”audio/mpeg“>

<object data=”imagen_alternativa_al_video.gif” type=”image/gif”>

Texto alternativo que mostrará a los usuarios que no puedan ver el vídeo y tampoco puedan ver las imágenes.

</object>

</object>

Respecto al uso de AJAX y JAVASCRIPT, también  se remarcó que se debe usar como herramienta de apoyo, de manera que aumente la usabilidad de los usuarios que puedan utilizar dichos sistemas. NUNCA deben ser una barrera, sino una alternativa.

Los formularios y la validación de sus campos son muy sensibles ya que la seguridad suele ponerse como excusa para conservar barreras (además de que muchas validaciones y soluciones de seguridad se han ido arrastrando a lo largo del tiempo).

La centralización de la seguridad en el servidor (mediante webservices, por ejemplo) permitiría fácilmente replicarla luego en el cliente mediante llamadas asíncronas (para aquellos usuarios que soporten AJAX), evitando así realizar demasiadas llamadas al servidor.

Un ejemplo interesante de implementación de formulario seguro es el formulario de alta de la web Remember the Milk, un gestor de tareas online con un aire muy web 2.0.

• Con javascript, cada vez que saltamos de un campo a otro, aparece un mensaje al lado confirmando si la información introducida es válida o no.
• Sin javascript, se envían todos los datos al servidor, donde se realizan las validaciones pertinentes y en caso de que algún campo no valide, se recarga el formulario indicando al lado de cada campo si la información introducida es correcta o no.

Otro ejemplo interesante es el de Volver a la página anterior. Esta funcionalidad sólo está disponible con javascript

Ejemplo código incorrecto:<a href=’javascript:history.back’()’>Volver</a>

Ejemplo código correcto:<script>document.write(“<a href=’javascript:history.back”>Volver</a>”);</script>

Navegación

Aparte de las recomendaciones más habituales:

• navegación consistente a lo largo del sitio
• uso de listas para los menús
• evitar redirecciones
• orden lógico de tabulación
• crear atajos de teclado

Es interesante remarcar un par de aspectos:

• Debemos avisar cuando se abra una ventana nueva (y evitar el uso de popups). Para avisar de que se abre una nueva ventana INTECO recomienda no usar el atributo title del enlace, sino una de estas opciones:
  • <a href=”http://www.inteco.es”> target=”_blank”>Enlace a INTECO (se abre en ventana nueva)</a>
  • <a href=”http://www.inteco.es”> target=”_blank”>Enlace a INTECO<img src=”ventana.gif” alt=”se abre en nueva ventana”</a>
• Debemos proporcionar barras de navegación.  El ejemplo desde hace tiempo de usabilidad en la navegación era Amazon y su menú de pestañas, pero desde hace meses lo han cambiado.
  
  

Vídeos y multimedia:

Respecto a los vídeos, actualmente el coste económico de subtitular, crear transcripciones y audiodescripciones sincronizadas es inalcanzable para la mayoría de empresas.

Ese trabajo debería partir de los editores de dichos contenidos, que deben ser (al igual que nos ocurre con nuestros sitios web) a generar los elementos accesibles de manera que sea posible su uso en todas las plataformas (web, televisiones, radios, ediciones en papel, etc…), repartiendo así el coste del servicio entre los diferentes canales de emisión.

Nosotros, como clientes, debemos exigir ese cumplimiento y asegurarnos que trabajamos para minimizar las molestias que podamos producir a nuestros usuarios, proporcionando como mínimo una alternativa textual válida y razonable.

Eso sí, esto es una opinión personal.

Conclusión:

El curso completo ha sido interesante y (aparte del compromiso y la responsabilidad social) creo que estratégica y legalmente es un punto a tener muy en cuenta y estas formaciones muchas veces no están al alcance de las PYMES.

Tal vez y de cara a implicar más a la gente es interesante crear la sinergia de la accesibilidad, la usabilidad y el posicionamiento en buscadores, posicionando nuestras empresas en la red y generando negocio.

Más información:

• AGESTIC
• INTECO
• Accesibilidad en AENOR
• Renfe Responsabilidad Social
• Guía Breve de Subtitulado y Sincronización de Vídeos con SMIL
• Longtailvideo: making video accesible
• Martín Pulido: Listas de definición, ¿Qué son y para qué las utilizamos?
• Listado de códigos de idiomas: IANA subtags registry
• Jackob Nielsen: use it
• The History of Amazon’s Tab Navigation

Raúl Mosquera, de INTECO fue la persona encargada de la jornada, que estaba orientada hacia desarrolladores y programadores y por lo tanto fue eminentemente práctica y técnica.

Tras una breve introducción de los principales ventajas de la accesibilidad, sus falsos mitos, los principales dispositivos de navegación y los niveles de accesibilidad.

Despúes inició el repaso de las pautas, para lo que se apoyó en varios ejemplos (y una página html llena de links que espero conseguir pronto

Me pareció curioso el gif animado donde se muestra la evolución de un diseño a medida que vamos añadiendo clases.

En la imagen podemos ver los pasos correctos que debemos llevar a cabo a la hora de crear una web desde cero:

1. Definir qué información vamos a mostrar.
2. Definir las regiones de la web.
3. Asignar estilos a dichas regiones
4. Probar con varios navegadores, ya que no todos cumplen correctamente los estándares. Para hacernos una idea podemos ver web browsers standards support.

De cara a hacer las pruebas con los distintos navegadores, podemos usar BrowserShots, un servicio que realiza capturas de pantalla con diferentes navegadores, además de pruebas con los principales navegadores del mercado (entre los que no pueden faltar internet explorer 6, internet explorer 7, Firefox, Lynx y Ópera).

También comentó varias herramientas interesantes, como por ejemplo:

• listamatic, una web con distintas plantillas de listas de elementos (ul, li, ol …) útilies para la creación de menús, etc…
• YellowPipe: una extensión para firefox que permite navegar emulando al navegador Lynx.
• Headings Map, otra extensión para firefox que nos muestra el mapa de encabezados del documento.
• Web developer toolbar: imprescindible.

Tras analizar los parpadeos de imágenes, marcos (o frames), las tablas y su complejidad, pasaron al tema de los encabezados, que muchas veces parece más subjetivo ( por ejemplo nombraron el problema de si se deben usar uno o varios encabezados )

La verdad es que como repaso a las técnicas de accesibilidad estuvo bien, y se notaba que Raúl Mosquera tiene un nivel técnico muy alto, ya que aparte de que la documentación y la página de ejemplos estaban muy bien preparadas, respondió con soltura a las preguntas de los asistentes.

La unica pega puede ser que es demasiada información para poco tiempo, lo que hizo que más que profundizar, se presentasen las distintas pautas. Creo que eso se explica con que el seminario está preparado para realizarse en 16 horas (si no recuerdo mal) y no en 6 horas…

La Accesibilidad Web: Ventajas y falsos mitos

Para abrir boca Luís Hidalgo de INTECO presentó “La Accesibilidad Web: Ventajas y falsos mitos”. En ella repasó los principales motivos por los que debemos crear y mantener sitios webs accesibles.

Además de todo ello, aprovechó también para presentar las áreas de trabajo de INTECO:

• Seguridad: alertas de virus e incidencias de seguridad y  el Centro Demostrador Seguridad PYME (catálogo de software y empresas orientadas a la seguridad)
• Calidad del Software: Mediante la formación, el Laboratorio Nacional de Calidad, la promoción de los estándares y los distintos  informes.
• Accesibilidad: mediante el Centro de Referencia de Estándares Web, Potenciación de la accesibilidad en la TDT y el CENTAC (orientado a la accesibilidad en los productos “no virtuales”).

Se hizo especial hincapié en que el número de discapacitados en españa, que según datos del INE de 1999 rondaría los 16 millones. Para ello debemos sumar el número de personas mayores, los discapacitados temporales o transitorios (por ejemplo aquellos que se recuperan de una lesión) y a los discapacitados permanentes.

Si bien fue una presentación introductoria, sí creo que aportó una visión global interesante para aquellos menos familiarizados con la accesibilidad web.

Accesibilidad web: Legislación y normativa

A José Ángel Valderrama, Gerente de Nuevas Tecnologías de AENOR le tocó el hueso de la jornada, ya que aún siendo interesante, el tema de la legislación siempre es complicado de explicar y mantener la atención.

Realizó un repaso de las Leyes, Normas y Reales Decretos con repercusión en los desarrollos web y la accesibilidad.

Para que nos hagamos una idea, las sanciones consideradas como graves, estarían penadas con multas de entre 30.000 y 90.000 Euros.

También recordó que ante la dificultad real de hacer una web 100% accesible, hay dos pequeños resquicios a los que las entidades pueden apelar a la hora de no cumplir los criterios de accesibilidad:

1. En el caso de que exista una solución tecnológica que pueda ser accesible. Es el caso por ejemplo de los mapas o relieves. Podemos imaginar la complicación de explicar el relieve de una región mediante palabras…
2. En el caso de que no hay a una alternativa económicamente viable. Imaginemos que una solución al caso anterior fuese poner un servicio de telefonía en el que una persona contestase a nuestras preguntas y nos fuese explicando que vemos en cada momento. Bonito, pero económicamente inviable…

José Ángel presentó también brevemente las WCAG 2.0 y comentó suu organización en cuatro principios:

1. Perceptible: los usuarios pueden percibir y acceder a todo el contenido.
2. Operable: además puede operar con la información.
3. Comprensible: se utiliza lenguaje comprensible, uso de colores, etc…
4. Robusto: se utiliza una solución estándar y que funciona en el mayor número de dispositivos posibles.

Más tarde también aprovechó para presentar el trabajo que está realizando AENOR entorno a la accesibilidad.

AENOR dispone de una certificación propia para sitios que cumplan el Nivel AA o AAA de accesibilidad.

Para ello se han asociado con dos empresas consultoras para que realicen las auditorías técnicas:

• Fundación CTIC
• ESI Tecnalia

De esta manera, en el caso de que hayamos elegido a la Fundación CTIC, sería ESI quien analizaría la concesión del sello AENOR.

Durante la exposición se resaltó el problema de no crear una infraestructura y un compromiso en la organización que permita mantener la accesibilidad de los portales web a lo largo del tiempo.

Un ejemplo es el uso de PDF’s en los sitios web, la mayor parte de las veces los PDF no los generan los departamentos encargados de la edición de contenidos, sino departamentos internos que no suelen estar sensibilizados ni formados en accesibilidad. Debemos tener en cuenta que una web no será accesible si cualquiera de sus contenidos o secciones no lo son (incluyendo vídeos, PDF’s, ficheros de Word). Aprovecho para recomendar el post PDF’s accesibles de Olga Carreras.

Buenas prácticas en Accesibilidad Web

Llegó el turno de María Eugenia Fernández, Jefe de Sistemas de Colaboración y Comunicación de RENFE.

Mª Eugenia fue el “caso práctico”. Enumeró las oportunidades, problemas y ventajas de crear un nuevo portal con la accesibilidad como prioridad. Para ello habló de la experiencia del portal accesible de RENFE que esperan presentar en unos meses.

Comentó que la estrategia de accesibilidad fue consensuada con todos los departamentos y áreas de la organización y que algunos mostraron más resistencia que otros, pero que al final algunos de los más reticentes, “entraron en razón”.

Al partir de un desarrollo desde cero, optaron por usar un CMS y el elegido fue Team Site de Interwoven. Dicho CMS les ha permitido implantar un workflow en el que un contenido debe ser aprobado por el equipo de accesibilidad antes de publicarse en la web.

Aprovechando el nuevo portal, también han optado por publicarlo en varios idiomas, sin duda algo que facilita la accesibilidad a determinados colectivos.

Ronda de preguntas.

En la ronda de preguntas, podríamos resaltar dos temáticas:

• Por un lado, el hecho de contradicciones entre consultoras a la hora de realizar una auditoría de accesibilidad. Muchas veces criterios un tanto subjetivos, son motivo suficiente para tirar una auditoría de accesibilidad. Para ello existe el proyecto Unified Web Evaluation Methodology version 1.0 que trata de unificar la metodología a seguir a la hora de realizar una auditoría de accesibilidad.
• La importancia de trasladar las obligaciones de cumplimiento de accesibilidad a los navegadores y gestores de contenidos. Podemos recordar que para ello las WCAG 2.0 han introducido las ATAG WCAG 2.0.
  

Opinión

Creo que ha sido una jornada positiva, el auditorio estaba poblado, la sala bien acondicionada, los ponentes fueron interesantes y la gente se animó a la hora de participar y realizar preguntas.

Los ponentes comentaron que publicarían sus presentaciones para que pudiésemos descargarlas, por lo que tan pronto lo hagan, actualizaré el post.

Quiero recordar que aún quedan plazas libres para los Seminarios de Accesibilidad Web que se llevarán a cabo en Santiago de Compostela los próximos 28 y 29 de Enero

El evento tendrá lugar en el salón de actos del Centro de Novas Tecnoloxías de Galicia, localizado en la calle Airas Nunes s/n del barrio de Conxo en Santiago de Compostela.

Ver mapa más grande

• Agestic: Xornadas de Accesibilidade na Web en Santiago de Compostela
• Inteco: Seminario de Accesibilidad Web.
• CNTG: Xornada e seminario de accesibilidade web.