Accesibilidad Web

Hola, hoy traigo una nueva entrada donde explico que es la accesibilidad web y que existe un lugar donde corrigen páginas que no cumplen con la accesibilidad.

Accesibilidad Web

La Organización Mundial de la Salud (OMS) recoge en sus informes un total de 600 millones de personas con discapacidad. El acceso de estas personas a la tecnología debe tenerse en cuenta en la construcción de una sociedad igualitaria.

La misma Organización Mundial de la Salud, a través de la Clasificación Internacional del Funcionamiento, de la Discapacidad y de la Salud (CIF) del año 2001, define la discapacidad como «término genérico que incluye déficit, limitaciones en la actividad y restricciones en la participación. Indica los aspectos negativos de la interacción entre un individuo (con una condición de salud) y sus factores contextuales (factores ambientales y personales).

Estas pautas son una especificación del World Wide Web Consortium (W3C) que proporciona una guía sobre la accesibilidad de los sitios de la web para las personas con discapacidad. Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C.

PRIMERA PÁGINA WEB ACCESIBLE

LA SEXTA

El sitio web de la Sexta3 accesible (copia local de la página principal), versión accesible de la página web con la programación de televisión de la Sexta3. El sitio web de la programación de televisión de la Sexta ofrece una versión accesible. En esta imagen podemos ver el aspecto de la versión "normal"

La versión accesible (imagen completa )

En esta página se han cometido los dos típicos errores de alguien que quiere hacer un sitio web accesible:

• Versión accesible: versión alternativa, un segundo sitio web accesible simplificado.
• Versión accesible: versión fea, sin hojas de estilo.

Si exploramos el código de ambas páginas, veremos que la segunda, la supuestamente accesible, es un subconjunto de la anterior. La mayoría de las estructuras de contenido escritas en HTML, los identificadores o los nombres de las clases de CSS son los mismos. En realidad, la versión accesible no los necesita para nada, porque no se enlaza ningún CSS, pero los tiene.

A la vista del código HTML, me imagino que la gente de Genera, que son los que figuran como creadores del sitio web, debieron pensar y hacer algo como "quita el CSS, elimina el código JavaScript, borra algo de contenido para simplificar la página web y ya tenemos versión accesible, listos". Pero se pasaron de listos, porque algo tan simple como un correcto uso de los encabezados (estructura de encabezados según HeadingsMap) o el uso de enlaces significativos y que no repitan el mismo texto (lista de enlaces según Fangs)

SEGUNDA PÁGINA WEB ACCESIBLE

MÁSTER INGIENERÍA ELECTRÓNICA 

El sitio web oficial del Máster Universitario en Ingeniería Informática de la Universidad de Alicante. (Copia local de la página analizada: Principal).

La página principal del sitio web oficial del Máster Universitario tiene algunos aspectos como la coherencia visual o la coherencia en los mecanismos de navegación entre las distintas páginas que componen el sitio web no han sido analizados.

Un primer análisis con el servicio de validación del W3C detecta 6 errores y 4 advertencias.

Los errores detectados son principalmente el uso inadecuado de atributos que no existen en la versión empleada del lenguaje HTML: target, border, align, onMouseOver y onMouseOut.


Un segundo análisis con la herramienta de validación automática de la accesibilidad TAW detecta 0 errores automáticos de prioridad 1, 10 errores automáticos de prioridad 2 y 1 error automático de prioridad 3.

Entre los errores detectados por este validador, destacan:

1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ASCII art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos.

Una revisión manual de la accesibilidad de esta página web detecta algunos problemas más.
Por ejemplo, esta página web contiene una imagen de una placa base de un ordenador en la cabecera de la página, tal como se puede apreciar en la siguiente imagen.

La imagen de la cabecera presenta numerosos cambios de color y brillo, lo que dificulta la lectura del texto que se encuentra sobre dicha imagen. Por ejemplo, en la siguiente imagen se puede comprobar que es imposible de leer el texto que contiene el logotipo de la Universidad de Alicante situado a la izquierda y el título de la página "Máster Universitario en Ingeniería Informática" también es difícil de leer en algunas de sus partes.

Además, también hay un abuso de la etiqueta <span> para resaltar ciertas partes del texto de la página, en detrimento del uso de otras etiquetas con contenido semántico, como <strong> o <em>. El texto destacado mediante <span> no es significativo para una persona que visualiza la página web con un navegador en modo texto o que utilice un lector de pantallas. También hay un abuso de la etiqueta <br /> para separar diferentes partes del texto.

El empleo de una imagen de fondo en la barra de menú superior de la página causa problemas cuando las imágenes no se cargan. Como se puede apreciar en la siguiente imagen, el texto de los menús prácticamente no se distingue, ya que el texto está escrito con un color gris claro sobre un fondo con color gris oscuro.

Si se desactivan tanto las imágenes como las hojas de estilo de la página, el resultado que se obtiene es el siguiente.

LOS PROBLEMAS DE ESTA PÁGINA WEB

• No uso de los elementos de encabezamiento para identificar la estructura lógica de la página. Por ejemplo, es imposible identificar el título de la página, el menú principal, el menú secundario, las migas de pan o la zona de contenido principal.
• No uso de etiquetas semánticas como <strong> o <em> para destacar partes del texto.
• Ausencia de texto alternativo en los logotipos del pie de la página, lo que impide la identificación y uso de los enlaces asociados a dichos logotipos.

Niveles de Conformidad 

Cada Pauta WCAG 2.0 se desarrolla en una serie de criterios de éxito. En total se han definido 60 criterios de éxito, o puntos de comprobación o veríficación que determinan el nivel de accesibilidad (A, AA, AAA).

Los criterios estás ordenados según el nivel de cumplimiento asociado. Para que una página Web sea conforme con las pautas WCAG 2.0 debe satisfacer todos y cada uno de los requisitos de conformidad:

Cuando una página cumple con las Pautas WCAG 2.0 puede incluir en ella una Declaración que indique a los usuarios que cumple con el W3C. El nivel de conformidad alcanzado se representa mediante un logotipo.(Ejemplo de WCAG 2.0: El Mundo)

Si se utiliza algunos de los sellos anteriores, éste debe ir acompañado por la siguiente información:

La conformidad solo se aplica a páginas web completas, y no se puede lograr si se excluye parte de la página web. Para utilizar estos logotipos basta con decir al nivel de accesibilidad que soportará el sitio Web y, dependiendo de ello, añadir un código HTML que enlazará con la Web del W3C. Los proveedores de contenido serán los únicos responsables de este uso, el W3C no verifica dichas declaraciones.

Ejemplos de páginas web:

Web para Sordos

Cocemfe

Nomasabuso

Tecnologias Accesibles

W3C

El Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es un consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo.

Este consorcio fue creado en octubre de 1994,​ y está dirigido por Tim Berners-Lee, el creador original del URL (Uniform Resource Locator, Localizador Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje de Marcado de HiperTexto), que son las principales tecnologías sobre las que se basa la Web.