La accesibilidad de los productos digitales en unidades de información

Introducción a la accesibilidad de los recursos digitales en unidades de información

18/03/2015

Rubén Alcaraz Martí[email protected]: @ralcarazm

2

Sumario• 1. Introducción y fundamentos.

• 1.1. Definiciones.

• 1.2. Perfiles de discapacidad.

• 1.3. Legislación.

• 1.4. Las WCAG 2.0.

• 2. Buenas prácticas para sitios web, blogs y recursos electrónicos.

• 3. Buenas prácticas para documentos ofimáticos.

• 4. Evaluación de la accesibilidad.

• 5. Bibliografía y recursos.

3

1. Introduccióny fundamentos

Definiciones• Discapacidad: Es una situación que resulta de la

interacción entre las personas con deficiencias previsiblemente permanentes y cualquier tipo de barreras que limiten o impidan su participación plena y efectiva en la sociedad, en igualdad de condiciones con las demás.1

• Accesibilidad digital: La capacidad de acceso al contenido por cualquier persona, con independencia de sus características o de las derivadas del contexto de uso.

1. Real Decreto Legislativo 1/2013

4

Perfiles de discapacidad• Discapacidades visuales (ceguera, baja visión,

daltonismo)

• Discapacidades de audición (prelocutivos y postlocutivos)

• Discapacidades motrices.

• Discapacidades cognitivas (Dislexia, trastorno por déficit de atención (TDAH), discapacidades cognitivas ligeras…)

• Personas mayores.

• Discapacidades tecnológicas o derivadas del entorno.

5

Legislación• Real Decreto Legislativo 1/2013, de 29 de noviembre, por el

que se aprueba el Texto Refundido de la Ley General de derechos de las personas con discapacidad y de su inclusión social

En España el nivel de adecuación obligatorio de los portales de Internet, no ya sólo de la Administración Pública sino de las empresas que reciben financiación pública y de las empresas privadas con más de 100 trabajadores o que facturen más de 6 millones de euros (especialmente entidades bancarias, agencias de viaje, aseguradoras, empresas de transporte, suministradoras de electricidad, gas y agua, etc.) es el nivel de conformidad AA de la Norma UNE 139803, a partir del 31 de diciembre de 2008. La Norma fue actualizada en 2012 y actualmente es equivalente a las WCAG 2.0.

6

Las WCAG 2.0• Web Content Accessibility Guidelines. Marcan las condiciones que

ha de cumplir un contenido web para poder ser considerado accesible y proporciona mecanismos y estrategias para conseguirlo.

Se basan en 4 principios fundamentales:

• Perceptible: La información y los componentes de la interfaz deben presentarse de manera que los usuarios los puedan percibir.

• Operable: Debe ser posible ejecutar los componentes de la interfaz de usuario y de navegación.

• Comprensible: La información y el funcionamiento de la interfaz de usuario ha de ser clara.

• Robusto: El contenido debe ser suficientemente robusto como para que una gran cantidad de agentes de usuario, incluidas las ayudas técnicas, lo puedan interpretar fielmente.

7

Directrices, criterios y técnicas

• 12 directrices Objetivos básicos que han de seguir los autores para que el contenido sea más accesible (no verificables)

• Criterios de conformidad verificables que permiten utilizar las WCAG donde sean necesarios unos requerimientos y unas pruebas de conformidad. Tres niveles de conformidad para satisfacer las necesidades de los diferentes grupos y situaciones.

• Técnicas Diferentes técnicas para cada criterio de conformidad. Son informativas y se dividen en suficientes y recomendadas.

8

Críticas• Naturaleza teórica de las directrices y su estrecha

vinculación con los estándares del W3C.

• Demasiado técnica y difícil de interpretar.

• Defectos lógicos que hacen que algunos puntos estén abiertos a diferentes interpretaciones.

• Muy orientada a las discapacidades visuales. En cambio, todos aquellos problemas que no se pueden resolver directamente a través de programación quedan fuera de las directrices.

Accesibilidad web ≠ cumplimiento de una normativa

9

2. Buenas prácticas para sitios web, blogs y

recursos electrónicos

10

Alternativas de texto

• Olga. Carreras. Mapa de decisión para proporcionartextos alternativos adecuados a las imágenes de tu web

<img src=“george-washinton.jpg” alt=“George Washington”>

<img src=“lorenzo.jpg” alt=“Lorenzo Silva sujetando el Premio Planeta”>

11

<img src=“guardar.jpg” alt=“Guardar”>

<img src=“logo-facua.jpg” alt=“Página web de Facua”>

<img src=“faq.png” alt=“”>FAQ

Aún mejor:background-image: url(“faq.png”);

Alternativas de texto<img src=“mapa.png” alt=“Número de habitantes totales y por metro cuadrado por comunidad autónoma española” longdesc=“resumen-mapa.html”/>

Descripción larga:

Número de habitantes totales y por metro cuadrado por comunidad autónoma española.

Cataluña:• Población: 7,57 millones• Habitantes por metro

cuadrado: 251

Madrid[…]

12

Subtitulado, audiodescripción y transcripciones

UNE 153010:2012 Subtitulado para personas sordas y personas con discapacidad auditiva

• Aspectos visuales

• Aspectos temporales

• Identificación de los personajes

• Efectos sonoros

• Información contextual y voz en off

• Música y canciones

Transcripciones para podcasts y otros tipos de documentos de audio.

13

Estructura y relaciones• Toda la información, estructura y relaciones que se

transmiten a través de la presentación visual deben estar identificadas por programación.

• Orden lógico de lectura.

• Utilizar encabezamientos (h1-h6), <ul> y <li>, <figure> y <figcaption>, etc.

• Etiquetas semánticas de HTML5 (nav, section, article, aside, footer, em, blockquote…)

• Aria-landmarks (role=“navigation”, role=“complementary”…)

14

Estructura y relaciones

15

Estructura y relaciones

16

Enlaces• Fácilmente identificables.

• Foco visible.

• Textos ancla suficientemente descriptivos.

• Pulse aquíMal

• Más información Mal

• Manual de usuario Mal

• Manual de usuario Bien

• Manual de usuario (PDF, 20 MB) Bien

17

Uso del color• El color y otras características sensoriales no deben utilizarse nunca

como único medio para transmitir información, indicar una acción, solicitar una respuesta o para diferenciar elementos visuales.

• Ejemplos de malas prácticas:

• Pulsa el botón verde para …

• Visita el enlace situado en la parte superior derecha...

• Entre el texto y el color de fondo necesitamos una ratio de contraste como mínimo de 4,5:1

18

Tamaño del texto• Se debe poder ajustar sin necesidad de ayudas técnicas

hasta un 200%

• Evitar unidades absolutas

• px (píxel)

• pt (punto)

• Usar unidades relativas

• em

• % (porcentaje)

19

Accesible por teclado• Todas las funcionalidades del contenido se deben poder ejecutar

mediante una interfaz de teclado. Todos los elementos presentes en el contenido, deben poder recibir el foco del teclado.

20

Tiempo suficiente• Debemos ofrecer a los usuarios tiempo suficiente para leer

y usar el contenido

• Tiempo ajustable en tareas que así lo requieran

• Posibilidad de pausar, parar o amagar contenidos que se mueven, parpadean o se desplazan automáticamente.

21

Navegación• Proporcionar todas las ayudas posibles para que el

usuario pueda navegar por el sitio, encontrar el contenido y determinar dónde se encuentra.

• Saltar bloques de contenido.

• Marcar los títulos de las páginas.

• Orden del foco que preserve el significado y funcionamiento.

• Finalidad de los enlaces.

• Encabezamientos y etiquetas descriptivas.

• Foco visible.

22

Legibilidad• Todo el contenido textual debe ser legible y comprensible.

• Marcar el idioma principal y el idioma de las partes.

• Alternativas a los textos que requieran una capacidad lectora superior al nivel de secundaria obligatoria.

• Desarrollar acrónimos, abreviaturas, etc.

<html lang="es">

23

<p> Sostenía que la República Democrática Alemana era sólo un <span lang=“de”> 'Treppenwitz der Weltgeschichte </span></p>

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Errores• Informar de los errores y ayudar a evitarlos y

corregirlos.

24

Corrección sintáctica• Debemos utilizar código HTML y CSS correctos.

Validador de marcado del W3C

25

3. Buenas prácticas para documentos

ofimáticos

26

Documentos ofimáticosTres manuales imprescindibles:

• Guía de contenido digital accesible (2010)

Grup de Recerca en Interacció Persona Ordinador i Integració de Dades

• Guía de accesibilidad de documentos electrónicos (2012)

UNED

• Accessible Digital Office Document (ADOD) Project (2014)

Inclusive Design Research Centre, OCAD University

27

Títulos y secciones• Debemos marcar los títulos y apartados del documento

mediante las herramientas específicas disponibles en cualquiera de los editores disponibles en el mercado.

Incorrecto Correcto

Incorrecto

Correcto

IncorrectoCorrecto

28

Estructura

• Evitar saltar niveles de encabezamientos por estética.

• No usar cuadros de texto o tablas para maquetar, usar columnas.

• Dividir tablas complejas en varias tablas. Repetir los encabezados única manera de marcar el encabezado.

• Metadatos.

Incorrecto Correcto

29

Metadatos

30

IdiomaDebe marcarse el idioma del documento y el idioma de las partes cuando aparecen secciones, frases o palabras en otros idiomas.

Incorrecto

Correcto

31

Legibilidad• Word: recomendable fuentes de entre 12 y 14 puntos.

• Power Point: 28-30 puntos.

• Nunca bajar de los 10 puntos.

• No justificar los párrafos.

• No abusar de las mayúsculas.

• No dividir las palabras con guiones.

• Dejar un interlineado suficiente.

• No utilizar el retorno de carro. Debemos utilizar los espaciados anteriores y posteriores y el salto de página.

32

Redacción• Frases cortas y sencillas (evitar subordinadas, etc.)

• Párrafos cortos = 1 idea, 1 párrafo.

• Evitar la voz pasiva.

• Preferencia de las oraciones afirmativas frente a las negativas.

• Uso intensivo de listas.

• Evitar el uso de palabras especializadas, abreviaturas o acrónimos. Si no queda más remedio debes explicarlos o incluir su forma completa.

• Textos ancla claro.

33

Contenido no textual• Textos alternativos para las imágenes.

• Descripciones en los gráficos.

• Si no podemos, información contextual o un enlace a un anexo con la descripción.

34

Clic derecho > Tamaño y posición > Texto alternativo

Uso del color

35

Tablas• Marcar los encabezados.

• Evitar la creación de tablas demasiado complejas.

• No utilizarlas para maquetar el contenido.

36

Maquetación• Evitar el uso de tablas o cuadros de texto para disponer

los elementos de contenido.

IncorrectoCorrecto

37

Orden de lectura• Documentos pensados para impresión vs documentos

pensados para su lectura en un ordenador.

38

Uso de visores

39

Documentos PDFLos PDF no se deben utilizar como excusa para no generar contenidos mediante HTML + CSS o en otros formatos como los de Microsoft Word o Libre Office. En general, no se debe abusar de los documentos PDF para proporcionar información, utilizándolos únicamente en determinados casos, por ejemplo:

• Folletos u otros documentos breves, destinados principalmente a ser impresos y que deben mantener un formato predeterminado.

• Información de naturaleza extensa (libros, manuales, informes, etc.), ya que es conveniente proporcionar una versión descargable e imprimible que facilite la lectura fuera de pantalla.

40

Documentos PDFAspectos a tener en cuenta:

• Los PDF que tienen su origen en un documento de texto accesible pueden presentan, a priori, un nivel de accesibilidad aceptable.

• Los PDF que tienen su origen en un escaneo, necesitan de un proceso de OCR para convertir la imagen capturada en texto.

• Los documentos deben ser PDF etiquetados. Se trata de una versión de PDF que incluye tanto el contenido como información sobre su estructura lógica y orden de lectura. Se basa en el uso de elementos estructurales como encabezados, viñetas, pies de página…

• Alerta con las opciones se seguridad.

• Ayudas a la navegación (marcadores y tablas de contenido)

41

Convertir a PDF• Adobe Acrobat Professional en su versiones 6.0 y posteriores

incluye las herramientas necesarias para exportar un archivo a formato PDF etiquetado y para comprobar dichos marcadores y modificarlos. Además incluye una serie de opciones que permite comprobar la accesibilidad de los documentos y detectar las vulnerabilidades de éstos.

• Al instalar Adobe Acrobat también se instala Adobe PDF Maker en las aplicaciones de Windows Office. PDF Maker permite convertir los documentos de estas aplicaciones en documentos PDF etiquetados.

• Open Office y Libre Office tienen una funcionalidad integrada que permite exportar directamente a formato PDF etiquetado y “accesible” siempre y cuando se incluyan las opciones de accesibilidad en el documento original.

42

Convertir a PDF

43

Convertir a PDF

44

Convertir a PDF

45

Libros electrónicos• Daisy: formato de libro multimedia que permite integrar texto,

sonido, imágenes y vídeo de forma sincronizada y con una navegación avanzada por el texto y el audio que lo hace altamente usable para lecturas en digital. AMIS es un software libre que permite la lectura de este formato

• Epub: formato de libro abierto, multimedia (desde la versión 3) y basado en estándares.

46

Bases de datos

47

Bases de datos

48

Bases de datos

49

4. Evaluación de la accesibilidad

50

Herramientas de evaluación automática de la accesibilidad

• HERA 2.1(Atención: analiza según las directrices de la versión 1 de las WCAG).

• TAWPermite analizar la página según las directrices de la versión 1 y 2 delas WCAG, ésta última en fase beta. También nos permite seleccionar el nivel de análisis (A, AA y AAA) y las tecnologías soportadas.

• WAVECompatible con las WCAG 2 y los niveles A y AA. También con laSection 508 norteamericana.

51

TAW

52

Herramientas de evaluación automática de la accesibilidad

• ExaminatorCompatible con las WCAG 2 y los niveles A, AA y AAA.

• EvalAccess 2.0A diferencia del resto de evaluadores en los que debemos ir analizando página a página, EvalAccess nos permite evaluar hasta un máximo de 15 páginas de un sitio de manera simultánea, aunque no es posible seleccionar cuáles de ellas, sino que coge las 15 primeras que encuentra (Atención: analiza según las directrices de la versión 1 de las WCAG).

53

Herramientas de evaluación automática de la accesibilidad

• TanaguruSe trata de una aplicación de software libre mediante la que es posible evaluar de forma automática webs completas. El proceso de revisión se hace de acuerdo a las WCAG 2.0, la Section 508 norteamericana y la AccessiWeb 2.1.

54

Otras herramientas de evaluación

• Contraste• WebAIM: Color Contrast Checker.• Colour Contrast Analyser

• Legibilidad• Readability Test

• PDF• Free PDF Accessibility Checker

55

Otras herramientas de evaluación

56

5. Bibliografía

57

Bibliografía• Both, Char (ed.). “Making libraries accessible: adaptive design and assistive

technology”. Library technology reports. Vol. 48, no. 7 (Oct. 2012).

• Carreras, Olga. Usable y accesible. <http://www.usableyaccesible.com>.

• “Constructing a pour website: putting people at the center of the process”. 2013. En: WebAIM: web accessibility in mind. <http://webaim.org/articles/pour>. [Consulta: 12/01/2015].

• Directrius per a l'accessibilitat del contingut web (WCAG). Versió 2.0. W3C, 2008. <http://www.w3.org/Translations/WCAG20-ca>. [Consulta: 12/01/2015].

• Ribera, Mireia [et al.] (2010). Guia de contingut digital accessible. Lleida: Universitat de Lleida. <http://diposit.ub.edu/dspace/handle/2445/29018>. [Consulta: 12/12/2014].

58

• Tatomir, Jennifer; Durrance, Joan C. (2010). “Overcoming the information gap: measuring the accessibility of library databases to adaptive technology users”. Library hi tech. Vol. 28, no. 4, p. 577-594.

• Guía de accesibilidad en documentos PDF. Madrid: Ministerio de la Presidencia, Gobierno de España, 2010. <ftp://ftp.once.es/pub/utt/bibliotecnia/Accesibilidad/PDF/guia_de_accesibilidad_en_documentos_pdf_80.pdf>.

59

Bibliografía

http://socialbiblio.com

[email protected]

The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.

El poder de la Web está en su universalidad.El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.

Tim Berners-Lee, Director del W3C e inventor de la World Wide Web.

Rubén Alcaraz Martí[email protected]: @ralcarazm

¡Gracias!