web-dev-qa-db-ja.com

WCAG 3.2で新しいタブを開いてWebアクセシビリティを確保するためのテクニック

WCAG 3.2 は、コンテンツが予測可能な形式で提供され、その後クリックで新しいタブが開かれたときにユーザーがこれを認識できることを示します。

新しいタブで開く多くのリンクのリストを含むWebページがあります。 W3Cは、これがリンクテキストで示されるか、インジケーターがホバー/フォーカスに提供されることを推奨します。ただし、これを必要とする同じページで、これらのオプションを提供すると、デザイン/ UIが大幅に混乱します。

各リンクにポップアップまたはテキスト警告を提供せずに、この適合を達成する他の視覚的に煩わしくない方法はありますか?

また、新しいウィンドウ/タブを開くことに関連する他のアクセシビリティの問題はありますか?

1
Dog

stackoverflow.com にもこの質問をクロス投稿しました。 I answered かなり詳細な説明がありますが、他の人が答えを見つけやすくするためにここにも答えを含めています。

その答えは、達成しようとしている 適合レベル によって異なります。ほとんどの企業(およびほとんどの国の法律)は、AA適合を要求しています。実際、ガイドラインでは、AAAへの準拠は必須ではない必要があると述べています。

注2:一部のコンテンツではレベルAAAの達成基準をすべて満たすことができないため、サイト全体の一般的なポリシーとしてレベルAAAへの適合を要求することはお勧めしません。

ただし、これはAAA要件のsomeを考慮すべきではないという意味ではありません。たとえば、4.5:1( 1.4.6コントラスト(拡張) )より大きい色のコントラストを使用したり、リンクテキストの周囲のコンテキストに依存するのではなく、リンクテキスト自体に意味があることを確認したり( 2.4.9リンクの目的(リンクのみ) )は、どちらもAA準拠よりも優れた拡張機能です。

新しいウィンドウで開くリンクに関しては、AAAに準拠する .2.5要求に応じて変更 に該当します。したがって、達成しようとしている適合レベルによっては、適合しなくてもよい場合があります。

新しいウィンドウで開くリンクがサイト全体に散在している場合は、リンクが新しいウィンドウで開くことを示す視覚的なインジケーターを用意し、その同じ情報をスクリーンリーダーに伝えるのがよいでしょう。 (例: H83:target属性を使用してユーザーの要求に応じて新しいウィンドウを開き、これをリンクテキスト(HTML)で示す を参照。テキストの代わりにアイコンを使用することもできますが、アイコンにalt属性があるか、または aria-labelaria-labelledby 、または 視覚的に隠されたテキスト )。

しかし、それを行うと、ほとんどのリンクが新しいウィンドウに移動するページがある場合、ページはすべての追加情報で乱雑に見える場合があります。ここで注意が必要です。すべてのリンクが新しいウィンドウで開き、各リンクの横にアイコンが必要ないという1つのページに一般的なコメントを付けると、失敗します WCAG 3.2.4一貫した識別 、これはAA要件です。つまり、リンクの横に「新しいウィンドウ」アイコンがあるページと、リンクがないページがあります。

したがって、リンクが新しいウィンドウで開くこと(AAA要件)を示すかどうかifを決定する必要があります。前述のように、AAA要件を実装することは良いことです。ただ一貫している。

1
slugolicious

これがWeb専用サイトの場合、ホバーで2つの異なる下線スタイルを使用するのはどうですか?

  • 同じウィンドウで開くリンクの単一(通常)下線
  • 新しいウィンドウで開くリンクの二重下線

または http://ianlunn.github.io/Hover/ の気の利いたホバー状態の1つを使用します。吹き出しが面白い

1
Koumtti

それで、あなたの要求を正確に言うと、それは記事の最後にあるウィキペディアのようなものでしょうか? (例: https://en.wikipedia.org/wiki/Supply-side_platform

はいの場合、それを表示してもそれほど問題にはならないと思います。または、記事の最後にそれらのリンクの「リスト」を表示するために、リファレンスアンカーのようなものを実装しますか?

新しいタブを開く場合は、ユーザーのWebブラウザーをそれらの新しいタブにフォーカスしないように注意してください。それ以外の場合は、1)メインのWebサイトへのフォーカスが失われます(これは適切ではありません)。

1
Rhevan