Buenas y malas prácticas de accesibilidad en documentos electrónicos

Buenas y malas prácticas de accesibilidad en documentos electrónicos

Jornada sobre Recursos Tecnológicos para la Inclusión Social

7 octubre de 2014, Universidad de Alicante

> Buenas y malas prácticas de accesibilidad en documentos electrónicos

Presentación Olga Carreras

Olga Carreras MontotoConsultora de accesibilidad web y documentos electrónicos

Blog “Usable y Accesible”

http://olgacarreras.blogspot.com

Twitter de Olga Carreras

@olgacarreras

http://olgacarreras.blogspot.com/

https://twitter.com/olgacarreras


Documentos electrónicos

¿De qué tipo de documentos electrónicos vamos a hablar hoy?


Documentos de texto• Documentos generados con un procesador de

texto

– Ejemplos en Microsoft Word, OpenOffice Writer


Exportación a PDF• Buenas prácticas para exportarlos a PDF

…


Buenas prácticas universalesBuenas prácticas

– Comunes a todo tipo de documentos

– Independientes de un programa concreto


Estándar en el que se basan

¿En qué estándar se basan estas buenas prácticas?


WCAG 2.0

WCAG 2.0Pautas de Accesibilidad para el Contenido Web

Web de las WCAG 2.0 (inglés)http://www.w3.org/TR/WCAG20/Traducción al español de las WCAG 2.0 http://www.sidar.org/traducciones/wcag20/es/

http://www.w3.org/TR/WCAG20/

http://www.sidar.org/traducciones/wcag20/es/


¿Qué es un documento accesible?

¿Qué es un documento accesible?


Un documento para todos

Un documento accesible es un documento

para todos


Accesible independientemente de …

Accesible para todos significa independientemente

– de las limitaciones personales

– de las limitaciones tecnológicas o del entorno


Ceguera, sordocegueraLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Visual > Ceguera, sordoceguera

Ejemplos de productos de apoyo

Línea braille Lectores de pantalla

…


Baja visiónLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Visual > Baja visión


DaltonismoLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Visual > Daltonismo


SorderaLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Auditiva > Sordera total o parcial

• El aprendizaje de la lectura está muy ligado a la audición.

• Mayor dificultad para interpretar el lenguaje escrito.


Discapacidad motrizLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Física o motriz > Extremidades superiores

Ejemplos de productos de apoyo

LicornioImagen de La red información Ratón de boca Teclado adaptado

http://laredinformacion.es/content/las-tecnologi-de-la-integracion-social


Discapacidad cognitivaLimitaciones personales Limitaciones tecnológicas/entorno

• Personas con discapacidad:– Cognitiva o neurológica

• Dificultad para comprender conceptos complejos

• Trastornos de déficit de atención

• Falta de memoria

• Trastornos emocionales que dificultan la concentración

• Relacionadas con el aprendizaje como la dislexia


Otras limitaciones personalesLimitaciones personales Limitaciones tecnológicas/entorno

• No siempre implican una discapacidad:

– Incapacidad transitoria

– Derivadas de la edad

– Inexperiencia tecnológica

– Idioma, cultura, nivel educativo o localización geográfica diferente


Limitaciones tecnológicasLimitaciones personales Limitaciones tecnológicas/entorno

• Hardware:

– Diferentes: dispositivos, resoluciones, periféricos …

• Software:

– Diferentes: programas, versiones, productos de apoyo …

• Ambientales:

– Mala iluminación, ambiente ruidoso …

• Red o conexión


Accesible para todosAccesible para todos

– Es un derecho

– Es nuestra responsabilidad

– Supone un compromiso con:

• la igualdad de oportunidades

• la no discriminación

• la inclusión social


Índice. Estructura y títulos1. Estructura y títulos

2. Idioma

3. Uso correcto del color

4. Tipografía: textos más legibles y comprensibles

5. Redacción: textos más comprensibles

6. Textos alternativos para el contenido no textual

7. No simules elementos, utiliza la herramienta adecuada

8. Antes de distribuirlo


1. Estructura y títulosDocumento de texto sin títulos


1. Estructura y títulosDocumento de texto con títulos


1. Estructura y títulosBuena práctica 1. Dividir en secciones• Dividirlo en secciones precedidas de un título

– Más fácil de leer, de comprender y de ojear

• Los títulos han de ser:

– Títulos descriptivos

– Breves y concisos


1. Estructura y títulosMala práctica 1. Títulos que no son títulosMala práctica en la definición de títulos

MAL BIEN

WordWord 2003: Formato > Estilos y formato

BIEN MAL OpenOffice


1. Estructura y títulosA quién a afecta la simulación de títulos¿A quién afecta?

• Al usuario de lector de pantalla y línea braille.

• Deben estar definidos mediante estilos:

– Se anuncia que es un título en la lectura lineal

– Puede ojear el documento

– Puede saltar bloques de contenido

– Puede acceder al listado de encabezados


1. Estructura y títulosListado de títulos JAWS¿A quién afecta?

BIEN

Lista de encabezados. JAWS. Insert + F6


1. Estructura y títulosMala práctica 2. Saltarse niveles por estética

Mala práctica en la definición de títulos

Saltarse niveles por estética

MAL


1. Estructura y títulosModificar estilos¿Cómo modifico un estilo?

Word

OpenOffice. Formato > Estilo y formateo


1. Estructura y títulosTítulos en el bloc de notas¿Y si uso el bloc de notas?


1. Estructura y títulosTítulos en Excel¿Y si es una hoja de cálculo?

BIEN

MAL

Listado de hojas de una Excel. JAWS: control + mayúsculas + s


1. Estructura y títulosTítulos y secciones en PowerPoint¿Y si es una presentación?

BIEN

PowerPoint


Índice. Idioma1. Estructura y títulos

2. Idioma








2. IdiomaCómo lee un texto en otro idioma un lector de pantalla

MAL

BIEN

Word


2. IdiomaModificar idioma. Word¿Cómo modifico el idioma del documento?

• Office

– Archivo > Opciones > Idioma

– Revisar > Idioma > Preferencias de idioma*

*2003: Herramientas > Idioma > Definir idioma


2. IdiomaModificar idioma del contenido. Word¿Cómo modifico el idioma de un contenido?

– Word


2. IdiomaCambio de idioma OpenOffice¿Cómo modifico el idioma en OpenOffice?

• OpenOffice Writer

– Herramientas > Idioma

– Barra de estado


Índice. Uso del color (sin contraste)1. Estructura y títulos

2. Idioma








Índice. Uso del color (con contraste)1. Estructura y títulos

2. Idioma








3. Uso correcto del colorBeneficiarios del contrasteSuficiente contraste entre el texto y el fondo

• Nos beneficia a todos

• Especialmente:

– Personas: baja visión, dislexia, problemas en la percepción del color

– Contextos: mala iluminación, dispositivos móviles


3. Uso correcto del colorColour Contrast AnalyserSuficiente contraste entre el texto y el fondo

• Herramienta: Colour Contrast Analyser

– Gratuita y en español

– Herramienta local pero no necesita instalación

– Descarga del programa Colour Contrast Analyser http://www.paciellogroup.com/resources/contrastanalyser/

http://www.paciellogroup.com/resources/contrastanalyser/








3. Uso correcto del colorColour contrast analyser resultados 1Suficiente contraste entre el texto y el fondo

SuficienteÓptimo


3. Uso correcto del colorColour contrast analyser resultados 2Suficiente contraste entre el texto y el fondo

menos 18 ptmenos 14 pt

18 pt o más14 pt o más


3. Uso correcto del colorColour contrast analyser. EjemploSuficiente contraste entre el texto y el fondo

El texto tiene suficiente contraste si su tamaño es grande. Podríamos mejorarlo.


3. Uso correcto del colorUso del color en gráficasNo transmitir información solo con el color


3. Uso correcto del colorGráfica de tarta vista por daltónicoNo transmitir información solo con el color

Simulador de daltonismo: ColorDoctor Enlace: http://192.240.0.102/global/accessibility/assistance/cd/

http://192.240.0.102/global/accessibility/assistance/cd

http://192.240.0.102/global/accessibility/assistance/cd


3. Uso correcto del colorGráfica de tarta correctaNo transmitir información solo con el color


3. Uso correcto del colorGráfica de líneas correctaNo transmitir información solo con el color


3. Uso correcto del colorCalendario incorrecto para daltónicosNo transmitir información solo con el color


3. Uso correcto del colorCalendario correctoNo transmitir información solo con el color


3. Uso correcto del colorEnlace incorrectos para daltónicosNo transmitir información solo con el color

MAL


3. Uso correcto del colorBeneficiariosNo transmitir información solo con el color


• Especialmente:

– Personas: problemas en la percepción del color, baja visión

– Contextos: mala iluminación, baja resolución, dispositivos móviles


Índice. Tipografía: textos más legibles y comprensibles (en texto muy pequeño)1. Estructura y títulos

2. Idioma








Índice. Tipografía: textos más legibles y comprensibles (en texto grande)1. Estructura y títulos

2. Idioma








4. Tipografía: textos más legibles y comprensiblesTamaño del textoBuenas prácticas

• Tamaño de fuente:

– Nunca bajar de los 10 pt

– Mínimo recomendable 12-14 pt

– Hay personas que imprimirán el documento

– En presentaciones un mínimo de 28-30pt


4. Tipografía: textos más legibles y comprensiblesTipo de fuente sans serifBuenas prácticas

• Tipo de fuente:

MAL BIEN

ArialVerdanaTahomaHelvéticaCalibri…


4. Tipografía: textos más legibles y comprensiblesTipo de versión de fuente sans serifBuenas prácticas

• Versión de la fuente:

– Usar la versión normal o roman

– NO usar la versión:

• Fina o estrecha: light, thin

• Negrita o cursiva: narrow, oblique


4. Tipografía: textos más legibles y comprensiblesDiferencia entre fuente normal y lightBuenas prácticas

BIEN

MAL

Calibri

Calibri light


4. Tipografía: textos más legibles y comprensiblesPreferencias en la justificación del textoMalas prácticas en el estilo de los párrafos

¿Justificar o no justificar el texto?


4. Tipografía: textos más legibles y comprensiblesJustificación del textoMala práctica: justificar el texto

Las Pautas de Accesibilidad para el Contenido Web 2.0 definen cómo crear contenido web más accesible para las personas con discapacidad. La accesibilidad considera un amplio rango de discapacidades, tales como las visuales, auditivas, físicas, del habla, cognitivas, del lenguaje, de aprendizaje y neurológicas.

MAL


4. Tipografía: textos más legibles y comprensiblesDivisión con guionesMala práctica: dividir palabras con guiones

MAL BIEN

Word. Diseño de la página > Guiones > Ninguno


4. Tipografía: textos más legibles y comprensiblesEjemplo de incorrecto espaciado e interlineado

Mala práctica: escaso espaciado e interlineado

MAL


4. Tipografía: textos más legibles y comprensiblesEjemplo de correcto espaciado e interlineado

Correcto espaciado e interlineado

BIEN


4. Tipografía: textos más legibles y comprensiblesValores correctos de espaciado e interlineado

Correcto espaciado e interlineado

BIEN


4. Tipografía: textos más legibles y comprensiblesProblemas del retorno de carroMala práctica: mal uso del retorno carro

MAL


4. Tipografía: textos más legibles y comprensiblesSalto de página en WordCorrecto salto de página

BIEN


4. Tipografía: textos más legibles y comprensiblesBeneficiarios de la legibilidad de los textos¿A quién beneficia hacer los textos más legibles?


• Especialmente:

– Personas con problemas para percibir el contenido

– Personas con dificultad en la lectura (dislexia) o de comprensión de los textos

– Personas que utilizan un lector de pantalla o una línea braille


Índice. Redacción: textos más comprensibles1. Estructura y títulos

2. Idioma








5. Redacción: textos más comprensiblesBuenas prácticas. SintaxisBuenas prácticas

• Sintaxis sencilla

• sujeto + verbo + predicado

• voz activa

• oraciones afirmativas mejor que negativas

• oraciones cortas, evita frases subordinadas largas


5. Redacción: textos más comprensiblesBuenas prácticas. Párrafos y listasBuenas prácticas

• Párrafos cortos: 1 idea = 1 párrafo

• Resume el contenido al comienzo y después desarróllalo

• Usa listas:

– Rompen la monotonía del texto

– Más fáciles de leer y escanear visualmente


5. Redacción: textos más comprensiblesMal ejemplo de párrafos y listasMalas prácticas

MAL


5. Redacción: textos más comprensiblesBuen ejemplo de párrafos y listasBuenas prácticas

BIEN


5. Redacción: textos más comprensiblesBuenas prácticas. LéxicoBuenas prácticas

• Léxico sencillo

– evita palabras y expresiones inusuales, locales o de jerga, o explícalas

– evita las abreviaciones (cta., del.)

– incluye la forma extendida de los acrónimos: BOE (Boletín Oficial del Estado)


5. Redacción: textos más comprensiblesBuenas prácticas. Evita referencias a la posición o el estilo

Buenas prácticas

• Apoya los conceptos difíciles con una imagen, un esquema, una gráfica, etc.

• Evita referencias al contenido basadas en su estilo o posición:

– “Como se ve en la imagen de la derecha”

– “Como se indica en el texto resaltado en rojo”


5. Redacción: textos más comprensiblesHerramienta de legibilidadHerramienta Inflesz

Herramienta de legibilidad Inflesz (enlace: http://legibilidad.com/home/index.html)

http://legibilidad.com/home/index.html

http://legibilidad.com/home/index.html


5. Redacción: textos más comprensiblesBeneficiarios de una redacción correcta ¿A quién beneficia?

• Nos beneficia a todos, especialmente:

– Personas con dificultad en la lectura (dislexia) o de comprensión de los textos

– Personas que utilizan un lector de pantalla o una línea braille

– Personas de diferente cultura, nivel educativo, localización geográfica, idioma


5. Redacción: textos más comprensiblesEjemplo 1 de enlace poco claroMala práctica en el texto de los enlaces

• ¿Qué enlace es más claro?

– Más información

– Consultar Anexo 4: Atajos de teclado de Word




– Glosario de términos

– Glosario de términos (PDF, 100 KB)




– http://olgacarreras.blogspot.com.es/2007/02/pdf-accesibles.html

– Artículo “PDF Accesibles” del blog de Olga Carreras Enlace: http://olgacarreras.blogspot.com.es/2007/02/pdf-accesibles.html

http://olgacarreras.blogspot.com.es/2007/02/pdf-accesibles.html



http://olgacarreras.blogspot.com.es/


5. Redacción: textos más comprensiblesWord. Información adicional en enlacesInformación adicional en los enlaces

Word. Modificar hipervínculo > Info. en pantalla


5. Redacción: textos más comprensiblesTooltip con la información adicionalInformación adicional en los enlaces


5. Redacción: textos más comprensiblesListado de enlaces de JAWSInformación adicional en los enlaces

JAWS. Listado de enlaces. Insert+f7


5. Redacción: textos más comprensiblesResumen de redacción de enlacesBuenas prácticas de redacción de enlaces

• El texto del enlace debe ser claro

• Mismo texto = mismo destino

• Indicar si abre otros documentos (formato, tamaño)

• Añadir información de la URL sin que sea enlace


Índice. Textos alternativos para el contenido no textual1. Estructura y títulos

2. Idioma








6. Textos alternativos para el contenido no textualNecesidades de los usuarios de lector de pantalla

Los usuarios de lector de pantalla

– Necesitan que incluyamos una descripción a las imágenes, gráficos, SmartArt, etc.

– Necesitan que la descripción sea adecuada


6. Textos alternativos para el contenido no textualWord. Texto alternativoWord, ¿cómo incluimos la descripción?


6. Textos alternativos para el contenido no textualWord 2007 y 2003. Texto alternativoWord, ¿cómo incluimos la descripción?

• Versiones anteriores:

– Word 2007: Botón derecho > Tamaño > Texto alternativo

– Word 2003: Botón derecho > Formato de imagen > Web


6. Textos alternativos para el contenido no textualOpenOffice. Texto alternativoOpenOffice, ¿cómo incluimos la descripción?


6. Textos alternativos para el contenido no textualTexto alternativo en gráficas¿Cómo incluimos la descripción en otros objetos?

Word 2010


6. Textos alternativos para el contenido no textualSmartArt¿Cómo incluimos la descripción en otros objetos?

Word 2010


6. Textos alternativos para el contenido no textualTexto alternativo en smartart¿Cómo incluimos la descripción en otros objetos?

Word 2010


6. Textos alternativos para el contenido no textualFórmulas¿Cómo incluimos la descripción en otros objetos?

Word 2010


6. Textos alternativos para el contenido no textualTexto alternativo en fórmulas¿Cómo incluimos la descripción en otros objetos?

Word 2010


6. Textos alternativos para el contenido no textualTexto alternativo en otros programas¿Y si mi programa no tiene esta opción?

Puedes incluir después de la imagen:

• la descripción

• un enlace a un anexo con las descripciones

– el texto del enlace debe ser descriptivo

– incluir en el anexo un enlace para volver a la imagen


6. Textos alternativos para el contenido no textualEjemplo texto alternativo en el propio contenido

¿Y si mi programa no tiene esta opción?


6. Textos alternativos para el contenido no textualRedacción de la descripciónBuenas prácticas de redacción de la descripción

• ¿Qué información transmite?

• ¿Cuál es su función?

• ¿Por qué se ha incluido en el documento?


6. Textos alternativos para el contenido no textualDescripción objetivaBuenas prácticas de redacción de la descripción

• Sé objetivo, no hagas suposiciones


6. Textos alternativos para el contenido no textualDescripción que transmita la misma información

Buenas prácticas de redacción de la descripción

• Estaciones de metro de Madrid:

– Chamartín

– Ópera

– Moncloa

– Príncipe Pío


6. Textos alternativos para el contenido no textualImágenes decorativasBuenas prácticas de redacción de la descripción


6. Textos alternativos para el contenido no textualTexto alternativo largosBuenas prácticas de redacción de la descripción


6. Textos alternativos para el contenido no textualCómo incluir las descripciones largasDescripciones largas (más de 150 caracteres)

• En el texto alternativo:

– Identifica la imagen

– Indica que incluyes la descripción larga a continuación

• Añade la descripción larga o un enlace a la misma después de la imagen.


6. Textos alternativos para el contenido no textualEjemplo descripción largaDescripciones largas (más de 150 caracteres)


6. Textos alternativos para el contenido no textualPosición de las imágenes y objetos¿En qué posición inserto la imagen u objeto?

Word: Ajustar texto OpenOffice: Propiedades de la imagen > Ajustes


6. Textos alternativos para el contenido no textualPanel selección de PowerPoint

PowerPoint: Inicio > Organizar > Panel de selecciónExcel: Inicio > Buscar > Panel de selección


Índice. No simules elementos1. Estructura y títulos

2. Idioma








7. No simules elementosNo simules las listasListas

MAL

-- Elemento 1-- Elemento 2

BIEN

• Elemento 1• Elemento 2


7. No simules elementosNo simules columnasColumnas


7. No simules elementosNo simules otros elementosEncabezado y pie de página

Índices y referencias


7. No simules elementosNo simules tablasTablas


7. No simules elementosEjemplo de tablaTablas


7. No simules elementosListado de tablas de JAWSTablas

Listado de tablas. JAWS. Insert+Control+ t


7. No simules elementosTablas sencillasBuenas prácticas

• Haz la tabla lo más sencilla posible

• No incluyas dentro de una celda otra tabla

• No combines celdas


7. No simules elementosEjemplo de simplificación de tablasBuenas prácticas

Divide la tabla en tres


7. No simules elementosTablas grandesBuenas prácticas

• Tablas que quepan en una página

• Si ocupan varias páginas:

– Repite las cabeceras

– No dividas las filas

BIEN


7. No simules elementosWord. Propiedades de la tablaBuenas prácticas

BIEN

Word


7. No simules elementosOpenOffice. Formato de tablaBuenas prácticas

BIEN

OpenOffice


7. No simules elementosWord. Descripción de la tablaBuenas prácticas

• Añade una descripción

BIEN

Word. Propiedades de la tabla > Texto alternativo


7. No simules elementosTablas en ExcelBuenas prácticas en el uso de tablas

Excel


Índice. Antes de distribuirlo1. Estructura y títulos

2. Idioma








8. Antes de distribuirloTítulo del documentoBuenas prácticas antes de distribuirlo

• Título significativo en propiedades

Word. Archivo > Información OpenOffice. Archivo > Propiedades


8. Antes de distribuirloNombre de archivoBuenas prácticas antes de distribuirlo

• Nombre de archivo significativo


8. Antes de distribuirloValidador de accesibilidad de OfficeBuenas prácticas antes de distribuirlo

• Word y PowerPoint desde la versión 2010 tienen un validador de accesibilidad


8. Antes de distribuirloValidador de accesibilidad de WordErrores que detecta el validador de Word

• Falta de texto alternativo

• Tablas: no se especifica fila de encabezado

• Encabezados muy largos

• Retorno de carro

• Hipervínculos con URL

• Objetos que no están en línea con el texto


8. Antes de distribuirloDistintos formatosBuenas prácticas

• Distribuirlo en varios formatos

– Compatible con versiones anteriores: .doc

– Formato libre: .odt, .html, .pdf


8. Antes de distribuirloPDF etiquetado¿Cómo exportarlo a PDF? Opciones a marcar

• “PDF etiquetado”, “PDF con etiquetas”


8. Antes de distribuirloListado de etiquetas en Acrobat¿Cómo exportarlo a PDF?

PDF etiquetado (Adobe Acrobat XI Pro)


8. Antes de distribuirloPDF con marcadores¿Cómo exportarlo a PDF? Opciones a marcar

• Exportar o crear “marcadores”


8. Antes de distribuirloMarcadores en Acrobat¿Cómo exportarlo a PDF?

PDF con marcadores


8. Antes de distribuirloPDF con metainformación¿Cómo exportarlo a PDF? Opciones a marcar

• Convertir datos o información del documento


8. Antes de distribuirloMostrar título¿Cómo exportarlo a PDF? Opciones a marcar

• Mostrar título


8. Antes de distribuirloPDF con vínculos¿Cómo exportarlo a PDF? Opciones a marcar

• Agregar o convertir “vínculos”


8. Antes de distribuirloPDF con seguridad¿Cómo exportarlo a PDF? Opciones a marcar

• Seguridad: “acceso a lectores de pantalla”


Índice1. Estructura y títulos

2. Idioma








Documentos escaneados

¿Un documento escaneado puede ser accesible?


Ejemplo de documento escaneado


OCR de Adobe Acrobat Professional

Adobe Acrobat XI Pro > Reconocimiento de texto > En este archivo


Dudas y preguntas

¿Preguntas?


Despedida

Muchas gracias

Technology

Buenas y malas prácticas de accesibilidad en documentos electrónicos