Debemos buscar siempre el elemento más apropiado para marcar cada tipo de contenido. En este caso en el “portafolio 1” se está utilizando una tabla para presentar en horizontal los pares “nombre: valor”. El elemento más apropiado para esto es una lista de definición. Si hacemos flotante a la izquierda su elemento “dt” tendremos la presentación que buscamos utilizando un elemento mucho mas apropiado que la tabla para este tipo de datos.
Finalmente solo nos queda hacer la barra de navegación horizontal del pie de página. La construcción de este tipo de barra está explicada paso por paso en el módulo de “Presentación css”, en la sección dudas frecuentes, duda menú horizontal.
Una vez hemos resuelto todos los aspectos de accesibilidad relacionados con la maquetación, terminaremos el análisis manual de accesibilidad haciendo un repaso a un par de puntos principalmente de falta de atributos, que frecuentemente se nos pasan por alto y también perjudican mucho la accesibilidad.
Debemos proporcionar descripciones textuales al contenido no textual. Estas descripciones se hacen mediante los atributos “alt” para una descripción corta, y “longdesc” en el caso de que sea necesaria una descripción extensa enlazada a un archivo independiente. Por lo tanto en nuestra web debemos repasar todas las imágenes dando descripciones textuales con alt. Punto de verificación 1.1 de [prioridad 1]
Debemos identificar claramente el objetivo de cada vínculo. Lo haremos mediante un texto de vínculo bien descriptivo, y ampliaremos esa descripción del objetivo con el atributo title. Punto de verificación 13.1 de [prioridad 2]
Aunque los puntos 9.4 y 9.5 son de prioridad 3, nuestra web ganará mucho en accesibilidad si proporcionamos atajos de teclado para los vínculos principales.
El atributo acceskey=”tecla de acceso” nos proporciona esta funcionalidad.
Y para concluir realizaremos el análisis automático con una de las herramientas actualmente más utilizadas, el validador TAW.
Este validador nos dará un informe detallado de los errores que pueda presentar nuestra web, y nos recuerda un conjunto de puntos que debemos revisar durante y al finalizar la realización de cualquier web.
Nos marca los errores con unos puntos en color rojo o anaranjado, indicándonos el nivel de prioridad en el error encontrado.
Una vez superado el test del validador, podemos echar un vistazo al código final de cada una de las webs. Observaremos que el “portafolio 2” tiene un código infinitamente más limpio y ligero, en el que cualquier operación posterior de mantenimiento es mucho más rápida y eficaz.
Además la nueva web es mucho más accesible a otros dispositivos de diferente resolución. Si estrechamos progresivamente el ancho de la ventana del navegador, veremos como el contenido tiende a adaptarse manteniendo la legibilidad en cualquier ancho hasta el límite del menú principal.
Finalmente si desconectamos la hoja de estilo veremos que toda la información que contiene sigue teniendo sentido.
A partir de aquí solo nos quedaría hacer unos pequeños ajustes para cada tipo de dispositivo, principalmente para mostrar u ocultar determinadas partes de la página dependiendo de cada caso. Por ejemplo podríamos ocultar los menús de navegación para imprimir el documento ya que en papel carecen de sentido. O podríamos añadir más controles de navegación o desplazamiento por la página para dispositivos que carecen de ratón o con pantallas muy pequeñas como los móviles.
Para todo ello vincularíamos la hoja de estilo apropiada especificando cada tipo de dispositivo con el atributo “media”.