Duda sobre .visuallyhidden de Boilerplate

[Cotelandia]

Viendo la plantilla por ahí encontre esto en el CSS que es para ocultar elementos sin usar el {display: none;} para no ser penalizado por el buscador de Google. Creo que esa es la única razón ¿o no?.

Código CSS:

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
 
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
 

Hasta ahí todo bien, pero me podrían explicar para que sirve esto que sigue debajo en el css

Código CSS:

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
 
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
 

Desde ya gracias ;)

[pitufoweb]

Hola,

Ahí mismo te dice para que sirve y ademas tiene una URL por si quieres mas información. Si no entiendes mucho ingles, puedes usar el traductor de google o similares.




Saludos

[ryugen]

Lo más importante de visuallyhidden, es precisamente eso, que el contenido se encuentra visualmente oculto. Lo que significa que personas que están viendo la página no lo verán, pero aquellas personas que la naveguen con un lector de pantalla (screen reader) si la podrán acceder (en este caso será leído por el screen reader).

Tiene que ver más con la accesibilidad Web, ocultando elementos con visibility:hidden o display:none, hace que no puedan ser leídos desde un lector de pantallas.

Sobre el tema de SEO, siempre hay que tener cuidado con lo que se esconde fuera de la vista porque es un arma de doble filo. Si es contenido para aumentar el ranking de tu web, que no esté relacionado con el tuyo puedes llegar a ser penalizado.

Saludos

Cualquier otra duda estamos a disposición