Maquetación HTML - web.ua.es

Formación Maquetación HTML [PARTE II]

Edición textos accesibles

(+34) 965 90 95 67

1

Maquetación HTML

Edición de textos accesiblesNivel de conformidad AA

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

y Evaluación



(+34) 965 90 95 67

2

Índice

Elementos gráficos

Navegación Enlaces

Estructura:

Orden lógico de lectura

Encabezados

Listas

Citas

Párrafos

Énfasis

Tablas

Lenguaje y comprensión Cambio de idioma

Abreviaturas y acrónimos

Lenguaje claro y sencillo

Metadatos

Herramientas de evaluación



(+34) 965 90 95 67

3

Estructura

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

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

Crear un orden de lectura correcto para las distintas formas

de presentación (lector de pantalla, navegador de texto, sin

hojas de estilo, etc.)



(+34) 965 90 95 67

4

Estructura – Orden lógico de lectura

Orden lógico de lectura:

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!

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



(+34) 965 90 95 67

5

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 texto que puede ser leído por un

lector de pantalla.

Ejemplo

http://biblioteca.ua.es/es/economicas/doctorado-en-empresa-economia-y-sociedad.html



(+34) 965 90 95 67

6

Estructura - Encabezados

Identificar la sección del contenido que encabezan.

Ser claros y breves.

Usar únicamente los encabezados para marcar las

diferentes secciones que componen la estructura de

un documento NO para dar FORMATO (estilo al

texto).



(+34) 965 90 95 67

7




(+34) 965 90 95 67

8


Encabezados [H1-H6] : Necesarios para transmitir

la estructura lógica del documento (página web).

Hay que anidarlos de forma correcta:

H1

H2

H3

- H4

H5

- H4

H3

H1

H2

H3

H5

- H4

H3

Bien Mal



(+34) 965 90 95 67

9

Encabezados en Vualà por defecto:

Título de la página. Título del sitio web [h1]

Título del sitio web [h2]

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

Encabezados en Vualà a insertar por vosotros:

Apartado [ruta: h4]

Subapartado [ruta: h5]




(+34) 965 90 95 67

10

Doble objetivo:

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.

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




(+34) 965 90 95 67

11

Evaluación de encabezados: Web Developer Toolbar:

Information -> View document outline

WAVE:

Structure Order

Outline

Ejemplos:

Encabezados correctos.

Ejemplo de mejora.

Ejemplo de encabezados incorrectos.

Ejemplo de encabezado perdido.

Ejemplo de encabezados que no encabezan contenidos.


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://sa.ua.es/es/practicas-empresa/aitana/presentacion.html

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



(+34) 965 90 95 67

12

Estructura - Listas

Listas: Se utilizan para marcar aquellos elementos

que estén relacionados entre sí.

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

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

No usarlas para dar formato tales como sangría.

No simularlas:* elemento1

* elemento2

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



(+34) 965 90 95 67

13

Evaluación de listas: WAVE:

Structure Order

Ejemplos:

Ejemplo de listas bien anidadas.

Ejemplo de lista simulada.

Ejemplo de lista mal anidada.

Ejemplo de listas vacías.

Estructura - Listas

http://economicas.ua.es/es/estudios/ade/administracion-y-direccion-de-empresas-ade.html

http://sar.ua.es/es/registro/servicios/servicios.html

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

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



(+34) 965 90 95 67

14

Estructura - Citas

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

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

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!



(+34) 965 90 95 67

15

Estructura - Citas

Citas en línea (insertar):



(+34) 965 90 95 67

16

Estructura - Citas

Citas en línea (insertar):

No se inserta nadaLa fuente de la cita, no

es obligatorio

Indicar el idioma de la

cita



(+34) 965 90 95 67

17

Estructura - Citas

Citas en bloque:



(+34) 965 90 95 67

18

Evaluación de citas: WAVE:

Structure Order

Ejemplos:

Ejemplo de uso de cita.

Ejemplo de cita en línea no marcada.

Estructura - Citas

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



(+34) 965 90 95 67

19

Estructura - Párrafos

Párrafos [ruta: p]:

Limitar los párrafos a única idea principal.

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

Los párrafos han de estar separados por una línea en

blanco y sólo una. No usar retornos de carro para separar

bloques de contenido. Los lectores de pantalla leerán: “En

blanco, en blanco…”.

Los párrafos se presentan en un orden que no cambia el

significado del contenido.



(+34) 965 90 95 67

20

Estructura - Párrafos



(+34) 965 90 95 67

21

Evaluación de párrafos: Web developer toolbar:

Information Display Topografic Information.

Ejemplos:

Ejemplo de párrafos vacíos.

Ejemplo de párrafos y listas vacías.

Estructura - Citas

http://sge.ua.es/es/presupuestos/

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



(+34) 965 90 95 67

22

Estructura - Énfasis

Énfasis:

Utilizar la negrita [ruta: strong] o

la cursiva [ruta: em] para enfatizar.

Usar este marcado semántico cuando empleemos

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

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



(+34) 965 90 95 67

23

Ahora os toca a vosotros

Entrar en la página estructura.html y realizar los

ejercicios.

Imágenes



(+34) 965 90 95 67

24

Estructura - Tablas

Las tablas sólo se deben utilizar para presentar

información tabular, es decir cuando realmente se

trate de una tabla de datos.

No usar tablas de datos para maquetar

contenidos, usar en estos casos las plantillas

definidas en Vualà llevando cuidado con el orden de

lectura.

No usar las plantillas para simular las tablas de

datos.



(+34) 965 90 95 67

25

Estructura - Tablas



(+34) 965 90 95 67

26

Estructura - Tablas

Resumen del contenido

de la tabla de datos

Tablas de datos

predefinidas,

las celdas sombreadas

se han de usar como

encabezados de tabla.



(+34) 965 90 95 67

27

Estructura - Tablas

Si elegimos esta opción…



(+34) 965 90 95 67

28

Estructura - Tablas

1. Seleccionamos las celdas encabezados de nuestra tabla.

2. Pinchamos en propiedades de la fila.



(+34) 965 90 95 67

29

Estructura - Tablas

3. Seleccionamos

encabezado de

tabla.



(+34) 965 90 95 67

30

viernes, 17 de octubre de 2014

30

Estructura - Tablas

¿Cómo reconocer una tabla de datos?

¿Tablas o listas?

Ejemplo




(+34) 965 90 95 67

31


Entrar en la página estructura.html de nuevo y

probar a insertar una tabla como la del último

ejemplo explicado, poniendo la primera fila o

columna como encabezado.

Imágenes



(+34) 965 90 95 67

32

Índice

Imágenes

Navegación Enlaces

Estructura:

Encabezados

Listas

Citas

Párrafos

Énfasis

Tablas




Metadatos




(+34) 965 90 95 67

33

Lenguaje y comprensión

Lenguaje claro y sencillo: A la hora de redactar el contenido hay

que procurar que sea comprensible y esté redactado con un lenguaje claro y

sencillo.

Abreviaturas y acrónimos: Especificar la expansión de

abreviaturas y acrónimos la primera vez que aparezcan en una página a través

del título del elemento o al lado.

Ej.: La Universidad de Oxford elige al IUDESP de la UA para la edición

castellana de la Revista Migraciones Forzadas

Cambio de idioma: Los documentos tienen inicialmente un idioma

asignado por lo que cada vez que se produzca un cambio de idioma hay que

indicarlo.

Metadatos: Hay que dotar a todas las páginas de un título, una

descripción y la inclusión de palabras claves.



(+34) 965 90 95 67

34


Lenguaje claro y sencillo: El texto ha de ser comprensible y estar redactado con un lenguaje claro y sencillo. Algunos consejos son:

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

precisas.

Limitarse a un concepto principal por párrafo.

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.

Preferir las palabras de uso común.

Usar verbos en forma activa en vez de pasiva.

Evitar frases de estructura complicada y frases en negativo.



(+34) 965 90 95 67

35


Palabras inusuales

Se trata de un criterio de conformidad de nivel AAA.

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.




(+34) 965 90 95 67

36


Algunas palabras inusuales

Jergas y argot: driver, controlador, acceso directo, ancho de banda, fifo, gusano, virus, troyano, kernel, lan, modem, servidor, slot, placa base

Dialectos y expresiones: lana=dinero, guagua=camión, güaje=niño, manque=aunque, antroxu=carnaval

Extranjerismos: broadcasting, fair play, full time, handicap, speaker, staff

Dichos y frases hechas: frases cuyo significado no surge directamente del significado de las palabras, y estas no se pueden cambiar sin perder el significado. No se pueden traducir directamente, palabra a palabra. Por ejemplo, "A bote pronto", "A buenas horas mangas verdes", "Armar la de San Quintín", "Borrón y cuenta nueva", "Arrimar el ascua a su sardina", "Cerrar a cal y canto", "Caer del guindo"




(+34) 965 90 95 67

37


¿Qué opciones tenemos?

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.

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

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

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

Ejemplo


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



(+34) 965 90 95 67

38


Abreviaturas y acrónimos, expandirlas la primera vez

que aparezca en el documento. (Nivel AAA).

Particularidades:

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)

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.



(+34) 965 90 95 67

39


Las abreviaturas pueden confundir a algunos

lectores por diferentes razones:

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.



(+34) 965 90 95 67

40




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.



(+34) 965 90 95 67

41




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.

Prueba de comportamiento de lectores de pantalla frente a abreviaturas y acrónimos.

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



(+34) 965 90 95 67

42


¿Qué debemos hacer?

Proporcionar la abreviatura inmediatamente después de la

forma expandida (Mejor solución).

Ej. Generalitat Valenciana (GV)

O usar el marcado estructural para abreviaturas y

acrónimos desde el editor de contenidos.

Y si tiene varios significados lo haremos cada vez que

aparezca.




(+34) 965 90 95 67

43


Cambio de idioma - ¿Porqué es necesario marcarlo?

Los usuarios que leen el documento en braille podrán insertar los

códigos de control adecuados (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).

De forma similar, los sintetizadores de voz que "hablan" varios

idiomas, serán capaces de generar el texto con el acento y la

pronunciación adecuados.

Los usuarios que no saben idiomas, obtendrán la traducción de los

textos de idiomas desconocidos mediante programas de traducción.



(+34) 965 90 95 67

44

Cambio de idioma - ¿Dónde y cuando se marca?

Elementos estructurales: En un párrafo, en un bloque o una

palabra suelta, dependerá de si el cambio se produce en el bloque

completo o sólo en una frase o incluso una palabra.


Ejemplo:

Tenemos el siguiente texto:

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.



(+34) 965 90 95 67

45


Excepciones: No se marcará como cambio de idioma

Existen palabras o frases de un idioma que, debido a su uso

frecuente, se han convertido en parte de otro idioma, como por

ejemplo “gourmet” que ha sido adoptada por el español, aparece

en el diccionarios del español, y los lectores de pantalla

programados para leer en español la pronuncian correctamente.




(+34) 965 90 95 67

46


Excepciones: No se marcará como cambio de idioma

Nombres propios

Por ejemplo: Natasha, Joan, Generalitat Valenciana.

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…




(+34) 965 90 95 67

47



Idioma del destino del enlace

Elegiremos, siempre que exista, la misma versión

idioma del destino.

Cuando insertemos un enlace que nos envíe a una

página web con un idioma diferente al de nuestro sitio

web hemos de especificarlo en la descripción del

enlace.



(+34) 965 90 95 67

48


A nivel de párrafo o bloque – Insertar un idioma



(+34) 965 90 95 67

49


A nivel de párrafo o bloque – Eliminar un idioma



(+34) 965 90 95 67

50





(+34) 965 90 95 67

51


Citas

Evaluación del cambio de

idioma

Web Developer Toolbar:

Information->Element information

ejemplo

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



(+34) 965 90 95 67

53


Entrar en la página idioma.html y realizar los

ejercicios

Cambio de idioma



(+34) 965 90 95 67

54

Metadatos: Hay que dotar a las páginas web de:

Título representativo de la página, es el que aparece en la barra superior del navegador, que sea:

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.

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

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

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


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



(+34) 965 90 95 67

55

Índice

Imágenes

Navegación Enlaces

Estructura:

Encabezados

Listas

Citas

Párrafos

Énfasis

Tablas




Metadatos




(+34) 965 90 95 67

56

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

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

(ambas sólo para Firefox)


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

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



(+34) 965 90 95 67

57

Detección de primeros errores al evaluar una

página (ejemplo)

WAVE:


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



(+34) 965 90 95 67

58

Evaluación de imágenes (ejemplo): Web Developer Toolbar:

Images -> Display Alt Attributes.

Images -> Disable images.

WAVE:

Text Only

Evaluación de enlaces (ejemplo): Estrategia: Navegar con el tabulador y detectar si el enlace tiene

sentido fuera del contexto.


Information -> Display Title Attributes

WAVE:

Text Only


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/



(+34) 965 90 95 67

59

Evaluación de encabezados (ejemplo): Web Developer Toolbar:

Information -> View document outline

WAVE:

Structure Order

Outline

Evaluación de listas (ejemplo): WAVE:

Structure Order

Evaluación de citas (ejemplo): WAVE:

Structure Order


http://biblioteca.ua.es/es/economicas/colecciones.html

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

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



(+34) 965 90 95 67

60

Evaluación de párrafos (ejemplo):

Web developer toolbar:

Information Display Topografic Information.

Evaluación cambio de idioma


Information->Element information

Text Only


http://web.ua.es/es/vr-cultura/secretariado-de-sedes-universitarias.html



(+34) 965 90 95 67

61

Evaluación de abreviaturas y acrónimos:


Information -> Display Abbreviation o Display Title

Attributes

Orden de lectura correcto (ejemplo):

WAVE:

Text Only





(+34) 965 90 95 67

62

Conocer más sobre accesibilidad

Pautas de Accesibilidad al Contenido de la Web 1.0 (WCAG 1.0)

Pautas de Accesibilidad al contenido de la Web 2.0 (WCAG 2.0)

Norma UNE 139803:2004

Norma UNE 139803:2012

Certificación AENOR-Marca N de Accesibilidad TIC

The Web Content Accessibility Guidelines

Normativa legal

Usable y Accesible: Olga Carreras

Accesibilidad Web: Sergio Luján

Planes y Estrategias Europeas en Materia de Sociedad de la Información

W3C: How People with Disabilities Use the Web

W3C: Web Accessibility Initiative (WAI)

http://usuarios.discapnet.es/disweb2000/wcag2003/wcag10/WAI-WEBCONTENT-19990505_es.html

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

http://www.inteco.es/Accesibilidad/difusion/Normativa/Descarga/DescargaUNE_139803

http://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/pae_normativa/pae_eInclusion_Normas_Accesibilidad.html#.UkkzuVONAs8

http://www.accesible.aenor.es/index.asp?MP=2&MS=21&MN=1&r=1920*1080

http://webaim.org/standards/wcag/

http://www.accesibilidadparatodos.com/normativa.jsp

http://olgacarreras.blogspot.com.es/2012/04/metodologia-de-evaluacion-de.html

http://accesibilidadweb.dlsi.ua.es/

http://europa.eu/legislation_summaries/information_society/index_es.htm

http://www.w3.org/WAI/intro/people-use-web/Overview.html

http://www.w3.org/WAI/intro/people-use-web/Overview.html



(+34) 965 90 95 67

63

Gracias por vuestra atención

Ester Serna BernáResponsable técnico área desarrollo web

Analista accesibilidad web

Maquetación HTML - web.ua.es

Documents

Transcript of Maquetación HTML - web.ua.es