Introducción a la accesibilidad web

Transcripción

1 Introducción a la accesibilidad web Sergio Luján Mora Profesor visitante

2 PAUTAS DE ACCESIBILIDAD AL CONTENIDO WEB 1.0 PASO A PASO

3 Contenido Imágenes Colores Estructura Presentación Idioma Enlaces Tablas Formularios

4 Imágenes Pauta 1: Proporcione alternativas equivalentes para el contenido visual y auditivo Proporcione un contenido que, presentado al usuario, cumpla esencialmente la misma función o propósito que el contenido visual o auditivo. Si bien algunas personas no pueden utilizar imágenes, películas, sonidos, applets, etc directamente, sí pueden utilizar páginas que incluyen información equivalente a los contenidos visuales o auditivos. La información equivalente debe cumplir la misma finalidad que los contenidos visuales o auditivos. Así un texto equivalente para la imagen de una flecha ascendente que vincule con una tabla de contenidos, podría ser "Ir a tabla de contenidos". En algunos casos, un equivalente debería describir la apariencia del contenido visual (Por ejemplo, para tablas complejas, carteles o diagramas) o el sonido del contenido auditivo (Por ejemplo, para los ejemplos sonoros usados en educación).

5 Imágenes Puntos de verificación: 1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1] Por ejemplo, en HTML: Utilice "alt" para los elementos IMG, INPUT y APPLET o proporcione texto equivalente en el contenido de los elementos OBJECT Y APPLET. Para contenidos complejos (Por ejemplo, las gráficas) en los que el texto del atributo "alt" no es suficiente, proporcione una descripción adicional usando, por ejemplo "longdesc" con IMG o FRAME, un enlace dentro de un elemento OBJECT o un enlace descriptivo en el documento. Para mapas de imagen, use el atributo "alt" con AREA o el elemento MAP con elementos A (y otro texto) como contenido. Consultar también punto de verificación 9.1 y punto de verificación

6 Imágenes No basta con poner un texto cualquiera, hay muchas formas de hacerlo Hay que pensar qué se quiere poner y para qué El texto alternativo no se emplea para crear un tool tip : el texto alternativo no tiene que proporcionar información adicional Qué atributo se emplea para eso?

7 Imágenes 1. Texto alternativo para una imagen sencilla 2. Texto alternativo para imagen con enlace 3. Texto alternativo para imagen compleja <a <img href="inicio.htm"><img src="faro.gif" src="grafico.gif" src="logo_grande.gif" src="casa.gif" alt="animación: src="cenefa.gif" longdesc="grafico.html" alt= Dibujo src="logo.gif" alt="diputación icono alt="" una alt="inicio" /> un casa" alt="gráfico alicante" faro /> que /></a> se enciende y de se datos apaga" demográficos /> por edades" /> 4. Texto alternativo para una animación 5. Textos o símbolos en imágenes 6. Texto para una imagen decorativa

8

9

10

11

12 Imágenes Longitud del texto alternativo? 50 caracteres: Guidelines on alt texts in img elements 80 caracteres: Web Accessibility Evaluation Curriculum >7 y <81 caracteres: Alternative Text Quality 100 caracteres: HTML Test Suite for WCAG 2.0. Test 3 - Image Alt text is short.

13

14 Imágenes 1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. [Prioridad 1] 9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica. 1.5 Uso de los mapas de imagen del cliente

15 Imágenes 1.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la pista visual de una presentación multimedia [Prioridad 1] Sincronice la descripción auditiva con la banda sonora como en el punto de verificación 1.4. Consultar también punto de verificación 1.1 para información sobre textos equivalentes para el contenido visual.

16 Imágenes 1.4 Para toda presentación multimedia tempodependiente (Por ejemplo, una película o animación) sincronice alternativas equivalentes (Por ejemplo, subtítulos o descripciones de la banda visual) con la presentación. [Prioridad 1] 1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente. [Prioridad 3] Consultar también punto de verificación 1.2 y punto de verificación 9.1.

17 Imágenes <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="venus" /> </map>

18 Colores 2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores [Prioridad 1] Por qué?

19 Colores Si emplea el color para proporcionar algún tipo de información, que también esté disponible con un método alternativo

20

21 Colores 2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para texto].

22

23

24

25 Se pueden emplear diferentes combinaciones de colores en un mismo sitiio web?

26

27 Estructura 3.2 Cree documentos que estén validados por las gramáticas formales publicadas [Prioridad 2] <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " />

28 Estructura 3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2] 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2] <h1>una PÁGINA DE PRUEBA</h1> <h2>sección 1</h2> <h2>sección 2</h2>

29 Estructura 3.6 Marque correctamente las listas y los ítems de las listas. [Prioridad 2] <ul> <li>elemento 1</li> <li>elemento 2</li> </ul> <ol> <li>elemento 1</li> <li>elemento 2</li> </ol>

30 Estructura Y si queremos cambiar el diseño de la lista? Cambia el elemento gráfico: list-style-type: disc circle square Utiliza una imagen: list-style-image: url(imagen); Muestra los elementos en una línea: list-style-type: none; display: inline;

31 Estructura 3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías. [Prioridad 2] Por ejemplo en HTML, utilice los elementos <q> y <blockquote> para marcar citas cortas y largas, respectivamente.

32 Presentación 3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2] 14.3 Cree un estilo de presentación que sea coherente para todas las páginas. [Prioridad 3] <link rel="stylesheet" type="text/css" href="estilo01.css" /> body { background-color: #ffffff; color: #000000; }

33 Presentación 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2] h1 { font-size: 1.4em; } h2 { font-size: 1.2em; }

34 Introducción a la accesibilidad web

35 Presentación 6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo. No tiene que desaparecer contenido El orden de lectura tiene que ser correcto

36 Idioma 4.3 Identifique el idioma principal de un documento. [Prioridad 3] <html xmlns=" xml:lang="es" lang="es">

37 Idioma 4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo, leyendas). [Prioridad 1] <p>este párrafo está escrito en castellano.</p> <p lang="en">this paragraph is written in English.</p>

38 Idioma 4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. [Prioridad 3] El <abbr title="world Wide Web Consortium">WWW</abbr> define los estándares de la Web.

39 Enlaces 13.1 Identifique claramente el objetivo de cada vínculo. [Prioridad 2] <a href="" title="" hreflang=""> </a>

40 Tablas 5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1] <th> </th>: encabezamientos <td> </td>: datos

41 Tablas 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] Filas: <thead>: encabezamiento de tabla <tfoot>: pie de tabla <tbody>: resto de filas Atributos: scope, headers y axis

42 Tablas 5.5 Proporcione resúmenes de las tablas. [Prioridad 3] summary: resumen de la tabla <caption> </caption>: título de la página También se puede emplear el atributo title si no se quiere que aparezca visualmente (también se puede ocultar con CSS)

43 Formularios 10.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la etiqueta está colocada adecuadamente. [Prioridad 2] La etiqueta para un recuadro de texto multilínea, un control de entrada de texto o un grupo de controles (por ejemplo un grupo de casillas de selección) debe preceder inmediatamente a su control (o grupo de controles) en la misma línea (con sólo un control o grupo) o estar en la línea que precede al control (o grupo de controles)

44 Formularios 12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2] <label for="elnombre">nombre</label><br /> <input type="text" name="elnombre" id="elnombre" size="20"/>

45 Formularios 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2] <fieldset> <legend>estado civil</legend> <input type="radio" id="rad0" name="rad" /> <label for="rad0">soltero</label> <input type="radio" id="rad1" name="rad" /> <label for="rad1">casado</label> <input type="radio" id="rad2" name="rad" /> <label for="rad2">divorciado</label> <input type="radio" id="rad3" name="rad" /> <label for="rad3">viudo</label> </fieldset>

46 <select name="favoritefood"> <optgroup label="pescado"> <option>atún</option> <option>emperador</option> <option>salmón</option> </optgroup> <optgroup label="verdura"> <option>cebolla</option> <option>lechuga</option> <option>judía</option> </optgroup> <optgroup label="fruta"> <option>manzana</option> <option>naranja</option> <option>uva</option> </optgroup> </select> Formularios

47 Formularios 9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3] <input type="text" name="elnombre" id="elnombre" size="20" tabindex="1" />

48 Formularios 9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3] <input type="text" name="elnombre" id="elnombre" size="20" accesskey="n" />

49 Formularios En la actualidad, la mayoría de los navegadores admiten los atajos de teclado con el atributo accesskey. Si se usa Microsoft Windows, se tiene que emplear la tecla Alt más el atajo de teclado. En algunos navegadores, también es necesario pulsar Enter para activar el enlace. En Macintosh, se tiene que pulsar Control más el atajo de teclado. Qué teclas utilizar? Existe un consenso?

50 El Gobierno del Reino Unido, en su Illustrated Handbook for Web Management Teams (html) propone el UK Government accesskeys standard con las siguientes teclas para ser empleadas en todas las páginas web oficiales: * S - Skip navigation * 1 - Home page * 2 - What's new * 3 - Site map * 4 - Search * 5 - Frequently Asked Questions (FAQ) * 6 - Help * 7 - Complaints procedure * 8 - Terms and conditions * 9 - Feedback form * 0 - Access key details El último atajo de teclado, el número 0, permite acceder a una página web donde se muestra y explican los atajos de teclado que se emplean en el sitio web

51

52 Formularios 6.4 Para los scripts y applets, asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. [Prioridad 2]

53 Formularios Emplear disparadores al nivel de aplicación en vez de disparadores de nivel de interacción con el usuario onfocus onblur onselect

54 Formularios Si tiene que emplear atributos específicos de un dispositivo, proporcione mecanismos redundantes de interacción onmousedown con onkeydown onmouseup con onkeyup onclick con onkeypress En HTML, no existe un equivalente de teclado para ondblclick

55 Muchas gracias! Sergio Luján