Accesibilidad en la Web: El camino para construir sitios accesibles. Reinaldo Ferraz. Diciembre/2009. Accesibilidad en la Web:

Transcripción

1 El camino para construir sitios accesibles Reinaldo Ferraz Diciembre/2009

2 El Consorcio World Wide Web (W3C) 2 És un consorcio internacional, criado el 1994 por Tim Berners-Lee com organizaciones miembro, personal a tiempo completo, el público en general trabajan conjuntamente para desarrollar estándares Web.

3 O W3C no Brasil 3 La oficina de Brasil inició sus actividades en octubre de La oficina brasileña es una iniciativa de CGI.br, que se encarga de coordinar e integrar actividades de servicios de Internet en Brasil y NIC.br, creado para ejecutar sus actividades.

4 La misión del W3C 4 Guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web. Desde 1994, el W3C ha publicado más de ciento diez estándares, denominados Recomendaciones del W3C

5 Objetivos 5 Web para todos

6 Objetivos 6 Web para todos Hacer que los beneficios de la web (Su valor social: la comunicación humana, el comercio y las oportunidades para compartir conocimiento) estén disponibles para todo el mundo, independientemente del: Hardware Software Infraestructura de red Idioma Cultura Localización geográfica Habilidad física Habilidad mental

7 Objetivos 7 Web para todos Web en cualquier dispositivo

8 Objetivos 8 Web en cualquier dispositivo Hacer el acceso a la Web desde cualquier dispositivo algo tan sencillo, fácil y práctico como lo es desde un dispositivo de sobremesa Desktops Netbooks Teléfonos móviles PDAs Sistemas de televisión interactiva Sistemas de respuesta de voz Electrodomésticos

9 Objetivos 9 Web para todos Web en cualquier dispositivo Web base de conocimiento

10 Objetivos 10 Web base de conocimiento La Web no es solamente un inmenso libro donde la gente puede buscar, navegar y ver información. Desarrollar una Web cuyo contenido sea procesable tanto por humanos como por máquinas. Interoperabilidad Web Semántica

11 Objetivos 11 Web para todos Web en cualquier dispositivo Web base de conocimiento Credibilidad y confianza

12 Objetivos 12 Credibilidad y confianza Para que la Web sea un medio realmente útil en las relaciones sociales, los usuarios deben poder confiar en terceros que hayan ganado su confianza. Ambiente mas colaborativo Responsabilidad Seguridad Confianza Confidencialidad

13 WAI y WCAG 13 WAI - Web Accessibility Initiative Es una iniciativa del W3C que trabaja con organizaciones de todo el mundo para desarrollar estrategias, directrices y recursos para ayudar a hacer la Web accesible para las personas con discapacidad. WCAG - Web Content Accessibility Guidelines Estas son las recomendaciones para la accesibilidad de los contenidos web, documentos que explican cómo hacer el contenido Web accesible para personas con discapacidad. Versão 1.0: 5 de maio de 1999 Versão 2.0: 11 de dezembro de 2008

14 Accesibilidad en la Web 14 Qué es la accesibilidad?

15 Qué es la accesibilidad? Según la WAI: Accesibilidad en la Web significa que las personas con discapacidad puedan percibir, entender, navegar e interactuar, y puede contribuir a la web. 15

16 Accesibilidad en la web: Para quién es? 16 Accesibilidad en la web: Para quién es?

17 Accesibilidad en la web: Para quién es? 17 Con discapacidad visual - Las personas ciegas que navegan con lectores de pantalla - Las personas que tienen dificultad de ver los colores y contrastes - Baja visión: la necesidad de aumentar la pantalla para ver la

18 Accesibilidad en la web: Para quién es? 18 Sordos - Las personas que no pueden ver un vídeo en Internet con audio.

19 Accesibilidad en la web: Para quién es? 19 Personas de movilidad reducida - Las personas que utilizan la web con un solo dedo (o menos) o que tienen dificultad para usar el ratón.

20 Accesibilidad en la web: Para quién es? 20 La accesibilidad es para todos

21 Accesibilidad en la web: Para quién es? 21 Pequeñas pantallas - Acceso a Internet en un teléfono celular.

22 Accesibilidad en la web: Para quién es? 22 Discapacidad por un período - Las personas obligadas a utilizar la Web con la otra mano debido a las fracturas, lesiones, etc.

23 Accesibilidad en la web: Para quién es? 23 Las personas que empiezan a usar la web - Las personas que están comenzando su proceso de informatización o los niños que están descubriendo la web.

24 Accesibilidad en la web: Para quién es? 24 Las personas con edad avanzada - Las personas de edad, luchando para ver letras pequeñas y utilizar el ratón.

25 Accesibilidad en la web: Para quién es? 25 Hacer un sitio web accesible no es sólo la preocupación de un grupo determinado de personas: Es una preocupación para todas las personas que acceden a su sitio.

26 26 Tutorial Accesibilidad en la Web

27 WCAG És una recomendación del W3C de 5 de mayo de 1999 Fue traducido a varios idiomas, incluyendo español Las recomendaciones que explican cómo hacer el contenido Web accesible para personas con discapacidad.

28 WCAG WCAG 1.0 Recomendaciones de Accesibilidad al Contenido de la Web Puntos de verificación Técnicas para el punto de verificación

29 29 WCAG 2.0

30 WCAG És una recomendación del W3C de 11 de Diciembre de 2008 También fue traducido a varios idiomas Las WCAG 2.0 se basan en las WCAG 1.0 Las WCAG 2.0 fueron creados a través del proceso del W3C, en colaboración con personas y organizaciones alrededor del mundo.

31 WCAG Principios WCAG 2.0 Recomendaciones (12 en total) Comprender la recomendacion Criterios de éxito Cómo cumplir los criterios de éxito Compreender los criterios de éxito Técnicas suficientes y aconsejadas

32 32 Principios WCAG 2.0

33 33 Principio 1: Perceptibilidad La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Significa que los usuarios deben ser capaces de percibir la información presentada, no puede ser invisible para todos los sentidos.

34 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 34 Alternativas en Texto Tener alternativas en texto para cualquier contenido no textual

35 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 35 Proporcionar texto alternativo corto para el contenido no-textual que tenga la misma finalidad y presenta las mismas informaciones que el contenido no-textual. Utilizando atributo ALT

36 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 36 Hacer accesible a una imagen Algunos usuarios pueden no ser capaces de ver imágenes, otros utilizam navegadores basados en formato texto que no soportan imágenes, en tanto que otros pueden haber desconectado el soporte para imágenes (por ejemplo, debido a una conexión lenta con Internet)

37 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 37 <body> <img src= img-01.gif" alt=""> El Arco de Triunfo de París (Arc de Triomphe, en francés) es uno de los arcos de triunfo más famosos del mundo. Está ubicado en la plaza Charles de Gaulle, en el extremo oeste de la avenida Champs-Élysées. Antiguamente, el nombre de la plaza era Place de l'étoile. </body>

38 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 38 <body> <img src= img-01.gif" alt=""> El Arco de Triunfo de París (Arc de Triomphe, en francés) es uno de los arcos de triunfo más famosos del mundo. Está ubicado en la plaza Charles de Gaulle, en el extremo oeste de la avenida Champs- Élysées. Antiguamente, el nombre de la plaza era Place de l'étoile. </body>

39 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 39 <body> <img src= img.gif" alt= Foto: Divulgación"> El Arco de Triunfo de París (Arc de Triomphe, en francés) es uno de los arcos de triunfo más famosos del mundo. Está ubicado en la plaza Charles de Gaulle, en el extremo oeste de la avenida Champs-Élysées. Antiguamente, el nombre de la plaza era Place de l'étoile. </body>

40 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 40 <body> <img src="foto-01.gif" alt= Foto del Arco do Triunfo"> El Arco de Triunfo de París (Arc de Triomphe, en francés) es uno de los arcos de triunfo más famosos del mundo. Está ubicado en la plaza Charles de Gaulle, en el extremo oeste de la avenida Champs-Élysées. Antiguamente, el nombre de la plaza era Place de l'étoile. </body>

41 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 41 Tenga en cuenta que, como complemento a los beneficios que implica para los usuarios con discapacidad, el texto equivalente puede ayudar a todos los usuarios a encontrar páginas con mayor rapidez, ya que los robots de búsqueda pueden usar el texto cuando indexen las páginas.

42 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Hacer accesible a una imagen 42

43 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 43 Ejemplos Un botón de búsqueda con el dibujo de una lupa. El texto alternativo debe ser Buscar y no Lupa <img src= lupa.jpg alt= Buscar >

44 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 44 Ejemplos Una figura que muestra como hacer un nudo de corbata, con flechas indicando como hacerlo El texto alternativo debe describir como hacer el nudo en la corbata. <img src= img-01.jpg alt= Ponga las puntas juntas > <img src= img-02.jpg alt= Pase la punta de la izquierda bajo la de la derecha >

45 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 45 Ejemplos Un encabezado que contenga una imagen con las palabras Historia general en texto estilizado debe tener el alt text de esa figura como Historia General <img src= title.jpg alt= Historia General >

46 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 46 Descripción detallada de la imagen Tabla de ventas de octubre Pero si una breve descripción no puede servir para la misma finalidad y presentar las mismas informaciones que el contenido no-textual (por ejemplo, un gráfico o diagrama)?

47 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Técnicas Suficientes 47 Poner un texto alternativo corto que proporcione una breve descripción del contenido no textual Ejemplo: <img src= graphic.jpg alt= Tabla de ventas de octubre > Y una de las técnicas a seguir.

48 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos Poner una descripción larga para elementos no textuales que proporcione y presente la misma información. Utilizando el atributo Longdesc <img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/> IMPORTANTE Algunos lectores de pantalla no soportan el atributo [Longdesc]

49 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos Poner una descripción larga en texto próximo al elemento no textual, con la referencia para la descripción larga en una pequeña descripción. El texto alternativo corto dice: Gráfico de ventas en octubre de los tres mayores vendedores Ventas de octubre muestran Maria liderando con 400 unidades, Michel luego con 389 y Cris es la tercera con 350 unidades. El siguiente párrafo debe ser posicionado justo después del gráfico: Ventas de octubre muestran Maria liderando con 400 unidades, Michel luego con 389 y Cris es la tercera con 350 unidades.

50 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos Poner una descripción larga en otro local con un enlace para ella que está inmediatamente al lado del elemento no textual El texto alternativo corto dice: Gráfico de ventas en octubre de los tres mayores vendedores D Al lado de la imagen, una pequeña imagen con un enlace para una página con la descripción detallada del gráfico (D Link). Al final de la descripción, existe un enlace para retornar al gráfico.

51 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 51 Técnicas suficientes Se contenido no textual está basado en media de tiempo (incluyendo vídeo en vivo y sólo de audio en vivo)? Vídeo en vivo de la Avenida 8 de Octubre, exhibiendo la situación del tránsito

52 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Poner un rótulo que describa la finalidad del audio o vídeo en vivo. 52 Ejemplos Un vídeo en vivo de una avenida con la siguiente descripción Vídeo en vivo de la Avenida 8 de Octubre, exhibiendo la situación del tránsito

53 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 53 Técnicas suficientes Se el contenido no textual es un CAPTCHA?

54 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 54 Poner texto alternativo que describa el objetivo del CAPTCHA Identificar el elemento no textual como un test CAPTCHA a partir de texto alternativo corto. Ejemplo: El texto alternativo del CAPTCHA dice: Teclee las palabras de la imagen

55 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 55 Y

56 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 56 Certificarse que la página web contenga otro CAPTCHA sirviendo el mismo propósito, usando una modalidad diferente. El objetivo de esta técnica reducir las situaciones en que un usuario con deficiencia no consiga completar uno CAPTCHA. Con más de una modalidad de CAPTCHA, es más probable que el usuario sea capaz de completar una de las tareas con éxito.

57 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 57 Ejemplo Teclee las letras de la imagen O teclee las letras habladas en el audio

58 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 58 Ejemplos Teclee el código O Cuánto es siete más dos?

59 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 59 Técnicas suficientes Si el elemento no textual debe ser ignorado por las tecnologías asistivas?

60 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 60 Utilice CSS para incluir imágenes decorativas El objetivo de esta técnica es proporcionar un mecanismo que ponga imágenes meramente decorativas fuera del contenido. <style type="text/css"> body { background: url('/images/home-bg.jpg'); } </style>

61 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 61 Informaciones preservadas Garantizar que las informaciones y las relaciones que están implícitas por el formato visual o auditivo seam preservadas cuando el formato presentado cambiar.

62 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 62 Separar información y estructura de presentación para permitir diferentes presentaciones HTML con CSS Un documento HTML utiliza las características estructurales del HTML, como párrafos, listas, títulos, etc, y evita la presentación recursos como cambios de fuente, etc. EL CSS es usado para formatear el documento con base en sus propiedades estructurales.

63 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 63 Emplee hojas de estilo (CSS) Ventajas de usar hojas de estilo: - Los autores HTML tendrán mayor control sobre sus páginas - Acortarán los tiempos de carga de las páginas, para todos los usuarios

64 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 64 Emplee hojas de estilo (CSS) <font face= Arial, Verdana, Helvetica, sans-serif size= 2 color= black >Su texto</font> body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1em; } Su texto

65 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Emplee hojas de estilo (CSS) <font></font> <font></font><font></font> <font></font><font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS 65

66 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Emplee hojas de estilo (CSS) 66 <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS

67 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. <table> Técnicas suficientes Utilizar la marca table para presentar informaciones tabules <tr> <td> </td> <th>monday</th> <th>tuesday</th> <th>wednesday</th> </tr> <tr> <th>8:00-9:00</th> <td>meet with Sam</td> <td> </td> <td> </td> </tr> <tr> <th>9:00-10:00</th> <td> </td> <td> </td> <td>doctor Williams</td> </tr> </table> 67

68 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. 68 Técnicas suficientes Utilizar elemento caption para asociar tablas de dados Un calendario de eventos con leyenda <table> <caption>schedule for the week of March 6</caption>... </table>

69 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Técnicas suficientes 69 Utilizar el atributo summary del elemento table para dar una visión general de la tabla de dados

70 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Ejemplo Una tabla con un resumen, pero sin leyenda 70 <table summary= Horarios de la ruta 7 siguiendo para el centro. El servicio empieza a las 4h00 y termina a la medianoche. Los puntos son listados en la línea superior. Encuentre el punto más cercano de su localización y lea la columna para encontrar que horas el autobús pasa."> <tr> <th scope="col">state & First</th> <th scope="col">state & Sixth</th> <th scope="col">state & Fifteenth</th> <th scope="col">fifteenth & Morrison</th> </tr> <td>4:00</td> <td>4:05</td> <td>4:11</td> <td>4:19</td> </tr> </table>

71 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Ejemplo Una tabla de dados con resumen y leyenda 71 En este ejemplo, tanto un atributo summary y el elemento caption son usados. El caption identifica la ruta del autobús. El summary ayuda personas invidentes a entender como funciona la tabla. Lectores de pantalla leen la leyenda, seguido por el resumen. <table summary= Horarios de la ruta 7 siguiendo para el centro. El servicio empieza a las 4h00 y termina a la medianoche. Los puntos son listados en la línea superior. Encuentre el punto más cercano de su localización y lea la columna para encontrar que horas el autobús pasa."> <caption>ruta 7 Centro (Días de la semana)</caption> </table>

72 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Técnicas suficientes Utilizar el atributo scope para asociar células de encabezado y células de dados en tablas de dados. Una simples agenda <table border="1"> <caption>contact Information</caption> <tr> <td></td> <td scope="col">name</td> <td scope="col">phone#</td> <td scope="col">city</td> </tr><tr> <td>1.</td> <td scope="row">joel Garner</td> <td> </td> <td>pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">clive Lloyd</td> <td> </td> <td>baltimore</td> </tr> </table> 72

73 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Técnicas suficientes Utilizar los atributos ID y headers para asociar células de dados con células de cabecera en tablas de dados. Una tabla con múltiplas líneas de cabeceras <table> <tr> <th rowspan="2" id="h">homework</th> <th colspan="3" id="e">exams</th> <th colspan="3" id="p">projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table> 73

74 74 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. Significa que los usuarios deben ser capaces de operar la interfaz, la interfaz de interacción no puede requerir la interacción que el usuario no puede ejecutar.

75 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 75 Accesible por Teclado Hacer que toda la funcionalidad quede disponible a partir del teclado.

76 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 76 Técnicas suficientes Asegurar el control de teclado usando las siguientes técnicas. Usar los controles de formulario y enlaces (HTML)

77 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 77 Ejemplos - Enlaces En el ejemplo, el nombre es el texto dentro del enlace, en ese caso Ejemplo de sitio web". <a href=" Ejemplo de sitio web </a>

78 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 78 Ejemplos - Enlaces En el ejemplo, una imagen dentro de un enlace, el atributo "alt" para la imagen da el nombre. <a href=" <img src="example_logo.gif" alt="ejemplo"> </a>

79 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 79 Ejemplos - Enlaces En el ejemplo, el nombre está junto a elementos diferentes dentro del enlace para leer "Texto ejemplo" <a href=" <img src="example_logo.gif" alt= Texto">Ejemplo </a>

80 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. Utilizar el elemento label para asociar rótulos de textos en controles de formularios. 80 Elementos que utilizan label explícitamente asociados: input type="text" input type="checkbox" input type="radio" input type="file" input type="password" textarea select Obs: Elemento Label debe estar posicionado después de los elementos input de type="checkbox" y type="radio"

81 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 81 Ejemplos En un campo de entrada de texto: <label for="firstname">first name:</label> <input type="text" name="firstname" id="firstname" /> En un campo checkbox: <input type="checkbox" id="markuplang" name="computerskills > <label for="markuplang">html</label>

82 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 82 Utilizar el elemento el atributo title para identificar controles de formularios cuando el elemento label no pudiere ser utilizado Ejemplo: Campos de texto para números de teléfono <fieldset> <legend>phone number</legend> <input id="areacode" title="area Code" type="text" size="3" value="" > <input id="exchange title="first three digits of phone number" type="text value="" > <input id="lastdigits title="last four digits of phone number" type="text value="" > </fieldset>

83 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 83 Ejemplos - Radio Fieldset El nombre del campo radio viene del elemento legend. <fieldset> <legend>elija una color:</legend> <input id="red" type="radio" value="red" /> <label for="red">rojo</label><br /> <input id="blue" type="radio" value="blue" /> <label for="blue">azul</label><br /> <input id="green" type="radio" value="green" /> <label for="green">verde</label> </fieldset> Elija una color: Rojo

84 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 84 Ejemplos - botones El ejemplo usa el atributo value, en este caso, Salvar, Enviar, o Reset como nombre. <input type="button" value="salvar" /> <input type="submit" value= Enviar" /> <input type="reset" value="reset" />

85 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 85 Ejemplos - botones El ejemplo usa el atributo "alt", en este caso, Salvar, como el nombre <input type="image" src="save.gif" alt= Salvar" />

86 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 86 Saltar contenido Poner un enlace en la parte superior de cada página que va directamente para el área de contenido principal

87 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. Ejemplos <p><a href="#content">saltar para el contenido principal</a></p> <h2>main Navigation</h2> <ul> <li><a href="#subnav">sub Navigation</a></li> <li><a href="/a/">link A</a></li> <li><a href="/b/">link B</a></li> <li><a href="/c/">link C</a></li>... <li><a href="/j/">link J</a></li> </ul> <div> <h2 id="content">título del contenido</h2> <p>now that I have your attention...</p> </div> Un enlace Saltar para el contenido principal 87

88 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. Ejemplos 88 <p><a href="#content"> Saltar para el contenido principal </a></p> <h2>main Navigation</h2> <ul> <li><a href="#subnav">sub Navigation</a></li> <li><a href="/a/">link A</a></li> <li><a href="/b/">link B</a></li> <li><a href="/c/">link C</a></li>... <li><a href="/j/">link J</a></li> </ul> <div> <h2> <a name = content id="content"> </a> Título del contenido </h2> <p>now that I have your attention...</p> </div> El lector de pantalla WebVox, desarrollado por la UFRJ, muy utilizado por deficientes visuales en Brasil no lee el atributo id de un elemento para enlace. Para que el software entienda esa característica, es necesario el uso del atributo name.

89 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 89 Agrupación de bloques de material repetido Agrupación de bloques de material repetido de una forma que puede ser ignorada.

90 Principio 1: Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. Técnicas suficientes Utilizar H1-H6 para identificar cabeceras el inicio de cada sección de contenido 90 H1 H2 H3 H3 H2 H3 H3

91 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. Ejemplos 91 <h1>search Technical Periodicals</h1> <h2>search</h2> <form action="search.php"> <p><label for="searchinput">enter search topic: </label> <input type="text" size="30" id="searchinput"> <input type="submit" value="go"></p> </form> <h2>available Periodicals</h2> <div class="jlinks"> <a href="pcoder.com">professional Coder</a> <a href="algo.com">algorithms</a> <a href="jse.com">journal of Software Engineering</a> </div> <h2>search Results</h2>... search results are returned in this section... Este exemplo organiza las secciones de una página de búsqueda através del marcaje de cada título de sección usando elementos h2.

92 Principio 2: Operabilidad Los componentes de la interfaz de usuario y la navegación deben ser operables. 92 Técnicas suficientes Usar elementos estructurales para agrupar enlaces <a name="categories" id="categories"></a> <h2>product Categories</h2> <ul class="navigation"> <li><p><a href="kitchen.html">kitchen</a></p></li> <li><p><a href="bedbath.html">bed & Bath</a></p></li> <li><p><a href="dining.html">fine Dining</a></p></li> <li><p><a href="lighting.html">lighting</a></p></li> <li><p><a href="storage.html">storage</a></p></li> </ul> Usando listas para agrupar enlaces. En este ejemplo, los enlaces son agrupados usando los elementos ul y li.

93 93 Principio 3: Comprensibilidad La información y el manejo de la interfaz de usuario deben ser comprensibles. Significa que los usuarios deben ser capaces de comprender la información y el funcionamiento de la interfaz de usuario, el contenido o la operación no puede ir más allá de su comprensión.

94 Principio 3: Comprensibilidad La información y el manejo de la interfaz de usuario deben ser comprensibles. 94 Lenguaje de la página El lenguaje humano pre-definida de cada página Web puede ser determinada de forma programática.

95 Principio 3: Comprensibilidad La información y el manejo de la interfaz de usuario deben ser comprensibles. Técnicas suficientes Usando atributos de idioma en el elemento HTML 95 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>...document écrit en français... </body> </html> Este ejemplo define el contenido de un documento HTML para ser en el idioma francés.

96 Principio 3: Comprensibilidad La información y el manejo de la interfaz de usuario deben ser comprensibles. Ejemplo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> </head> <body>...document écrit en français... </body> </html> Este ejemplo define el contenido de un documento con XHTML 1.1 en el idioma francés. 96

97 Principio 3: Comprensibilidad La información y el manejo de la interfaz de usuario deben ser comprensibles. Técnicas suficientes Usando atributos de idioma en el elemento HTML 97 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>...document écrit en français <span lang= en >and english</span>... </body> </html> Pueden ocurrir cambios en el idioma dentro de la página

98 98 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Significa que los usuarios deben tener acesso a los contenidos como las tecnologías evolucionan, como la tecnología y los agentes de usuario evolucionar, el contenido debe seguir siendo accesible.

99 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. 99 Análisis del contenido Los elementos deben: - Disponer de marcas de inicio y de fin completas, - Estar encajados de acuerdo con las respectivas especificaciones, -No contener atributos duplicado Nota: Elementos que tienen tags, tanto inicial cuanto final, incompletas, falta de uno señal de menor o barra invertida o la aplicación de uno atributo incorrecto, son considerados elementos incompletos.

100 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Técnicas suficientes Validar las páginas Web 100 El objetivo de esta técnica es evitar ambigüedades en páginas de la Web que muchas veces resultan en código que no valida contra especificaciones formales.

101 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Técnicas suficientes Usando HTML de acuerdo con la especificación 101 El objetivo de esta técnica es el uso de HTML y XHTML de acuerdo con sus respectivas especificaciones.

102 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Técnicas suficientes Usando HTML de acuerdo con la especificación 102 HTML <img src= img.gif alt= > XHTML <img src= img.gif alt= />

103 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Técnicas suficientes Asegurar que apertura y cierre de tags seamos utilizadas de acuerdo con la especificación (HTML) 103 El objetivo de esta técnica es evitar errores que son conocidos por causar problemas para las tecnologías de apoyo cuando están intentando analizar el contenido.

104 Principio 4: Robustez El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas. Técnicas suficientes Asegurar que apertura y cierre de tags seamos utilizadas de acuerdo con la especificación (HTML) 104 <div><b>texto </b> <p><a href= link.htm >Texto </p></a>

105 Validación 105 La validación de la accesibilidad debe ser hecha por herramientas automáticas y revisión humana. Los métodos automáticos son generalmente rápido, pero no son capaces de identificar todos los puntos de la accesibilidad. La revisión humana puede ayudar a asegurar la claridad del lenguaje y la facilidad de navegación. 1 - Utilizar una herramienta de accesibilidad automatizada, y una herramienta de validación de navegadores. Vale recordar que las herramientas de software no apuntan todas las cuestiones de la accesibilidad, tais como claridad de un texto, aplicabilidad de uno equivalente textual.

106 Validación Validar la Sintaxis (ex., HTML, XHTML) Validar las hojas de estilo (ex., CSS).

107 Validación Utilice un navegador de solo texto o emulador 5 - Utilice varios navegadores gráficos, con: - Gráficos y sonido de los activos; - Sin gráficos; - Sin sonido; - Sin ratón; - Sin visualización de frames, scripts, hojas de estilo o applets. 6 - Utilice varios navegadores, antiguos y nuevos. 7 - Utilice un navegador de voz, un lector de pantalla, software de magnificación, una pantalla pequeña.

108 Validação Utilizar los correctores ortográficos y gramaticales. La eliminación de los problemas de gramática aumenta el nivel de comprensión. 9 - Revisar el documento para mayor claridad y simplicidad Invitar a las personas con discapacidad a la revisión de los documentos.

109 Estadísticas Pesquisa online con 665 usuarios de lectores de pantalla - Los datos fueron recogidos en octubre de Fuente: WebAIM - (Una organización sin fines de lucro en el Centro para Personas con Discapacidad en Utah State University USA ) Fuente: WebAIM -

110 Estadísticas 110 Respuesta % Described as "Photo of smiling lady" 57.1% Described as "Smiling lady" 20.2% Ignored entirely by my screen reader 12.8% Described as "Our company is personable and friendly" 9.9% Fonte: WebAIM -

111 Estadísticas 111 Some images, such as charts, diagrams, or comic strips, are too complex to describe in only a few words. If a long, detailed description of these images is available, how would you prefer to have it presented to you? Respuesta % As text on the web page, immediately following the image 28.4% As optional text, available on the same page but only if I request it by following a link 26.6% On a separate page, available by following a link 19.8% As a very long description (alt text) on the image itself 14.2% On a separate page, announced by and available to my screen reader 9.1% Ignored entirely by my screen reader 1.9% Fonte: WebAIM -

112 Estadísticas 112 Fonte: WebAIM -

113 Estadísticas 113 Respuesta % Web content has become more accessible 46.3% Web content accessibility has not changed 33.3% Web content has become less accessible 20.4% Fonte: WebAIM -

114 Estadísticas 114 Respuesta % Lack of awareness of web accessibility 38.0% Lack of web accessibility skills or knowledge 27.6% Fear that accessibility will hinder the look, feel, or functionality 25.7% Lack of budget or resources to make it accessible 8.6% Fonte: WebAIM -

115 Tema musical del WCAG " Queremos mostrarles WCAG El video es una creación de David MacDonald, que canta la canción en las calles. El video también muestra las personas con distintos tipos de discapacidad que utilizan tecnologías de asistencia. El video se basa en 4 principios de las WCAG ) El sitio web debe ser "Perceivable" (todos los elementos deben ser discernibles) 2) El sitio web debe ser "Operable" (operativo, navegable) 3) El sitio web debe ser "Understandable" (comprensible) 4) El sitio web debe ser Robust (accesible con cualquier tipo de tecnología, actuales y futuras, incluyendo las tecnologías de asistencia). Fuente: Rede Saci

116 Documentos de apoyo de las WCAG Cómo cumplir las Pautas Una lista concisa y personalizable que incluye todas las pautas, criterios de éxito y técnicas que los autores pueden emplear para desarrollar y evaluar contenido web. Comprender las Pautas Una guía para comprender e implementar las Pautas 2.0. Se trata de un breve documento de comprensión para cada pauta y criterio de éxito perteneciente a las pautas así como de tópicos clave. Técnicas para las Pautas Una colección de técnicas y errores conocidos, cada una en un documento independiente, que incluye la descripción de la misma, ejemplos, código y pruebas. Documentos de las Pautas Diagrama y descripción de cómo se relacionan y vinculan entre sí los documentos técnicos.

117 Links importantes 117 WCAG 1.0 Inglês: Español: WCAG 2.0 Inglês: Español: WAI (Web Accessibility Initiative ): Lista de los validadores de accesibilidad: HTML Validator: CSS Validator: W3C Escritório Brasil

118 118 Por una web para todos! W3C Escritório Brasil