キーボードアクセシビリティとスキップリンク
この投稿は、アクセシビリティと文字サイズ大中小 - ミショニポーの続きです。
先日、ブログに、アクセシビリティと 文字サイズ大中小を書いた。
アクセシビリティ配慮サイトで、大抵ページの右上にある、大中小のリンクを、視力に問題を持っている人がうまく探せるのだろうか、などとつぶやいた。
このようなユーザーインターフェースに関する 自分のはてな?を少しでも、前進させるために、
htmlを1枚書きました。
- キーボードアクセシビリティとスキップリンクを考えるためのhtml
- このリンクを開いたら、キーボードのタブキーを押してみてください。左上に「みずらくありませんか」とかの項目が表示されるので、改行キーを押してみてください
- おまけ フォントサイズ変更をCSSだけで行う
- IE9以上で使えます。IE8対応は、CSS :targetをサポートしていないので、スクリプトが必要です。
- キーボードでフォーカスが移動すると、リンクの意味を読み上げる
- IE,Operaは、動きません。Chorme OK firefoxは、ダイアログのレイアウトが不完全ですが、動作します。
追記:8/1 タブ移動順の修正 フラグメント識別子でスキップリンク移動後、タブキーで 子要素のリンクへタブが移動するように修正しました。
キーボードアクセシビリティを確保する方法を知らない人がいたら、見てみてください。
opacity を使った最もシンプルな方法で書いています。(ほかのやり方もありますが、)
キーボードアクセシビリティを確保するために、htmlは、ほんのちょっとのCSSを書くだけでうまく動作しますが、その方法は、WEBでも、あまり説明されていないので、よろしければ
ただ、そのうち、いろいろと変更が加えられえるかもしれません