Algo no tan común, y que quería añadir al blog desde el principio, era la de señalizar el idioma de los enlaces externos. Desgraciadamente, en el mundo web el 80% de los contenidos de calidad están en ingles, y hoy en día todavía hay gente a la que esto le supone un problema.

Por ello, he decidido que en este blog se señalizarán aquellos enlaces que lleven a páginas en otros idiomas que no sean castellano, tanto por código como visualmente.

Para señalizar el idioma en del enlace mediante el HTML, es realmente sencillo. Tan solo deberemos utilizar el atributo hreflag

<a href="#" title="Titulo del enlace" hreflang="en-US">Enlace</a>

El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.

Ahora, para mostrar la bandera del idioma, utilizaremos el pseudo-selector :after junto con el selector [attr|=val]

a[hreflang|='en']:after {
content: url(images/gb.png);
margin-left: 3px;
vertical-align: middle;
}

El selector [attr|=val] se utiliza para seleccionar elementos cuyo atributo sea exactamente “val” o empiece por “val” seguido inmediatamente por un guión “-”. Este selector se creó para utilizarlo en el atributo hreflang de los elementos a, por lo que si fue creado especialmente para esto, ¿no vamos a desperdiciarlo, verdad?

Marcando nuestro html correctamente, y mediante una sencilla regla de CSS, ya tendremos señalizados aquellos enlaces que, en este caso, dirijan a páginas en inglés.

Un ejemplo:
Enlace a google.es, en castellano
Enlace a la W3C, en inglés

Documentación.

Selectores por atributos en CSS

Vínculos en HTML

La Fundación CTIC presentó ayer, 19 de junio, el nueveo aspecto del portal de TAW (www.tawdis.net).

Junto a este rediseño, han hecho pública la nueva versión de su analizador de pautas que permite validar WCAG 2.0 y que aunque todavía se encuentra en versión beta, podemos comenzar a utilizar para estar preparados cuando debamos dejar atrás las WCAG 1.0.

Portal tawdis | www.tawdis.net

Comunicado oficial | fundacionctic.org

Vía | Usable y Accesible