- Accesibilidad Web
- Caso práctico. Análisis de Accesibilidad
- Web objeto del análisis
- Estructura de base
- Hoja de estilo
- Maquetación principal
- Nombres de selectores
- Divs principales
- Proporcion de columnas
- Elementos de cabecera
- Navegación horizonal. Migas
- Solución a tabla de imágenes
- Jerarquía de encabezados
- Tablas accesibles
- Formularios accesibles
- Menú principal de navegación
- Tabla de dos columnas con dl
- Navegación horizontal. Botones
- Puntos finales del análisis
- Test de Accesibilidad Web (TAW)
- Web accesible resultante
Análisis de accesibilidad
Maquetación principal de la web
Desde el principio observamos una característica de maquetación tan extendida como perjudicial para la accesibilidad. Se trata de la utilización inapropiada del elemento “table”. Toda la maquetación del documento “portafolio 1” depende de tablas, sus partes principales y cada una de sus secciones interiores.
En este punto abordaremos el problema de la disposición de partes principales de la web. Realizaremos la maquetación siguiendo la recomendación del punto de verificación 5.3 de prioridad 2 respecto al uso de tablas, sustituyéndolas por fragmentos de bloque “div”.
Pauta 5. Respecto a la maquetación en tablas
Las tablas deberían utilizarse solamente para marcar la información tabular ("tablas de datos"). Los desarrolladores de contenidos deberían evitar usarlas para maquetar páginas ("tablas de composición"). Usar tablas para cualquier finalidad crea también especiales dificultades para los usuarios de lectores de pantalla (consultar punto de verificación 10.3).
Solución Accesible. Disposición principal sin tablas
Conviene aclarar desde el principio que en lo referente a maquetación suele haber varias soluciones posibles, aunque aquí a modo orientativo solo se describa una de ellas.
Partes principales
Ahora debemos determinar cuales son las partes principales del documento tal como se explica en el módulo de css, “Disposición de las partes principales de una web”, con algunas diferencias en este caso por la disposición de las columnas. Observando el documento “portafolio 1” podremos hacer las siguiente distribución:
Nombres de selectores
Añadimos a la hoja css los correspondientes selectores “id” para cada “elemento “div”.
Es muy importante que el nombre de cualquier selector aporte un mínimo significado semántico, significado sobre sí mismo, sobre la parte del documento en la que actúa. Nombres como “#colIzq”, o “#columnaIzq” siempre aportarán más significado que otros como “#contenedor1”.
Por lo tanto en este ejemplo estableceremos los nombres “#princip, #cab, #colIzq, #colDrch, y #pie”, para identificar los fragmentos de bloque div correspondientes al cuadro o contenedor principal, cabecera del documento, columna izquierda, columna derecha, y pie respectivamente.
En principio dejamos los selectores vacíos, sin reglas de estilo, excepto la columna derecha que debe ser flotante a la derecha.
La elección de qué columna será flotante y cual estática también tiene varias posibles soluciones o combinaciones, personalmente suelo dejar estática la columna que llevará el peso del contenido.