非表示のHTML要素のアクセスキーを定義するにはどうすればよいですか
-
04-07-2019 - |
質問
アクセスキーが割り当てられた<button>
があります。ボタンが表示されている限りアクセスキーは正常に機能しますが、display: none
またはvisibility: hidden
を設定すると、アクセスキーは機能しなくなります。
また、成功せずに試しました:
- 別の要素タイプを使用します:a、input(さまざまなタイプ、タイプレスでも)。
- 非表示コントロールをラップするラベルにアクセスキーを割り当てます。
注、これが標準の動作であるかどうかはわかりませんが、Firefox 3より前では、アクセスキーは可視性に関係なく機能していたようです。
解決
表示されている動作は正しいため、<!> quot; access <!> quot;表示されない要素。 Salの提案はほぼ確実に機能しますが、これを行う目的は何ですか?おそらくあなたが達成しようとしていることを達成するためのより良い方法があります。キー押下ハンドラーの使用を検討しましたか?
キー押下ハンドラーが必要ない場合は、おそらく他の提案を使用したいと思うと思います。 position:absoluteを試してください。左:-9999px;ページからコンテンツを引き出します。または、絶対位置を使用して、不透明度をゼロに変更し、z-indexを-1に変更します。絶対位置を使用すると、要素はページ上の他のコンテンツの配置に影響を与えず、不透明度を設定すると表示されなくなります。不透明度をゼロに設定しても、要素をクリックすることはできますが、見ることはできませんが、ページの他の要素をクリックできない場合があるため、負のZインデックスを使用して他のコンテンツの後ろに引きます。
他のヒント
負のマージンを適用して、表示ページの外側に要素をプッシュできます。多くのブラウザとテキストリーダーは、display:none
および場合によってはvisibility:hidden
の要素も無視すると思います。
最も簡単な解決策:height: 0px; margin: 0px; padding: 0px;
CSSで。
可視性または表示属性の代わりに、ページの外側にボタンを配置します
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
警告:topではなくleftを使用すると、ie7で奇妙な表示バグが発生します