it-swarm-ja.com

コンテンツの前後にメニューがある方がウェブサイトのアクセシビリティに優れているか

キーボードのみのユーザーのアクセシビリティに関連して、メニュー/コンテンツのマークアップ順序に2つのアプローチを見てきました。

  1. 最初にメニュー、次に上部にあるコンテンツへのスキップのリンクがあるコンテンツ
  2. 最初にコンテンツ、次に上部にナビゲーションリンクへのスキップがあるメニュー

これらのアプローチの1つは他のアプローチよりも優れていますか、それとも両方とも同等ですか?
一方が他方よりも優れている場合、なぜそれが優れているのですか?

5
rooby

「ナビゲーションをスキップ」または「メインコンテンツにスキップ」リンクを最初の要素の前にページの上に配置します。そのため、キーボードユーザーは、スクリーンリーダーにすべてのナビゲーションやその他の操作を行わせるか、スキップしてメインコンテンツに移動するかを決定します。そのため、視覚的に非表示のクラスを使用して、視覚障害者がリンクを非表示にすることができます。 http://webaim.org/techniques/css/invisiblecontent/

2
Amitis

この記事はこれに非常によく答えます- [WEB AIM-Skip Navigation]

重要なポイント:

ページの上部に表示リンクを提供する

重要なのは、リンクがスクリーンリーダーが聞く最初の項目の1つであり、キーボードユーザーがタブで移動することを確認することです。そうしないと、ユーザーはそこに「スキップナビゲーション」リンクがあることに気付かず、無関係なリンクを何とかしようとする時間を無駄にする可能性があります。

この方法はアクセス可能ですが、一部のユーザーが混乱する可能性があるため、ページを視覚的に破壊します。

ページの他の場所に表示リンクを提供する

スクリーンリーダーを使用しているユーザーは、25のナビゲーションアイテムのページに直面しています。コンテンツのスキップリンクは中央にあり、これはすべてのページで同じです。ユーザーは不満を感じ、サイトにアクセシビリティオプションがないと想定し、去る。これは避けてください。

リンクを非表示にする

これを行う方法はいくつかありますが、リンクをすべてのキーボードユーザー、特に視力のあるキーボードユーザーが引き続き使用できることが重要です。つまり、リンクはデフォルトでは視覚的に非表示になっていますが、キーボードフォーカスを受け取ると表示されます。 CSSでコンテンツを完全に非表示にする、リンクを背景と同じ色にする、リンクのサイズを0ピクセルにする、1ピクセルの透明な画像に配置するなどの一部の手法は、これらの重要な要件を満たしていません。

リンクを非表示にすることには欠点があり、ナビゲーションをタブで移動するユーザーはリンクを見逃す可能性があります。これを回避するのは、CSS3の遷移効果を利用してリンクを表示し、その後表示を消すことです。これにより、ユーザーはリンクを見ることができますが、ページの視覚的表示が中断されることはありません。

[〜#〜] answer [〜#〜]リンクを上部に配置します。スクリーンリーダーはこのリンクを検出できる必要があるため、ページで最初に利用できる必要があります。また、視覚障害のないユーザーで、リンクがページフローを混乱させる、または混乱させる可能性があるユーザーを考慮する必要があります。これはリンクを非表示にすることで解決します。

これらの記事を読んでください。問題が明らかになります。これは優れたリソースであるだけでなく、「ナビゲーションのスキップ」リンクの代替手段も提供します。

NIELSEN NORMAN GROUP-キーボードのアクセシビリティ

非表示リンクの詳細

1
80gm2

大学3年間でウェブデザインから学んだことは、グローバルナビゲーションが最初、ローカルナビゲーションが2番目、コンテンツが3番目、関連リンクが4番目であることです。

これは、オプション1、上部にあるリンクへのリンクのスキップが最も一般的であり、最も使用されていることを意味します。私の見解では、それは暗黙の慣習です。

参照: ナビゲーションリンクをスキップ

1
Benny Skogberg