Edición de textos accesibles · 2015-11-12 · Edición de textos accesibles [SESION III] Ester...
Transcript of 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
Edición de textos accesibles [SESION III]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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!
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 8
3. Estructura
Lector de pantalla NVDA: Lista de encabezados(BLOQMAYÚS) + F7
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Fallo más común: Usar encabezados para dar formato al texto.
3. Estructura
9
Encabezados
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Fallo más común: Usar encabezados para dar formato al texto.
3. Estructura
10
Encabezados
INCORRECTO
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 16
Falta de elementos estructurales:XXII Reunión Plenaria de la
Fundación Círculo de Montevideo
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 17
En Vualà: Apartado
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 18
Página sin apenas encabezados, dificulta la estrategia de ojear el documento.
Página apta para ojear el documento.
En Vualà: Apartado
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3. Estructura
20
Citas. Inserción citas en línea
Cita en línea
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3. Estructura
21
Citas. Inserción
No se inserta nadaLa fuente de la cita, no
es obligatorio
Indicar el idioma de la
cita
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3. Estructura
22
Citas. Inserción citas en bloque
Cita en bloque
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Ahora os toca a vosotrosEntrar en la página estructura.html y realizar los ejercicios.
3. Estructura
31
Ejercicios
Edición de textos accesibles [SESION III]
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
32
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Frases hechas particulares a cada idioma: El significado no puede ser extraído de la traducción de cada una de las palabras.
4. Lenguaje y comprensión
34
Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)
“Echarle a uno el muerto” “Be full of beans”
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
35
Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)
Informática: “gusano”, “servidor”, etc…
Jerga Sudamericana: “carro”, “chavo”, etc…
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
36
Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)
“El equipo femenino ganó la copa fair play en el torneo disputado….”
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
37
Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)
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.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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”.
4. Lenguaje y comprensión
38
Palabras inusuales - Lenguaje claro y sencillo (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
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.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4. Lenguaje y comprensión
40
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.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
41
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
42
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
43
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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à.
4. Lenguaje y comprensión
44
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Usar siempre
ABBR ya que la
etiqueta destinada
al acrónimo está
en desuso.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4. Lenguaje y comprensión
45
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
4. Lenguaje y comprensión
46
Abreviaturas y acrónimos (Nivel de conformidad AAA)
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.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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.
4. Lenguaje y comprensión
47
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Ejemplo:
¿Cómo lo hacen en la página de la Iniciativa en Accesibilidad Web (WAI)?
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación:
1. Web Developer Toolbar:
1. Information -> Display Abbreviation o Display Title
Attributes
2. Ejemplo: Guía breve de accesibilidad web (W3C).
4. Lenguaje y comprensión
48
Abreviaturas y acrónimos (Nivel de conformidad AAA)
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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
4. Lenguaje y comprensión
49
Cambio de idioma
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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
4. Lenguaje y comprensión
50
Cambio de idioma
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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:
4. Lenguaje y comprensión
51
Cambio de idioma. Inserción
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
A nivel de párrafo, bloque, una o varias palabras, cita en bloque:
4. Lenguaje y comprensión
52
Cambio de idioma. Inserción
En el desplegable
seleccionamos el
idioma deseado
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
A nivel de párrafo, bloque, una o varias palabras, cita en bloque:
4. Lenguaje y comprensión
53
Cambio de idioma. Inserción
Para eliminar el idioma en el
desplegable seleccionamos
ninguno.
Si pincháis previamente en esta etiqueta “span” os
aseguráis de eliminarlo correctamente
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
… y al caérsele el piano encima del pie, salió de su boca un aplastante
sugar!.
En una cita en línea:
4. Lenguaje y comprensión
54
Cambio de idioma. Inserción
En el desplegable seleccionamos el idioma deseado o ninguno si queremos eliminarlo.
Botón para insertar cita en línea.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Pautas de Accesibilidad al Contenido Web (WCAG)
Abreviaturas y acrónimos:
4. Lenguaje y comprensión
55
Cambio de idioma. Inserción
En el desplegable seleccionamos el idioma inglés.
ABBR Botón para insertar una abreviatura.
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Idioma del destino del enlace:
4. Lenguaje y comprensión
56
Cambio de idioma. Inserción
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Idioma del destino del enlace:
4. Lenguaje y comprensión
57
Cambio de idioma. Inserción
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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…
4. Lenguaje y comprensión
58
Cambio de idioma. Inserción
NO
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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à
4. Lenguaje y comprensión
59
Metadatos que hemos de incorporar en nuestras páginas:
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Ahora os toca a vosotrosEntrar en la página idioma.html y realizar los ejercicios.
3. Estructura
60
Ejercicios
Edición de textos accesibles [SESION III]
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
61
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición de textos accesibles [SESION III]
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
Tel. 965 90 95 67 – Fax. 965 90 94 77
65