実際のサイトでは、accesskey がどのくらい設定されているか見るために、accesskey を CSS で表示させてみます。
アクセスキーに設定されている文字を表示
1 2 3 | *[accesskey]:after { content: "[" attr(accesskey) "]";} |
アクセスキーに設定されている文字をスタイリングして表示
(CSS3)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | *[accesskey]::after { content: "[" attr(accesskey) "]"; margin-left: 0.5em; padding: 0.2em; color: #000000; background: #ffffff; font-size: 75%; font-weight: bold; font-style: normal; text-decoration: none; border: 1px solid rgba(0,0,0,0.2); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2);} |
色々なサイトに accesskey が設定されているかどうか、通常のブラウジングをしながら気にしてみるという目的なので、スタイリングしてあるほうが、サイトのデザインにとけ込まず、いつも同じように表示されるので、見つけやすかったです。
アクセスキーの押し方
以下のキー + accesskey を使うことが出来ます。
| IE | Firefox | Chrome | Safari | |
|---|---|---|---|---|
| Windows | Alt | Alt + Shift | Alt | Alt |
| Mac | control | control + option | control + option |
ブラウザのバージョンによって少し違うようです。Wikipedia にまとめてありました。
Access key – Wikipedia, the free encyclopedia