Resumen Jornadas Accesibilidad de AGESTIC e INTECO

Ya se han clausurado las Xornadas de Accesibilidade na Web en Santiago de Compostela.

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 contador de visitas "free web counter"

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.
    evolución pestañas en la web de amazon
    nuevo diseño de la web de amazon

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:

chevron_left
chevron_right

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentario
Nombre
Correo electrónico
Web

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.