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