Sumérjase en la Accesibilidad

Día 25: Usar reglas horizontales reales (o simularlas de manera correcta)

Suponga que quiere una división entre sus apuntes. Las reglas horizontales regulares son aburridas, así que utiliza una imagen como alternativa. Esto funciona, y puede hacerse más accesible con la adición de un texto alt apropiado.

Sin embargo, puede ir más allá y usar una regla horizontal real, y luego usar un pequeño truco de CSS Los navegadores antiguos y textuales ignorarán el CSS y mostrarán solamente una regla horizontal en su estilo tradicional (Los navegadores de texto generalmente usan una fila de líneas de subrayado o de guiones, expandida al ancho actual de la pantalla).

Les daré ejemplos de ambas técnicas en un instante.

Quién se beneficia?

1. Jackie se beneficia. Como ya hemos visto, JAWS lee el nombre de archivo de cualquier imagen sin un atributo alt.
2. Marcus se beneficia. Lynx muestra el nombre se archivo de cualquier imagen que no tenga un atributo alt. Si usa una regla horizontal real, Lynx mostrará una serie de líneas de subrayado del ancho actual de la pantalla.
3. Michael se beneficia. Links no muestra nada en lugar de las imágenes sin texto alt, así que Michael no tiene ninguna indicación de que hay una división. Necesitamos ese texto We need that alt, o todavía mejor, una etiqueta <hr>, que Links mostrará como una serie de guiones del ancho actual de la pantalla.

Como hacerlo

Si usa imágenes para sus reglas horizontales, la manera mas fácil de hacerlas accesibles es añadirles un atributo alt a sus etiquetas de imágenes (<img>). Debería añadir un atributo title también, para suprimir la información de herramienta en los navegadores visuales. Así que si tiene esto:

<img src="/images/fancyrule.gif" width="442" height="25">

Cámbielo a esto:

<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">

No se emocione y especifique 80 guiones en el texto alt. Dos o tres serán suficientes.

Como hacerlo: avanzado

La técnica avanzada (y preferida) usa una etiqueta <hr>. Sin embargo, como el soporte de los navegadores para la estilización de estas etiquetas es muy pobre, usaremos etiquetas <div> de señuelo para mostrar la imagen. Coloque el CSS siguiente en su sección <style> en la parte superior de su plantilla (Si está usando una hoja de estilos externa como style-sites.css, colóquelo en cualquier sitio dentro de esta. Si está usando múltiples hojas de estilos, colóquelo en la que sea amigable con el Netscape).

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/fancyrule.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

(Para la altura height, sustituya el valor por el valor de la altura de su imagen. Para background-image, sustituya la dirección donde se encuentra su imagen).

Luego en su plantilla, donde desea que esté su regla decorativa, inserte esto:

<div class="hr"></div><hr />

Resultados:

• Todos los navegadores modernos mostraran la imagen en lugar de la regla horizontal regular.
• Netscape 4 mostrará la regla horizontal regular.
• Los navegadores de texto siempre ignoran el CSS, así que mostrarán una regla horizontal regular (usualmente mostrada como una serie de líneas de subrayado o de guiones).

Lectura añadida

• CSS1 y el HR Decorativo, si se siente lo suficientemente valiente y quiere decorar las reglas horizontales con CSS en Netscape 4. Mucha suerte con eso. Artículo en inglés.