edición de textos accesibles · 2015-11-12 · edición de textos accesibles [sesion iii] ester...

Edición de textos accesibles [SESION III]

Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected](+34) 965 90 95 67

Maquetación HTML

Edición de textos accesiblesNivel de conformidad AAA

Sesión 3: Estructura, Lenguaje y comprensión y Evaluación

1


Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]

Índice1. Elemento no textual:

Imágenes y multimedia

2. Navegación Enlaces

3. Estructura:

a. Orden lógico de lectura

b. Encabezados

c. Listas

d. Citas

e. Párrafos

f. Énfasis

g. Tablas

4. Lenguaje y comprensióna. Lenguaje claro y sencillob. Abreviaturas y acrónimosc. Cambio de idiomad. Metadatos

5. Herramientas de evaluación

2



3. Estructura

1. Usar el marcado estructural y semántico adecuado para transmitir toda la información y las relaciones entre el contenido (encabezados, listas, citas, párrafos, tablas de datos, etc.)

2. Proporcionar la información de forma que sea independiente de

características sensoriales (color, posición, tamaño, etc.)

Referencias a imágenes:

“Como se muestra en la imagen de la izquierda….” MAL

3. Crear un orden de lectura correcto para las distintas formas de presentación (lector de pantalla, navegador de texto, sin hojas de estilo, etc.)

3



Doble objetivo:

1. Asegurar que la información y las relaciones existentes en el contenido transmitidas a través de la presentación también estén disponibles cuando se cambie el formato de presentación.

2. Ayudar a los usuarios a comprender qué información está contenida en la página web y cómo se organiza dicha información.

4

3. Estructura



3. Estructura

5

El orden de lectura de un documento de forma visual ha de ser el mismo que en formato texto.

Ejemplo:

1. Acceder a la página pruebas.html.

2. Evaluación:

WAVEtext-only.

Orden lógico de lectura

Se ha perdido el orden de lectura.¡Cuidado, con el uso de las plantillas!

http://web.ua.es/es/curso-accesibilidad/pruebas.html



Recomendación:

“Realiza siempre la prueba de solo lectura antes de publicar un texto: WAVE text-only “

Es muy útil para ver el orden del texto que será leído por el lector de pantalla.

Ejemplo 1: Servicio Jurídico. Boletines informativos¿Es correcto el orden de lectura de los Boletines?

Ejemplo 2: Uso de pestañas¿Es posible identificar el contenido con su sección?

3. Estructura

6

Orden lógico de lectura

http://sj.ua.es/es/boletines/boletines-informativos.html

http://educacio.ua.es/es/secretaria/matricula/procesos-de-matricula.html



Sirven para estructurar la información por secciones, titulares, temas o capítulos y ayuda a los usuarios a ojear el contenido del documento.

Ser claros y breves.

Un encabezado siempre ha de encabezar contenidos.

Desde Vualà podéis marcar encabezados con:

3. Estructura

7

Encabezados


Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 8

3. Estructura

Lector de pantalla NVDA: Lista de encabezados(BLOQMAYÚS) + F7



Fallo más común: Usar encabezados para dar formato al texto.

3. Estructura

9

Encabezados



Fallo más común: Usar encabezados para dar formato al texto.

3. Estructura

10

Encabezados

INCORRECTO



1. Encabezados [H1-H6] : Necesarios para transmitir la estructura lógica del documento (página web).

2. Hay que anidarlos de forma correcta:

3. Estructura

11

Encabezados

H1

H2

H3

- H4

H5

- H4

H3

H1

H2

H3

H5

- H4

H3

Bien Mal



1. Encabezados en Vualà por defecto:1. Título de la página. Título del sitio web [h1]

2. Título del sitio web [h2]

3. Título de la página creada [h3]

2. Encabezados en Vualà a insertar por vosotros:1. Apartado [ruta: h4]

2. Subapartado [ruta: h5]

3. Estructura

12

Encabezados. Inserción



1. Web Developer Toolbar:1. Information -> View document outline

2. WAVE: 1. Outline2. Structure Order, nos tenemos que fijar en los iconos.

1. El icono nos indica que nos hemos saltado un nivel.

2. El icono indica que hay un encabezado vacío.

3. Ejemplos:1. Encabezados correctos.2. Ejemplo de mejora.3. Ejemplo de encabezados incorrectos.4. Ejemplo de encabezado vacío.5. Ejemplo encabezado usado para dar formato.6. Ejemplo de encabezados que no encabezan contenidos.7. Enlaces perdidos a través de los encabezados

3. Estructura

13

Encabezados. Evaluación

http://web.ua.es/es/protocolo/presentacion/presentacion-e-informacion-general.html

http://web.ua.es/es/claustro-universitario/reglamento-electoral-de-la-universidad-de-alicante.html

http://sj.ua.es/es/boletines/boletines-informativos.html

http://cvnet.cpd.ua.es/webcvnet/planestudio/planestudiond.aspx?plan=C103

http://cvnet.cpd.ua.es/webcvnet/planestudio/planestudiond.aspx?plan=C103

http://web.ua.es/es/oia/oficina-de-informacion/datos-de-contacto-de-la-oficina-de-informacion.html

http://biblioteca.ua.es/es/encuentra-informacion/acceso-a-la-bibliografia-recomendada.html



1. Listas: Se utilizan para marcar aquellos elementos que estén relacionados entre sí.

1. Numeradas Importa el orden (ruta: ol>>Ii )

2. No numeradas No importa el orden (ruta: ul>>li )

2. No usarlas para dar formato tales como sangría.

3. No simularlas:

* elemento1

* elemento2

4. Anidar bien las listas y no dejar listas vacías.

3. Estructura

14

Listas



1. WAVE:1. Structure Order: El icono representa el inicio de la lista y el

final de la lista.

a) Detectar errores:

b) Listas vacías que deberemos eliminar:

2. Ejemplos:1. Ejemplo de listas bien anidadas (Ubicación y horario).

2. Ejemplo de lista simulada.

3. Ejemplo de lista mal anidada.

4. Ejemplo de listas vacías.

3. Estructura

15

Listas. Evaluación

MAL BIEN

http://biblioteca.ua.es/es/utiliza-la-biblioteca/prestamo-interbibliotecario/prestamo-interbibliotecario.html

http://sc.ua.es/es/funciones-del-servicio-de-contabilidad.html

http://derecho.ua.es/es/movilidad/movilidad-fuera-de-programa.html

http://fcsalud.ua.es/es/estudios/nutricion/nutricion-humana-y-dietetica.html



Falta de elementos estructurales:XXII Reunión Plenaria de la

Fundación Círculo de Montevideo

http://web.ua.es/es/protocolo/eventos/actos-varios/actos-varios-2015-2016/xxi-reuni-n-plenaria-fundaci-n-c-rculo-montevideo-octubre-2015/xxi-reunion-plenaria-de-la-fundacion-circulo-de-montevideo.html



En Vualà: Apartado



Página sin apenas encabezados, dificulta la estrategia de ojear el documento.

Página apta para ojear el documento.

En Vualà: Apartado



Hay que diferenciar entre ambos tipos de cita y usar el marcador apropiado para cada una de ellas:

a) Cita en bloque: [ruta: blockquote]

“En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor...”

a) Cita en línea: [ruta: q]

...y al caérsele el piano encima del pie, salió de su boca un aplastante ¡mecachis en la mar!

¡No usar las citas para dar formato, como por ejemplo para dar sangría al texto!

3. Estructura

19

Citas



3. Estructura

20

Citas. Inserción citas en línea

Cita en línea



3. Estructura

21

Citas. Inserción

No se inserta nadaLa fuente de la cita, no

es obligatorio

Indicar el idioma de la

cita



3. Estructura

22

Citas. Inserción citas en bloque

Cita en bloque



1. WAVE:

1. Structure Order, identifica tanto citas en línea como en bloque.

2. Ejemplos:

1. Ejemplo de uso de cita.

2. Ejemplo de cita en línea no marcada.

3. Estructura

23

Citas. Evaluación

http://web.ua.es/es/oia/acceso-preinscripcion-y-matricula/ingreso/ingreso-grados-estudios-extranjeros-union-europea.html

http://web.ua.es/es/actualidad-universitaria/2013/octubre2013/octubre2013-7-13/la-universidad-de-alicante-la-diputacion-provincial-de-alicante-el-juan-gil-albert-y-la-casa-de-velazquez-presentan-el-congreso-internacional-jorge-juan-santacilia.html



Párrafos [ruta: p]:

1. Limitar los párrafos a única idea principal.

2. Hay que separar las líneas de texto en párrafos.

3. No usar retornos de carro para separar bloques de contenido ya que algunos lectores de pantalla leerán: “En blanco, en blanco…” y pueden pensar que no hay más información detrás.

3. Estructura

24

Párrafos



1. Web developer toolbar:1. Information Display Topografic Information.

2. Ejemplos:1. Ejemplo de párrafos vacíos.

3. Estructura

25

Párrafos. Evaluación

http://web.ua.es/es/iudesp/seminarios-iudesp.html



1. Énfasis:

1. Utilizar la negrita [ruta: strong] o

2. la cursiva [ruta: em] para enfatizar.

2. Usar este marcado semántico cuando empleemos color.

1. Incorrecto: Los campos marcados en rojo son obligatorios.

2. Correcto: Los campos marcados en rojo y con * son obligatorios.

3. Estructura

26

Énfasis



3. Estructura

27

Énfasis

¡CUIDADO CON EL ESTILO “AVISO”! Es un estilo “basado en el color” .

CORRECTO

Ejemplo: Características generales acceso mayores 40 años

INCORRECTO

Tenemos que usar la negrita o cursiva cuando queramos destacar algún texto.

Ejemplo: Impresos y trámites

http://sa.ua.es/es/mayores-40/

http://economicas.ua.es/es/tramites-e-impresos/impresos-y-tramites.html



1. Las tablas sólo se deben utilizar para presentar información tabular, es decir cuando realmente se trate de una tabla de datos.

2. No usar tablas de datos para maquetar contenidos, usar en estos casos las plantillas definidas en Vualà llevando cuidado con el orden de lectura.

3. No usar las plantillas para simular las tablas de datos.

3. Estructura

28

Tablas



1. Las tablas sólo se deben utilizar para presentar información tabular, es decir cuando realmente se trate de una tabla de datos.

2. No usar tablas de datos para maquetar contenidos, usar en estos casos las plantillas definidas en Vualà llevando cuidado con el orden de lectura.

3. No usar las plantillas para simular las tablas de datos.

4. Ejemplos:1. Esto es una tabla de datos: Servicio Deportes. Contacto.

2. Esto NO es una tabla de datos: Biblioteca Universitaria. Cursos de formación

3. Estructura

29

Tablas

http://sd.ua.es/es/administracion/

http://biblioteca.ua.es/es/estudia-y-aprende/cursos-de-formacion/cursos-de-formacion.html



1. Web Developer Toolbar:

1. Outline -> Outline Tables -> Outline Tables

2. WAVE:

1. Structure Order, nos tenemos que fijar en el icono .

3. Ejemplos:1. Página con una tabla de datos.

2. Página con una tabla usada para maquetar textos.

3. Estructura

30

Tablas. Evaluación

http://dca.ua.es/es/personal/investigadores-contratados-y-personal-becado.html

http://sc.ua.es/es/horarios.html



Ahora os toca a vosotrosEntrar en la página estructura.html y realizar los ejercicios.

3. Estructura

31

Ejercicios






3. Estructura:


b. Encabezados

c. Listas

d. Citas

e. Párrafos

f. Énfasis

g. Tablas



32



Encabezados informativos y las descripciones de los vínculos claras y precisas.

Limitarse a un concepto principal por párrafo.

Usar verbos en forma activa en vez de pasiva.

Evitar frases de estructura complicada y frases en negativo.

Preferir las palabras de uso común.

Evitar el uso de argot, jergas y significados particulares de palabras comunes a no ser que se definan en un documento y sean imprescindibles, por ejemplo en un glosario.

4. Lenguaje y comprensión

33

Lenguaje claro y sencillo



Frases hechas particulares a cada idioma: El significado no puede ser extraído de la traducción de cada una de las palabras.


34

Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)

“Echarle a uno el muerto” “Be full of beans”




Jergas y argots: vocabulario especializado de una profesión, campo técnico o grupo social.


35


Informática: “gusano”, “servidor”, etc…

Jerga Sudamericana: “carro”, “chavo”, etc…




Jergas y argots: vocabulario especializado de una profesión, campo técnico o grupo social.

Extranjerismos: Palabras poco usuales adoptadas de otro idioma.


36


“El equipo femenino ganó la copa fair play en el torneo disputado….”



Usadas en un contexto inusual o más restrictivo: El usuario necesita conocer la definición exacta para entender el significado de la frase. Tienen varias definiciones posibles pero sólo una de ellas es la adecuada

para comprender el contenido.

La definición necesaria para comprender el contenido se considera como “rara”, “arcaica” u “obsoleta”.

El autor usa alguna palabra o término asignándole un nuevo significado.


37


El término “avatar“ significa diferente si aparece en una discusión sobre religiones o en un texto informático pero la definición puede determinarse por el contexto. Ahora bien la palabra “texto” en las WCAG 2.0 se usa de un modo específico definido por el autor.

http://www.significados.com/avatar/

http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/text-equiv-all.html#text-altdef



¿Qué opciones tenemos?1. Incluir en el mismo texto la definición de la palabra inusual, junto a

la palabra o a través de un enlace al pie de página.

2. Crear un glosario de términos y enlazar la palabra con su definición.

3. Incluir un enlace a un diccionario donde aparezca la definición.

Consideraciones:

Si la palabra o frase tiene un significado único, solo tendremos que proporcionar la definición la primera vez que aparezca en el documento, sino deberemos proporcionar la definición adecuada cada vez que aparezca”.


38




Especificar la expansión de abreviaturas y acrónimos, al menos, la primera vez que aparezcan en una página a través del título del elemento o al lado.


39

Abreviaturas y acrónimos (Nivel de conformidad AAA)

Ejemplo:

“La UA reúne a un millar de personas en la XXII

Jornada deportiva UPAPSA.”

UPAPSA: Unión provincial de asociaciones pro minusválidos

psíquicos de Alicante.




40


Particularidades:1. Hay veces que es mejor dar una explicación que proporcionar

una expansión literal.

Ej. a.m. y p.m. es mejor explicar su significado ("por la mañana" y "por la tarde", respectivamente) que dar la expansión literal, la cual puede no ser entendida por todos los usuarios ("Ante merídiem" y "Post merídiem", respectivamente)

2. En las formas abreviadas que han pasado a formar parte del lenguaje no es necesario proporcionar la expansión de la misma.

Ej. Radar, sida.



Las abreviaturas pueden confundir a algunos lectores por diferentes razones:

1. Algunas abreviaturas no se ven como palabras normales y no se pueden pronunciar usando las reglas de pronunciación de un idioma.

Por ejemplo, la palabra "señor" se abrevia "Sr.", que no es ningún

fonema ni palabra del español. El usuario debe saber que "Sr." es la abreviatura de la palabra "señor" para poder pronunciarla correctamente.


41





2. En algunas ocasiones, las mismas abreviaturas tienen diferentes significados dependiendo del contexto.

Por ejemplo, "c/" puede ser la abreviatura de "calle", "cada" y

"capítulo". Los usuarios deben ser capaces de entender el contexto para poder entender qué significan las abreviaturas.


42





3. Algunos acrónimos se escriben igual que una palabra común pero se utilizan de diferente forma.

Por ejemplo, el acrónimo de Organización Nacional de Ciegos

Españoles, ONCE, se escribe igual que el número 11, pero se utiliza de diferente manera.


43




Técnicas para proporcionar la forma expandida:

1. Proporcionar la abreviatura inmediatamente antes o después de la forma expandida.

Ej. Organización Nacional de Ciegos España (ONCE) (ONCE) Organización Nacional de Ciegos España

2. Insertar en el título la expansión de la abreviatura o acrónimo a través de Vualà.


44


Usar siempre

ABBR ya que la

etiqueta destinada

al acrónimo está

en desuso.




45




Técnicas para proporcionar la forma expandida:

¿Qué técnica es la más recomendable?

Organización Nacional de Ciegos de España (ONCE)

Calle (C/), Sr. (Señor), …

ONCE

C/, Sr.


46


Prueba de comportamiento de los lectores de pantalla (Sidar)

Proporcionar la

expansión antes o

después.

Incluirla en el título al insertar la abreviatura, al

pasar el ratón por encima se leería la expansión.

http://www.sidar.org/funacti/inves/resul.php



¿Cuándo marcamos las abreviaturas?

1. Al menos, la primera vez que aparezca en el documento.

2. Si la abreviación tiene diferentes significados dentro de la misma página se deberá explicar o expandir todas las veces que aparece siguiendo las técnicas comentadas.

3. Por otro lado hay que añadir que las abreviaturas de uso común, recogidas en el diccionario de la Real Academia de la Lengua, que no presenten ninguna de las particularidades anteriores, no requieren ser marcadas, puesto que los lectores de pantalla deberían incluirlas (y suelen hacerlo) en sus diccionarios.


47


Ejemplo:

¿Cómo lo hacen en la página de la Iniciativa en Accesibilidad Web (WAI)?

http://www.rae.es/diccionario-panhispanico-de-dudas/apendices/abreviaturas

http://www.w3.org/WAI/intro/wcag.php



Evaluación:

1. Web Developer Toolbar:

1. Information -> Display Abbreviation o Display Title

Attributes

2. Ejemplo: Guía breve de accesibilidad web (W3C).


48


http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad



¿Por qué es importante?

1. Facilita la lectura de los documentos en distintos idiomas a:

a) Usuarios que leen el documento en Braille, podrán insertar los códigos de control (etiquetas) donde ocurren los cambios de idioma, para asegurar que el programa de traducción a braille generará los caracteres correctos (por ejemplo, caracteres acentuados).

b) Sintentizadores de voz que “hablan varios idiomas”, serán capaces de generar el texto con el acento y la pronunciación adecuados.

c) Usuarios que no saben idiomas, obtendrán la traducción de los textos de idiomas desconocidos mediante programas de traducción.

2. Motores de búsqueda identifican los contenidos en el idioma deseado


49

Cambio de idioma



¿Dónde y cuando se marca?

1. Párrafo

2. Bloque

3. Una o varias palabras

4. Texto del enlace

5. Destino del enlace

6. Citas en línea o en bloque

7. Abreviaturas


50

Cambio de idioma



Ejemplo 2:

Técnica H58: Using language attributes to identify changes in the

human language

Ejemplo 1:

y con un cierto je ne sais quoi, ella entró tanto en la habitación como en su

vida para siempre. Mi nombre es Natasha dijo ella. Piacere, respondió él

en impecable italiano, cerrando la puerta

A nivel de párrafo, bloque, una o varias palabras, cita en bloque, dentro de un enlace:


51

Cambio de idioma. Inserción



A nivel de párrafo, bloque, una o varias palabras, cita en bloque:


52


En el desplegable

seleccionamos el

idioma deseado



A nivel de párrafo, bloque, una o varias palabras, cita en bloque:


53


Para eliminar el idioma en el

desplegable seleccionamos

ninguno.

Si pincháis previamente en esta etiqueta “span” os

aseguráis de eliminarlo correctamente



… y al caérsele el piano encima del pie, salió de su boca un aplastante

sugar!.

En una cita en línea:


54


En el desplegable seleccionamos el idioma deseado o ninguno si queremos eliminarlo.

Botón para insertar cita en línea.



Pautas de Accesibilidad al Contenido Web (WCAG)

Abreviaturas y acrónimos:


55


En el desplegable seleccionamos el idioma inglés.

ABBR Botón para insertar una abreviatura.



Idioma del destino del enlace:


56


Técnica H58: Using language attributes to identify changes in the

human language

La página destino está en inglés

Desde Vualà no

es posible a día

de hoy definirlo



Idioma del destino del enlace:


57


Técnica H58: Using language attributes to identify changes in the human

language

La página destino está en inglés

Técnica H58: Using language attributes to identify changes in the human

language [inglés]

Ejemplo: Estándares. W3C

http://www.w3c.es/estandares/



¿Marcamos todos los cambios de idioma?

a) Nombres propios

Por ejemplo: Natasha, Joan, Generalitat Valenciana.

b) Términos técnicos, títulos o términos de uso común adoptados en el idioma con pronunciación igual o similar en el idioma principal del documento.

Por ejemplo: gourmet, homo sapiens, e-mail, mailing, chat, password, copyright, software, etc…


58


NO



1. Título representativo de la página, es el que aparece en la barra superior del navegador, que sea:1. Significativo: La persona que lo lea debe de obtener la suficiente

información del contenido de la página. Es conveniente evitar títulos ingeniosos y originales que apenas aporten información real sobre el contenido de la página.

2. Breve: Si es demasiado largo, los buscadores sólo mostrarán una parte del mismo.

2. Descripción: Debe ser corta, precisa y con una alta densidad de palabras claves. La extensión máxima es de 160 caracteres.

3. Palabras claves: Un máximo de 3 palabras por página.1. SEO Vualà


59

Metadatos que hemos de incorporar en nuestras páginas:

http://si.ua.es/es/vuala/seo/posicionamiento-en-buscadores.html



Ahora os toca a vosotrosEntrar en la página idioma.html y realizar los ejercicios.

3. Estructura

60

Ejercicios






3. Estructura:


b. Encabezados

c. Listas

d. Citas

e. Párrafos

f. Énfasis

g. Tablas



61



Herramientas de evaluación

WAVE para Firefoxhttp://wave.webaim.org/toolbar/

Web Developer Toolbar para Firefoxhttps://addons.mozilla.org/es/firefox/addon/web-developer/

WAVE Chrome Extension at the Google Web Storehttps://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Web Developer Chrome Extension at the Google Web Storehttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

Lector de pantalla NVDAhttp://www.nvaccess.org/download/

62

FIREFOX

CHROME

http://wave.webaim.org/toolbar/

https://addons.mozilla.org/es/firefox/addon/web-developer/

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

http://www.nvaccess.org/download/



Herramientas de evaluación

Guía herramientas evaluaciónhttp://web.ua.es/es/curso-accesibilidad/documentos/octubre-2015/guia-rapida-de-evaluacion.pdf

Guía rápida para la evaluación de elementoshttp://web.ua.es/es/curso-accesibilidad/documentos/octubre-2015/guia-rapida-2015.pdf

63

http://web.ua.es/es/curso-accesibilidad/documentos/octubre-2015/herramientas-de-evaluacion.pdf

http://web.ua.es/es/curso-accesibilidad/documentos/octubre-2015/guia-rapida-2015.pdf



Para practicar la guía:

Imágenes

Enlaces

Encabezados

Listas

Citas

Cambio de idioma, abreviaturas y acrónimos

Edición de texto o aspecto visual

Detección de errores al evaluar una página

64

http://web.ua.es/es/actualidad-universitaria/2013/octubre2013/octubre2013-7-13/la-ua-reivindica-el-trabajo-y-reconocimiento-de-los-profesionales-de-la-enfermeria-comunitaria.html

http://economicas.ua.es/es/

http://biblioteca.ua.es/es/

http://economicas.ua.es/es/

http://web.ua.es/es/curso-accesibilidad/pruebas.html

http://web.ua.es/es/curso-accesibilidad/ejercicios/idioma.html

http://biblioteca.ua.es/es/

http://web.ua.es/es/estatuto-ua/


Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected](+34) 965 90 95 67

Gracias por vuestra atenciónEster Serna Berná

Responsable técnico área desarrollo web

Analista accesibilidad web

[email protected]

Tel. 965 90 95 67 – Fax. 965 90 94 77

65

edición de textos accesibles · 2015-11-12 · edición de textos accesibles [sesion iii] ester...

Documents