質問: コンテンツの前後にメニューがある方がウェブサイトのアクセシビリティに優れているか キーボードのみのユーザーのアクセシビリティに関連して、メニュー/コンテンツのマークアップ順序に2つのアプローチを見てきました。 最初にメニュー、次に上部にあるコンテンツへのスキップのリンクがあるコンテンツ 最初にコンテンツ、次に上部にナビゲーションリンクへのスキップがあるメニュー これらのアプローチの1つは他のアプローチよりも優れていますか、それとも両方とも同等ですか? 一方が他方よりも優れている場合、なぜそれが優れているのですか?
回答: この記事はこれに非常によく答えます- [web aim-skip navigation] 重要なポイント:ページの上部に表示リンクを提供する 重要なのは、リンクがスクリーンリーダーが聞く最初の項目の1つであり、キーボードユーザーがタブで移動することを確認することです。そうしないと、ユーザーはそこに「スキップナビゲーション」リンクがあることに気付かず、無関係なリンクを何とかしようとする時間を無駄にする可能性があります。 この方法はアクセス可能ですが、一部のユーザーが混乱する可能性があるため、ページを視覚的に破壊します。ページの他の場所に表示リンクを提供するスクリーンリーダーを使用しているユーザーは、25のナビゲーションアイテムのページに直面しています。コンテンツのスキップリンクは中央にあり、これはすべてのページで同じです。ユーザーは不満を感じ、サイトにアクセシビリティオプションがないと想定し、去る。これは避けてください。リンクを非表示にする これを行う方法はいくつかありますが、リンクをすべてのキーボードユーザー、特に視力のあるキーボードユーザーが引き続き使用できることが重要です。つまり、リンクはデフォルトでは視覚的に非表示になっていますが、キーボードフォーカスを受け取ると表示されます。 cssでコンテンツを完全に非表示にする、リンクを背景と同じ色にする、リンクのサイズを0ピクセルにする、1ピクセルの透明な画像に配置するなどの一部の手法は、これらの重要な要件を満たしていません。 リンクを非表示にすることには欠点があり、ナビゲーションをタブで移動するユーザーはリンクを見逃す可能性があります。これを回避するのは、css3の遷移効果を利用してリンクを表示し、その後表示を消すことです。これにより、ユーザーはリンクを見ることができますが、ページの視覚的表示が中断されることはありません。[〜#〜] answer [〜#〜]リンクを上部に配置します。スクリーンリーダーはこのリンクを検出できる必要があるため、ページで最初に利用できる必要があります。また、視覚障害のないユーザーで、リンクがページフローを混乱させる、または混乱させる可能性があるユーザーを考慮する必要があります。これはリンクを非表示にすることで解決します。これらの記事を読んでください。問題が明らかになります。これは優れたリソースであるだけでなく、「ナビゲーションのスキップ」リンクの代替手段も提供します。 nielsen norman group-キーボードのアクセシビリティ 非表示リンクの詳細