web-dev-qa-db-ja.com

モーダルダイアログはWCAGに準拠していますか?

モーダルダイアログはWCAGに準拠していますか?あらゆる種類のポップアップがWCAGの要件を満たしていないことを理解しています。これにはモーダルダイアログが含まれていると思いますか?

たとえば、モーダル属性を持つPrimefacesコンポーネントを使用しています: http://www.primefaces.org/showcase/ui/overlay/dialog/rtl.xhtml

これを使用できるかどうか、WCAGに準拠しているかどうかを知りたいです。

10
Fuzzy Analysis

これに専用のWCAG 2.0のセクションがあります。 2.1キーボードでアクセス可能。

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html

具体的には:

2.1.1キーボード:コンテンツのすべての機能は、基になる関数が次の入力を必要とする場合を除いて、個々のキーストロークに特定のタイミングを必要とせずにキーボードインターフェイスを介して操作できます。エンドポイントだけでなく、ユーザーの移動のパスに依存します。(レベルA)

そして

2.1.2キーボードトラップなし:キーボードフォーカスをキーボードインターフェイスを使用してページのコンポーネントに移動できる場合、フォーカスをその場所から移動できますキーボードインターフェースのみを使用するコンポーネントで、変更されていない矢印キーやタブキー、その他の標準の終了方法以外のものが必要な場合は、フォーカスを移動する方法をユーザーに通知します。 (レベルA)

どちらもレベルAの要件であるため、モーダルダイアログについての言及はありませんが、キーボードフォーカスがページからモーダルダイアログに移動することを確認する必要があります。 。

アクセシブルなモーダルダイアログを作成する方法に興味がある場合は、この優れた記事で、追加のARIAタグと小さなJavaScriptを使用して、HTMLでステップバイステップで説明します。 https://www.marcozehe。 de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs /

明らかに、サードパーティのUIテクノロジを使用しているため、実際の実装は異なる場合があり、技術的な課題、カスタマイズ、または制約が発生する可能性がありますが、WCAG 2.1キーボード操作要件の本質は変わりません。

11
SteveD

WCAGは、モーダルなどのコンポーネントではなく、コンテンツまたはサービスのアクセシビリティを評価するためにあります。モーダルが物事へのアクセスを維持しているかどうかを理解するには、コンテンツ/サービスのアクセシビリティを調べる必要があります。

WCAGは、さまざまなレベルの実装を備えた一連のガイドラインでもあります。何かを実装する前に、ガイドラインに従う必要がある厳格さを選択してください。

ただし、質問に答えるには、はい、モーダルの使用中にWCAGガイドラインを満たすことは可能です。しかし、それはコンテンツ自体、モーダルの実装方法、および前述のように、ガイドラインにどの程度厳密に従うかによって異なります。

たとえば、次のことができます。
-すべてのモーダルの上に常にタイトルを表示します
-キャプションとキーバインディングのある閉じるボタンを用意します(SteveDがすでにキーボードフォーカスをモーダルに移動しているため)
- サイトを評価 し、必要に応じて、モーダルが問題を引き起こしているときに代替案を探します。

3
jazZRo

WCAGは、インターフェースのメソッド自体ではなく、インターネットのアクセシビリティに関するガイドラインを提供します。直接の懸念に関する限り、WCAG2.0のドキュメントには「モーダルダイアログ」に関するリファレンスはありません。

私が見つけることができた最も近いものは、ポップアップおよび新しいタブウィンドウへの参照でしたが、モーダルダイアログに関するヒントはありませんでした。それがWCAGの安全な側面に該当すると考えるのは安全だと思います。

参照: https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_customize#top

2