Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. アクセシビリティの可視性への影響: 非表示

要素は非表示になり、その子孫はアクセシビリティ ツリーから削除され、スクリーン リーダーは要素をレンダリングしません。

（１）ポジショニング

位置属性を持つ要素を非表示にするには、その要素を画面外に移動し、サイズを 0 (幅と高さ) に設定する必要があります。一例としては、ジャンプ ナビゲーション リンクが挙げられます。次の図を考えてみましょう。

リンクを画面外に配置するには、次のコードを追加する必要があります。

「css」

.スキップリンク{ 
    位置: 絶対; 
    上: -100%; 
}

値が -100% の場合、要素はビューポートの高さの 100% に押し出されます。その結果、完全に隠されてしまいます。キーボードにフォーカスすると、このように表示されます

.スキップリンク:フォーカス{ 
    位置: 絶対; 
    上: 0; 
}

ソースコードの例:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. アクセシビリティの位置への影響: 絶対 | 固定

この要素はスクリーン リーダーでアクセス可能であり、キーボードでフォーカスできます。ビューポートからは隠れているだけです。

クリップ パス 要素に clip-path を使用すると、表示および非表示にする部分を定義するクリッピング領域が作成されます。

上記の例では、透明な黒い領域にクリップパスがあります。要素にクリップパスを適用すると、透明な黒い領域の下にあるものはすべて表示されなくなります。

上記をより直感的に説明するために、clippy ツールを使用します。以下の GIF では、次のクリップ パスがあります。

各方向のポリゴン値を 0 0 に設定すると、クリッピング領域のサイズが 0 に変更されます。その結果、画像は表示されなくなります。同様に、多角形の代わりに円を使用してこれを行うこともできます。

画像 { 
    クリップパス: 円(0 から 50% 50%); 
} 

7. アクセシビリティがクリップパスに与える影響

要素は視覚的にのみ非表示になります。スクリーン リーダーとキーボード フォーカスでは引き続きアクセスできます。

ソースコードの例:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3. 色とフォントサイズを制御する

これら 2 つの手法は、前に説明したものほど一般的ではありませんが、特定のユースケースでは役立つ場合があります。

1. 透明色

テキストの色を透明にすることで、視覚的に隠れるようになります。これは、アイコンのみがあるボタンに便利です。

2. フォントサイズ

さらに、フォント サイズを 0 に設定すると、テキストが視覚的に非表示になるため便利です。次の構造を持つボタンがある次の例を考えてみましょう。

<ボタン> 
  <svg 幅="24" 高さ="24" ビューボックス="0 0 24 24" aria-hidden="false" フォーカス可能="false"> 
    <!-- パスデータ --> 
  </svg> 
  <span>いいね</span> 
</ボタン>

私たちの目標は、テキストをアクセスしやすい方法で非表示にすることです。これを実現するために、次のCSSを追加しました。

.ボタンスパン{ 
    色: 透明; 
    フォントサイズ: 0; 
}

こうすると、テキストが非表示になります。色を変えなくても動作しますが、説明のために追加しました。

ソースコードの例:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. アリア・ヒドゥン

要素に aria-hidden 属性を追加すると、その要素がアクセシビリティ ツリーから削除され、スクリーン リーダー ユーザーのエクスペリエンスが向上します。要素を視覚的に非表示にするのではなく、スクリーン リーダー ユーザーのみを対象としていることに注意してください。

<ボタン> 
    メニュー 
    <svg aria-hidden="true"><!-- --></svg> 
</ボタン>

上記の例では、ラベルとアイコンが付いたメニュー ボタンがあります。スクリーン リーダーからアイコンを非表示にするために、aria-hidden が追加されました。

Mozilla Developer Network (MDN) によると、この属性の使用例は次のとおりです。

• アイコンや画像などの装飾コンテンツを非表示にします。
• コピーしたテキストを非表示にします。
• 画面外のコンテンツや折りたたまれたコンテンツを非表示にします。

4. aria-hidden="true" におけるアクセシビリティの影響

スクリーン リーダー向けに設計されており、スクリーン リーダーからのみコンテンツを非表示にします。ただし、コンテンツは目の見えるユーザーには表示されたままであり、キーボードはフォーカス可能です。

（１）アニメーションとインタラクション

非表示の要素をアニメーション化したい場合、たとえば、非表示のモバイル ナビゲーションを表示する場合は、アクセスしやすい方法で行う必要があります。アクセシビリティの高いエクスペリエンスを実現するために学ぶべき良い例と、スクリーン リーダー ユーザーにとって悪いエクスペリエンスにつながる可能性のある間違いを避けるための悪い例をいくつか紹介します。

メニューアニメーション - 悪い例

展開時にスライドアニメーションが必要なメニューがあります。これを行う最も簡単な方法は、メニューに次のものを追加することです。

ul { 
    不透明度: 0; 
    変換: translateX(100%); 
    遷移: 0.3 秒のイーズアウト; 
} 
 
ul.アクティブ{ 
    不透明度: 1; 
    変換: translateX(0); 
}

上記の設定により、メニューは次のように JavaScript 経由で追加された .active クラスに基づいて展開および折りたたまれるようになります。

menuToggle.addEventListener('click', function(e){ 
  e.preventDefault(); 
  navMenu.classList.toggle('アクティブ'); 
}); 

結果は良さそうに見えますが、大きな間違いが 1 つあります。 opacity: 0 を使用すると、アクセシビリティ ツリー ナビゲーションは非表示になりません。ナビゲーションは視覚的には非表示になっていますが、キーボードでフォーカスしたり、スクリーン リーダーでアクセスしたりすることは可能です。ユーザーの混乱を避けるために非表示にする必要があります。

以下は Chrome Dev Tools のアクセシビリティ ツリーのスクリーンショットです。

つまり、アクセシビリティ ツリーは、スクリーン リーダー ユーザーがアクセスできるすべてのコンテンツのリストです。私たちの場合、ナビゲーション リストは存在しますが、視覚的には非表示になっています。次の 2 つの問題を解決する必要があります。

• メニューが非表示のときにキーボードフォーカスを回避する
• ナビゲーションが非表示になっているときにスクリーンリーダーによるナビゲーションの通知を回避する

以下のスクリーンショットは、Mac OS で VoiceOver ローターを使用してページがどのように表示されるかを示しています。ナビゲーションリストはありますが、非表示になっています

ソースコードの例:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

メニューアニメーション - 良い例

このエラーを修正するには、ナビゲーション メニューに visibility: hidden を使用する必要があります。これにより、メニューが視覚的にもスクリーン リーダーからも非表示になります。

「css」

ul { 
    可視性: 非表示; 
    不透明度: 0; 
    変換: translateX(100%); 
    遷移: 0.3 秒のイーズアウト; 
} 
 
ul.アクティブ{ 
    可視性: 可視; 
    不透明度: 1; 
    変換: translateX(0); 
}

追加されると、メニューはスクリーン リーダーから非表示になります。もう一度テストして、VoiceOver に何が表示されるか確認してみましょう。

ソースコードの例:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. カスタムチェックボックス

デフォルトのチェックボックスのデザインはカスタマイズが難しいため、チェックボックスのカスタムデザインを作成する必要があります。基本的な HTML を見てみましょう。

<p class="c-checkbox"> 
  <input class="sr-only" type="checkbox" name="" id="c1"> 
  <label class="c-checkbox__label" for="c1">カスタムチェックボックス</label> 
</p>

チェックボックスをカスタマイズするには、アクセスしやすい方法で入力を非表示にする必要があります。この目的のために、位置やその他のプロパティを使用する必要があります。 sr-only または visually-hidden と呼ばれる一般的な CSS クラスがあり、これは要素を視覚的にのみ非表示にし、キーボードとスクリーン リーダーのユーザーがアクセスできるようにします。

.srのみ{ 
  境界線: 0; 
  クリップ:rect(0 0 0 0); 
  -webkit-clip-path: ポリゴン(0px 0px, 0px 0px, 0px 0px); 
  クリップパス: ポリゴン(0px 0px, 0px 0px, 0px 0px); 
  高さ: 1px; 
  マージン: -1px; 
  オーバーフロー: 非表示; 
  パディング: 0; 
  位置: 絶対; 
  幅: 1px; 
  空白: ラップなし; 
}

ソースコードの例: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

非表示ボタン

Twitter には、「新しいツイートを表示」というボタンがありますが、これは aria-hidden コンテンツによってスクリーン リーダーから隠されており、新しいツイートがある場合にのみ表示されます。

要約する

これで、Web 上の要素を非表示にする方法と、その長所と短所に関する詳細なチュートリアルに関するこの記事は終了です。Web 上の要素を非表示にする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。