Twitter Bootstrap を使用したプロジェクトに取り組んでおり、スクリーン リーダーを使用してJavaScript コンポーネントをいじっています。
モーダル ダイアログをトリガーすると、Jaws はページ内の次のリンクに移動するモーダルをスキップします。
アクセス可能なモーダルを実装する方法はありますか?
私が考える別の解決策は、モーダルの機能に静的なページを作成し、ユーザーがスクリーン リーダーを使用するときにこのページにリダイレクトすることです。ユーザーがスクリーン リーダーを使用しているかどうかを何らかの方法で検出できますか?
EDIT 2019: N. Hoffmann は、バニラ JS ( van11yプロジェクトの他のコンポーネントと共に) とjQueryの両方で、アクセス可能なモーダル コンポーネントを作成し、維持しています。
動作とスタイルは、data-*属性とクラスを介して簡単に変更できます。
独自のスクリプトで行うよりも多くの条件 (スクリーン リーダーなど) でテストされています ;-)
また、Bootstrap 4 にはかなりアクセスしやすいモーダルと Bootstrap 3 が最新バージョンにあります (Paypal Bootstrap アクセシビリティ プラグインの多くまたはすべてが 3.3.x にバックポートされました)。
最新のリソース:ヨーロッパのイニシアチブへのアクセスと使用は、多くの興味深い側面を簡単な方法で詳しく説明し、最新の ARIA Deisgn パターンを含む他のリソースを示しています。
アクセス可能なモーダル ダイアログは次のとおりです: http://hanshillen.github.com/jqtest/#goto_dialog
モーダルがアクティブになると、ユーザーが明示的に閉じるまで、キーボード ナビゲーションはダイアログ内に閉じ込められます。
http://irama.org/web/dhtml/lightbox/は、そのようなアクセス可能な実装の詳細を示しています (ライトボックスとモーダル ダイアログの間にはほとんど違いがありません。重要なのは、モーダル部分とキーボード管理です)。DHTML スタイル ガイドの非公式コピーで、ダイアログ モーダルパーツと W3C/WAI-ARIA Making a Dialog Modal
を読むこともできます。
J. Wajsberg は、より DIY 的なアプローチが必要な場合にキーボード入力を DOM 要素内にトラップできる jQuery プラグインを作成しました。
ユーザーがスクリーンリーダーを使用している場合に自動的に検出される解決策がわかりません。しかし、キーボードを使用して「特別モード」を表示するとアクティブにできるリンクをページの先頭（左：-1000emおよび位置：絶対）に非表示にするGoogleソリューションがあります。
<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a>
モーダルダイアログでは、ダイアログhtmldivでariaおよびaria-atomic= "true" aria-live="assertive"属性を使用してみてください。ダイアログボックスの内容をアナウンスする必要があります。