SmallStyle

_ accesskeyの表示

Going My WayでWeb Developer Extensionによるaccesskeyの表示について紹介されていましたが，userContent.cssでもできそうな感じだったので試してみました．

/* accesskeyの表示 */
a[accesskey]:after {
    content: " [" attr(accesskey) "]";
    font-size: xx-small;
    vertical-align: super;
}

accesskeyの設定してあるページだと設定されているaccesskeyを右肩にくっつける．ためしに自分のサイトにaccesskeyをつけてみました．

しばらくいくつかのサイトを回ってみると意外にアクセスキーを設定しているサイトも多いことがわかるとともに，サイト管理者の方がすでにアクセスキーを表示されている場合，重複して表示されるため見づらいことに気づく…．ついでにサイトによっては微妙にレイアウトが崩れてしまう．というわけで作成したCSSをBookmarkletで使えるようにしてみました．（Bookmarkに保存して利用してください）

javascript:(function(){var newSS, styles='a[accesskey]:after { content: "[" attr(accesskey) "]"; font-size: xx-small; vertical-align: super; }'; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.documentElement.childNodes[0].appendChild(newSS); } })();

これだと表示させたい時にちょこっと出せるのでいいだろう．accesskeyですがあったらあったで結構便利かもしれません．マウスに手を伸ばさなくても「ALT+E」のようにキーボード操作だけでいいわけですから．