Un aspecto con el que hay que tener cuidado ya que es la causa de muchos errores de validación.
Los distintos encabezados que utilicemos en el documento deben estar bien estructurados jerárquicamente, sin saltarse encabezados intermedios.
Si observamos el encabezado del texto “Diseño y Animación 3D”, podemos sentirnos tentados a utilizar el encabezado que en principio mejor se adapte a nuestras pretensiones estéticas sobre el tamaño del texto. Es decir si nos resulta excesivamente grande un encabezado de tipo “h1” podríamos pretender marcar ese texto directamente con un “h3” sin reparar en el contexto de ese encabezado.
Esto perjudicaría la accesibilidad ya que algunas aplicaciones de usuario especializadas requieren una estructura lógica de documento en la que un encabezado h3 debe interpretarse como una subsección de un h2, y esta a su vez de h1.
El encabezado que pretendemos marcar es el primero en su jerarquía, no es una subsección de otro apartado con un encabezado superior, por lo tanto debemos utilizar un encabezado “h1”.
Si el tamaño de fuente de este encabezado resulta excesivo modificaremos su presentación mediante el selector contextual correspondiente. Puede consultarse el apartado “Selectores contextuales” del módulo css.
Este aspecto se recoge en el punto de verificación 3.5
3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2]
Por ejemplo, en HTML, utilice H2 para indicar una subsección de H1. No utilice encabezados para hacer efectos de fuente.
Aunque casi siempre existen soluciones accesibles alternativas para presentar contenido tabular sin utilizar una sola tabla, en esta ocasión mantendremos la tabla por ser el caso más justificable de uso de tablas dentro del documento.
Por lo tanto veremos como hacer la tabla un poco más accesible, añadiendo los elementos estructurales que aportan la información necesaria al agente de usuario.
Pero antes de utilizar cualquier tabla conviene asegurase de que como en este caso lo que vamos a mostrar son realmente datos tabulares y no estamos utilizando la tabla con fines de diseño o maquetación de objetos.
Ya hemos visto la transformación o interpretación que hacen de las tablas algunos agentes de usuario como determinados lectores de pantalla. Por lo tanto los datos mostrados no tendrán sentido para el usuario discapacitado si no añadimos a la tabla los siguientes elementos y atributos:
Un resumen sobre el contenido de la tabla.
Un título de tabla
Aportan información estructural suficiente para dejar bien claro que filas son encabezado de tabla, cuales forman el cuerpo, y cuales el pie..
Información que permita asociar un grupo de celdas de contenido con su correspondiente encabezado. Para tablas normales emplearemos el atributo “scope” como hemos puesto en el ejemplo, pero debemos saber que en tablas de mayor complejidad puede ser necesario el atributo “headers”, incluso otros como “axis”, que nos permiten relacionar las celdas por categorías conceptuales.
El código resultante de la tabla es un poco extenso para ponerlo aquí, pero lo podemos consultar mediante la opción “ver código fuente” del navegador al cargar el documento “portafolio 2”.