uga.dev - A Front-end Engineer's shed

原文:https://pauljadam.com/demos/accesskey.html

このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。

DEMO一覧に戻るPaulJAdam.comでさらに詳しく(外部サイト)

アクセスキーのアクセシビリティDEMO

数値キーのアクセスキー


Accesskeys:

文字キーのアクセスキー

macOS Safariのユーザは Control+Option (Alt)+ {Accesskey} を押してください。

⌃ = Control、 ⌥ = Option

このサンプルにおいて、Safariでは Control+Option (Alt)+7 を押下することでアクセスキーを表示させることができます。 (Firefox、Chrome、IEでの場合)。

文字キーをアクセスキーに設定してしまうと、他のアプリやスクリーンリーダと競合してしまうため、競合の可能性が少ない1234567890の数字キーを利用するとよいでしょう。

例えば、WindowsのChromeでのAlt+Daccesskey属性で設定された動作ではなく、ブラウザ標準のショートカットキーが優先され、アドレスバーにフォーカスが当たります。

試しに、このDEMOページのアクセスキーを「VoiceOverとSafari」、「NVDAとJAWSとFirefox」の組み合わせてテストしたところ競合せず、「NVDAとChrome」の組み合わせではAlt+Dのみが競合する結果となりました。

アクセスキーの値に「Control+Option+D」や「Control+Option+C」を使用すると、ユーザがインストールしたMagnet for macOSのようなアクセスキーがmacOSで機能しないようにするアプリとも競合する可能性があります

VoiceOverでアクセスキーを使用する

VoiceOverが実行されているときは、Control+Optionを同時に押すのではなく、Controlだけを押す必要があります。

iCITA: Access Key Example

Chrome で VoiceOver を使用してアクセスキーを使用する

VoiceOverパススルーコマンド(Controlキー、Optionキー、Tabキー)を実行してから、アクセスキーを有効にします。

Tell VoiceOver to ignore the next key combination you press with VO-Tab

† YOUR COOKIE PREFERENCES †

当サイトは、管理人が個人の趣味として制作・公開している二次創作を扱ったサイトです。

  • 当サイトの画像および内容などの無断転載、加工使用、再配布、直リンクなどは禁止です。
  • 表示がおかしい場合はIE6.0以上、800×600以上の環境でご覧ください。
  • この先、BGMが自動再生されます。音量にご注意ください。

uga.dev

推奨環境:Windows XP IE6.0↑/フォントサイズ:中↑/解像度:1024x768↑

なお、ここまでの内容はすべてです。

当サイトでは Google社が提供するアクセス解析ツール「Google Analytics」を利用しています。

Cookieの利用に同意していただける場合はEnterからご入場ください。

もっと詳しく

「Google Analytics」は利用状況の把握およびサービス改善のためにCookieを使用して、利用者のウェブサイト訪問履歴などの情報を収集しています。

収集されたデータは匿名で集計されており、個人を特定する情報は含まれません。

「同意しない」を選択すると、Cookieを利用せずに当サイトが閲覧できます。

同意後もプライバシーポリシーページから再度拒否することができます。

詳細はGoogleのプライバシーポリシーおよびオプトアウト方法をご確認ください。