Páginas WEB Accesibles. Alternativas. Guideline 1. Provide equivalent alternatives to auditory and visual content. Luis Fernando Llana Díaz

Transcripción

1 Guideline. Provide equivalent alternatives to auditory and visual content Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid de diciembre de 008 Alternativas Alternativas de texto a información no textual. El texto se puede transformar de forma sencilla a otros formatos: sintetizadores de voz, braille... Alternativas no textuales. Las imágenes, vídeos y sonidos pueden ayudar a entender la información

2 Checkpoints I. Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). This includes: images, ascii art, images used as list bullets, spacers, graphical buttons, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, scripts, frames, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Prioridad ]. Provide redundant text links for each active region of a server-side image map. [Prioridad ] Checkpoints II. Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation. [Prioridad ]. For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. [Prioridad ].5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map. [Prioridad ]

3 Alternativas textuales I El arte de rellenar bien las alternativas de texto. Qué información transmite la imagen? alt texto alternativo a la imagen, no una descripción. title el título del elemento, se aplica a todos los elementos. longdesc enlace a una descripción detallada. Al no funcionar en los navegadores, conviene añadir un d-link. Alternativas textuales II Ejemplos de d-link: <img src =" prediccion. png " alt =" Mapa del tiempo ( Espa~na /0/05) " longdesc =" prediccion. txt "> <a href =" prediccion.txt " title =" Predicción del tiempo en formato texto ( Espa~na /0/05) ">D </a> <a href =" prediccion.txt " title =" Selecciona el enlace para una descripción en texto "> <img src =" prediccion. png " alt =" Mapa del tiempo ( Espa~na /0/05), selecciona para una descripción de texto "> </a> 5 6 Predicción del tiempo Sin alternativas: http: //antares.sip.ucm.es/~luis/accesibilidadweb08-09/ ejemplos/textos/tiempo/tiempo.html Con alternativas: http: //antares.sip.ucm.es/~luis/accesibilidadweb08-09/ ejemplos/textos/tiempo/tiempoalt.html

4 Alternativas textuales III En grandes ĺıneas, las imágenes pueden ser: Decorativas no aportan nada al discurso alt="". Formato Se usan para dar espacios adicionales alt=" ", simular listas alt="*", simular ĺıneas de separación alt="". A evitar, mejor usar CSS. Apoyo al texto el atributo alt depende de la misión del tráfico. <IMG SRC =" triangle. xbm " ALT =" Warning :"> Lee las instrucciones. Sustituye al texto Es necesario incluir una descripción más detallada. Alternativas textuales IV Lo estoy haciendo bien? El test del teléfono. Imagina que le estás contando el contenido de la página a otra persona vía telefónica. Abrir la página con lynx Pierdo información? Las alternativas son pesadas? Es malo quedarse corto, pero también lo es pasarse (alt="")

5 Consejos I Consejos de Jukka Yucca Korpela. Para una imagen que contiene un texto, poner ese texto. Para un logo, hay diferencias: alt="patata" o alt="patata logo". Para una imagen púramente decorativa alt="" Para una imagen espaciadora : alt=" "; una imagen que es una bola de una lista alt="item:" alt="*" ; separador de enlaces alt="*" alt=" ". Consejos II Símbolos (flechas) de navegación, suelen estar juntos y deberían incluir separadores, e.g., alt=", Siguiente" o alt=" Siguiente". A evitar gráficos ascii alt="==>" o alt="volver a XXXX". Si la imagen que representa un carácter o símbolo The <img SRC=" alpha. gif " ALT=" alpha "> radiation... Si una ilustración está explicada en el texto, alt="". Si una imagen es rica de contenido, alt un texto más completo. Habría que usar longdesc. Hasta que funcione es necesario el uso de un d-link.

6 Consejos III Frames I Fórmulas matemáticas. Hasta que MathML esté extendido. 0 e x dx Dependiendo de la audiencia, los matemáticos deberían entender L A TEX alt="\int_{0}^{\infty}e^{x^}dx" alt="fórmula de Schroedinger" Los contadores de páginas son útiles? Si el texto de alt es largo (más de 50 caracteres), usar otros mecanismos. Si está dentro de un enlace <a href=...>...</a> y es lo único que aparece; no poner alt="enlace a..., alt="ir a..., los navegadores deberían representar los enlaces como tales. Si la imagen es un client-side map, poner el objetivo global en alt. <! DOCTYPE HTML PUBLIC " -// WC // DTD HTML.0 Frameset // EN" " http :// org /TR/ html / frameset. dtd "> <HTML > <HEAD ><TITLE >A simple frameset document </ TITLE ></ HEAD > <FRAMESET cols="0 %, 80 %"> < FRAMESET rows ="00, 00 "> <FRAME src =" contents_of_frame. html "> <FRAME src =" contents_of_frame. gif "> <FRAME src =" contents_of_frame. html "> <NOFRAMES > <P> This frameset document contains : <UL > <LI ><A href=" contents_of_frame. html ">Some neat contents </A> <LI ><IMG src=" contents_of_frame. gif " alt="a neat image "> <LI ><A href=" contents_of_frame. html ">Some other neat contents </A> </UL > </ NOFRAMES > </HTML >

7 Frames II Se sule ignorar el <noframes>, o incluso peor: <! DOCTYPE HTML PUBLIC " -// WC // DTD HTML.0 Frameset // EN" " http :// org /TR/ html / frameset. dtd "> <HTML > <HEAD ><TITLE >A simple frameset document </ TITLE ></ HEAD > <FRAMESET cols="0 %, 80 %"> < FRAMESET rows ="00, 00 "> <FRAME src =" contents_of_frame. html "> <FRAME src =" contents_of_frame. gif "> <FRAME src =" contents_of_frame. html "> <NOFRAMES > <P>I am sorry, but your browser does not support frames </ NOFRAMES > </HTML > Captchas Soluciones Puzzles lógicos. Salida de audio.