Maquetación HTML. Edición de textos accesibles. Nivel de conformidad AAA. Edición de textos accesibles [SESION IV] - Estructura

Transcripción

1 Maquetación HTML Edición de textos accesibles Nivel de conformidad AAA (+34) Ester Serna Berná Responsable técnico área desarrollo Web Taller Digital Universidad de Alicante 1

2 Índice 1. Imágenes [sesión II] 2. Enlaces [sesión III] 3. Estructura: [sesión IV] a. Orden lógico de lectura b. Encabezados c. Listas d. Citas e. Párrafos f. Énfasis g. Tablas 4. Lenguaje y comprensión [sesión V] a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación [en todas las sesiones] 2

3 Maquetación HTML Estructura y su evaluación (+34) Ester Serna Berná Responsable técnico área desarrollo Web Taller Digital Universidad de Alicante ester.serna@eltallerdigital.com 3

4 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 Dependencia del color: Los campos marcados en rojo son obligatorios. 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.) 4

5 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. 5

6 El formato de la presentación cambia cuando: Usamos un lector de pantalla Herramienta: Claws 6

7 El formato de la presentación cambia cuando: Usamos una hoja de estilos diferente Hoja de estilo predefinida de alto contraste (Blanco sobre negro) Herramienta: Accesibility Toolbar 7

8 El formato de la presentación cambia cuando: Usamos una hoja de estilos diferente Separar contenido de aspecto Hoja de estilo predefinida de alto contraste (Blanco sobre negro) Herramienta: Accesibility Toolbar ejemplo 8

9 El formato de la presentación cambia cuando: Usamos una navegador modo texto Herramienta: Textise, simulador online para ver una página web en modo "Sólo texto". 9

10 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: Textise, simulador online para ver una página web en modo "Sólo texto". Se ha perdido el orden de lectura. Cuidado, con el uso de las plantillas! 10

11 Orden lógico de lectura Recomendación: Realiza siempre la prueba de solo lectura antes de publicar un texto 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: Estudios de grado. Prácticas en empresa. Facultad de Derecho. Es correcto el orden de lectura? 11

12 Encabezados de sección h1-h2-h3-h4-h5-h6 12

13 13

14 Mejor si estructuramos el contenido usando encabezados de sección 14

15 Cuál es la ventaja de insertar los títulos con las etiquetas título de Word? 15

16 Encabezados de sección Y en una página web para qué sirven? 16

17 Encabezados de sección Objetivo: Estructurar la información por secciones, titulares, temas o capítulos Ayudar a los usuarios a ojear el contenido del documento. Dos consideraciones: Ser claros y breves. Un encabezado siempre ha de encabezar contenidos. WebAIM encuesta: El 65.6% de los encuestados prefiere navegar a través de los encabezados de la página. 17

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

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

20 Encabezados de sección Hay que anidarlos de forma correcta: H1 H2 H3 H3 - H4 - H4 H5 20

21 Encabezados de secció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] 21

22 Encabezados de sección Fallo más común: Usar encabezados para dar formato al texto. ejemplo 22

23 Encabezados de sección Fallo más común: Usar encabezados para dar formato al texto. INCORRECTO 23

24 Encabezados de sección. Evaluación 1. Web Developer Toolbar: 1. Information -> View document outline 2. WAVE: 1. Structure Order, nos tenemos que fijar en los iconos. 3. Ejemplos: 1. El icono nos indica que nos hemos saltado un nivel. 2. El icono indica que hay un encabezado vacío. 1. Encabezados correctos. 2. Ejemplo de mejora. 3. Ejemplo de encabezados mal anidados, otro ejemplo. 4. Ejemplo encabezado usado para dar formato. 5. Ejemplo de encabezados que no encabezan contenidos. 24

25 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. Es muy importante marcar listas para que los usuarios de lector de pantalla puedan saltarlas si los contenidos no le interesan. 25

26 26

27 Listas. Evaluación WAVE: El icono representa que hay una lista. Detectar errores: BIEN MAL Ejemplos: 1. Ejemplo de listas bien anidadas (Ubicación y horario). 2. Ejemplo de lista simulada. 3. Ejemplo de lista mal anidada. 27

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

29 En Vualà: Apartado 29

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

31 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! 31

32 Citas. Inserción citas en línea Cita en línea 32

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

34 Citas. Inserción citas en bloque Cita en bloque 34

35 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. 35

36 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. 36

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

38 É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. 38

39 É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 39

40 Tablas Qué problemática existe en la percepción de los contenidos tabulares? Lectura con un lector de pantalla 40

41 Sin programación específica 41

42 Con programación específica Caption: Visitantes de rrrr.com por países Summary: Visitantes que hemos tenido en rrrr.com clasificados por países y meses. De cada país se indica que número de usuarios hablan español y cuales no. España, Si, Enero = 10, España, No, Enero = 0, México, Si, Enero = 15, México, No, Enero = 5, EEUU, Si, Enero = 5, EEUU, No, Enero = 25 España, Si, Febrero = 11, España, No, Febrero = 0, México, Si, Febrero = 20, México, No, Febrero = 2, EEUU, Si, Febrero = 3, EEUU, No, Febrero =

43 Tablas Qué debemos hacer? 1. Utilizarlas sólo 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 43

44 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. 44

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

46 Gracias por vuestra atención Ester Serna Berná Responsable técnico área desarrollo web Analista accesibilidad web Tel Fax (+34) Ester Serna Berná Responsable técnico área desarrollo Web Taller Digital Universidad de Alicante 46