Maquetación HTML. Edición de textos accesibles. Nivel de conformidad AAA Sesión 3: Estructura, Lenguaje y comprensión y Evaluación

Transcripción

1 Maquetación HTML Edición de textos accesibles Nivel de conformidad AAA Sesión 3: Estructura, Lenguaje y comprensión y Evaluación (+34)

2 Índice 1. 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ón a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 2

3 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

4 3. Estructura 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

5 3. Estructura Orden lógico de lectura 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: WAVE text-only. Se ha perdido el orden de lectura. Cuidado, con el uso de las plantillas! 5

6 3. Estructura Orden lógico de lectura 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? 6

7 3. Estructura Encabezados 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: 7

8 3. Estructura Lector de pantalla NVDA: Lista de encabezados (BLOQMAYÚS) + F7 8

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

10 3. Estructura Encabezados Fallo más común: Usar encabezados para dar formato al texto. INCORRECTO 10

11 3. Estructura Encabezados 1. Encabezados [H1-H6] : Necesarios para transmitir la estructura lógica del documento (página web). 2. Hay que anidarlos de forma correcta: H1 H2 H3 H3 Bien - H4 H5 - H4 H1 H2 H3 H3 Mal H5 - H4 11

12 3. Estructura Encabezados. Inserción 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] 12

13 3. Estructura Encabezados. Evaluación 1. Web Developer Toolbar: 1. Information -> View document outline 2. WAVE: 1. Outline 2. 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 13

14 3. Estructura Listas 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. 14

15 3. Estructura Listas. Evaluación 1. WAVE: 1. Structure Order: El icono representa el inicio de la lista y el final de la lista. a) Detectar errores: MAL BIEN 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. 15

16 Falta de elementos estructurales: XXII Reunión Plenaria de la Fundación Círculo de Montevideo 16

17 En Vualà: Apartado 17

18 Página sin apenas encabezados, dificulta la estrategia de ojear el documento. Página apta para ojear el documento. En Vualà: Apartado 18

19 3. Estructura Citas 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! 19

20 3. Estructura Citas. Inserción citas en línea Cita en línea 20

21 3. Estructura Citas. Inserción No se inserta nada La fuente de la cita, no es obligatorio Indicar el idioma de la cita 21

22 3. Estructura Citas. Inserción citas en bloque Cita en bloque 22

23 3. Estructura Citas. Evaluación 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. 23

24 3. Estructura Párrafos 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. 24

25 3. Estructura Párrafos. Evaluación 1. Web developer toolbar: 1. Information Display Topografic Information. 2. Ejemplos: 1. Ejemplo de párrafos vacíos. 25

26 3. Estructura Énfasis 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. 26

27 3. Estructura Énfasis CUIDADO CON EL ESTILO AVISO! Es un estilo basado en el color. INCORRECTO Ejemplo: Características generales acceso mayores 40 años CORRECTO Tenemos que usar la negrita o cursiva cuando queramos destacar algún texto. Ejemplo: Impresos y trámites 27

28 3. Estructura 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. 28

29 3. Estructura 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 29

30 3. Estructura Tablas. Evaluación 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. 30

31 3. Estructura Ejercicios Ahora os toca a vosotros Entrar en la página estructura.html y realizar los ejercicios. 31

32 Índice 1. 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ón a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 32

33 4. Lenguaje y comprensión Lenguaje claro y sencillo 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. 33

34 4. Lenguaje y comprensión Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA) Frases hechas particulares a cada idioma: El significado no puede ser extraído de la traducción de cada una de las palabras. Echarle a uno el muerto Be full of beans 34

35 4. Lenguaje y comprensión Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA) Frases hechas particulares a cada idioma: El significado no puede ser extraído de la traducción de cada una de las palabras. Jergas y argots: vocabulario especializado de una profesión, campo técnico o grupo social. Informática: gusano, servidor, etc Jerga Sudamericana: carro, chavo, etc 35

36 4. Lenguaje y comprensión Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA) Frases hechas particulares a cada idioma: El significado no puede ser extraído de la traducción de cada una de las palabras. Jergas y argots: vocabulario especializado de una profesión, campo técnico o grupo social. Extranjerismos: Palabras poco usuales adoptadas de otro idioma. El equipo femenino ganó la copa fair play en el torneo disputado. 36

37 4. Lenguaje y comprensión Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA) 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. 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. 37

38 4. Lenguaje y comprensión Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA) 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

39 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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. 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. 39

40 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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. 40

41 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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

42 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) Las abreviaturas pueden confundir a algunos lectores por diferentes razones: 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

43 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) Las abreviaturas pueden confundir a algunos lectores por diferentes razones: 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

44 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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à. Usar siempre ABBR ya que la etiqueta destinada al acrónimo está en desuso. 44

45 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 45

46 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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), Proporcionar la expansión antes o después. ONCE C/, Sr. Incluirla en el título al insertar la abreviatura, al pasar el ratón por encima se leería la expansión. Prueba de comportamiento de los lectores de pantalla (Sidar) 46

47 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) 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. Ejemplo: Cómo lo hacen en la página de la Iniciativa en Accesibilidad Web (WAI)? 47

48 4. Lenguaje y comprensión Abreviaturas y acrónimos (Nivel de conformidad AAA) Evaluación: 1. Web Developer Toolbar: 1. Information -> Display Abbreviation o Display Title Attributes 2. Ejemplo: Guía breve de accesibilidad web (W3C). 48

49 4. Lenguaje y comprensión Cambio de idioma 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

50 4. Lenguaje y comprensión 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

51 4. Lenguaje y comprensión Cambio de idioma. Inserción A nivel de párrafo, bloque, una o varias palabras, cita en bloque, dentro de un enlace: 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 Ejemplo 2: Técnica H58: Using language attributes to identify changes in the human language 51

52 4. Lenguaje y comprensión Cambio de idioma. Inserción A nivel de párrafo, bloque, una o varias palabras, cita en bloque: En el desplegable seleccionamos el idioma deseado 52

53 4. Lenguaje y comprensión Cambio de idioma. Inserción A nivel de párrafo, bloque, una o varias palabras, cita en bloque: Para eliminar el idioma en el desplegable seleccionamos ninguno. Si pincháis previamente en esta etiqueta span os aseguráis de eliminarlo correctamente 53

54 4. Lenguaje y comprensión Cambio de idioma. Inserción En una cita en línea: y al caérsele el piano encima del pie, salió de su boca un aplastante sugar!. Botón para insertar cita en línea. En el desplegable seleccionamos el idioma deseado o ninguno si queremos eliminarlo. 54

55 4. Lenguaje y comprensión Cambio de idioma. Inserción Abreviaturas y acrónimos: Pautas de Accesibilidad al Contenido Web (WCAG) ABBR Botón para insertar una abreviatura. En el desplegable seleccionamos el idioma inglés. 55

56 4. Lenguaje y comprensión Cambio de idioma. Inserción Idioma del destino del enlace: 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 56

57 4. Lenguaje y comprensión Cambio de idioma. Inserción Idioma del destino del enlace: 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 57

58 4. Lenguaje y comprensión Cambio de idioma. Inserción Marcamos todos los cambios de idioma? NO 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, , mailing, chat, password, copyright, software, etc 58

59 4. Lenguaje y comprensión Metadatos que hemos de incorporar en nuestras páginas: 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

60 3. Estructura Ejercicios Ahora os toca a vosotros Entrar en la página idioma.html y realizar los ejercicios. 60

61 Índice 1. 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ón a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 61

62 Herramientas de evaluación WAVE para Firefox Web Developer Toolbar para Firefox WAVE Chrome Extension at the Google Web Store Web Developer Chrome Extension at the Google Web Store FIREFOX CHROME Lector de pantalla NVDA 62

63 Herramientas de evaluación Guía herramientas evaluación /guia-rapida-de-evaluacion.pdf Guía rápida para la evaluación de elementos /guia-rapida-2015.pdf 63

64 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

65 Gracias por vuestra atención Ester Serna Berná Responsable técnico área desarrollo web Analista accesibilidad web Tel Fax (+34)