0

これは、前回質問してから取り組んできたので、この質問に対する 2 回目の試みです。

近日公開予定のページのレスポンシブ レイアウトを作成しています。本体ヘッダーは、ブラウザのサイズやデバイスによって変わります。

 <h1><span class="main__header--changer">COMING SOON</span></h1>

...そしてCSS

 @media (max-width: 75em) {
      h1:before {
           content: "HOLD ONTO YOUR HATS";
      }
      .main__header--changer {
           display: none;
      }
 }

 @media (max-width: 64em) {
      h1:before {
           content: "NOT LONG TO GO";
      }
      .main__header--charger {
           display: none;
      }
 }

... などなど、近日登場のさまざまなバリエーションでは、サイズが小さくなるにつれて文字が少なくなり、「nigh」にまで下がります。

これを行う唯一の方法は、display:none のためにスクリーン リーダーが見出しを読み上げないことを意味します。見出しを非表示にする別の方法はありますが、スクリーン リーダーからではなく、コンテンツが CSS から表示されますか?

ありがとう

4

1 に答える 1

0

余白またはtext-indentプロパティを使用して、コンテンツを画面表示領域の外側にバンプすることにより、非表示の効果を作成できます。これらのメソッドは、私が100％クリーンと呼ぶものではありませんが、少なくともHTMLマークアップを整理しておくことができます。

スクリーンリーダーとCSS非表示要素との相互作用を説明するこの役立つスレッドを確認してください。

また、CSSの2番目の参照では、そうでは--changerないと思います--charger。

ちなみに、ステートメント：.main__header--changer {display: none;}がすべてのメディアクエリで同じである場合は、コードに重複することなく普遍的に適用されるように、クエリの外で1回だけ記述することを検討する必要があります。

これがお役に立てば幸いです。

于 2013-02-23T06:32:29.080 に答える