Todos contra Google

La regla 10.5 de prioridad 3 de accesibilidad web dice:

Hasta que las aplicaciones de usuario (incluyendo tecnologías adaptativas) presenten distinciones entre enlaces adyacentes, incluya caracteres imprimibles no enlazados (seguidos de espacios) entre los enlaces adyacentes.

La forma más habitual de resolver este paso, es introducir un carácter aleatorio, habitualmente la barra vertical (|) para separar los enlaces:

Enlace1 | Enlace2 | Enlace3

El problema nos lo encontramos cuando, por motivos de diseño, no podemos introducir un carácter visible entre los enlaces. El truco que muchos diseñadores vienen utilizando es, mediante CSS, convertir ese carácter en invisible, pero esta técnica, aunque es capaz de engañar a los validadores automáticos, no es correcta y no pasaría una revisón manual de la accesibilidad web.

El método que yo he utilizado para resolver el problema y creo que el correcto, es crear una lista de enlaces con etiquetas <ul><li> y mediante CSS aplicarles un estilo para que la lista aparezca en formato horizontal.

Es algo muy sencillo, el estilo CSS:

#iconos-horizontal ul li{
display: inline;}

Ahora tan sólo deberiamos meter la lista de enlaces dentro de un contenedor identificado mediante el estílo iconos-horizontal:

<div id="iconos-horizontal">
<ul>
<li>Enlace1</li>
<li>Enlace2</li>
<li>Enlace3</li>
</ul>

Ahora hemos agrupado los enlaces en una lista y podemos evitar el uso de carácteres imprimibles inútiles, el resultado visual es el mismo.