5

クライアントは、ホームページを最初から空白 (ロゴと背景画像のみが表示される) にしてから、1 ～ 2 秒後にナビゲーションとコンテンツをフェードインするように依頼しました。

CSS で非表示にしたコンテンツから始めて、jQuery でフェードインすることもできます。残念ながら、これはプログレッシブ エンハンスメントに違反しています。アクティブなコードが実行されるまでサイトは完全に使用できず、視覚障害者がスクリーン リーダーを使用するなどの問題を引き起こします。

私が検討した 2 つの回避策は、Flash と<noscript>タグです。Flash は、サイトの他の場所では使用されていないため、やり過ぎのようです。また、ホームページはコンテンツが多く、常に更新される一連のニュース項目があり、軽いブログのようなものです。この <noscript>タグは、スクリーン リーダーを使用している視覚障害者には役に立ちません。通常、ブラウザーではスクリプトが有効になっているためです。

解決策がありませんか？それとも、これは良い考えではありませんか？

4

5 に答える 5

5

以下をせよ

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

このcssで

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

次に、2秒間一時停止した後、できるはずです$("#myHidden-div").fadeIn();

ユーザーが js を無効にしている場合、addClassタグはトリガーされず、何も隠されません。<noscript>タグを使用する必要はまったくないと思います。

<body>ユーザーがコンテンツのジャンプを見て、突然非表示にならないように、スクリプト タグが の直後にあることを確認する必要があります。これは、デフォルトですべてを非表示にするよりも優れています。一部の検索エンジンは、テキストが非表示になっていることに気づき、スパムの理由で無視する可能性があるためです。

于 2011-08-12T15:49:42.153 に答える
1

この種のハックを作成できると思います：

  1. デフォルトで非表示のコンテンツから始めます。
  2. 表示する要素に別の css クラスを追加します。
  3. noscript タグで、新しい CSS クラスの定義を含む別の CSS ファイルを追加して、コンテンツを表示します。
  4. それ以外の場合は、jQuery を使用して要素をフェード インします。

あるいは、あなたがこのウェブサイトを構築している相手を押し返すこともできます。それはひどいユーザー エクスペリエンスだからです。=D

于 2011-08-12T15:48:05.763 に答える
1

視覚障害者用とそれ以外用の異なるサイトを用意してください。一方にはスクリプトがあり、もう一方にはスクリプトがありません。

サーバー側のコードがある場合は、変数を取得するのと同じくらい簡単です。

于 2011-08-12T15:48:08.083 に答える
1

head では、JavaScript でこの CSS ルールを設定できます。

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

jqueryを使用：$("*").css({position: 'relative', left: '-9999px'})

次に、ページの下部で JavaScript を実行してすべてを非表示にし、この CSS ルールを削除してから、必要に応じて徐々にフェードインします。

これは、JavaScript を使用しないブラウザーと、JavaScript 対応のスクリーンリーダーで機能します :)

于 2011-08-12T15:48:54.177 に答える
0

この問題に対する唯一の、理想的ではない解決策はhide()、要素をロードした後に jQuery の関数を使用し、それらをフェードインすることだと思います。コンテンツのフラッシュが得られますが、アクセス可能です。

ここに小さな例があります。

于 2011-08-12T15:47:53.767 に答える