ケースのソースコード:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. 可視性に対するアクセシビリティの影響: 非表示
要素は非表示になり、その子孫はアクセシビリティ ツリーから削除され、スクリーン リーダーは要素を表示しません。
(1) 位置決め
Position 属性を持つ要素を非表示にするには、要素を画面外に移動し、そのサイズを 0 (幅と高さ) に設定する必要があります。例としては、ジャンプ ナビゲーション リンクがあります。次の図を考えてみましょう。
リンクを画面外に配置するには、次のコードを追加する必要があります。
「CSS」
.スキップリンク {
位置: 絶対;
上: -100%;
}-100% の値を指定すると、要素がビューポートの高さの 100% に押し込まれます。結果的には完全に隠れてしまいます。キーボードにフォーカスすると、次のように表示されます
.skip-link:focus {
位置: 絶対;
トップ: 0;
}ケースのソースコード:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. アクセシビリティの位置への影響: 絶対固定 |
この要素はスクリーン リーダーからアクセスでき、キーボードでフォーカスできます。ビューポートから非表示になっているだけです。
クリップ パス 要素でクリップ パスを使用すると、表示する部分と非表示にする部分を定義するクリッピング エリアが作成されます。
上の例では、透明な黒い領域にクリップパスが設定されています。クリップパスが要素に適用されると、透明な黒い領域の下にあるものは表示されなくなります。
上記をより視覚的に説明するために、clippy ツールを使用します。以下の GIF には、次のクリップパスがあります。
各方向のポリゴン値を 0 0 に設定すると、トリミング領域のサイズが 0 に変更されます。その結果、画像が表示されなくなります。同様に、多角形を円に置き換えることでもこれを行うことができます。
画像 {
クリップパス: 円(50% 50% で 0);
} 
7. クリップパスに対するアクセシビリティの影響
この要素は視覚的に非表示になっているだけで、スクリーン リーダーとキーボード フォーカスは引き続き使用できます。
ケースのソースコード:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. 色とフォントサイズを制御する
これら 2 つの手法は、前に説明した手法ほど一般的ではありませんが、特定の使用例では役立つ場合があります。
1.透明色
文字の色を透明にすることで、視覚的に隠れます。これは、アイコンのみを持つボタンに便利です。
2. 文字サイズ
さらに、フォント サイズを 0 に設定すると、テキストが視覚的に隠れるので便利です。次の例を考えてみましょう。次の構造のボタンがあります。
<ボタン> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- パスデータ --> </svg> <span>いいね</span> </ボタン>
私たちの目標は、アクセスしやすい方法でテキストを非表示にすることです。このために、次のCSSを追加しました
.button スパン {
色: 透明;
フォントサイズ: 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" に対するアクセシビリティの影響
はスクリーン リーダーに対してのみコンテンツを非表示にするため、スクリーン リーダー用に設計されています。ただし、晴眼者のユーザーにはコンテンツが表示されたままであり、キーボードはフォーカス可能です。
(1) アニメーションとインタラクション
たとえば、非表示のモバイル ナビゲーションを表示するなど、非表示の要素をアニメーション化したい場合は、アクセシブルな方法で行う必要があります。アクセシビリティの高いエクスペリエンスを実現するために、学ぶべきいくつかの良い例と、スクリーン リーダー ユーザーに悪いエクスペリエンスをもたらす可能性のある間違いを避けるための悪い例をいくつか紹介します。
メニューアニメーション - 悪い例
展開時にスライドアニメーションが必要なメニューがあります。最も簡単な方法は、メニューに次のものを追加することです。
ウル {
不透明度: 0;
変換:translateX(100%);
トランジション: 0.3 秒のイーズアウト。
}
ul.アクティブ {
不透明度: 1;
変換:translateX(0);
}上記により、メニューは、次のように JavaScript を介して追加される .active クラスに基づいて展開および折りたたまれます。
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});
結果は良いように見えますが、大きなバグがあります。 opacity: 0 を使用しても、アクセシビリティ ツリー ナビゲーションは非表示になりません。ナビゲーションが視覚的に非表示になっている場合でも、キーボードからフォーカスすることができ、スクリーン リーダーからアクセスできます。ユーザーの混乱を避けるために、非表示にする必要があります。
以下は、Chrome Dev Tools のアクセシビリティ ツリーのスクリーンショットです。
簡単に言えば、アクセシビリティ ツリーは、スクリーン リーダー ユーザーがアクセスできるすべてのコンテンツのリストです。私たちの場合、ナビゲーション リストはそこにありますが、視覚的には非表示になっています。次の 2 つの問題を解決する必要があります。
メニューが非表示になっているときにキーボード フォーカスを使用しないようにします。 ナビゲーションが非表示になっているときにスクリーン リーダーを介してナビゲーションを指示しないようにします。
以下のスクリーンショットは、Mac OS 上の VoiceOver ローターがページをどのように認識するかを示しています。ナビゲーション リストは非表示でも表示されます
ケースのソースコード:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
メニューアニメーション - 良い例
このエラーを修正するには、ナビゲーション メニューに Visibility: hidden を使用する必要があります。これにより、メニューがビジュアル リーダーやスクリーン リーダーから確実に非表示になります。
「CSS」
ウル {
可視性: 非表示;
不透明度: 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 または Visual-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 で非表示のコンテンツを持つスクリーン リーダーには表示されず、新しいツイートが公開された場合にのみ表示されます。
要約する
Web で要素を非表示にする方法と利点と欠点に関するこの記事の詳細は、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後とも downcodes.com をもっとサポートしてください。