Académique Documents
Professionnel Documents
Culture Documents
Accesibilidad Web
Captulo III Accesibilidad Web | 121
Accesibilidad Web
Acceso sin barreraspor Humberto
Demarco
Fig. 1. Dibujado
por Charles
McCathieNevile,
1999
No todos los interesados cuentan con las mismas posibilidades a la hora de pretender
acceder a un sitio o portal de Internet.
Hace unos das atrs, una persona me cont la experiencia que tuvo que vivir una
amiga de ella, que sufri un accidente de trnsito y por ello adquiri una discapacidad
motriz a partir de ese momento.
122 | Captulo III Accesibilidad Web
Esta situacin imposible de predecir, determin que a partir de ese momento, esta
joven y su familia se vieran obligados a mudarse de su casa de dos plantas a otra de
una sola.
Las escaleras y las puertas angostas constituyeron solamente algunos de los ejemplos
de las insalvables barreras existentes, que obligaron a esta familia a tener que mudarse
de un sitio al que antes consideraban ideal.
Se preguntar usted que tiene que ver este suceso con la accesibilidad de los sitios
Web.
Por ejemplo, las personas con discapacidad visual o auditiva se ven limitadas
notoriamente en su accionar.
Por lo expuesto, resulta importante dotar de accesibilidad a los portales estatales, para
democratizar el acceso a la informacin.
Estamos convencidos de que las principales barreras no son las arquitectnicas o las
de un sitio Web, sino que son las barreras mentales las que nos impiden avanzar ms
rpido para poder lograr beneficiar a todas y todos por igual.
Captulo III Accesibilidad Web | 123
Introduccin
Este captulo ofrece un resumen que permita a los responsables de sitios Web,
administradores de contenidos o personal tcnico relacionado con el desarrollo
y mantenimiento de sitios Web entender, implementar o buscar estrategias para
implementar accesibilidad en los sitios Web del estado.
Para crear este documento se han investigado las mejores prcticas difundidas
por diferentes organizaciones, tales como W3C, el comit de Normas del
Gobierno de Chile, e INTECO entre otras, las cuales las encontrar detallada en
las Referencias.
Accesibilidad Web
1
WAI Web Accessibility Initiative o Iniciativa para la Accesibilidad Web. Es una rama del World Wide Web Consortium que vela por la
accesibilidad de la Web. Ver Anexo I Pautas, directrices y Buenas prcticas disponibles
124 | Captulo III Accesibilidad Web
En particular los portales del estado son un recurso muy importante para la
comunicacin, difusin y prestacin de servicios de gobierno, lograr que estos
sean accesibles ser un paso muy importante hacia un acceso equitativo y en
igualdad de oportunidades para las personas.
Captulo III Accesibilidad Web | 125
Sus beneficios
Una pgina Web accesible puede aumentar la participacin de las personas con
discapacidad, por brindar la capacidad de percibir, entender, navegar e
interactuar.
a usuarios que puede ser que no tengan discapacidades pero tengan los
ojos ocupados o las manos ocupadas, ambiente ruidoso o necesidad de
silencio, ancho de banda estrecho o tamao de pantalla o colores
limitados.
Igualdad de uso: El diseo debe ser fcil de usar y adecuado para todas
las personas independientemente de sus capacidades y habilidades.
Seminario SIDAR
Pgina: http://www.sidar.org/recur/desdi/usable/dudt.php
Captulo III Accesibilidad Web | 127
4. La presentacin y maquetacin:
http://www.codexexempla.org/traducciones/pautas-accesibilidad-
contenido-Web-2.0.htm
Estas pautas establecen que los sitios Web deben ser perceptibles, entendibles,
operables y robustos. Estos cuatro principios engloban una serie de directrices
que permiten mejorar y eliminar aquellos elementos que bloquean o interfieren
el acceso a la Web, en particular a las personas con discapacidad.
Segn los criterios y pautas que logre aplicar en su sitio Web es el nivel de
accesibilidad. Estos son indicados como A, AA y AAA. Puede ocurrir que
tengan accesibilidad parcial, dado que solo algunas pginas cumplen los
requisitos.
Pautas
Perceptibles
Los usuarios deben ser capaces de percibir la informacin que se presenta en las
pginas de su sitio Web (no puede ser invisible a todos sus sentidos).
Ejemplo
http://www.aytovillamayor.es/ayuntamiento/index.php
1.2.1. Contenidos A Colocar texto alternativo que los describa y en los casos
de solo audio o que sea posible colocar la transcripcin completa del audio
solo video o el video.
pregrabados
Ejemplo
Ejemplo
Nota:
Ejemplo
1.2.7 Audio AAA Cuando las pausas del audio en un vdeo son insuficientes
descripcin para permitir que la audiodescripcin transmita el sentido
extendida del vdeo, se proporciona una audio descripcin extendida
(pregrabada): para todo contenido de vdeo. Esto implicar que el video
tenga pausa por partes para que la audio descripcin
pueda correr.
Ejemplo
Importante:
Ejemplo
Ejemplo
Ejemplo:
Ejemplo
Ejemplo
1.4.1 Empleo del A No utilice el color como el nico medio visual para transmitir una
color: informacin, indicar una accin, provocar una respuesta o
distinguir visualmente un elemento.
Ejemplo
Campos de un formulario
Distinguir vnculos
1.4.3 Contraste AA La presentacin visual del texto y las imgenes de texto tienen
(mnimo) una relacin de contraste de al menos 4.5:1, excepto para los
siguientes casos:
1.4.4 Variar el AA Debe ser posible variar el tamao del texto hasta un 200% sin
tamao de texto necesidad de emplear tecnologa de apoyo. Al variar el tamao
del texto no se deben perder contenidos ni funcionalidades.
1.4.6 Contraste AAA La presentacin visual del texto y las imgenes de texto tienen
(aumentado) una relacin de contraste de al menos 7:1 excepto para los
casos mencionados en el punto 1.4.3.
1.4.7 Bajo o sin AAA Compruebe que no hay un sonido de fondo o si existe es muy
sonido de fondo bajo tal que permite distinguir fcilmente las conversaciones.
1.4.9 Imgenes de AAA Solo se utilizarn imgenes de texto para decorar cuando no
texto sin excepcin transmitan informacin o no se pueda presentar de otra forma
como por ejemplo un logotipo.
Captulo III Accesibilidad Web | 141
Operable
La interfaz de usuario y sus componentes de navegacin deben ser operables,
deben permitir interaccin con ellos. No puede existir un control o componente
que no pueda accionarse por los usuarios.
Haga que todas las funcionalidades estn disponibles a travs del teclado.
2.1.1 Teclado. A Toda funcionalidad del contenido debe ser accesible mediante
teclado y de forma independiente del tiempo, salvo aquellas que no
pueden ser realizadas como por ejemplo un dibujo a mano alzada.
2.1.2 Sin trampa de A El foco del teclado debe poder moverse para todos los elementos
teclado o teclado no de navegacin de la pgina.
bloqueado:
El foco debe poder moverse hacia un componente de la pgina y
fuera de este por medio de teclado u otro mtodo de salida
estndar.
En caso que el usuario deba usar otro mtodo para moverse debe
estar indicado explcitamente.
142 | Captulo III Accesibilidad Web
2.2.1 Lmite de A Si la pgina o aplicacin tiene un lmite de tiempo debe permitir que
tiempo ajustable los usuarios puedan completar la tarea. Para eso deber disponer
de opciones que permitan apagar, ajustar o aumentar el tiempo
lmite.
informacin.
2.3.1 Tres destellos A No debe existir ningn contenido que produzca ms de tres
o debajo del umbral destellos en cualquier perodo de un segundo, a menos que estos
destellos ocupen un rea inferior al 25% de un campo visual de 10
a una distancia normal de trabajo, o sean de bajo contraste y no
contenga demasiado rojo.
2.3.2 Tres detalles AAA No deber crear ningn contenido que destelle ms de 3 veces por
segundo
144 | Captulo III Accesibilidad Web
2.4.1 Saltar bloques A Existe un mecanismo que permite saltar bloques de contenido
o accesos directos. que se repiten en mltiples pginas Web.
Ejemplo
2.4.2 Ttulo en las A Las pginas Web deben tener un ttulo que describa e informe
pginas: su tema o propsito.
2.4.3 Orden de foco A Los componentes de su pgina deben recibir el foco en un orden
que permita navegar secuencialmente y con un orden lgico e
intuitivo.
2.4.4 Propsito de A Los vnculos o enlaces que coloque en las pginas deben tener
un vnculo (en su una descripcin lo suficientemente clara para identificar su
contexto): propsito. Esta descripcin puede estar directamente en el
enlace o en los prrafos que lo rodean.
Ejemplo
Ejemplo
2.4.6 Encabezados y AA Los encabezados y las etiquetas de las pginas deben describir
etiquetas el tema o propsito. Esto se aplica tanto a las etiquetas en los
controles de los formularios como a los encabezados que desea
utilizar dentro de una pgina. En este ltimo caso busca dotar de
una secuencia lgica al texto.
Ejemplo
Cometidos
Cometidos sustantivos
2.4.7 Foco visible AAA Deben distinguirse claramente el foco actual del teclado. Esto
deber comprobarlo visualmente, observando cmo se desplaza
el foco al utilizar el tabulador sobre la pgina donde se
encuentra.
Ejemplo
Ejemplo
2.4.9 Propsito de AAA Este criterio se aplica solo a los vnculos. Debe identificar el
los vnculos propsito de cada vnculo por medio exclusivo del texto del
propio vnculo.
Ejemplo Leer ms
2.4.10 Encabezados AAA Utilizar encabezados de seccin para organizar los contenidos.
de seccin Este criterio afecta a la forma de desarrollar los contenidos en
cada pgina y como estructurarlos mejor, para lograr que sean
fciles de leer.
Captulo III Accesibilidad Web | 147
Comprensible
La informacin y el funcionamiento de la interfaz de usuario debe ser
comprensible, los usuarios deben ser capaces de comprender fcilmente la
informacin y el funcionamiento de la interfaz.
3.1.5 Nivel de AAA Al desarrollar los contenidos, cuando encuentre algunos texto
lectura ms complejos que requieran un nivel de lectura ms avanzado,
proporcione una versin complementaria que no exija ms
habilidad que la de una persona con nivel de educacin primaria
148 | Captulo III Accesibilidad Web
3.1.6 Pronunciacin AAA Si dentro de un contenido utiliza una palabra que deba llegar
una pronunciacin especfica para comprender su significado,
proporcione la pronunciacin seguida a la palabra o mediante un
vnculo a un glosario.
3.2.5 Cambio a AAA Los cambios de contexto se inician solo a peticin del
peticin: usuario, o existe un mecanismo para desactivar tales
cambios.
Captulo III Accesibilidad Web | 149
Ejemplo
Ejemplo
3.3.6 Prevencin de AAA En las pginas Web que requieran que el usuario enve
errores (todo error): informacin sin importar de que tipo sea, cualquier accin
debe poder ser reversible, la informacin debe poder ser
verificada y/o confirmada.
Captulo III Accesibilidad Web | 151
Robusto
Su sitio Web y debe ser lo suficientemente robusto para permitir que perdure
en el tiempo, que se mantenga accesible, que sea compatible con las tecnologas
de ayuda que disponen usuarios discapacitados para acceder a la informacin.
4.1.1 Interpretacin A Para los contenidos que haya implementado usando HTML/XHTML
verifique que los elementos cuentan con etiquetas completas de
apertura y cierre, que se anidaron correctamente y que no tienen
atributos duplicados.
4.1.2 Nombre, rol, A Este criterio est pensado para aquellos que desarrollan o
valor programen su interfaz de usuario.
Ejemplo
http://validator.w3.org/
Una vez que se accede al sitio Web oficial se presenta la siguiente pantalla, la
cual contiene tres vistas que le permiten validar por la URL de la pgina,
validar el archivo y validar el marcado completo de un contenido:
154 | Captulo III Accesibilidad Web
Pasos a seguir:
Esta opcin permite listar los mensajes de error agrupados por tipo de
error.
Presenta los mensajes de error asociados con las lneas de cdigo fuente
donde se detectan.
Clean up Markup with HTML Tidy (Limpiar Marcado con HTML Tidy)
Informe HTML
Primera seccin
Segunda seccin
Esta seccin presenta las opciones seleccionadas en una primera instancia para
realizar el proceso de validacin. En caso de querer realizar un nuevo proceso
de validacin con otras opciones indquelas y haga clic en el Revalidate
(Revalidar).
158 | Captulo III Accesibilidad Web
Tercera seccin
Cuarta seccin
La herramienta presenta:
Quinta seccin
W3C confiere distintos logotipos que pueden ser utilizados en aquellas pginas
Web que hayan pasado con xito el proceso de validacin de una tecnologa
determinada.
Ejemplo
En la pgina de la herramienta
http://validator.w3.org/docs/help.html#validation_basics,
160 | Captulo III Accesibilidad Web
A modo de ejemplo:
<p>
<a href="http://validator.w3.org/check/referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
</a>
</p>
Esta herramienta ayuda a comparar y corregir en caso que sea necesario, las
Hojas de Estilo en Cascada (CSS) con las especificaciones tcnicas CSS. De
esta manera se pueden encontrar errores comunes, tipogrficos o usos
incorrectos. La herramienta tambin presenta los riesgos relacionados con la
usabilidad de la CSS.
http://jigsaw.w3.org/css-validator/
La versin es gratuita.
162 | Captulo III Accesibilidad Web
Una vez que se accede al sitio Web oficial se presenta la siguiente pantalla, la
cual contiene tres vistas que le permiten validar por la URL de la pgina con
CSS o solo el CSS, validar un archivo y validar cdigo directamente:
Pasos a seguir:
Perfil (Profile)
Las Advertencias
Medio
Los nombres para los distintos tipos de medios estn asociados a los
dispositivos de destino. Algunos de ellos son:
-Todos: medio adecuado para todos los dispositivos.
-Braille: dispositivos de retro alimentacin tctil Braille.
-Impresin: destinados para documentos a ver en pantalla en
modo vista previa de impresin.
-Pantalla: destinados principalmente a pantallas color.
-Proyeccin: destinados a presentaciones proyectadas, como
por ejemplo los proyectores.
-Televisin: destinados a los dispositivos de tipo televisin
(baja resolucin, color, sonido disponibles).
Informe HTML
Primera seccin
Los Errores
Captulo III Accesibilidad Web | 165
Las Advertencias
W3C confiere distintos logotipos que pueden ser utilizados en aquellas Hojas de
Estilo en Cascada (CSS) que hayan pasado con xito el proceso de validacin.
A modo de ejemplo:
Ejemplo
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
</a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
</a>
</p>
Validacin de la Accesibilidad
http://www.tawdis.net/
Pasos a seguir:
Pautas utilizadas
La versin TAW3 Online WCAG 2.0 analiza las tecnologas HTML y CSS.
Los resultados son presentados de acuerdo a las tres categoras descriptas, por
cantidad total y organizados por cada principio (Perceptible, Operable,
Comprensible y Robusto).
Puede seleccionar en la parte superior del informe las diferentes vistas: Vista
Marcada, Detalle y Listado.
na: No aplicable.
Nota:
Es necesario recordar que para que el resultado final sea exitoso siempre se
deben validar los posibles problemas de accesibilidad manuales del sitio Web.
Las herramientas automticas no realizan una evaluacin completa. Por ende, al
no asegurar que el nivel de accesibilidad es de un 100%, es necesario realizar
pruebas adicionales utilizando herramientas de evaluacin manual.
Vista Detalle
La informacin de anlisis.
Ejemplo
---Topologa:
--- Comprobacin:
--- Nmero de lneas: 114, 147, 159, 172, 181, 193, 196, 203, 232, 247, 249.
Ejemplo
A modo de ejemplo:
(X)HTML
<span class="tawlogo">
<acronym title="Test de accesibilidad Web versin 3">
t<span style="color: rgb(255, 0, 0);">.</span>
a<span style="color: rgb(220, 131, 16);">.</span>
w<span style="color: rgb(0, 170, 0);">.</span><sup>3</sup>
</acronym>
<span class="tnivel"><abbr title="Nivel A - WCAG 1.0
WAI">A</abbr></span></span>
http://validator.w3.org/checklink
Link Checker
Una vez que se accede al sitio Web oficial se presenta la siguiente pantalla:
Pasos a seguir:
A modo de ejemplo, esta opcin presenta los enlaces que no estn rotos pero
donde el documento no utiliza la direccin exacta (URL), proponiendo la
direccin de vinculacin final en aras de ganar velocidad en las bsquedas.
Dont send the Referer header (No envo del encabezado Referer)
176 | Captulo III Accesibilidad Web
Informe HTML
Primera seccin
---For reliable link checking results, check HTML validity first. See also CSS
validity
Segunda seccin
Tercera seccin
En esta seccin se presentan los resultados del anlisis, con el listado de los
links (URL) en los cuales se detectaron problemas junto con el detalle de las
acciones sugeridas a realizar (List of broken links and other issues) y el listado
de los hiperlinks duplicados o vacos (Anchors).
178 | Captulo III Accesibilidad Web
http://validator.w3.org/mobile/
Una vez que se accede al sitio Web oficial se presenta la siguiente pantalla:
Pasos a seguir:
Informe HTML
http://www.achecker.ca/checker/index.php
Una vez que se accede al sitio Web oficial se presenta la siguiente pantalla:
Haga clic en el Link de Registro, de esta manera crear una cuenta de usuario
en el sistema.
182 | Captulo III Accesibilidad Web
---Guidelines
Esta vista presenta las directrices que gestiona este sistema en particular.
---Profile
En esta vista se gestionan los datos relacionados con la persona que efectu el
login (nombre, apellido, cambio de password, cambio de direccin de e.mail,
etc.).
184 | Captulo III Accesibilidad Web
-Enable HTML Validator (Activar HTML Validator). Cuando esta opcin esta
activada la herramienta enva el contenido al W3C Servicio de Validacin de
Marcado (http://validator.w3.org/) el cual identifica errores de marcado (ver
Validador (X)HTML de W3C).
contra las cuales evaluar. Por defecto, la casilla WCAG 2.0 (Level AA) ya se
encuentra seleccionada.
Una vez realizada la revisin, se presenta un informe con todos los problemas
de accesibilidad detectados:
Logotipo
1. Perceptibilidad
El criterio de Perceptibilidad (en ingls perceivable content) indica que la
informacin debe ser presentada a los usuarios de la forma en que stos pueden
percibirla.
En el caso particular de las imgenes, se debe especificar en todos los casos una
descripcin corta en el atributo alt, del tag <img>. Para proveer una descripcin
completa, es posible especificar un enlace a una pgina que la contenga, en el
atributo longdesc del tag <img> que corresponde a la imagen. Esta tcnica
asegura el cumplimiento de la pauta, pero se recomienda para una solucin
ptima presentar a un lado de la imagen un texto corto que la describa, y un
enlace a la descripcin completa. La ventaja de esta tcnica es que se podr
utilizarla tambin para otros contenidos no textuales, de manera que la forma de
acceso a los textos alternativos sea homognea.
188 | Captulo III Accesibilidad Web
Ejemplo
Asociar un tag <label> a cada campo de entrada de datos del formulario (tags
<input> de tipo text, checkbox, radio, file o password), igualando el
atributo for del tag label al id del tag input
<label for="idApellido">Apellido:</label>
Ejemplo
<h1>Exportacin de reporte</h1>
<p>
</p>
</form>
Para este objetivo, una tcnica razonable consiste en colocar una descripcin
corta de texto en una posicin adyacente al elemento no textual.
CAPTCHA2:
2
Un captcha (en ingls Completely Automated Public Turing test to tell Computers and Humans Apart) es un mecanismo
que permite determinar si quien accede a una aplicacin o un sitio Web es un humano o una mquina.
190 | Captulo III Accesibilidad Web
Decoracin o formato
Las imgenes que se utilicen nicamente para decoracin deben tener atributo
alt= , para indicar que la tecnologa asistiva no debe anunciar su existencia.
Una mejor alternativa es el uso de imgenes declaradas slo en las hojas de
estilo CSS, mediante propiedades como background, background-image, que
permiten especificar imgenes para los elementos del HTML, independientes
del contenido.
Ejemplo
Veamos un ejemplo correcto de un sitio con las imgenes y sin las imgenes.
Ejemplo
Veamos otro ejemplo de un sitio con las imgenes y sin las imgenes.
En los casos en los que el audio o video no es el contenido principal, sino que
constituye un contenido alternativo para una versin de texto, como en el caso
de animaciones que ilustran un contenido textual, alcanza con identificarlos
como tales por una descripcin textual adyacente, como se explica en el punto
1.1.1.
En los casos en los que el audio o video no es el contenido principal, sino que
constituye un contenido alternativo para una versin de texto, como en el caso
de videos ilustrativos para un contenido textual, es suficiente la tcnica
descripta en 1.1.1 de identificar el texto con una descripcin textual.
Otra forma de asegurar que los subttulos siempre estn disponibles para el
usuario es integrarlos directamente a la imagen del video (hardsubs en
ingls). Esto es posible a travs de programas de edicin de video, y adems
existen programas dedicados especficamente a esta tarea. Una alternativa
disponible de forma libre es Avidemux, disponible en
http://fixounet.free.fr/avidemux/ (en ingls), a travs del plugin Subtitler.
En los casos en los que el audio o video no es el contenido principal, sino que
constituye un contenido alternativo para una versin de texto, como en el caso
de videos ilustrativos para un contenido textual, como se indica en los casos
anteriores es suficiente la tcnica descripta en 1.1.1 de identificar el texto con
una descripcin textual.
Para esto pueden usarse varias tcnicas que requerirn distintos niveles de
esfuerzo. La alternativa ms simple consiste en grabar la pista de
audiodescripcin mientras se lee el video, y asociar el archivo de audio al video
desplegado, como pista complementaria de audiodescripcin. Si estos videos se
publican en Adobe Flash, las herramientas recomendadas en 1.2.2 permiten la
publicacin de estos archivos de audiodescripcin. Otra posibilidad consisten
en ofrecer como alternativa otro video que reemplace completamente el audio
original por otro que contenga la audiodescripcin, o incluso una alternativa
que agregue pausas que permitan una audiodescripcin detallada cuando sea
necesario.
Captulo III Accesibilidad Web | 195
El World Wide Web Consortium recomienda una herramienta para este fin en el
siguiente enlace (en ingls): http://www.w3.org/TR/2008/NOTE-WCAG20-
TECHS-20081211/G9
Para el cumplimiento de esta pauta se puede hacer uso de las tcnicas en 1.2.3,
sin la posibilidad de brindar una alternativa textual. En este caso, todos los
videos que se muestran deben contar con audiodescripcin.
Adaptabilidad
El propsito de este principio es asegurar que toda la informacin del sitio se
encuentra disponible en un formato que pueda ser percibido por cualquier
usuario, como por ejemplo: hablado o presentado en una forma visualmente
ms sencilla.
Si estos formatos pueden ser determinados por el software, entonces podrn ser
presentados a los usuarios en diferentes formas (visual, audible, tctil) segn
sus necesidades. Si por el contrario la informacin est embebida en la
presentacin de tal forma que el programa no pueda determinar la tcnica
196 | Captulo III Accesibilidad Web
Destacar los ttulos con espaciados especiales, por ejemplo doble espaciado
para los ttulos ms importantes.
Documentos en HTML
Utilizar los tags <h1>, <h2> y <h3> para definir encabezados de texto y <p>
para los diferentes prrafos.
Captulo III Accesibilidad Web | 197
Ejemplo
<h2>Principio de igualdad</h2>
<h2>Principio de accesibilidad</h2>
Inflexiones en el texto
Citas
Contamos con el elemento <q> para demarcar citas cortas, <blockquote> para
citar bloques de texto y <cite> para referenciar a las fuentes.
Ejemplo
Aqu se presenta un ejemplo sencillo del uso de tags para inflexiones, citas en el
texto y abreviaciones:
<p>
</p>
</p>
</p>
<p>
</p>
<p>
Captulo III Accesibilidad Web | 199
</p>
Estos son los tags HTML que tienen mejor soporte en el software de
accesibilidad disponible , pero no son los nicos tags semnticos disponibles
que se pueden utilizar. Existen adems otros tags para distintos usos de
destaque (DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM tal
como se especifica en http://www.w3.org/TR/html4/struct/text.html#h-9.2.1 (en
ingls).
Junto con estas tcnicas, es conveniente utilizar estilos CSS para manejar la
presentacin del contenido, que permitan separar la distribucin lgica del
contenido de su presentacin. Ver Anexo Estructura de HTML y CSS, C22, o el
original en ingls en el sitio de World Wide Web Consortium:
http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/C22).
200 | Captulo III Accesibilidad Web
Para esto es deber asegurarse que el contenido HTML tenga el mismo orden
que lo que se despliega en pantalla, y evitar tcnicas que alteren visualmente el
orden de los elementos en pantalla.
Alcanza para el cumplimiento de este criterio evitar las instrucciones que slo
refieran por ejemplo al color o forma de un elemento en pantalla. En el caso de
un texto que refiere al botn de abajo a la derecha, debe ser reemplazado por
botn con la etiqueta Siguiente de abajo a la derecha.
Distinguible
Este principio busca garantizar que todos los usuarios puedan ver y escuchar el
contenido que incluye una pgina, separando claramente el contenido
propiamente dicho (en ingls foreground) de los elementos que forman parte
del contexto o fondo (en ingls background)
Captulo III Accesibilidad Web | 201
A la hora de elegir y utilizar paletas de colores para las pginas que contienen
texto, es necesario tener en cuenta el cumplimiento de este punto.
Si por algn motivo se desea mantener textos de bajo contraste con el fondo,
existe la alternativa de no cumplir con el punto en la versin principal y brindar
un enlace alternativo, con el mismo contenido textual, y cumpliendo los
requerimientos de contraste mnimo. Por supuesto, el enlace mediante el cual se
accede a esta alternativa s tiene que cumplir con el requerimiento de contraste
mnimo.
Asimismo, tambin es necesario probar que el aumento del tamao del texto
hasta el 200% no deforma la presentacin visual hasta el punto de hacerla difcil
de leer.
Slo son aceptables las imgenes de texto en los casos en que la presentacin es
esencial, como ejemplo en el logo de producto. En estos casos se admiten
imgenes de texto, adems de una descripcin textual alternativa con las
tcnicas descriptas en 1.1.1 .
Operabilidad
La interfaz de usuario, sus componentes y su navegacin deben ser operables.
Esto significa que los usuarios deben poder interactuar con la interfaz para
poder lograr sus objetivos.
Teclado (A)
Un punto relevante es que slo se admite que las formas de entrada de teclado
dependan del tiempo cuando esto sea imprescindible para la interaccin
esperada.
Tiempo suficiente
La interfaz debe proveer a los usuarios de suficiente tiempo para leer y utilizar
el contenido.
En el primer caso, las tcnicas son mltiples, comenzando con evitar los scripts
que desplazan el texto a leer, o por supuesto, comprobar a travs de pruebas el
cumplimiento de este criterio. Este desplazamiento puede lograrse por mltiples
tcnicas, y cada una de ellas tiene sus propias formas de asegurar el
cumplimiento.
Se busca evitar que estos tiempos mximos generen problemas al usuario con
dificultades de accesibilidad.
Debido a que las sesiones se implementan en el lado del servidor, las tcnicas
concretas a utilizar difieren de acuerdo a las tecnologas utilizadas y a la
configuracin de cada aplicacin.
Como regla general, ser necesario proveer algn mecanismo para asegurar que
las sesiones se mantienen abiertas por un tiempo configurable o por todo el
tiempo en el que se est usando la pgina.
Ejemplo
request.getSession().setMaxInactiveInterval(20 * 3600);
Ejemplo
Session.Timeout = 20 * 60;
Esto podra generar problemas de seguridad con usuarios que dejaran sus
ventanas abiertas despus de haber terminado de trabajar con la aplicacin. Por
esto, el mecanismo de keepalive puede ser opcional, y estar disponible para ser
activado en todas las pginas de la aplicacin, de acuerdo a la necesidad del
usuario.
Captulo III Accesibilidad Web | 207
Un ltimo caso en el que pueden generarse problemas con los lmites de tiempo
arbitrario es en el de las pginas de redireccin con lmite de tiempo.
Esto no cumple con el criterio 2.2.1. Para cumplir alcanza con poner el tiempo
de espera en 0:
Ejemplo
response.sendRedirect("/pagina2.jsp");
Ejemplo
Response.Redirect("/pagina2.aspx")
208 | Captulo III Accesibilidad Web
Ejemplo
Ejemplo PHP:
<?php
header("Location: http://www.example.com/pagina2.php");
?>
Tambin para este contenido si comienza a actualizarse sin accin alguna del
usuario y es presentado junto con otro contenido, debe proveerse un mecanismo
para detener, pausar o esconderlo, salvo que la animacin sea parte esencial del
contenido o la interaccin.
No provocar ataques
Los individuos que tienen problemas de fotosensibilidad pueden ser afectados
por contenido que parpadea a ciertas frecuencias si el parpadeo se mantiene ms
de unos pocos ciclos.
Captulo III Accesibilidad Web | 209
Una tcnica simple para comprobarlo es obtener una captura de pantalla y hacer
la medida del contenido sobre el resultado. Si se comprueba que el tamao de
todos los elementos que parpadean es inferior al mximo propuesto, se cumple
con este criterio.
Navegable
El objetivo de este principio es ayudar a los usuarios a encontrar el contenido
que necesitan, a la vez que mantiene control de su ubicacin en el sitio. Estas
tareas son habitualmente ms difciles para los usuarios con discapacidades.
formato de los bloques del documento y para el usuario seleccionar las partes
que desea leer.
Ejemplo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina Principal</title>
</head>
<body>
...
</body>
</html>
Para cumplir con esta pauta es imprescindible que toda pgina tenga una URL,
algo que a pesar de resultar simple no est tan extendido como debera,
producto de los sitios construidos con Flash u otras tcnicas de programacin.
En los casos en los que los encabezados no son aplicables, se puede etiquetar
cualquier elemento HTML que tenga id=idElemento con un tag <label
for=idElemento> , de forma anloga al primer ejemplo del apartado
1.1.1 . Incluso, si no se desea mostrar esta etiqueta en el despliegue usual, puede
ocultarse esta etiqueta mediante hojas de estilo, asignando una clase invisible
para el elemento label.
mediante su uso, como por ejemplo la posibilidad de utilizar contraste alto para
los cursores.
Comprensible
Este principio tiene como finalidad permitir que todo el contenido textual pueda
ser ledos por los usuarios y las tecnologas que los asisten, as como garantizar
que la informacin necesaria para comprenderlos est a su alcance.
Legible
El idioma (espaol, ingls, etc.) de cada pgina debe estar determinado por el
fuente HTML de la pgina.
Ejemplo
<head>
...
</head>
<body>
...
</body>
</html>
214 | Captulo III Accesibilidad Web
Predecible
Las pginas deben operar de modo previsible, es decir, de la forma que sugiere
su apariencia.
En foco (A)
Cuando un componente recibe el foco, no debe iniciar ningn cambio al
contexto. Para ello, es necesario evitar el uso de eventos de foco para disparar
comportamientos de la pgina.
Se recomienda evitar manipular el foco del teclado en este evento, por ejemplo:
Ejemplo
Estos cambios deben ser evitados siempre que no se haya avisado al usuario de
que se trata del comportamiento normal.
En los casos en los que estos cambios de contexto no sean esperables por el
usuario, se proveer una descripcin textual previa y adyacente en la estructura
del documento, para que el usuario comprenda el resultado que tendr la accin.
En el caso de los envos de formularios, si bien esto genera un cambio de
contexto, alcanza con utilizar slo botones de tipo submit para ejecutar esa
accin, ya que es el comportamiento esperable. Si hay otra accin que enviar
el formulario, ser necesario explicarlo en un texto adyacente al elemento que la
activar. Por ejemplo, si la seleccin de una lista enviar el formulario, el
documento tendr un texto antes de esta lista, que anuncie el envo del
formulario.
Ejemplo
La tcnica ms til para este punto es utilizar los mecanismos del software
disponible (templates, includes, generacin de contenidos) para generar los
elementos de navegacin de la misma manera en todas las pginas del sitio. Se
busca evitar la generacin manual de pginas de navegacin, que podran no ser
consistentes en su estructura.
216 | Captulo III Accesibilidad Web
Es deseable utilizar clases CSS con nombres descriptivos, a fin de que las
tecnologas asistivas consigan identificar la funcin de los bloques del
documento.
De todas maneras, para las operaciones que por su naturaleza son irreversibles,
es necesario contar con alguna salvaguarda para evitar errores.
Una advertencia previa al control que realiza la accin, que explique sus
consecuencias en lenguaje claro y simple. Si fuera necesario, proveer adems
un enlace a una explicacin ms detallada.
218 | Captulo III Accesibilidad Web
Robustez
El contenido debe ser diseado de una forma robusta, de tal modo que pueda ser
interpretado en forma confiable por una amplia variedad de programas de
usuario, incluyendo aquellos que implementan tecnologas de asistencia a la
discapacidad.
Compatible
Este principio tiene como fin maximizar la compatibilidad de las pginas con
los programas de usuario actuales y futuros, incluyendo las tecnologas de
asistencia.
Interpretacin (A)
Las siguientes propiedades CSS son tiles para dar estilo al texto, evitando la
necesidad de utilizar texto en imgenes.
color para elegir el color del texto o de los bloques que lo contienen.
Contenidos Flash
En el caso de los contenidos publicados en Adobe Flash la tcnica ms simple
es proveer una alternativa textual. Si se construyera un sitio basndose
extensamente en esta tecnologa, el siguiente enlace en ingls provee tcnicas
para generar Adobe Flash accesible.
Contenidos pdf
En el caso de los archivos PDF, deben seguirse lineamientos similares a los
necesarios para asegurar cumplimiento en HTML. En el siguiente enlace se
pueden encontrar algunas recomendaciones para generar documentos PDF
accesibles, desde la produccin del documento original, si se parte de un
documento de Microsoft Word, hasta la generacin y adaptacin del PDF, con
Adobe PDF Maker, y Adobe Acrobat.
Web Accesible
Adems de este estudio automtico, se han realizado otro tipo de pruebas para
verificar los puntos de accesibilidad en este sitio Web.
Este tipo de teclas se utilizan para poder navegar por el portal del <nombre del
organismo> de forma accesible. Se han programado un grupo de teclas de
acceso rpido que recogen las secciones del men principal (men de pestaas).
Las teclas de acceso rpido son las siguientes:
1: Pgina de Inicio
2: Institucional
3: Eventos
4: .
6: Enlaces
8: Contactar
Captulo III Accesibilidad Web | 225
s: Ir o saltar al contenido
Poltica de Accesibilidad
Este sitio Web pretende ser accesible para todos en igualdad de condiciones, no
obstante, si se encuentra con alguna dificultad o desea hacer algn comentario o
sugerencia, no dude en contactar con nosotros a travs del email
webmaster@bde.es.
226 | Captulo III Accesibilidad Web
Tabla de Contenido
Accesibilidad Web ............................................................................................................................... 121
1. Perceptibilidad......................................................................................................................... 187
C22: Usar CSS para controlar la presentacin visual del texto ....................................................... 220