PDF de programación - Páginas WEB Accesibles - Guideline 1. Provide equivalent alternatives to auditory and visual content

Páginas WEB Accesibles

Guideline 1. Provide equivalent alternatives to auditory and

visual content

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Programación

Universidad Complutense de Madrid

2 de diciembre de 2005

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

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

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

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

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Checkpoints I

1.1 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 1]

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Checkpoints II

1.2 Provide redundant text links for each active region of a

server-side image map. [Prioridad 1]

1.3 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 1]

1.4 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 1]

1.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]

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

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.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Alternativas textuales II

Ejemplos de d-link:

< img src = " p r e d i c c i o n . png " alt = " Mapa del tiempo ( España 3 1 / 0 3 / 0 5 ) "

l o n g d e s c = " p r e d i c c i o n . txt " >

<a href = " p r e d i c c i o n . txt "

title = " P r e d i c c i ó n del tiempo en formato texto ( España 3 1 / 0 3 / 0 5 )

<a href = " p r e d i c c i o n . txt "

title = " S e l e c c i o n a el enlace para una d e s c r i p c i ó n en texto " >

< img src = " p r e d i c c i o n . png "

alt = " Mapa del tiempo ( España 31/03/05) ,

s e l e c c i o n a para una d e s c r i p c i ó n de texto " >

</ a >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Alternativas textuales III

En grandes lí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 lí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 = " t r i a n g l e . xbm " ALT = " Warning : " > Lee las i n s t r u

Sustituye al texto Es necesario incluir una descripción más

detallada.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

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="")

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Consejos I

Consejos de Jukka “Yucca” Korpela.
http://www.cs.tut.fi/~jkorpela/html/alt.html

1 Para una imagen que contiene un texto, poner ese texto.

2 Para un logo, hay diferencias: alt="Patata" o

alt="Patata logo".

3 Para una imagen púramente decorativa alt=""

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Consejos II

4 Para una imagen “espaciadora”: alt=" "; una imagen que es
una bola de una lista alt="item:" alt="*" ; separador de
enlaces alt="*" alt="|" .

5 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" .

6 Si la imagen que representa un carácter o símbolo

The < img SRC = " alpha . gif " ALT = " alpha " > r a d i a t i o n ...

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Consejos III

7 Si una ilustración está explicada en el texto, alt="".

8 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.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Consejos IV

9 Fórmulas matemáticas. Hasta que MathML esté extendido .

Z ∞

0

e x 2

dx

Dependiendo de la audiencia,

los matemáticos deberían entender LATEX
alt="\int_{0}^{\infty}e^{x^2}dx"
alt="Fórmula de Schroedinger"

10 Los contadores de páginas ¿son útiles?

11 Si el texto de alt es largo (más de 50 caracteres), usar otros

mecanismos.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Consejos V

12 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.

13 Si la imagen es un client-side map de, poner el objetivo global

en alt.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Frames I

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 F r a m e s e t // EN "

" http :// www . w3 . org / TR / html4 / f r a m e s e t . dtd " >

< HTML >
< HEAD > < TITLE >A simple f r a m e s e t d o c u m e n t </ TITLE > </ HEAD >
< F R A M E S E T cols = " 20 % , 80 % " >

< F R A M E S E T rows = " 100 , 200 " >

< FRAME src = " c o n t e n t s _ o f _ f r a m e 1 . html " >
< FRAME src = " c o n t e n t s _ o f _ f r a m e 2 . gif " >

</ F R A M E S E T >
< FRAME src = " c o n t e n t s _ o f _ f r a m e 3 . html " >
< N O F R A M E S >

<P > This f r a m e s e t d o c u m e n t c o n t a i n s :
< UL >

< LI > <A href = " c o n t e n t s _ o f _ f r a m e 1 . html " > Some neat c o n t e n t s <
< LI > < IMG src = " c o n t e n t s _ o f _ f r a m e 2 . gif " alt = " A neat image " >
< LI > <A href = " c o n t e n t s _ o f _ f r a m e 3 . html " > Some other neat c o n

</ UL >

</ N O F R A M E S >

</ F R A M E S E T >
</ HTML >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Frames II

Se sule ignorar el <noframes>, o incluso peor:

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 F r a m e s e t // EN "

" http :// www . w3 . org / TR / html4 / f r a m e s e t . dtd " >

< HTML >
< HEAD > < TITLE >A simple f r a m e s e t d o c u m e n t </ TITLE > </ HEAD >
< F R A M E S E T cols = " 20 % , 80 % " >

< F R A M E S E T rows = " 100 , 200 " >

< FRAME src = " c o n t e n t s _ o f _ f r a m e 1 . html " >
< FRAME src = " c o n t e n t s _ o f _ f r a m e 2 . gif " >

</ F R A M E S E T >
< FRAME src = " c o n t e n t s _ o f _ f r a m e 3 . html " >
< N O F R A M E S >

<P >I am sorry , but your browser does not support frames

</ N O F R A M E S >

</ F R A M E S E T >
</ HTML >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles