[SOLUCIONADO] Alternativa HTML5 a display none, problemas de accesibilidad

[g3kdigital]

Cordial Saludo.

Hola! Pues es que veran tengo una duda de accesibilidad.

He escuchado y leido por ahí, que ya no podemos usar display:none para ocultar contenido.

Pero veran, yo quiero hacer un botón de mostrar/ocultar y pues sí lo hago por el metodo:

Código:

.oculto
{
    position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

Pero aunque ya no es visible el contenido, el scrollbar lo detecta y deja un espacio vació enorme debajo del footer. ¿Que puedo hacer? Tendrá que ver con la maquetación? la herencia? O alguna ténica especial para casos concretos?

Cuando lo hago con "display: none" este espacio desaparece, ya probe con:
opacity, con left, con visibility y nada...

[pzin]

Usa display: none, que para eso precisamente está hecho. Donde quieras que hayas leído que no se puede usar, desconfía en un futuro de esa fuente de información.

[g3kdigital]

El problema es que la fuente no es solo un sitio, son miles. Haz una búsqueda por el tema en google:

"display none" y "accesibilidad"

Que se originaron por cierto articulo de google: https://support.google.com/webmasters/answer/66353

O incluso en el blog del ceo community de google: http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/

No es que diga que lo prohíba y ciertamente se refiere a practicas antispam en el buscador, pero a raiz de esto, se comenta que no hay seguridad en que los buscadores validen ese texto como valido si esta oculto y hablo de información relevante.

Tu que opinas?

[pzin]

Pues ambos artículos hablan claramente de manipular buscadores con textos ocultos, que esa ya es otra cuestión.

Pero es que si haces eso de la posición absoluta, también estás incumpliendo lo que dice el primer artículo:

usando CSS para incluir texto fuera de la pantalla

Supongo que por los enlaces que has puesto, que tu duda es más bien relacionado con los buscadores y temas de SEO que por accesibilidad.

De todas formas hay una técnica que los buscadores no penalizan y se consigue ocultar contenido pero que los lectores de pantalla siguen interpretando, que es usando clip.

Código CSS:

<div class="algo contenido_oculto"></div>
 

Código CSS:

.contenido_oculto {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}
 

Si lo haces así es como tener un microframework y tener una clase para aplicarlo a los elementos que necesites. El !important es simplemente por si otros estilos que afectan al elemento tienen especificada otra posición.

[Tecna]

Buenas,

si no se usa correctamente, display none puede causar problemas de accesibilidad y es lógico que así sea porque una cosa que no está visible dificilmente puede ser accesible. Por ejemplo a veces se usa para esconder contenido en versiones para móviles, esto es totalmente incorrecto, además de molesto, porque el contenido debe ser el mismo independientemente del dispositivo o la tecnología que se use para acceder a eĺ. También puede dar problemas si se esconde contenido mediante css y se muestra con javascript, cuando éste último esté desactivado el contenido no será accesible. Para que esté siempre accesible basta con hacerlo al revés, ocultarlo con javascript.

Las técnicas de posicionarlo fuera de la pantalla o usar clip son las que se recomiendan para incluir contenido extra para personas con discapacidad, por ejemplo para explicar una imagen que sustituye a un texto, o para ampliar el texto de un enlace, ya que si se incluye así los lectores de pantalla si pueden detectarlo pero con display none no, no está accesible . Usar estas técnicas para intentar mejorar el seo es un error, además de una pérdida de tiempo. Más valdría usar el tiempo en hacer una web bien hecha y accesible que intentar engañar a los buscadores que son más listos que muchas personas.

[g3kdigital]

Muchas Gracias por sus respuestas. Aun no he probado lo del clip y aun tengo dudas, sobre ocultarlo solo con javaescript, pero sin duda me han esclarecido mucho más la cosa.

Éxitos a todos.