/blog

実際のサイトでは、accesskey がどのくらい設定されているか見るために、accesskey を CSS で表示させてみます。

アクセスキーに設定されている文字を表示

*[accesskey]:after {
  content: "[" attr(accesskey) "]";
}

アクセスキーに設定されている文字をスタイリングして表示

(CSS3)

*[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 を使うことが出来ます。

ブラウザのバージョンによって少し違うようです。Wikipedia にまとめてありました。
Access key – Wikipedia, the free encyclopedia