A11yダイアログでアクセシブルなモーダルウィンドウを構築する

モーダル 最近のブラウザで広くサポートされています。それらはとして使用することができます 通知ポップアップ, として オプトインフィールド, あるいは 写真のスライドショー.

あなたはこれらのウィンドウを使用して構築することができます 純粋なCSS しかし、これは最もアクセスしやすい解決策ではありません。代わりに、チェックしてください A11yダイアログ, 焦点を当てている完全に機能するモーダルウィンドウ 最初にアクセシビリティ.

それは走ります バニラJavaScript そのと 独自のカスタムAPI そして、すべてのデバイスにわたって最新のすべてのブラウザをサポートします。あなたがチェックアウトすることができます このデモ 実際の動作を確認する.

典型的なモーダルウィンドウのように見えます。しかし、このスクリプト ARIAタグを使用 すべてのユーザーに最新のアクセシビリティをサポートする.

デフォルトでは、A11yダイアログも タッチスクリーンをサポート, そのため、タップするとクリックするのと同じ効果があります。あなたはそれを閉じるために窓の外のどこかをクリックまたはタップすることができます、あるいはコンピュータ上でESCキーを押す.

どういうわけか、このライブラリはかなり小さいです, わずか1.2kb, すべてのCSSおよびJSコードを含みます。これは完全にアクセス可能な上にそれを軽量にする.

あなたはを通して読むことによってもっと学ぶことができます GitHubリポジトリ そしてA11yダイアログには 独自のドキュメントページ, も。これは上のセクションが含まれています インストールとセットアップ 初心者向けです。をカバーする長いセクションもあります ボタンを追加するためのDOM API モーダルウィンドウを開く（または閉じる）ことができるページに.

あなたがしようとしているなら よりアクセスしやすいWebサイトを構築する プロジェクトでA11y Dialogを実行することを真剣に検討してください。あなたはできる ソースコードを入手する GitHubから、またはnpmやBowerなどのパッケージマネージャからダウンロードする.

メインページを見て、セットアップと基本的なJavaScript機能についてもっと学んでください。この図書館は来る ARIAのアクセシビリティ以上のもの, モーダルウィンドウの機能を拡張したい場合は、テストする価値があります。.