Asegurarse de que la información no se transmite sólo por el color

Puntos de verificación en esta sección:

2.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores. [Prioridad 1]

Asegúrese de que la información no se transmite sólo a través del color. Por ejemplo, cuando pida intervención de los usuarios, no escriba "por favor, seleccione uno de los ítems indicados en verde". En su lugar, asegúrese de que la información está disponible a través de otros efectos de estilo (por ejemplo un efecto de fuente) y a través del contexto (por ejemplo, vínculos de texto detallados).

Por ejemplo, en la versión electrónica de este documento se ha dado estilo a los ejemplos por defecto (a través de hojas de estilo) de la siguiente manera:

• Están rodeados por un borde.

• Utilizan un color de fondo diferente.

• Comienzan por la palabra "Ejemplo" (o "Ejemplo desaconsejado").

•También terminan con la frase "fin del ejemplo", pero esta frase está escondida por defecto con "display: none". Para las aplicaciones de usuario que no soportan hojas de estilo o cuando se desconectan las hojas de estilo, este texto ayuda a delimitar el fin de un ejemplo a los lectores que no sean capaces de ver el borde que rodea el ejemplo.

Test rápido: Para verificar si su documento funciona aun sin colores, examínelo con un monitor en blanco y negro o con el color desactivado en el navegador. Igualmente, intente configurar su navegador con un esquema de colores que sólo utilice blanco, negro y los cuatro tonos de gris básico de la paleta del navegador y compruebe como se presenta la página.

Test rápido: Para verificar si el contraste de color es suficiente para ser distinguido por personas con deficiencias en la percepción del color, o por aquellos con monitores de baja resolución, imprima las páginas en una impresora en blanco y negro (con los fondos y colores en escala de grises). Intente también fotocopiar lo impreso dos o tres veces para ver cómo se deteriora. Ello le mostrará dónde necesita añadir señales redundantes (ejemplo: los hipervínculos están normalmente subrayados en las páginas Web), o si las señales son demasiado pequeñas o indistintas para mostrarse bien.

Para mayor información sobre colores y contrastes, consulte [LIGHTHOUSE].

Proporcionar pistas de contexto en las listas HTML

Puntos de verificación en esta sección:

3.6 Marque correctamente las listas y los ítems de las listas. [Prioridad 2]

13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2]

Los diseñadores de contenidos deben emplear UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.

La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como "1", "1.1", "1.1.1", etc.

Ejemplo

<style type="text/css">

ul, ol { counter-reset: item } li { display: block }

li:before {

content: counters(item, ".");

counter-increment: item;

}

</style>

10

Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. El siguiente mecanismo CSS1 muestra cómo ocultar el final de una lista cuando estén activadas las hojas de estilo, y mostrarlo cuando las hojas de estilo estén desactivadas, cuando la hoja de estilo del usuario predomina sobre el mecanismo de ocultación o cuando no se soportan hojas de estilo.

Ejemplo

<style type="text/css">

.findelista { display: none } </style>

<ul>

<li>Papelería:

<ul>

<li>Sobres

<li>Blocs de notas <li>Papel con membrete <li>Papel carteles

<span class="findelista">(Fin de papelería)</span>

</ul>

<li>Lápices:

<ul>

<li>Bolígrafos azules

<li>Rotuladores pizarra blanca

<span class="findelista">(Final de lápices)</span>

</ul>

<li>Sujetapapeles:

<ul>

<li>clips <li>grapas <li>cuerda.

<span class="findelista">(Fin de sujetapapeles)</span>

</UL>

<span class="findelista">(Fin de suministros de oficina)</span>

</ul>

Nota: Este ejemplo no resuelve el problema de ítems de lista que se ajustan al principio de la línea siguiente. Con un poco más de esfuerzo, el autor podría incluir etiquetas parecidas al final de cada ítem de la lista.

166 técnicas CSS

Maquetación, ubicación, colocación en capas, y alineación

Puntos de verificación en esta sección:

3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2]

5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se transcriba línea a línea. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión linearizada). [Prioridad 2] .

Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta):

• Las propiedades “text-indent”, “text-align”, “word-spacing” y “font-stretch”, permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice “text-align:center” en lugar del elemento CENTER.

• Con las propiedades “margin” “margin-top”, “margin-right”, “margin-bottom” y “margin-left”, los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación (&nbsp;).

• Con las propiedades “float”, “position”, “top”, “right”, “bottom” y “left”, el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden “lógico”) y entonces aplicar hojas de estilo para lograr efectos visuales. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.

• La propiedad “empty-cells” permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía, no debería ser llenada con un espacio en blanco o un espacio "non-breaking"

sólo para lograr un efecto visual.