Cómo desvanecerse en una página web completa -

de manera accesible Un cliente ha pedido que su página de inicio comience en blanco (solo el logotipo y la imagen de fondo visibles) y luego desaparezca en la navegación y el contenido después de uno o dos segundos.Cómo desvanecerse en una página web completa -

Podría comenzar con el contenido oculto a través de CSS y desvanecerlo con jQuery. Desafortunadamente, esto viola la mejora progresiva: el sitio sería completamente inutilizable hasta que se ejecute el código activo, causando problemas a las personas con discapacidad visual que utilizan lectores de pantalla, entre otros.

Las dos soluciones que he considerado son Flash y la etiqueta <noscript>. Flash parece excesivo ya que no se usa en ningún otro lugar del sitio; Además, la página de inicio está llena de contenido con un conjunto de noticias en constante actualización, una especie de blog ligero. La etiqueta <noscript> no ayudará a las personas con discapacidad visual que usan lectores de pantalla, ya que sus navegadores generalmente tienen scripts habilitados.

¿Echas la falta? ¿O esto no es una buena idea?

Fuente

2011-08-12 Andy Giesler

¿Alguien está abajo votando a todos? –

Me lo pregunté también. Me gustaría que las personas comentasen cuando votasen a la baja para que el resto de nosotros pudiéramos entender con qué estaban en desacuerdo. –

He votado sobre todos excepto yo para contrarrestar; es vergonzoso que las personas voten sin comentarios. – Bojangles

Haga lo siguiente

<html> 
.... 
<body> 
<script>$("body").addClass("hide");</script> 
...

Con este css

body.hide #myHidden-div{ 
    opacity: 0; 
}

Luego, después de una pausa de dos segundos usted debe poder hacer $("#myHidden-div").fadeIn();

Si el el usuario tiene js deshabilitado, entonces la etiqueta addClass nunca se activará y no se ocultará nada. No creo que deba usar la etiqueta <noscript>.

Debe asegurarse de que la etiqueta del script esté justo después del <body> para que el usuario no vea un salto del contenido y luego se oculte de repente. Esto es mejor que ocultar todo de manera predeterminada porque algunos motores de búsqueda pueden notar que tiene texto oculto e ignorarlo por razones de correo no deseado.

Fuente

2011-08-12 15:49:42

Gracias Amir, eso es algo en lo que no había pensado, más liviano que un jQuery .hide(). Todavía me preocupa que pueda haber un breve destello de contenido antes de que jQuery tenga la oportunidad de iniciarse y ejecutarse, especialmente porque queremos acomodar a los usuarios rurales con conexiones lentas de acceso telefónico. Entonces probaré esto con mi ancho de banda acelerado, y si no funciona, le explicaré al cliente por qué no deberíamos desvanecernos en el sitio. –

@Andy contenta de que puedo ayudar.Si el script jquery incluye está encima de la etiqueta '', entonces el navegador ya debería haber ejecutado el script para cuando llegue al cuerpo. Avísame que tal funciono. –

Creo que la única solución no ideal para este problema es usar la función hide() de jQuery después de haber cargado los elementos, y luego fundirlos. Obtendrá un flash de contenido, pero está accesible.

Tengo un pequeño ejemplo here.

Fuente

2011-08-12 15:47:53 Bojangles

Gracias Jam. Probaría este enfoque, excepto por la mayor probabilidad de que el contenido parpadee, ya que .hide() es una función de mayor peso que simplemente usar JavaScript de jQuery para agregar una clase. (No estoy seguro de quién votará negativamente por estos, no por mí). –

Solo una idea :-) Parece que encontraste una solución a tu problema, que es para lo que SO es. Y todas las respuestas naff, downvoted de JamWaffles ;-P – Bojangles

yo creo que podría hacer este tipo de un truco:

de inicio con el contenido oculto por defecto.
Agregue otra clase de CSS a los elementos que desea mostrar.
En una etiqueta noscript, agregue otro archivo CSS con una definición para la nueva clase css, para mostrar el contenido.
De lo contrario, use jQuery para fundirse en los elementos.

Alternativamente, presione al chico para quien está construyendo este sitio web, porque esa es una experiencia de usuario horrible. = D

Fuente

2011-08-12 15:48:05 Tejs

Apple lo hace en su sitio web, no es una experiencia de usuario horrible – soniiic

En lugar de comenzar con el contenido oculto por defecto, debería comenzar con lo que se muestra. Porque de lo contrario, si se cuelga el css noscript, será una pantalla en blanco por un tiempo. –

También hay una pérdida de SEO si oculta cosas porque los motores de búsqueda más inteligentes ahora miran lo que está oculto y no lo indexan. –

Tiene diferentes sitios para personas con discapacidad visual y el resto. Uno tiene el guion y el otro no.

Podría ser tan fácil como obtener una variable si tiene algún código secundario.

Fuente

2011-08-12 15:48:08 Neal

Gracias Neal, +1. Consideré este enfoque, pero preferiría no duplicar la página de inicio si es posible simplemente por razones de mantenimiento (y posibles motivos de confusión en caso de que alguien más herede el código en el futuro). –

En la cabeza, podría crear establecer esta regla CSS en javascript:

* 
{ 
    position:relative; 
    left:-9999px; 
}

usando jQuery: $("*").css({position: 'relative', left: '-9999px'})

A continuación, en la parte inferior de la página funcionar su javascript para ocultar todo y eliminar esta CSS gobernar, y luego gradualmente desvanecerse como lo desea.

Esto funciona para los navegadores sin JavaScript, y para los lectores de pantalla javascript habilitado :)

Fuente

2011-08-12 15:48:54 soniiic

Gracias soniiic, +1 por el enfoque sugerido; muy similar al de Amir, que acepté por pelos. Al igual que con Amir, me preocupa la posibilidad de que el contenido parpadee y se apague: el contenido estará presente hasta que jQuery cargue y se ejecute, lo que es más probable en conexiones lentas. Aún así, esto parece bastante cercano. –

Cómo desvanecerse en una página web completa -

Respuesta

Cuestiones relacionadas