- 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
Divs principales del documento
Añadimos los divs con su atributo id correspondiente a cada selector. Lo haremos en el orden lógico excepto la columna derecha, que por ser flotante debe ir antes que la izquierda. Y tendremos en cuenta que el contenedor principal (#princip) debe albergar a todos los demás, este contenedor está justo después de “body” en la jerarquía de elementos.
<body>
<div id="princip">
<div id="cab">"cab"</div>
<div id="colDch">"colDch"</div>
<div id="colIzq">"colIzq"</div>
<div id="pie">"pie"</div>
</div>
</body>
Tal como se explica en el módulo de css, para ver mejor por donde nos movemos y distinguir bien unas cosas de otras, lo mejor es dar un color de fondo distinto a cada “div” y como contenido le damos el nombre de su identificador único, excepto en el caso del div #princip, teniendo en cuenta que el contenido de este son todos los demás, no escribiremos su nombre como contenido.
Todo esto es para tener un esquema visual bien claro del conjunto tal como se muestra en la imagen, este es el aspecto actual de nuestro documento en el navegador.
Observamos que al no haber dado contenido textual al div #princip, este no es visible en la imagen, pero debemos saber que está ahí, y que puede formar parte del contexto a la hora de definir selectores.
Proporción de columnas
Nos queda dar dimensiones de ancho a las columnas izquierda y derecha. Lo ideal es dar estas dimensiones en porcentajes, esto hace el documento mucho más accesible a dispositivos con distintas resoluciones. En este caso buscaremos un punto intermedio, haciendo el documento adaptable a cualquier resolución, hasta un mínimo marcado por el ancho del menú principal (columna derecha). Esto nos ayuda a mantener fielmente la estética inicial del “portafolio 1” sin sacrificar la accesibilidad del “portafolio 2”. Por lo tanto una vez hayamos añadido la imagen derecha de la cabecera en el siguiente apartado, ajustaremos a la misma el ancho de la columna derecha en unidades relativas.
Respecto a la columna izquierda podemos dejar su ancho en auto, pero si nos interesa que su contenido no se desborde por debajo de la columna derecha, entonces marcaremos un margen derecho idéntico a la columna derecha. Consultar efecto de desbordamiento en el apartado “controlando el contenido líquido” delmódulo css.