Foros del Web » Creando para Internet » CSS »

Duda sobre .visuallyhidden de Boilerplate

Estas en el tema de Duda sobre .visuallyhidden de Boilerplate en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2013, 07:23
 
Fecha de Ingreso: diciembre-2011
Ubicación: Argentina
Mensajes: 88
Antigüedad: 8 años
Puntos: 4
Pregunta Duda sobre .visuallyhidden de Boilerplate

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:
Ver original
  1. /*
  2.  * Hide only visually, but have it available for screenreaders: h5bp.com/v
  3.  */
  4.  
  5. .visuallyhidden {
  6.     border: 0;
  7.     clip: rect(0 0 0 0);
  8.     height: 1px;
  9.     margin: -1px;
  10.     overflow: hidden;
  11.     padding: 0;
  12.     position: absolute;
  13.     width: 1px;
  14. }

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

Código CSS:
Ver original
  1. /*
  2.  * Extends the .visuallyhidden class to allow the element to be focusable
  3.  * when navigated to via the keyboard: h5bp.com/p
  4.  */
  5.  
  6. .visuallyhidden.focusable:active,
  7. .visuallyhidden.focusable:focus {
  8.     clip: auto;
  9.     height: auto;
  10.     margin: 0;
  11.     overflow: visible;
  12.     position: static;
  13.     width: auto;
  14. }

Desde ya gracias ;)
  #2 (permalink)  
Antiguo 01/05/2013, 12:40
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 11 años, 10 meses
Puntos: 181
Respuesta: Duda sobre .visuallyhidden de Boilerplate

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 01/05/2013, 16:27
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 11 años, 3 meses
Puntos: 187
Respuesta: Duda sobre .visuallyhidden de Boilerplate

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

Etiquetas: elementos, esconder
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:47.