WCAG 1.0. Autor: Juan Manuel Carrero Leal (CESyA)
Está accediendo a un recurso audiovisual que tiene como objetivo
explicar de manera más intuitiva las pautas WCAG 1.0.
Para comprender los contenidos que se van a presentar en este video es
necesario: Conocimiento de HTML, y CSS. Si no tuviera formación al respecto,
debe formarse antes. Póngase en contacto con la
coordinadora o profesorado para facilitarle libros y apuntes.
Se debe instalar el siguiente software o programas:
Varios navegadores: Internet Explorer, Mozilla Firefox, Google Chrome, etc…
como mínimo 2.
Barras de desarrollo y evaluación: Para IE: IE Developer Toolbar.
Para Mozilla Firefox: Web Developer.
Herramienta de análisis de contraste de color: Colour Contrast Analyser.
PAUTAS WCAG 1.0 En las WCAG 1.0 nos encontramos
con 14 pautas que se deben cumplir para hacer un sitio web accesible.
Cada una de las pautas tiene distintos puntos de verificación.
Cada punto de verificación tiene un nivel de prioridad.
Prioridad 1 (A). Un desarrollador de contenidos TIENE que satisfacer
este punto o de lo contrario uno o más grupos de usuarios encontrarán
imposible acceder a la información.
Prioridad 2 (AA). Un desarrollador de contenidos DEBE satisfacer este punto
o de lo contrario uno o más grupos encontrarán dificultades en el acceso
a la información.
Prioridad 3 (AAA). Un desarrollador de contenidos PUEDE satisfacer este
punto o de lo contrario uno o más grupos encontrarán alguna dificultad
al acceder a la información.
Pauta 1, formada por 5 puntos de verificación.
Proporcione alternativas equivalentes para el contenido
visual y auditivo.
Los textos alternativos al contenido visual o auditivo benefician a
personas ciegas y/o sordas y a aquellos usuarios que deciden anular la
descarga de imágenes y/o sonidos (velocidad acceso a Internet limitada).
Los equivalentes no textuales, como pueden ser dibujos o vídeos, benefician
a personas analfabetas o con dificultades en la lectura.
Como ejemplo se va a ver el punto de verificación 1.1 de nivel A:
Proporcione un texto equivalente para todo elemento no textual
(por ejemplo, a través de “alt”, “longdesc”
o en el contenido del elemento.
En este ejemplo se va a demostrar qué es el texto
alternativo en una imagen y cómo incluirlo en código HTML de la página.
Para ello, hacemos click con el botón derecho del ratón sobre la imagen,
seleccionamos ver información de la imagen y en propiedades aparece como
asociado el texto alternativo que se ha incluido a la imagen, en este caso:
´Presentación del CESyA´. Este será el texto que verán los usuarios de la
web que por algún motivo no tengan acceso a la visualización de la imagen.
Ahora, vamos a ver cómo ese texto alternativo es incluido en el código
HTML de la página. Para ello, click con el botón derecho sobre cualquier parte
de la pantalla y pinchamos en ver código fuente de la página. En el código
HTML de la página, podemos ver cómo dentro de la etiqueta de imagen, se
encuentra el atributo ALT que define el texto alternativo para la imagen.
En este caso como veíamos: ´Presentación del CESyA´.
Los ejemplos de este vídeo se han realizado utilizando el navegador
Mozilla Firefox, pero se pueden encontrar funcionalidades similares
en el resto de navegadores.
Pauta 2, compuesta por 2 puntos de verificación.
No se base sólo en el color. Los textos y gráficos
deben comprenderse sin necesidad de ver los colores. El cumplimiento de
esta pauta beneficia a personas con dificultades para ver los colores
y a usuarios que utilizan pantallas monocromáticas. Como ejemplo se verá
el punto de verificación 2.2 nivel AA: Asegúrese de que las combinaciones de
colores de fondo y primer plano tengan el suficiente contraste para que
sean percibidas por personas con deficiencias de percepción de color
o en pantallas en blanco y negro.
Para comprobar que los colores de la página web
cumple con los estándares en lo referido al contraste entre color de letra y
color de fondo, vamos a utilizar la herramienta Colour Contrast Analyser.
Para la demostración utilizaremos el texto ´Qué es el CESyA´ situado en la
parte superior,que como podemos observar es blanco sobre fondo azul. Para ello,
en la herramienta marcamos el color de letra ayudándonos del desplegable,
seleccionamos el blanco y a continuación el color de fondo, que
para obtener la máxima precisión en el color utilizado, seleccionaremos la
herramienta cuentagotas, y pincharemos sobre cualquier parte de azul obteniendo
inmediatamente los resultados. El resultado marcado por defecto, es el que
indica el resultado del test de brillo y diferencia de colores y nos
indica que lo ha superado correctamente. Además podemos pedir que
nos dé una explicación algo más extensa y nos aparezcan los datos numéricos de
cumplimiento del punto de verificación.
Igualmente, podemos observar los resultados del
test de luminosidad, obteniendo los resultados favorables tanto para nivel
AA como AAA en el caso de utilizar letras de tamaño normal o grandes.
Igualmente podemos obtener una explicación más extensa de resultados.
Por último, podemos obtener una vista previa
cómo usuarios con determinadas discapacidades visuales
verán el texto blanco sobre el fondo azul seleccionado.
Pauta 3, formada por 7 puntos de verificación. Utilice
marcadores y hojas de estilo y hágalo apropiadamente. El control de la
presentación de los contenidos se debe realizar con hojas de estilo en vez de
con elementos y atributos de presentación. Con el uso de marcadores
de presentación los usuarios que utilizan software especializado tendrán
dificultades para entender la estructura de la página. Como ejemplo se verá el
punto de verificación 3.3 (AA): Utilice hojas de estilo para controlar
la maquetación y la presentación.
Para la demostración de este punto de verificación,
utilizaremos la barra Web Developer para Firefox, que nos permitirá de forma
muy cómoda y sencilla observar la CSS utilizada por la página web.
Una vez que la barra está instalada y se encuentra activada en la barra de
herramientas del navegador, seleccionaremos el desplegable CSS, y
dentro de éste elegiremos la opción ver código CSS. De forma inmediata, se
abre en una nueva pestaña la CSS que contiene todos los estilos utilizados
por la página web.
Pauta 4, formada por 3 puntos de verificación. Identifique el
idioma usado. Esta pauta implica usar marcadores que faciliten la
pronunciación o interpretación de texto abreviado o extranjero. Se debe
indicar el idioma predominante en cada página y marcar aquellas
expresiones que se encuentren en otra lengua. De esta forma, los
sintetizadores de voz son capaces de cambiar su pronunciación en función del
idioma siempre y cuando se usen los marcadores apropiados. Como ejemplo
veremos el punto de verificación 4.1 de nivel A: Identifique claramente los
cambios en el idioma del texto del documento y en cualquier texto
equivalente (por ejemplo, leyendas)
En este ejemplo, vamos a ver cómo se debe marcar en el
código fuente de la página web, los cambios de idioma que se produzcan
dentro de ésta. En la página web de ejemplo, tenemos un texto en inglés que
no coincide con el idioma principal del documento y que por lo tanto hay que
identificar, ya que de esta manera, permitimos que los lectores de pantalla
adapten su lenguaje y su pronunciación al idioma adecuado.
Una vez marcado el texto, hacemos click con el botón derecho
de ratón sobre él y seleccionamos ver código fuente seleccionado.
Como se puede observar, el texto en inglés,
se encuentra dentro de unas etiquetas span que contienen como
atributos el idioma del texto situado entre las etiquetas de apertura-cierre.
En este caso, al tratarse de texto en inglés, se codifica el atributo lang
con las letras E N.
Pauta 5, formada por 6 puntos de verificación. Cree tablas
que se transformen correctamente. Las tablas sólo se utilizan para marcar
información tabular (tablas de datos). El uso de tablas con otros fines
crea dificultades para los usuarios que usan lectores de pantalla. De igual
forma, las tablas mal estructuradas (por ejemplo, sin encabezados th)
dificultan la lectura a usuarios que no pueden visualizar la información de
forma global: ciegos con lectores de pantalla y/o dispositivos braille,
deficientes visuales que utilizan magnificadores de pantalla o usuarios
con dispositivos de pantalla pequeña. Como ejemplo veremos el punto de
verificación 5.1 de nivel A: En las tablas de datos, identifique los
encabezamientos de fila y columna.
En este ejemplo, vamos a ver cómo marcar correctamente en el código
HTML una tabla que contiene datos tabulares.
La tabla utilizada como ejemplo, está formada por un encabezado
superior en que se encuentran los años, y un encabezado en cada una de las
filas mostrando el servicio de accesibilidad al que se refiere. Además,
la tabla dispone de un título. Para ver el código fuente, seleccionamos toda la
tabla, hacemos click con el botón derecho y pinchamos en ver código fuente
seleccionado. El código fuente de la tabla comienza por su etiqueta de
apertura en la que hay un atributo class para maquetarla según lo definido
en la CSS.
A continuación, se encuentra la etiqueta caption, que
proporcionará un nombre a la tabla de forma que sea sencillo identificarla.
Lo siguiente que tenemos es el thead que es el encabezado
superior, y que está formado por etiquetas th que contiene cada uno
de los años presentes en la cabecera de la tabla.
A continuación, nos encontramos con
el cuerpo de la tabla, que comienza por los encabezados de fila, contenidos
en etiquetas th, seguidos de los datos insertados en celdas mediante
la etiqueta td.
En caso de ser necesario, también podría incluirse un pie de
tabla con resultados totales por ejemplo que irían contenidos
dentro de una etiqueta tfoot.
Pauta 6, formada por 5 puntos de verificación. Asegúrese
de que las páginas que incorporen nuevas tecnologías se transformen
correctamente. Una página basada en tecnologías modernas tiene que ser
accesible al desconectarla o al visualizarla con navegadores antiguos.
El usuario puede desconectar las tecnologías más modernas para ganar en
rapidez de descarga. Sin embargo, los contenidos deben permanecer accesibles.
Veremos el ejemplo del punto de verificación 6.1 de nivel A: Organice el
documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando
un documento HTML es interpretado sin asociarlo a una hoja de estilo,
tiene que ser posible leerlo.
El objetivo de este ejemplo, es ver cómo al
desactivar las hojas de estilo, la página tiene que seguir siendo navegable
y pudiéndose acceder a toda su funcionalidad. Para ello, utilizaremos
en Firefox, la barra Web Developer usada anteriormente.
Pinchamos en el desplegable CSS, situamos el ratón sobre
desactivar estilos, y seleccionamos todos los estilos. Inmediatamente,
la página web pierde todo su estilo, definido en la CSS, y podemos ver cómo
el contenido sigue siendo navegable, los enlaces siguen perfectamente
estructurados y la organización permite que cualquier usuario pueda
seguir utilizando la página sin mayor dificultad.
Pauta 7, formada por 5 puntos de verificación.
Asegure al usuario el control sobre los cambios de los contenidos
tempodependientes. El movimiento de los objetos o páginas, su parpadeo o
actualización automática deben ser controlados por el usuario. Las personas
con discapacidades cognitivas o visuales no pueden leer textos en movimiento.
De forma similar, algunas personas con discapacidad física no pueden
interactuar con objetos móviles (limitaciones motrices) Como ejemplo
veremos el punto de verificación 7.4, nivel AA: proporcionen la posibilidad de
detener las actualizaciones, no cree páginas que se actualicen de forma
periódica.
Para este ejemplo, se ha seleccionado la página web de un portal
de noticias, que por lo general, cumplen que la página se actualiza cada
determinados minutos para mostrar al usuario las noticias de última hora.
Si hacemos click con el botón derecho sobre cualquier parte de la página y
pinchamos en ver código fuente de la página, accederemos al código en el que
nos encontramos cómo mediante código javascript y html la página es
refrescada cada 15 minutos.
Esto sería un error desde el punto de vista de la
accesibilidad ya que no se permite de ninguna forma a los usuarios
detener esta actualización automática de los contenidos, pudiendo
generar problemas en especial a las personas con discapacidades cognitivas y
visuales y a los que estén utilizando lectores de pantalla para navegar
por el sitio web.
Pauta 8, formada por 1 punto de verificación. Asegure la
accesibilidad directa de las interfaces incrustadas. Cuando un objeto
incrustado (flash, applet) tiene su “propia interfaz”, ésta (al igual que la
interfaz de su navegador) debe ser accesible. Si la interfaz del objeto
incrustado no puede hacerse accesible, debe proporcionarse una solución
alternativa accesible. Como ejemplo veremos el punto de verificación 8.1 de
nivel AA: Haga los elementos de programación, tales como script y
applets, directamente accesibles o compatibles con las ayudas técnicas.
Utilizaremos para este ejemplo, el mismo código fuente mostrado en el
ejemplo anterior perteneciente a un portal de noticias. Pese a que hemos
comentado que la utilización de la actualización automática de la página es
una práctica incorrecta, la forma de implementarlo en código sí es correcta.
Por un lado, situado entre las etiquetas script, ofrecen la funcionalidad de
actualización programada en lenguaje javascript. Por otra parte, esta misma
funcionalidad es implementada entre las etiquetas noscript utilizando
directamente código HTML. De esta forma la misma funcionalidad es ofrecida
a la totalidad de los usuarios, incluidos aquellos que por algún motivo
no dispongan en su navegador de la posibilidad ejecutar código javascript,
bien sea por motivos de seguridad o por características propias del dispositivo
con el que se realiza el acceso.
Pauta 9, formada por 5 puntos de verificación.
Esta pauta significa que el usuario
puede interactuar con la aplicación de usuario o el documento con un
dispositivo de entrada (o salida) preferido – ratón, teclado, voz, puntero
de cabeza (licornio) u otro. Si, por ejemplo, un control de formulario sólo
puede ser activado con un ratón u otro dispositivo de apuntamiento, alguien que
use la página sin verla, con entrada de voz, con teclado o quien utilice otro
dispositivo de entrada que no sea de apuntamiento, no será capaz de utilizar
el formulario. Como ejemplo veremos el punto de verificación 9.5 de nivel AAA:
proporcione atajos de teclado para los vínculos más importantes, los
controles de formulario y los grupos de controles de formulario.
Mediante el uso de atajos de teclado, lo que se pretende es proporcionar
acceso rápido y sencillo a las partes más importantes de un sitio web. En el
ejemplo que tenemos, las partes más susceptibles de disponer de atajos de
teclado, son los enlaces situados en el menú superior y que dirigen a la página
de inicio, mapa web y página de accesibilidad y los 4 elementos del menú
principal. Para ver el marcado en el código HTML, vamos a seleccionar el menú
superior, pinchamos en ver código fuente seleccionado y observamos, cómo
cada uno de los elementos dispone de un atributo dentro del enlace llamado
accesskey. Este atributo, indicará mediante qué tecla se podrá realizar el
acceso directo al enlace al que está asociada. Esta tecla, será utilizada
junto a la combinación propia definida por cada navegador para el uso
de estos atajos de teclado.
Asimismo, es una práctica muy importante, indicar en la
página de accesibilidad del sitio cuál es la relación de atajos de teclado
definidos junto con su letra asociada. Igualmente, es aconsejable indicar
cuales son las combinaciones de teclas propias de cada navegador.
Pauta 10, compuesta por 5 puntos de verificación. Utilice soluciones
provisionales. Las alternativas accesibles sólo son imprescindibles
hasta que los antiguos navegadores y las ayudas técnicas operen correctamente.
Veremos como ejemplo el punto de verificación 10.5 de nivel AA: Hasta que
las aplicaciones de usuario interpreten claramente los vínculos contiguos,
incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo
entre los vínculos contiguos.
En este ejemplo, vamos a ver cómo es la forma
correcta de etiquetar una serie de enlaces consecutivos. El punto de
verificación nos indica que se deben utilizar caracteres imprimibles entre
los enlaces para no provocar errores en las aplicaciones de usuario. En el
ejemplo, vemos como tenemos una serie de enlaces que a priori no tienen elementos
entre ellos que lo separen, además de otros enlaces en la página que resulta
evidente que están etiquetados mediante listas. Seleccionamos los enlaces,
hacemos click en ver código fuente seleccionado, y observamos cómo a pesar
de no verse etiquetados mediante listas como los otros ejemplos presentes en la
página, sí que es una lista de enlaces maquetada en este caso forma horizontal
mediante la CSS. Esta es la forma correcta de incluir en el código HTML
una serie de enlaces consecutivos, ya que además de no provocar errores en
aplicaciones de usuario permite a los usuarios de lectores de pantalla
acceder de forma directa a la lista con los enlaces pudiendo navegar
por ellos con gran facilidad.
Pauta 11, formada por 4 puntos de verificación.
Utilice las tecnologías y pautas W3C. Cuando no se pueda usar una
tecnología W3C o al usarla se obtengan materiales que no se transformen
correctamente, se debe proporcionar una versión alternativa. Se recomiendan
las tecnologías W3C por incluir características accesibles incorporadas,
estar desarrolladas en un proceso abierto consensuado y porque se utilizan
como base para crear contenidos accesibles. De ejemplo tendremos el
punto de verificación 11.1 de nivel AA: Utilice tecnologías W3C cuando estén
disponibles y sean apropiadas para la tarea y use las últimas versiones que
sean soportadas.
Es conveniente siempre que vayamos a realizar un sitio web,
hacerlo siguiendo los lenguajes y normas de W3C ya que de esta forma realizaremos
siguiendo unos estándares que conseguirán que nuestra página sea
accedida por la gran mayoría de los usuarios. En nuestro ejemplo, si
accedemos al código fuente, observamos como en la cabecera aparece el estándar
que se ha seguido para la programación de la página web. En este caso, se ha
utilizado el lenguaje XHTML 1.1, definido en una dtd por el W3C.
Siguiendo este estándar, nos aseguramos que cualquier navegador que entienda los
estándares del W3C presentará nuestra página web de forma correcta tal
y como nosotros la hemos programado.
Pauta 12, formada por 4 puntos de verificación.
Proporcione información de contexto y orientación.
Esta información ayuda al usuario a comprender páginas o elementos complejos
Se deben agrupar los elementos y ofrecer información contextual sobre la
relación entre elementos. Esta acción es fundamental para personas con
discapacidad cognitiva y visual. Como ejemplo veremos el punto de verificación
12.4 nivel AA: Asocie explícitamente las etiquetas con sus controles.
Una de las cuestiones más problemáticas desde el punto de vista de la
accesibilidad, suele ser la creación de formularios. Los formularios deben estar
marcados correctamente para que los lectores de pantalla sean capaces de
formular correctamente las preguntas y sus respectivas respuestas a los
usuarios, y por lo tanto es de vital importancia hacerlo siguiendo las pautas
definidas en las WCAG. En este ejemplo, tenemos un formulario del que
vamos examinar el marcado de la primera pregunta, un radiobutton o lo que es lo
mismo, una pregunta en la que el usuario debe marcar una única respuesta.
Si observamos el código fuente de la pregunta, veremos cómo en primer lugar,
está contenida dentro de un fieldset que se encarga de agrupar preguntas
relacionadas. A continuación, dentro del legend, se encuentra la pregunta en
sí a la que van referidas las respuestas situadas a continuación.
Dentro de las respuestas, tenemos dos campos fundamentales desde el punto de
vista de la accesibilidad. Por un lado, el texto que los lectores de pantalla
van a leer a sus usuarios, y que es el texto situado entre las etiquetas label
en la primera respuesta del ejemplo ´auditiva´. Por otra parte, hay que
indicarle al lector de pantalla, qué respuesta se corresponde con cada radio
button presente en la página. Esto se consigue mediante el atributo for de la
etiqueta label, que contiene el nombre del control al que se refiere.
El valor de este atributo, debe coincidir con el id del radio button al
que se refiere, uniendo de esta forma cada elemento del formulario
con su texto asociado.
Pauta 13, formada por 10 puntos de verificación.
Proporcione mecanismos claros de navegación. Estos mecanismos facilitan a
todos los usuarios la búsqueda aquella información que necesitan (fundamental
para personas con discapacidad cognitiva y visual). Ejemplos: mapa web, ayuda,
barras de navegación, etc. Como ejemplo tendremos el punto de verificación 13.3
de nivel AA: Proporcione información sobre la maquetación general de un sitio
(por ejemplo, mapa del sitio o tabla de contenidos)
Una de las partes básicas de la accesibilidad es la usabilidad, es decir
el facilitar la utilización y la navegación por nuestra web a los
usuarios. Como elemento importante de la usabilidad, está el proporcionar a
nuestros usuarios un mapa web en el que se indique de forma clara el acceso
a cada uno de los apartados de nuestro sitio web. En el ejemplo observamos cómo
dentro del enlace mapa web situado en la parte superior derecha, los usuarios
disponen de un listado en forma de árbol desde el que acceder a cualquier
apartado de la página además de permitirles de esta forma, hacerse una
idea de la globalidad del sitio y realizar una navegación más sencilla
a través de él.
Pauta 14, compuesta por 3 puntos de verificación.
Asegúrese de que los documentos sean claros y simples.
La utilización de lenguaje claro y simple facilita la comunicación
de información. El acceso a la información escrita puede ser difícil
para personas con discapacidad cognitiva o con dificultad de aprendizaje y para
personas sordas o que hablan en una lengua extranjera. La comprensión de un
documento también depende de la maquetación de la página y de los
gráficos (que deben llevar un texto alternativo) Como ejemplo veremos el
punto de verificación 14.3 de nivel AAA: Cree un estilo de presentación que sea
coherente en todas las páginas.
Siguiendo con la premisa expuesta en el ejemplo anterior, este punto
de verificación está más orientado a la usabilidad. Cuando un usuario
navega por un sitio web debe sentirse cómodo en él, y una vez que ha
reconocido una estructura, ésta debe modificarse lo mínimo posible entre
páginas para evitar que el usuario se pierda, no reconozca las posiciones de
menús y tenga una mala experiencia de usuario. Como vemos en el ejemplo,
todas las páginas siguen una estructura común, disponiendo los menús
importantes de la página siempre en la misma posición y la información
principal en el centro de la pantalla. De esta manera, el usuario siempre
sabrá dónde encontrar el elemento al que desea acceder una vez ha reconocido
la estructura general de la página.