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