Para las líneas horizontales que permiten separar el contenido, se utiliza el mismo criterio que en el de las imágenes decorativas, puede hacerse más accesible con la adición de un texto alt apropiado.
| <img src="/imagenes/LineaDecorativa.jpg" alt="--" title=""> |
En el atributo alt es suficiente con poner 2 ó 3 guiones, un lector de pantalla leerá para cada guión la palabra "guión". Esta solución no plantea problemas de accesibilidad, está en contra con la semántica propia del lenguaje de marcado de hipertexto. La solución más correcta será vía hoja de estilo.
Los resultados serán:
- Todos los navegadores visuales modernos mostrarán la imagen en lugar de la línea horizontal plana normal.
- Algunos navegadores antiguos, como Nestcape 4, mostrarán una línea horizontal normal.
- Los navegadores sólo texto siempre ignoran la hoja de estilo, por lo que mostrarán una regla horizontal formada por guiones normales o de subrayado.
¿Cómo hacerlo?
Usamos una etiqueta div sencilla para mostrar la imagen. En nuestro artículo colocaremos el siguiente código en el editor de HTML.
| /* Línea como imágen ----------------------------------------------- */ <div style="height:40px;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGcCbMWe9d3awGmdUBo4w5tej3ZayWxtAnKLGqxgpYFcuyU7nF1tbXa8gwDYcZEPAe5JfNnbyi9PdjqmFHzKEQxeQBXldViJkS99yjTm1Dh0LX6V5TwWEcAFa51ZriarxDe4wZP3vkmHo/s400/lineas_divisorias_03.jpg) no-repeat scroll center;"> <hr style="display:none;" /> </div> |
La url es la dirección de la imágen que vamos a poner como viñeta en la lista.