02.NCG_Decalogo_Accesibilidad_Web[Total]

DECÁLOGO ACCESIBILIDAD WEB NOVACAIXAGALICIA

Dpto. Webmaster y gestión de proyectos - Diciembre 2010

3

¿Qué es la accesibilidad Web?

ACCESIBILIDAD WEB•Conjunto de técnicas que tratan de conseguir acceso universal a la

Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidad del usuario.

•Para ello se crean el conjunto de normas y directrices WAI agrupadas por importancia o prioridad:

•Prioridad 1 (Nivel A): ciertos usuarios no podrían acceder a la información. •Prioridad 2 (Nivel AA): ciertos usuarios tienen muy difícil acceder a la

información. •Prioridad 3 (Nivel AAA): algunos usuarios experimentan dificultades para

acceder a la información.•La accesibilidad es a nivel de sitio, no de página, por lo que para

mostrar el icono de página accesible nivel AA, TODO el sitio debe ser accesible.

4

Motivos

¿Por qué debemos ser accesibles?

•Usuarios discapacitados y/mayores•Se mejora la navegación desde todos los dispositivos

•Posicionamiento en buscadores: ¡Google es ciego!•Requerimiento Legal de Nivel AA

Técnicas de Accesibilidad

DICIEMBRE 2010

6

Técnicas de accesibilidad

1.Uso de lenguaje claro y simple•Explicar las abreviaturas o acrónimos la primera vez que se utilicen en un documento.

•<p>En el <acronym title=“Boletín Oficial del Estado”>BOE</acronym> se publican….</p>

•<p>El <abbr title=“Señor”>Sr.</abbr> Maldonado explicó brevemente…</p>•Evitar el uso de argot, jergas a no ser que las defina en el propio documento.

•Potenciar las palabras de uso común. Por ejemplo, utilice "empezar" mejor que "comenzar" o "intentar" mejor que "procurar".

•Utilizar verbos en su forma activa mejor que en pasiva.•Evitar frases de estructura complicada

7

Técnicas de accesibilidad

2.Estructura correcta de los textos•Los encabezamientos y las descripciones de los vínculos deben ser claras y precisas

•Un concepto principal por párrafo•El contenido básico debe situarse al principio de la frase o párrafo (esto es denominado “colocación inicial”)

•Uso de los encabezados H1, H2, H3… Aportan valor semántico a los textos, indicando las partes importantes de los mismos

8

Técnicas de accesibilidad

3.Separar presentación y contenido•Objetivo: Mantener la misma presentación y formato a lo largo de toda la web

•Evitar dar formato a los textos o hacer cambios en el tamaño, color o alineación de los mismos

•Uso semántico del color. Los colores no deben ser la única manera de transmitir información

•Ejemplo_ solución a cuestionario:

9

Técnicas de accesibilidad

4.Enlaces•El texto debe tener sentido si se lee fuera de contexto.

• Mal: "Haz click aquí".• Bien: consulte el apartado “Información de hipotecas”

•Uso del atributo TITLE para avisar si el enlace se abre en nueva ventana.

•Ejemplo: Title=“Este enlace se abre en ventana nueva”•Incluir caracteres imprimibles entre dos enlaces contiguos

• Mal: Información de hipotecas Información de préstamos• Bien: Información de hipotecas o Información de préstamos

• Bien: [ Información de hipotecas ][ Información de préstamos ]

10

Técnicas de accesibilidad

5.Imágenes

•¡ojo! No se pueden ampliar los textos que aparecen en su interior

•¿Existe contraste suficiente? Graybit

•¿Es necesaria o podemos usar texto?

11

Técnicas de accesibilidad

5.1. Imágenes•Una Imagen Web es una instancia de una imagen del repositorio, preparada para ser mostrada en una página web.

RepositorioMultimedia

ImagenWeb

Web

NotaPrensa

Informeinterno

Imagen

Vídeo

Sonido

12

Técnicas de accesibilidad

5.1.Imágenes decorativas

•Aquellas que pueden ser eliminadas sin que se pierda información o sentido

•No llevan enlace•No llevan texto•No comunican información•Deben llevar la etiqueta alt vacía

13

Técnicas de accesibilidad

5.3.Imágenes y animaciones

•Use el atributo ALT para describir la función de cada elemento visual.

•Debe expresar TODA la información y texto que aparece en la imagen

<img alt="B.A.I. Consolidado en millones de euros. Año 2004, 146 millones de euros. Año 2005, 251 millones de euros. En 2006 se incrementó un 76% hasta los 443 millones de euros" src="http://ruta_a_la_imagen/imagen.jpg">

14

Técnicas de accesibilidad

5.3.Imágenes y animaciones

•Evitar que el alt y el contexto de la imagen sean redundantes. En ese caso el alt debe estar vacío.

<img alt=“Portada de la publicación Empresarios de Galicia" src="http://ruta_a_la_imagen/imagen.jpg">

15

Técnicas de accesibilidad

6.Multimedia•Proporcionar subtítulos, transcripción y descripción del vídeo y sonido

“Buenos días, a continuación el resumen del tiempo: Se esperan intervalos nubosos en Canarias…. “

Buenos días, a continuación el resumen del tiempo

16

Técnicas de accesibilidad

7.Figuras y Diagramas

•Descripción en el contenido más próximo y uso el atributo LONGDESC en caso de ser necesario

<img alt="B.A.I. Consolidado en millones de euros. Año 2004, 146 millones de euros. Año 2005, 251 millones de euros. En 2006 se incrementó un 76% hasta los 443 millones de euros“ longdesc=“fichero_descripcion_completa.html” src="http://ruta_a_la_imagen/imagen.jpg">

17

Técnicas de accesibilidad

8.Cambios de idioma•Identificar TODOS los cambios de idioma en el contenido mediante la etiqueta <span lang="código_de_idioma">texto en otro idioma</span>.

•Listado códigos de países• http://www.oasis-open.org/cover/iso639a.html

<p>…y con un cierto <SPAN lang="fr">je ne sais quoi</SPAN>, ella entró tanto en la habitación como en su vida para siempre. <q>Mi nombre es Natasha</q>dijo ella. <q lang="it">Piacere,</q> respondió él en impecable italiano, cerrando la puerta.

</p>

18

Técnicas de accesibilidad

9.Tablas

•¿Cuándo usar tablas?•Para agrupar datos que necesitan estar en filas y columnas (fundamentalmente cifras)

19

Técnicas de accesibilidad

9.1.Tablas•¿Cómo usar las tablas?

•Siempre deben llevar título. El título describe brevemente la naturaleza de la tabla.

•Toda columna debe tener un encabezado. Siempre una fila superior.

•Cuando sea compleja debemos añadir un pequeño resumen. El resumen explica la relación entre las celdas de la tabla.

20

Técnicas de accesibilidad

9.2.Tablas•¿Cuándo una tabla es compleja?

•Tiene varios encabezados y/o celdas combinadas.•Estrategia... Divide y vencerás.•Crea varias tablas de una misma. Normalmente se gana en claridad.

21

Técnicas de accesibilidad

9.3. Evitar tablas complejas•Dividir las tablas complejas en tablas simples

21

22

Técnicas de accesibilidad

9.4. Evitar tablas complejas•A lo mejor no debería ser una tabla…

23

Técnicas de accesibilidad

10. PDF’s Accesibles

•¿Cuándo usar PDF?•Información contractual, destinada a ser impresa•Información muy extensa y no relacionada directamente con el sitio

24

Técnicas de accesibilidad

10.1 PDF’s Accesibles

•¿Por dónde empezamos?•Estructurar el contenido de manera lógica. Uso de los formatos predefinidos.

•Añadir texto alternativo a las imágenes y gráficos. En las propiedades del objeto.

•Los enlaces deben tener sentido propio. Indicar el destino y evitar palabras genéricas.

•Deben estar etiquetados:•Etiquetar los documentos PDF que no lo estén.•Crearlos con etiquetas desde Word. Menú “Guardar”->”PDF”-> “Opciones”

25

Técnicas de accesibilidad

10.2 PDF’s Accesibles

•¿Por dónde empezamos?

•Consultando el mapa de navegación del documento

•En Acrobat, en el menú “Documento”->”Comprobación Rápida de la Accesibilidad”

•Usando el lector en voz alta de Adobe Acrobat