ACCESIBILIDAD WEB DE UN CURSO DE LA UOC 1. Introducción
Anuncio
ACCESIBILIDAD WEB DE UN CURSO DE LA UOC
1. Introducción
En el presente informe se recogen los resultados obtenidos de analizar el grado de
accesibilidad de los contenidos web de un curso formativo de la Universidad Oberta de
Cataluña.
Para ello los Consultores en Accesibilidad de Fundosa Teleservicios han revisado el
cumplimiento de las Pautas de Accesibilidad al Contenido en la Web establecidas por el
W3C (Pautas WCAG) en su nivel doble-A por considerar que de este modo las personas
con discapacidad no encontrarán dificultades al acceder a los contenidos analizados.
En los siguientes apartados se indican los puntos de verificación de las Pautas WCAG
que se incumplen, además de propuestas para solucionar las disconformidades
producidas.
2. Análisis general
En este apartado se incluyen algunos puntos de verificación que afectan de forma
general a la página index.htm
3.2[prioridad 2] Cree documentos que estén validados por las gramáticas
formales publicadas de forma oficial por el W3C.
Declaración ¡DOCTYPE,
En el siguiente ejemplo se muestra un doctype de html para 4.01
Transitional. Según el tipo de código que utilicen deben implementar el
Doctype correspondiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es">
<head>
<title>Titulo</title>
</head>
<body>
<!-- ... body del documento ... -->
</body>
</html>
13.2[prioridad 2] Proporcione metadatos para añadir información
semántica a las páginas y sitios.
Se debe incluir dentro del atributo head los metas y los elementos correspondientes a su
doctype:
<head>
<title>Interacci&oacute;n de humanos con ordenadores</title>
<link
href="UOCMViewer/res/css/styleICV.css"
media="screen"
type="text/css" rel="stylesheet">
<META name="ROBOTS" content="FOLLOW,INDEX">
<META
content="text/html;
charset=iso-8859-1"
http-
equiv=Content-Type>
<META http-equiv="Content-Script-Type" content="text/javascript">
</head>
Una vez incluidas las etiquetas anteriores en todas las páginas del proyecto, se debe
validar el código por el w3c (validador HTML disponible en http://validator.w3.org/),
interpretar los resultados e ir corrigiendo todos los errores de sintaxis, etiquetas,
elementos, etc.
* 12.1[prioridad 1] Se debe especificar, mediante los marcadores adecuados,
un título significativo para cada marco
*12.2[prioridad 2] Describa el propósito de los marcos y cómo éstos se
relacionan entre sí, si no resulta obvio solamente con el título del marco.
Ejemplo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="es">
<HTML>
<HEAD>
<TITLE>Las noticias de hoy</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%">
<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" title="promociones">
<FRAME src="barranavega.html" name="barranavega"
title="Barra de navegación global del sitio"
longdesc="frameset-desc.html#barranavega">
</FRAMESET>
<FRAME src="historia.html" name="noticia"
title="Noticia seleccionada - contenido principal"
longdesc="frameset-desc.html#noticia">
<FRAMESET rows="*,20%">
<FRAME src="titulares.html" name="indice"
title="Índice de otros titulares nacionales"
longdesc="frameset-desc.html#titulares">
<FRAME src="anuncio.html" name="espacioanuncio"
title="Publicidad">
</FRAMESET>
<NOFRAMES>
<p><a href="noframes.html">Versión sin marcos</a></p>
<p><a href="frameset-desc.html">Descripciones de los
marcos.</a></p>
</NOFRAMES>
</FRAMESET>
</HTML>
El texto de la página frameset-desc.html puede ser algo como:
#barranavega - este marco contiene vínculos a las secciones más
importantes de este sitio: Noticias del mundo,
Noticias nacionales, Noticias locales, Noticias de
tecnología, y Noticias del ocio.
#noticia
- este marco contiene la historia actualmente
seleccionada.
#indice
- este marco contiene vínculos a las noticias
principales de hoy dentro de esta sección
*9.3[prioridad 2] Para scripts, especifique manipuladores de eventos lógicos mejor
que manipuladores de eventos dependientes de dispositivos.
Igualmente tendría que haberse implementado un elemento redundante a onclick
3. Análisis de los marcos
En este apartado se analizan de forma independiente cada uno de los marcos o
frames comunes en todas las páginas.
frame-1
o
Name (XW04_79035_01071_UOCLlom)
o
Title (Elementos y funcionalidades generales)
o
Src (UOCMViewer/llom.html)
1.1[prioridad 1] Se debe proporcionar un texto semánticamente
equivalente para todo elemento no textual .
Podemos ver en la parte superior una imagen con el logo seguido del
título del curso, la imagen se implanta por código de la siguiente manera: <img
src="res/img/logo.gif" border="0">
esta imagen debe llevar el elemento
alt=”descripción”. Normalmente el logo suele utilizarse para acceder a la home
de la web, decisión que depende del criterio del diseñador o programador. Esta
opción es bastante útil porque las herramientas de accesibilidad la encuentran
con mucha rapidez debido a su ubicación, aumentando así el grado de usabilidad
del sitio web.
También encontramos 2 imágenes sin alternativas textuales, ambas
relacionadas con los enlaces “Imprimir” y “Guardar material”. Puesto que su
descripción no aporta información adicional a los usuarios que no las ven y, por
otro lado, hay que utilizar el atributo ALT, la mejor opción es usarlo con texto
nulo (ALT=””).
*6.3[prioridad 1] Las páginas deben poder utilizarse aunque los
scripts y objetos de programación estén desconectados o no sean
soportados
<a id="ITEM_1_a" onclick="javascript:changeToolbar('ITEM_1', 10,
4);" class="moduls" target="XW04_79035_01071_UOCContent"
href="../web/main/m1/portada.html">Pr&oacute;logo</a>
Este código se emplea en el marco de módulos y es un ejemplo de lo que
marca la pauta, además cuando se opta por el atributo <a> y se utiliza el
elemento de enlace “href” se debe incluir también un title con una descripción
de la acción del enlace, además se incluye un target=”_blank” para ver el
enlace en ventana nueva. Esta solución es óptima para adaptaciones con lectores
de texto, en caso de no utilizar este tipo de herramienta se debería mostrar un
texto asociado al href. que advirtiera visualmente de la acción
Ejemplo anterior:
<a id="ITEM_1_a" onclick="javascript:changeToolbar('ITEM_1', 10,
4);" class="moduls" target="XW04_79035_01071_UOCContent"
href="../web/main/m1/portada.html" title=”Abrir ventana nueva,
listado m&oacute;dulo1” target=”_blank”>(Abrir Ventana nueva
)Pr&oacute;logo</a>
Nota.- Esta solución puede ocasionar visualmente una alteración de la
apariencia del sitio web, la decisión final
queda a cargo del diseñador y
programador.
*3.6[prioridad 2] Se deben marcar correctamente las listas y los elementos
de lista.
En los enlaces objetivos, bibliografía y Mapa, se recomienda utilizar
estructura de listas, de esta forma se facilita la navegación con herramientas de
accesibilidad y por si en un futuro hay que ampliar la lista, etc.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
*10.2 [prioridad2] Los controles de formulario con etiquetas implícitamente
asociadas deben tener las etiquetas colocadas adecuadamente
*12.4[prioridad 2] Asocie explícitamente las etiquetas con sus controles.
El buscador visualmente esta bien asociado y estructurado, pero la forma
correcta que marca la way es la siguiente:
<tr>
<td align="center" width="33%">
<Label for="Buscador"
class="contenido3"> Buscador(*):
</Label>
</td>
<td align="center" width="33%">
<span class="contenido3"></span>
</td>
<td width="34%">
<input class="textocasillas" size="60" name="buscador"
id="Buscador" value="">
</td>
<td>
<a href="http://www..../"><img height="" alt="buscar"
id="logo" src="http://www..... " /></a>
</td>
</tr>
frame-2
o
Name (XW04_79035_01071_UOCframeA)
o
Title (Listado de módulos)
o
Src (UOCMViewer/frameA.html)
*6.3[prioridad 1] Las páginas deben poder utilizarse aunque los scripts y
objetos de programación estén desconectados o no sean soportados
Todos los enlaces de este marco tienen una alternativa cuando esta
deshabilitado javascripst, funcionan mediante un elemento hef, este tiene que
incluir un title como se explica en el frame1.
Enlaces que contiene este frame, descripción y funcionamiento:
Portada.- Este enlace funciona con y sin Javascript,
sin Javascript está
desactivado, como alternativa lanza una ventana nueva que, como se ha
comentado anteriormente hay que indicarlo con un title=”Abrir ventana nueva,
…”, y un texto asociado al enlace, el contendido de la nueva ventana es el
mismo que si esta activado Javascript y contiene las siguientes salvedades:
a) La imagen que hace referencia al Coordinador Josep M. Ganyet tiene
el alt asignado, pero además de la acción del enlace tiene que hacer
un breve descripción de la msima.
3.5 Utilice elementos de encabezado para transmitir la estructura
lógica. Por ejemplo, en HTML, utilice H2 para indicar una
subsección de H1.
b) Utilizaran encabezados en los títulos de sección. <h1> Interacción de
humanos con ordenadores </h1> y <h2> módulos </h2>. En todas las
paginas del proyecto que utilicen esta organización del texto.
Prologo.- Igual que ocurre en el apartado anterior si se deshabilita Javascript ,
ofrece como alternativa una ventana nueva con un mapa de navegación. El alt de
cada imagen tiene que ofrecer información del nombre de la imagen y de la
acción como especifica la pauta 1.2.
1.2[prioridad 1] Proporcione enlaces redundantes en formato texto
con cada zona activa de un mapa de imagen del servidor. Si utilizamos la
etiqueta “img” para insertar la imagen del mapa, proporcione una lista
alternativa de enlaces después de ella002E
La imagen principal del mapa debe tener un alt como se muestra en el
siguiente código, si apareciera una imagen que no necesita descripción se debe
poner el alt=”” como se ha observado en algunas imágenes de la web:
<IMG src="../../imágenes/mapa3.gif" alt="Mapa de imagen que
contiene enlaces a paginas con descripciones detallas del
m&oacute;dulo 1." usemap="#map3">
Cada imagen del mapa apunta a una página diferente que contiene
información del prólogo, este contenido debe de cumplir la pauta 3.3[prioridad
2] Se deben usar hojas de estilo para controlar la disposición y la apariencia
de los elementos de la página.
Por ejemplo, para remarcar encabezados no
debemos utilizar las etiquetas <B>, <FONT> etc., se debe aplicar por hoja de
estilo en toda la web.
También sería aconsejable poner en cada una de las páginas que apunta
al mapa un enlace o botón volver.
Módulo 1.- En este apartado también hay alternativa a Javascript utilizando
ventana nueva y páginas de descripción. Todas estas páginas tiene que cumplir
las pautas que se han visto anteriormente que hacen referencia a utilizar los alt
en las imágenes con descripciones correctas, utilizar hoja de estilos, etc.
1.1[prioridad 1] Se debe proporcionar un texto semánticamente
equivalente para todo elemento no textual .
Dentro
de
esta
sección
encontramos
páginas
como
web\main\m2\v5_3.html que contiene imágenes sin alt, además encontramos
imágenes sin alternativa a Javascript en páginas como web\main\m2\v6_5.html,
con alt=”Ejemplo” , tendría que existir un href. Con un alt=”Abrir ventana
nueva, Ejemplo sobre Metáforas” por ejemplo. Las nuevas ventanas de ejemplo
contiene un aspa (X) para cerrar, de igual forma que las imágenes anteriores no
funcionan si Javascript.
En el punto 5.1 Informática, aparece una imagen que necesita, como se
indica con anterioridad un alt, con una descripción de su contenido, en el punto
8.1 cascada sucede lo mismo, si la información que contiene la imagen es
grande, se puede optar como solución por un enlace a una nueva ventana con
una explicación detallada en formato texto del contenido de la imagen.
Esta alternativa se tiene que aplicar en todas las páginas de la web en las
que ocurra el mismo caso.
Módulo 2.- La estructura de este módulo como de los siguientes es básicamente
la misma que los anteriores, hay que aplicar las pautas citadas anteriormente,
alternativa para el Javascript, alt en las imágenes, estructura de lista en los
índices, en los mapas de sitio asociar la información necesaria para que sean
totalmente accesibles, botones accesibles para cerrar ventanas y volver, utilizar
encabezados para acceder a la información de una forma estructurada y con
rapidez, etc.
frame-3
o
Name (XW04_79035_01071_UOCMenu)
o
Title (menú del módulo)
o
Src (UOCMViewer/menu/menu.html)
Este frame contiene visualmente el índice de cada módulo, si javascript
es desactivado este marco no funciona incluso desaparece, la estructura de lista
que contienen los índices a priori es la correcta.
Si este marco se navega con ayudas técnicas (por ejemplo Jaws 5.0 para
personas ciegas), este avisa de que contiene 191 elementos cuando realmente
está mostrando los que corresponden al módulo seleccionado. Se deben aplicar
alternativas para que esto no suceda.
frame-4
o
Name (XW04_79035_01071_UOCContentPage)
o
Title (contenido)
o
Src (UOCMViewer/content.html)
Contiene la lista principal de todos los módulos y secciones de la aplicación,
este frame esta explicado en el punto frame 2, portada.
o XW04_79035_01071_UOCContent
Este marco contiene la información de cada módulo. El contenido que se
recoge en este frame, tiene que cumplir las pautas de accesibilidad nombradas en
los puntos Protocolo, Portada, Módulo1, Módulo2, etc.
frame-5
o
Name (em_slogo)
o
Title (invisible)
o
Src (UOCMViewer/void.html)
Los lectores de pantalla utilizados por personas ciegas (Jaws 5.0 por
ejemplo) detectan este frame con el nombre “invisible”. Efectivamente el
contenido del mismo es invisible para las personas que ven, pero tales ayudas
técnicas
encuentran
cuatro
enlaces
iguales
a
los
del
marco
XW04_79035_01071_UOCLlom
(los enlaces no deberían aparecer por ser
redundantes).
Hoja de estilos
En la Hoja de Estilos se debe aplicar la pauta 3.4[prioridad 2] Se deben usar
unidades relativas(em) en vez de absolutas(px) en los valores de los atributos del
lenguaje de marcado y en los valores de las propiedades de las hojas de estilo.
Una vez validada la hoja de estilos con el W3c, se generan los siguientes errores:
Line: 260 Context : .cosDialegUOC
Invalid number : toponly 0 can be a length. You must put an
unit after your number : 50
Line: 272 Context : .whiteLinks
Parse Error - ion: none
4. Recomendaciones
Desde Fundosa Teleservicios consideramos que los contenidos web del curso
analizado no presentan errores graves de accesibilidad que impidan su
adaptación para cumplir con las Pautas de Accesibilidad al Contenido en la
Web 1.0 establecidas por el W3C en su nivel doble-A.
Además de poner en práctica las soluciones planteadas en este documento,
aconsejamos un rediseño del sitio web en el que no se distribuyan los
contenidos mediante el uso de frames.
La utilización de bordes compartidos o, lo que es lo mismo, código HTML
aplicado de forma común a todas las páginas (por ejemplo el menú por
tratarse de contenido presente en todo el sitio web) produce los mismos
efectos de diseño y, además, reduce errores de accesibilidad.
Con los bordes compartidos se pueden hacer modificaciones de forma rápida
en todo un sitio web sin necesidad de construir páginas mediante distintos
ficheros HTML (frames).
