domingo, 9 de diciembre de 2012

Novedades de Adobe Acrobat XI Pro relacionadas con la accesibilidad de los PDF

Después de probar Adobe Acrobat XI Pro os cuento aquellas novedades de interés para los que nos dedicamos a convertir PDF en PDF accesibles.

Nueva herramienta "Establecer texto alternativo"

Dentro de las herramienta de accesibilidad nos encontramos con una opción nueva "Establecer texto alternativo" que nos va a simplicar mucho la vida:

Ventana emergente 'Establecer texto alternativo' de Adobe Acrobat XI Pro. Tiene un textarea para incluir texto alternativo y un check para indicar que es una imagen decorativa, para cada una de las imágenes del documento.

Hasta ahora podíamos incluir el texto alternativo de una imagen en sus "Propiedades". Para ello teníamos que seleccionar una a una cada imagen, bien en el panel Etiquetas, bien desde la vista "orden de lectura".

De la misma manera, podíamos convertir una imagen en "artifacto" (imagen decorativa que no será leída por los lectores de pantalla) seleccionando cada imagen en la vista "orden de lectura" y pulsando "fondo", o bien en el panel de Etiquetas seleccionado el contenido de su etiqueta "Figure" y la opción "Cambiar etiqueta a artifacto".

La nueva herramienta nos da una tercera manera mucho más eficaz: detecta todas las imágenes del documento y podemos ir indicando rápidamente para cada una de ellas su texto alternativo o si es decorativa.

Advertencia: no presupongas que todas las imágenes serán realmente imágenes ni que todas las imágenes aparecerán en esta ventana, primero tendrás que comprobar que el documento está correctamente etiquetado. A veces hay imágenes no etiquetadas como "Figure" y a veces hay contenido etiquetado como "Figure" que no es una imagen.

Nuevas opciones en la herramienta "Retocar orden de lectura"

Los que estéis familiarizados con la conversión de PDF en PDF accesibles notaréis en seguida las mejoras en la herramienta "Retocar orden de lectura" que es una de las que más utilizamos.

Ventana 'Retorcar orden de lectura' de Adobe Acrobat XI Pro con las nuevas opciones destacadas: botones para encabezados 4,5 y 6, mostrar orden o tipo de contenido, mostrar elementos en un único bloque

Las nuevas opciones son:

  • Posibilidad de marcar encabezados de nivel 4, 5 y 6. Antes solo podíamos marcar los de nivel 1, 2 y 3, el resto de niveles había que modificarlos en las propiedades de la etiqueta.
  • Mostrar orden o tipo de contenido. Hasta ahora, en la vista "orden de lectura" cada contenido aparecía resaltado con un número (su orden de lectura). En la nueva versión de Acrobat podemos indicar que nos muestre, no el número del orden de lectura, sino el tipo de contenido que es (el nombre de la etiqueta, tal y como se ve en la imagen de ejemplo) lo cual resulta muy útil. Pero yo me pregunto, ¿por qué han puesto las opciones como excluyentes? Me hubiera gustado poder ver simultáneamente las dos.
  • La opción "Mostrar elementos similares en un único orden" está marcada por defecto y se corresponde con el comportamiento de las versiones anteriores. En la nueva versión si, por ejemplo, un texto largo está compuesto por varios párrafos, podremos verlo como un único elemento como hasta ahora o desmarcar el check y ver las diferentes etiquetas de párrafo en las que se subdivide. Esto es de gran ayuda, pues por fin vamos a poder seleccionar texto dentro de un párrafo, pulsar el botón "texto" y que efectivamente este se divida en varios párrafos. Es muy necesario para poder marcar dentro de un párrafo texto en otro idioma, abreviaturas, etc. y que ahora era casi obligatorio hacerlo desde el panel Etiquetas, o usar algún truco un poco engorroso.

Mejoras en el asistente para hacer más accesibles los PDF

El asistente se llamaba "Crear archivos PDF accesibles" y ahora se llama "Hacer accesible":

Ventana del asistente 'Hacer accesible' de Adobe Acrobat XI Pro. Tiene tres pasos: preparar, establecer etiquetas e idioma, ejecutar comprobar de accesibilidad

El asistente hasta ahora no permitía realizar acciones necesarias como indicar el idioma del documento o incluir el texto alternativo de las imágenes (te decía que debías hacerlo manualmente)

Con la nueva versión ya puedes desde el asistente indicar el idioma o incluir el texto alternativo a las imágenes (mediante la herramienta vista anteriormente).

Es muy importante advertir que este asistente te ayuda a hacer los PDF más accesibles, pero que estas acciones no son las únicas necesarias: tendrás que revisar el etiquetado, el orden de lectura, los vínculos, las tablas, etc.

Validador de accesibilidad

Es el mayor cambio, una gran mejora y posiblemente una razón de peso para actualizarse a la nueva versión.

En Acrobat X Pro se podía elegir entre validar de acuerdo a las WCAG 1.0, las WCAG 2.0 (la validación era en base a la versión de 2006, no la definitiva de 2008), la Seccion 508 o la validación por defecto Adobe PDF.

Ahora hay una única validación dividida en cuatro apartados:

  • Documento:
    Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Documento
  • Contenido de la página:
    Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Contenido de la página
  • Formularios, tablas y listas:
    Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Formularios, tablas y listas
  • Texto alternativo y título:
    Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Texto alternativo y título

Ahora puedes evaluar (o no) por 32 criterios individuales basados en las WCAG 2.0 y el estándar PDF/UA. Sobre PDF/UA indicar que NO se puede guardar, exportar o validar el PDF según el nuevo estándar (más información en PDF/UA. Descripción de la norma. Comparativa y relación con las WCAG 2.0 ).

Por otro lado, la mejora del resultado de la validación de accesibilidad es enorme y una gran alegría.

Es muy importante recordar que el validador de accesibilidad no asegura la accesibilidad del PDF, porque hay muchos requisitos que no pueden evaluarse automáticamente y otros que necesitan siempre de una revisión manual.

Pero es una herramienta de gran utilidad y ahora mucho más.

El resultado de la validación deja de ser un horror para convertirse en un árbol:

Resultado del comprobador de accesibilidad de Adobe Acrobat XI Pro. Un árbol con 7 elementos: documento, contenido de página, formularios, texto alternativo, tablas, listas, encabezados

Cuando despliegas el árbol puedes ver todas las validaciones realizadas. Se indica si han sido correctas, ha habido problemas o se requiere una validación manual. Aquellas validaciones que han dado un problema tienen a su vez un árbol con todos los elementos erróneos. Una de las grandes novedades es su menú contextual:

Resultado del comprobador de accesibilidad de Adobe Acrobat XI Pro. Menú contextual de una imagen sin texto alternativo, tiene las opciones: solucionar, omitir regla, explicar, mostrar en panel Contenido o en panel Etiquetas, comprobar de nuevo, mostrar informe, opciones

Maravilloso, ¿verdad?

  • Solucionar: en el ejemplo del pantallazo, al estar seleccionada una imagen sin texto alternativo, nos abrirá la herramienta ya descrita para indicar el texto alternativo.
  • Omitir regla: no marca este error en el árbol del resultado de la validación.
  • Explicar: abre una página de ayuda que explica el error, cómo solucionarlo y los criterios de conformidad de las WCAG 2.0 a los que hace referencia. El algunos casos no hay un criterio de las WCAG 2.0 asociado, por ejemplo la asignación de caracteres Unicode, que sí trata el estándar PDF/UA, aunque curiosamente no hacen referencia al mismo.
  • Mostrar en panel Contenido: te abre el panel Contenido con el contenido del elemento que ha dado error seleccionado.
  • Mostrar en panel Etiquetas: te abre el panel Etiquetas con la etiqueta del elemento que ha dado error seleccionado, y esto es muy útil, la verdad.
  • Comprobar de nuevo: vuelve a hacer la comprobación.
  • Mostrar informe: un informe útil de verdad, no como el actual:
    Informe de accesibilidad de Adobe Acrobat XI Pro. Los datos se estructuran en tres columnas: nombre de la regla, estado y descripción.
  • Opciones: abre la ventana de configuración del validador de accesibilidad.

Cosas que no cambian

Dos cosas que me molestan mucho siguen igual:
  • Los elementos del desplegable para seleccionar el tipo de etiqueta siguen sin estar ordenados alfabéticamente. Una de esas cosas absurdas a las que te acabas acostumbrando:

    Desplegable para elegir tipo de etiqueta en Adobe Acrobat XI Pro desordenadas alfabéticamente.

    Lo que pasa en realidad es que siguen ordenadas por su nombre en inglés.

  • Sigue sin funcionar "control+z" para poder deshacer un cambio en el árbol de etiquetas, como borrar una sin querer (ahhh, se siente, estate más atento la próxima vez...)

Actualizarse o no actualizarse

Cuando salió la versión Adobe Acrobat X Pro no le veía muchas ventajas frente a la versión 9, no me parecía necesario actualizarse. Aunque la verdad es que el gran cambio en la interfaz que hubo en la versión X, con las herramientas a la derecha, hizo el trabajo más ágil. También es verdad que incluyeron la opción de guardar y validar como PDF/A-2.

Pero esta vez no tengo dudas, los cambios de la versión XI eran bastante necesarios y harán nuestro trabajo más fácil. Personalmente creo que merece la pena actualizarse a la nueva versión.

Artículos relacionados:

miércoles, 5 de diciembre de 2012

Claves para la web móvil

Hace un par de meses participé en el curso “Buenas prácticas en web móvil” del W3C. El curso me resultó muy interesante tanto por su carácter práctico como por la cantidad y calidad de las aportaciones en el foro, estuvo bien coincidir con tantas caras virtuales conocidas.

En este artículo sintetizo las claves que me parecieron más relevantes, muchas de las cuales se solapan con requisitos básicos de accesibilidad y usabilidad.

1. Estándares: código válido y semántico

Usa código (X)HTML correcto, válido y semántico, de acuerdo a la especificación definida en el DOCTYPE.

2. Separar el contenido y la presentación

Define todos los estilos en las CSS. NO a los estilos en línea, a las etiquetas tipo <font> o <center>, a los espacios o imágenes en blanco para separar o a la maquetación por tablas.

Define los tamaños con medidas relativas (%, em).

Ten cuidado con el posicionamiento de los elementos mediante float y display, revisa que el efecto sea el esperado con diferente dispositivos y resoluciones.

Ojo con el uso del color y las imágenes de fondo: el contraste de color debe ser suficiente y los enlaces estar subrayados. Ten en cuenta que los usuarios de dispositivos móviles a menudo navegan bajo condiciones de escasa visibilidad (luz brillante, mala iluminación).

3. Mejora progresiva (progressive enhancement)

La “mejora progresiva” es una estrategia de diseño y desarrollo que permite que la información, las funcionalidades o las características más avanzadas estén disponibles para los agentes de usuario que las soportan, pero sin que esto perjudique ni excluya al resto de usuarios, ofreciéndoles una alternativa viable. Se aplica a todo: a las CSS, al código javascript, al código (X)HTML, a las funcionalidades de la página, etc.

Por ejemplo, podemos usar HTML5 y gracias al siguiente script:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>

los usuarios de versiones anteriores de Explorer no tendrán problemas con la definición de los estilos en la CSS para las nuevas etiquetas semánticas de HTML5.

Por ejemplo, no dejaremos de usar javascript, o cookies, o funcionalidades de geoposicionamiento, o propiedades CSS3, pero no asumiremos que se soportan y no dependeremos de ellas. Así, por ejemplo, en el caso de javascript, implementamos la página como si no fuera a soportar javascript y después añadimos una capa de mejora con javascript no intrusivo.

En este sentido habrá que tener en cuenta que muchos móviles no tendrán soporte para Flash, PDF, ActiveX, Silverlight, ventanas emergentes, GIF animados, transparencias PNG, iframes, etc.

4. Viewport, CSS Media Queries y Responsive Design

Define el meta viewport de la siguiente manera:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Este meta indica que nuestra página será flexible para adaptarse a los diferentes anchos de pantalla y le indica al navegador que no aumente o reduzca la página, que use el zoom por defecto.

La misma web vista en tres móviles. En uno se ve con mucho zoom (ojo de cerradura), en otro muy alejada (miniaturización) y en el otro con un zoom constante.

Imagen tomada de la gran presentación de Hernan Beati: Web móvil: ¿inclusiva y accesible?

Esta definición del viewport debe estar respaldada por un diseño web adaptable (responsive design) a todos los dispositivos, sin necesidad de barras de desplazamiento, gracias al uso de CSS Media Queries:

<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 600px)" /> 
<link rel="stylesheet" type="text/css" href="style3col.css" media="all and (min-width: 800px)" /> 
<!--[if lt IE 9 & !IEMobile]> 
       <link rel="stylesheet" type="text/css" href="style3col.css" /> 
<![endif]—>

El uso de CSS Media Queries permitirá adaptar la visualización del contenido a los diferentes tamaños de pantalla: posicionar de diferente manera el contenido, reducir el tamaño de las imágenes de fondo en las pantallas más pequeñas, etc.

Ejemplo de una web diseñada cuyo contenido se adapta al ancho de la ventana

Imagen tomada de Responsive Web Design: 50 Examples and Best Practices donde se pueden consultar muchos más ejemplos.

Los usuarios de dispositivos móviles deben visualizar la información, percibir que la página ha cambiado, sin necesidad de hacer scroll, para ello es necesario una cabecera más reducida o un sistema de navegación adaptado.

5. Adaptar contenido en el servidor

No ocultes contenido para la versión móvil con display:none, pues el contenido será descargado igualmente, consumiendo tiempo. Lo correcto es usar responsive design para adaptar la visualización, pero la adaptación del contenido (que no tiene porque ser siempre necesario, dependerá del sitio) debe hacerse en el servidor.

Detectar el dispositivo desde el servidor permite saber si la página será presentada en una dispositivo móvil o no, y en función de ello adaptar el contenido que se muestra desde el servidor: diferentes tamaños de imagen, menos contenido (o diferente), una cabecera o un sistema de navegación distinto, etc.

Da libertad al usuario. No decidas por él. Permite al usuario cambiar de la versión móvil a la versión escritorio y viceversa; y recuerda usar link=”canonical” para indicar a los buscadores cuál es el recurso original cuando tengas varias URIs para un mismo recurso.

Yo utilicé para detectar el dispositivo y permitir cambiar de una versión a otra el código PHP de Alex Pot.

En "Ejemplos de sitios web versión escritorio y móvil" hay una recopilación de ejemplos.

6. Diferentes modos de interacción

El foco debe ser siempre visible (no lo ocultes con outline:0px).

En los dispositivos táctiles es especialmente importante el tamaño y la distancia entre los elementos clicables.

Usa manejadores de evento independientes del dispositivo.

7. Reducir el tamaño de la página y las llamadas al servidor

El objetivo es minimizar la carga de la red, los Kb que nos descargamos (y por los que muchos usuarios pagan) el tiempo de procesamiento, y así aumentar la velocidad de descarga y de paso no calentar el móvil ni fundirnos la batería.

Se deben incluir los estilos en las CSS, optimizarlas y comprimirlas, llamar al menor número necesario de CSS (unificándolas cuando sea posible) y poner especial cuidado a las reglas que utilizamos (los navegadores modernos no descargan los recursos vinculados en las hojas de estilo a menos que sean llamados en la página: ver test de TimKadlec.com).

Se debe incluir todo el javascript en ficheros JS externos y reutilizables, optimizados y comprimidos, y llamar al mínimo de ficheros necesarios (unificándolos cuando sea posible). La página se procesará más rápido si puedes incluir los scripts al final de la página o usas el atributo defer

Configura correctamente la caché.

Optimiza el tamaño y peso de las imágenes, usa el atributo ALT por si no se cargan y define sus atributos width y height. Si no indicas el alto y el ancho de la imagen, el navegador vuelve a analizar la página durante el análisis sintáctico para adaptarse a los nuevos objetos, el reescalado requiere potencia de procesamiento, consume la vida de la batería, genera calor innecesariamente, y retrasa la entrega de la página al usuario.

Cuando sea posible unifica imágenes para hacer menos peticiones al servidor, por ejemplo puedes utilizar CSS Sprites para unificar en una única imagen varias imágenes decorativas del sitio.

8. Validadores, emuladores y otras herramientas

Podéis consultar una recopilación en Mis validadores. Dispositivos móviles

9. UX Mobile is different...

Y por eso debería trabajarse en paralelo y tener su propio prototipo.

Enlaces de interés:

Artículos relacionados: