Separación clara entre estructura y estilo

Toda página Web a la que se le quiera dar un diseño CSS y reducirle las barreras al máximo, debe contener como base un documento perfectamente estructurado.

Al separar claramente contenido y diseño, creamos un documento con una estructura lógica muy marcada. Todo lo que pertenece al contenido se puede identificar claramente como tal sin necesidad de medidas auxiliares y el documento, a su vez, es perfectamente comprensible, independientemente de su representación visual.

La representación óptica de los contenidos se regula mediante instrucciones de formato centralizadas que se guardan, inteligentemente, fuera del documento en sí.

Eliminar los obstáculos para tener libre acceso al documento es relativamente fácil y representa un paso gigantesco en la supresión de barreras.

Al documento se le pueden añadir funciones de ampliación (por ejemplo, con JavaScript, PHP y similares), siempre que no dificulten el acceso a los contenidos.

Estructura lógica y textos resaltados

Las páginas Web son documentos. HTML no describe el aspecto de un documento o su ubicación. HTML describe qué es un documento: un título, una lista, una imagen, una tabla, etc.  Por eso los elementos y atributos de HTML se deben utilizar correctamente a nivel semántico, es decir, conforme a su significado según las especificaciones.

Un HTML semánticamente estructurado es la clave para conseguir tiempos de carga mínimos, independencia de la plataforma, eliminar barreras y, no menos importante, un diseño impecable. Un ejemplo importante son los títulos: agrupan partes de texto y sirven como orientación ya que jerárquicamente están por encima del texto normal. Son más importantes que el texto fluido, por lo que se deben declarar como título. Igualmente importante es la jerarquía de los títulos. Algunos títulos son más importantes que otros, por lo que deberán pertenecer a un nivel superior. El título más importante es el de primer nivel <h1>, mientras que los niveles siguientes <h2><h3><h4>, etc. son subordinados suyos. Los subtítulos de igual importancia se deberían colocar en el mismo nivel.

Así los documentos pueden ser rápidamente leídos tanto por navegadores de texto, lectores de pantalla o un robot. Con un lector de pantalla también se puede navegar por los títulos o bien leerlos agrupados por niveles, por ejemplo, "todos los títulos de nivel 1", "todos los títulos de nivel 2", etc. De ese modo es fácil hacerse una idea clara y rápida de todos los contenidos del texto.

Un título correctamente jerarquizado a nivel semántico ofrecería este aspecto:

<h1>Título de primer nivel</h1>

Un título incorrectamente jerarquizado (en el sentido semántico) sería, por ejemplo:

<div id="headline">Un título de primer nivel </div>

O, incluso peor:

<p><font size="6"><b>Un título de primer nivel </b></font></p>

Al crear un título lo que menos importa, en un primer momento, es qué tamaño fuente se utilizará o si será de color verde o irá en negrita, o qué lugar ocupará exactamente. Lo único que importa en el código fuente es que ese elemento es un título.

Otro sinsentido (semántico) es insertar en el texto etiquetas  vacías, o de cualquier otro tipo, simplemente para crear un (in) determinado espacio, por ejemplo:

<p>Aquí tenemos un párrafo de texto</p>
<p>&nbsp;</p>
<p>Aquí tenemos otro párrafo de texto</p>

Lo mismo puede decirse para todos los demás elementos del texto, ya sean párrafos, listas, citas, formularios o tablas. No debemos perder el tiempo pensando en la fuente, tamaño o el color que le daremos a un elemento, ni qué distancias guardará respecto a los elementos contiguos. Lo importante aquí no es el aspecto óptico, sino el significado lógico, que deberá ser reconocible por todos: desde una persona invidente a quien le leerán la página, o un robo-buscador para el que la presentación no cuenta en lo más mínimo.

Agrupar los elementos de página

Lo siguiente que se puede hacer es agrupar diferentes partes del documento en bloques lógicos (contenedores) que más tarde se podrán ordenar o formatear conforme al diseño visual que se desee. La división de la página Web de nuestro ejemplo, clásico y sencillo, es la siguiente:

- Header (encabezado)
- Main menu (menú principal)
- Content (contenido)
- Footer (pie)

Cree un contenedor para cada área e identifique cada contenedor con alguna señal, por ejemplo, asignándole un ID. La etiqueta HTML <div> cobra aquí un significado especial. Este elemento bloque carece prácticamente de propiedades, ya que no define ningún párrafo determinado ni tabla, ni nada similar; simplemente delimita un área determinada. En el código fuente quedaría así:

<body>
<div id="header">Logo</div>
<div id="menu">Navegación principal</div>
<div id="content">Títulos y textos</div>
<div id="footer">Derechos reservados</div>
</body>

De ese modo ha creado cuatro áreas a las que puede acceder por separado con ayuda de CSS.

#header {
Valor propiedad;
}

#menu {
Valor propiedad;
}

#content {
Valor propiedad;
}

#footer {
Valor propiedad;
}

#header {
Valor propiedad;
}

Los contenidos de estos contenedores tambièn se puede hacer accesibles y diseñarlos con relación al contexto, por ejemplo:

#content h1 {
Valor propiedad
}

#content p {
Valor propiedad
}

Con estas  dos últimas instrucciones hacemos que sólo se tengan en cuenta los títulos (<h1>) y los párrafos (<p>) que aparecen dentro del contenedor con ID content.

Naturalmente, los contenedores también se pueden anidar, es decir, podemos crear contenedores dentro de contenedores. Pero debemos preguntarnos antes seriamente si de verdad necesita contenedores dentro de contenedores, o si no es suficiente con la estructura semántica del contenido. Recordemos que queremos mantener el código fuente lo más claro y reducido posible. Con un anidamiento múltiple de contenedores <div>, por ejemplo, resulta superfluo que en la mayoría de los casos, ya que podemos obtener el mismo resultado por otros medios, por ejemplo dando formato directamente a los elementos que queremos vincular.

Sin barreras

Consideremos la página Web nuevamente desde un punto de vista conceptual. Al decidir seguir los estándares ya ha dado el paso más importante en la eliminación de barreras, pues queda implícito que quiere dar total accesibilidad a su página. Por eso vale la pena dar un paso más y considerar qué más se podría hacer para eliminar barreras. Existen prejuicios inveterados en contra de la creación de páginas Web sin barreras, pero sin prejuicios que, al analizarlos, se desvanecen como las falsas creencias que son.