スクリーン リーダーには、見出し間や特定の位置にすばやく移動するためのコマンドがあります。 説明します。実際、 スクリーン リーダー ユーザーに関するアンケートです。 よく知らないページをよく見ていることがわかりました 見出します。
正しい見出しやランドマークの要素を使用することで、 支援技術を利用するユーザーのサイトでのナビゲーション エクスペリエンスを向上させる。
見出しを使用してページの概要を説明する
h1～h6 要素を使用して、ページの構造概要を作成します。目標
あらゆるユーザーがアクセスできるようにする
頭の中のイメージを形にすることができます。
一般的には、メインの見出しまたはロゴに h1 を 1 つ使用します。
主なセクションには h2 要素、サブセクションには h3 要素を指定します。
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
見出しレベルのスキップしない
デベロッパーは多くの場合、見出しレベルをスキップして、 よく考えてください。これは、互換性を損なうため、アンチパターンとみなされます 説明します。
見出しのフォントサイズには、ブラウザのデフォルトのサイズを利用するのではなく、 レベルをスキップしません
たとえば、このサイトには「IN THE NEWS」というセクションがあり、その後に 2 つのセクションがあります。 広告見出し:
セクション見出し「ニュース内」は h2 にすることができ、
広告見出しの両方を h3 要素にすることができます。
「IN THE NEWS」の font-size広告見出しより小さい場合、
最初の記事の見出しを h2 にして、
「ニュースで」h3。これはブラウザのデフォルトのスタイルと
同じになるかもしれませんが
スクリーン リーダーのユーザーに表示される概要が壊れてしまいます。
Lighthouse を使用すると、ページで見出しが省略されているかどうかを確認できます。次のコマンドを実行します。 ユーザー補助機能の監査（[Lighthouse] > [Options] > [Accessibility]）を表示して、 では、見出しはレベルの監査をスキップしません。
ランドマークを使用してナビゲーションを支援する
main、nav、aside などの HTML5 要素がランドマークとして機能する。
スクリーン リーダーがジャンプできるページ内の特別な領域です。
ページの主要なセクションを定義するには、
div 秒。ランドマークが多すぎる場合、多すぎると
圧倒されるほどです。たとえば、main 要素を 3 つではなく 1 つだけにします。
4.
Lighthouse では、手動でサイトを監査して、「HTML5 ランドマーク」 要素を使用してナビゲーションを改善します。"こちらのランドマーク リスト 要素 ページを確認します
スキップリンクで繰り返しの多いコンテンツを回避する
多くのサイトではヘッダーでナビゲーションが繰り返し行われるため、わずらわしくなる 支援技術によってナビゲーションができるようになりますスキップリンクを使用して、ユーザーがこのコンテンツをスキップできるようにしてください。
スキップリンクは画面外アンカーで、常に最初のフォーカス可能なアイテム 説明します。通常は、ページのメイン コンテンツへのページ内リンクが含まれています。なぜなら 支援技術から 繰り返しナビゲーションをバイパスできます
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
多くの人気サイト（GitHub、The NY など）
Times、Wikipedia のすべて
スキップリンクを含めることができますアクセスして、デバイスの TAB キーを押してください
何度か入力します。
Lighthouse では、ページにスキップリンクが含まれているかどうかを確認できます。次のコマンドを実行します。 もう一度ユーザー補助機能の監査を行い、このページには 見出し、スキップリンク、ランドマーク領域の監査を行います。