Introducción a la accesibilidad web Apuntes clase 3a http://accesibilidadweb.dlsi.ua.es/formacion/introduccion-a-la-accesibilidad-web-1/ Sergio Luján Mora Ángel Andrés Cabañero Resta
Contenido Contenido... 2 Tipografía... 3 Atributo longdesc o alt en imágenes?... 4 Si usamos mapas de imágenes... 6 Vídeos... 9 Colores... 10 Estructuración del código... 10 2
Tipografía Hace algunos años, muchos diseñadores web que se empeñaban en usar determinadas tipografías en Internet que llenaban las páginas de imágenes innecesarias con el fin de mantener dicha tipografía (las imágenes se realizaban con programas como Adobe Photoshop). Eso ya ha pasado a la historia gracias a CSS3, que nos permite que nuestro navegador cargue una determinada tipografía a partir de un URL. Una aplicación gratuita que nos permite llevar a cabo esta tarea es Google Web Fonts 1, donde únicamente deberemos de seleccionar la tipografía que nos satisfaga y a continuación copiar el código proporcionado en nuestro CSS. Además, Google Web Fonts genera código compatible con diferentes navegadores. Para la Web, se recomienda utilizar tipografías del tipo sans serif (de palo seco) en vez de serif (más elaboradas), porque las pantallas están compuestas por píxeles, son un medio discreto que puede alterar algunos detalles de las tipografías de tipo serif. 1 Internet: http://www.google.com/webfonts 3
Atributo longdesc o alt en imágenes? Aunque mucha gente los equivoque, estos dos atributos tienen una clara diferencia. El atributo alt nos debe indicar una descripción corta de la imagen siempre que sea esta necesaria. Pero, cuándo es necesaria?, qué casos hay? Estas preguntas están contestadas en WCAG 2.0. Estas normas dividen en 6 los posibles casos: 1. alt para una imagen sencilla: con indicar básicamente en qué consiste el dibujo, es suficiente. <img src= 45643.jpg alt= casa /> 2. alt con una imagen que es un enlace: el texto alternativo ha de ser claro y conciso. Esto suele ocurrir en muchas páginas donde se usa una foto que suele ser su logotipo para volver al índice 4
<img src= 45643.jpg alt= Volver al índice /> 3. alt para un gráfico o una imagen que requiera una explicación detallada: en este caso, haremos una descripción simple y utilizaremos el atributo longdesc mencionado anteriormente. El atributo longdesc tan sólo debe contener una url y dicha url contendrá una explicación detallada y minuciosa del gráfico o de la imagen. <img src= 45643.jpg alt= Gráfico desc= http://www... /> 4. Animaciones: en este caso dependerá del tipo de animaciones, como si se tratase de una imagen. Es decir, para animaciones simples, bastará con una breve descripción en el atributo alt y para animaciones más complejas o que requieran una explicación más detallada, nos serviremos del atributo desc. 5. Texto o símbolos: si una imagen representa un texto, en el atributo alt, deberemos poner el texto escrito en la imagen. Esto es una prueba <img src= 45643.jpg alt= Esto es una prueba /> 6. Imágenes decorativas: se puede dejar el atributo alt como vacío o nulo, ya que se trata de imágenes para embellecer la página y sin ellas, la comprensión es la misma. Pero en cualquier caso, EL ATRIBUTO ALT SIEMPRE DEBE APARECER. 5
<img src= 45643.jpg alt= /> El atributo longdesc, como hemos visto, sirve para redirigir hacia una página alternativa donde aparece explicada completamente una imagen o gráfico. La siguiente pregunta que nos deberíamos hacer es cuál es la longitud máxima del atributo alt? No existe una norma que nos diga debe ocupar 53 caracteres ya que esto depende de muchos factores como puede ser el idioma, por ejemplo y aun estando en un mismo idioma, depende mucho del autor que estemos leyendo. No obstante, y como media, la W3C cifra en 100 caracteres la longitud máxima del atributo alt para el inglés. Si usamos mapas de imágenes Si usamos mapas de imágenes hay que tener en cuenta que esos mapas de imágenes deben tener su texto en el cliente y no en el servidor. Si se tuviese en el servidor, también debería estar un texto alternativo en el cliente para los lectores de pantalla. Un buen ejemplo de este tipo de mapas lo podemos encontrar en la página sobre los centros sanitarios del Sistema Nacional de Salud que podemos encontrar en la web del Ministerio de Sanidad, Política Social e Igualdad 2 : El código HTML del mapa de imagen es: 2 Internet: http://www.msps.es/ciudadanos/prestaciones/centrosserviciossns/hospitales/busquedaca/frmbusque daca.jsp 6
<map name="frontpagemap" id="mapacomunidades"> <area shape="poly" coords="354, 207, 341, 211, 334, 221, 329, 236, 327, 238, 322, 218, 319, 209, 325, 203, 324, 196, 314, 195, 315, 183, 307, 178, 315, 164, 312, 156, 326, 162, 339, 147, 341, 133, 352, 131, 362, 138, 348, 163, 340, 172, 337, 186" href="detallehospitalesca.jsp?comunidad=10" alt="valencia"/> <area shape="poly" coords="326, 249, 314, 249, 305, 250, 301, 254, 296, 248, 292, 237, 290, 229, 300, 224, 308, 218, 309, 207, 318, 206, 322, 215, 320, 221, 324, 224, 320, 228, 325, 238" href="detallehospitalesca.jsp?comunidad=14" alt="murcia"/> <area shape="poly" coords="271, 66, 289, 71, 298, 80, 279, 79, 268, 88, 260, 76, 267, 66, 276, 64, 280, 66, 279, 64, 287, 70, 279, 67" href="detallehospitalesca.jsp?comunidad=17" alt="la Rioja"/> <area shape="poly" coords="298, 41, 305, 38, 310, 42, 306, 49, 313, 52, 323, 51, 309, 80, 308, 87, 298, 83, 301, 77, 294, 72, 283, 68, 289, 55" href="detallehospitalesca.jsp?comunidad=15" alt="navarra"/> <area shape="poly" coords="266, 34, 274, 33, 289, 42, 297, 37, 290, 49, 286, 61, 277, 66, 271, 57, 266, 52, 261, 45" href="detallehospitalesca.jsp?comunidad=16" alt="país Vasco"/> <area shape="poly" coords="326, 54, 334, 58, 339, 56, 345, 58, 364, 60, 364, 88, 358, 96, 361, 100, 355, 112, 355, 130, 347, 130, 340, 131, 340, 143, 335, 150, 327, 156, 326, 163, 319, 157, 316, 153, 310, 152, 301, 147, 305, 134, 301, 121, 292, 113, 297, 100, 300, 85, 312, 90, 310, 79, 316, 64" href="detallehospitalesca.jsp?comunidad=2" alt="aragón"/> <area shape="poly" coords="152, 150, 161, 149, 169, 142, 190, 151, 197, 152, 198, 166, 205, 181, 216, 185, 209, 201, 198, 210, 188, 218, 183, 227, 172, 228, 159, 224, 149, 222, 138, 216, 142, 205, 148, 196, 152, 190, 145, 185, 137, 176, 141, 168, 153, 170, 153, 159" href="detallehospitalesca.jsp?comunidad=11" alt="extremadura"/> <area shape="poly" coords="265, 155, 259, 139, 257, 127, 253, 115, 267, 113, 281, 119, 289, 121, 296, 117, 308, 132, 302, 146, 309, 155, 316, 160, 320, 167, 313, 173, 309, 180, 316, 184, 322, 188, 317, 197, 325, 199, 327, 205, 323, 209, 317, 206, 309, 210, 310, 217, 304, 221, 293, 227, 284, 233, 282, 227, 280, 214, 262, 214, 246, 217, 230, 217, 221, 216, 210, 208, 213, 199, 218, 189, 221, 181, 207, 180, 204, 166, 198, 159, 207, 153, 224, 154, 238, 153, 249, 167" href="detallehospitalesca.jsp?comunidad=7" alt="castilla La Mancha"/> <area shape="poly" coords="229, 38, 246, 32, 255, 35, 260, 38, 249, 43, 238, 51, 226, 51, 216, 48, 208, 45" href="detallehospitalesca.jsp?comunidad=6" alt="cantabria"/> <area shape="poly" coords="157, 29, 180, 30, 188, 23, 195, 26, 213, 32, 222, 37, 215, 43, 194, 45, 185, 46, 179, 46, 164, 51, 157, 48, 152, 36, 161, 27, 179, 29, 178, 27, 188, 22, 178, 26" href="detallehospitalesca.jsp?comunidad=3" alt="asturias"/> <area shape="poly" coords="422, 146, 471, 7
144, 472, 160, 455, 166, 445, 189, 422, 179, 404, 200, 385, 206, 381, 186, 404, 182" href="detallehospitalesca.jsp?comunidad=4" alt="baleares"/> <area shape="poly" coords="249, 117, 254, 128, 256, 141, 262, 153, 261, 157, 249, 159, 242, 163, 242, 156, 235, 151, 221, 149, 226, 142, 231, 133, 238, 127" href="detallehospitalesca.jsp?comunidad=13" alt="madrid"/> <area shape="circle" coords="300, 339, 11" href="detallehospitalesca.jsp?comunidad=19" alt="melilla"/> <area shape="circle" coords="187, 328, 12" href="detallehospitalesca.jsp?comunidad=18" alt="ceuta"/> <area shape="poly" coords="366, 59, 368, 54, 380, 59, 383, 57, 386, 68, 393, 66, 403, 70, 422, 70, 432, 63, 436, 73, 432, 81, 410, 99, 405, 105, 391, 109, 377, 115, 369, 126, 376, 126, 370, 133, 360, 134, 354, 129, 359, 121, 356, 118, 360, 110, 359, 103, 361, 99, 357, 94, 367, 77" href="detallehospitalesca.jsp?comunidad=9" alt="cataluña"/> <area shape="poly" coords="134, 258, 146, 256, 152, 256, 162, 271, 165, 275, 166, 283, 170, 292, 178, 297, 190, 304, 193, 294, 204, 287, 211, 286, 224, 278, 239, 276, 252, 281, 263, 277, 272, 280, 280, 274, 290, 276, 300, 259, 301, 253, 293, 248, 292, 236, 284, 232, 275, 229, 279, 221, 273, 215, 255, 218, 240, 217, 223, 219, 216, 211, 202, 206, 191, 216, 184, 230, 179, 224, 174, 233, 162, 228, 149, 224, 136, 239" href="detallehospitalesca.jsp?comunidad=1" alt="andalucía"/> <area shape="rect" coords="3, 274, 151, 351" href="detallehospitalesca.jsp?comunidad=5" alt="canarias"/> <area shape="poly" coords="162, 50, 172, 47, 181, 43, 187, 48, 194, 45, 205, 46, 210, 39, 214, 50, 225, 53, 235, 58, 242, 54, 241, 44, 252, 42, 258, 48, 260, 55, 259, 61, 264, 65, 260, 76, 261, 90, 275, 89, 287, 85, 302, 89, 290, 90, 297, 104, 286, 112, 281, 119, 271, 113, 257, 109, 243, 120, 232, 131, 225, 141, 217, 147, 212, 151, 203, 152, 197, 148, 186, 144, 167, 139, 158, 140, 157, 126, 167, 108, 178, 98, 167, 92, 168, 83, 155, 82" href="detallehospitalesca.jsp?comunidad=8" alt="castilla y León"/> <area shape="poly" coords="99, 42, 104, 34, 117, 29, 129, 32, 127, 21, 135, 17, 141, 20, 155, 28, 148, 36, 157, 43, 158, 52, 153, 62, 160, 70, 155, 80, 147, 87, 133, 88, 125, 85, 123, 76, 111, 78, 101, 80, 109, 69, 111, 56, 103, 58, 102, 50" href="detallehospitalesca.jsp?comunidad=12" alt="galicia"/> </map> Si nos centramos en el mapa, podemos ver los siguientes elementos: <map name= NombreDelMapa id= IdMapa > <area shape= < <poly> <circle> <rect> > cords= <coordenadas> href= <link> alt= <texto> /> </map> Las coordenadas dependerán del tipo de figura: 8
cords= x1 y1 x2 y2 Rectángulo cords= x1 y1 radio Círculo cords= x1 y1 x2 y2 xn yn Polígono Vídeos Los vídeos han de estar sincronizados con una descripción auditiva, además del empleo de uso de subtítulos. De esta forma, tanto usuarios con problemas auditivos como con problemas de 9
visión podrán ver el vídeo sin ningún tipo de problemas. Para ello, existe una tecnología llamada SMIL 3 que permite sincronizar texto, imágenes y audio. El Centro Español de Subtitulado y Audiodescripción 4 ofrece información sobre el subtitulado. Colores Si se emplean colores para mostrar algo, por ejemplo, Escoge la lista amarilla hemos de indicar esto también mediante campos alternativos. De esta forma, cualquier persona con deficiencias visuales podrá acceder correctamente a la información. Estructuración del código Para que una página web sea completamente accesible, es imprescindible que su código HTML sea correcto y esté libre de errores. Una buena práctica para hacer que usuarios invidentes o con problemas encuentren rápidamente la información es emplear los encabezados (h1, h2, etc.) para dividir y estructurar lógicamente el contenido de la página. Pongamos por ejemplo un periódico. Un periódico visto para una persona sin ningún tipo de deficiencia física, consta de un índice que te lleva rápidamente a una noticia, por qué no emplear también esta técnica en una página? Es decir, imaginémonos que somos un lector de pantalla. Por qué tenemos que leer de una en una las noticias hasta encontrar aquella que buscábamos? No sería más fácil dividirlas en varios bloques e ir tan sólo al bloque interesante para nosotros? Con esta simple división lógica del trabajo, podríamos facilitar enormemente la lectura a personas con algún tipo de deficiencia. En la siguiente imagen vemos una captura de la página principal del periódico El País 5. Podemos utilizar la herramienta HeadingsMap 6, un complemento para el navegador Mozilla Firefox, para comprobar si la página contiene encabezados y se emplean correctamente. En el caso de la página de El País existen numerosos errores, ya que existen saltos entre los niveles de encabezado. A continuación también podemos ver la página principal del periódico El Mundo 7. En este caso los encabezados sí que se emplean correctamente. 3 Internet: http://www.w3.org/audiovideo/ 4 Internet: http://www.cesya.es/ 5 Internet: http://www.elpais.com/ 6 Internet: https://addons.mozilla.org/es-es/firefox/addon/headingsmap/ 7 Internet: http://www.elmundo.es/ 10
11
12