Ocultar contingut Accessibilitat Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Altres llocs
Logo Accessibilitat Digital   Accessibilitat Digital
Accessibilitat Digital

Ocultar contingut

Existeixen situacions en les quals és necessari ocultar una part del contingut de la nostra pàgina web per a un determinat dispositiu o tecnologia de suport. Vegem algunes d'aquestes situacions:

 

Ocultar contingut a l'usuari

Volem ocultar informació a l'usuari,però que siga accessible per als motors de cerca com per exemple Google. No és recomanable lloc que aquestes aplicacions interpreten aquesta tècnica i poden penalitzar el nostre posicionament.

Per a açò utilitzarem les regles CSS display:none o visibility:hidden com es mostra a continuació:

.ocultar-contingut {

display:none;

}

.ocultar-contingut2 {

visibility:hidden;

}

 

 Text per a motors de cerca

 

 

Text per a motors de cerca

 

Volem ocultar informació secundària quan el dispositiu des del qual s'accedeix a la nostra pàgina web és un dispositiu mòbil.

Bootstrap ens proporciona una sèrie d'utilitats per a ocultar contingut depenent de la grandària de la pantalla del dispositiu. Consulta la secció de la documentació sobre utilitats responsive.

 

Ocultar contingut als usuaris però accessible per a lectors de pantalla 

Volem ocultar informació per als usuaris, però que aquesta siga accessible per als lectors de pantalla i els motors de cerca.

Amb la classe ocultar-visualment espentem el contingut fora de la pantalla i amb ocultar-visualment2, vam crear un element d'1 únic píxel com es mostra a continuació:

.ocultar-visualment {

position:absolute;

overflow:hidden;

top:-9999px; /* o left:-9999px; o text-indent:-9999px; */

}

.ocultar-visualment2 {

position:absolute;

height:1px;

width:1px;

overflow:hidden;

clip:rect(1px 1px 1px 1px); /* Compatibilitat IE6/IE7 */

clip:rect(1px, 1px, 1px, 1px);

}

 

Text per a lectors de pantalla i motors de cerca

 

 

Text per a lectors de pantalla i motors de cerca

 

En qualsevol cas, es recomana utilitzar el segon mètode posat que en dispositius menys potents el fet d'espentar el contingut fora de la pantalla i per tant, crear un marc més gran crea problemes de rendiment.

Volem ocultar etiquetes que necessitem per a complir els estàndards, però que no necessitem que siguen visibles. L'exemple més clar són les etiquetes label associades als formularis, la norma ens obliga a disposar d'una etiqueta per cada element de formulari. Si per exemple, volguérem usar solament l'atribut placeholder, tindríem el problema que no tots els navegadors o tecnologies de suport suporten aquest atribut. A continuació, veiem aquest exemple:

 

 

El framework Bootstrap, que usem actualment en les plantilles de totes les aplicacions, disposa d'un estil ja predefinit per a poder mostrar contingut només en lectors de pantalla: sr-only.

 

Contingut per a lectors de pantalla