http://d.hatena.ne.jp/tenman/20140731/p1(アクセシビリティに関する記事を書いています。)よろしければこちらも、
- キーボードアクセシビリティとスキップリンクを考えるためのhtml
- このリンクを開いたら、キーボードのタブキーを押してみてください。左上に「みずらくありませんか」とかの項目が表示されるので、改行キーを押してみてください
- おまけ フォントサイズ変更をCSSだけで行う
- IE9以上で使えます。IE8対応は、CSS :targetをサポートしていないので、スクリプトが必要です。
- キーボードでフォーカスが移動すると、リンクの意味を読み上げる
- IE,Operaは、動きません。Chorme OK firefoxは、ダイアログのレイアウトが不完全ですが、動作します。
デフォルトテーマ Twenty fourteen から アクセシビリティに対応の一つの機能として、PCからのアクセス時にマウス操作だけでなく、キーボードのタブ移動で、WEBページの操作ができる機能が追加されています。
と言っても、Twenty fourteenに実装されているのは、タブ移動すると本文、検索機能へのスキップリンクが表示されるだけなので、「ほう、これは場合によっては便利かも」なんて思う人は少ないかも
Raindropsというテーマのアクセシビリティ機能のことを考える中で、本文とかリンクだけじゃなくて、それぞれのウィジェットへのスキップリンクが付いていると、ページをスクロールする必要もなく、カテゴリーやアーカイブのあるリンクへ直接移動できるので、便利感がアップするんじゃないかとひらめいちゃいました。
この機能は、Raindropsでは、すでに実装を終えて、次か、その次のバージョンで使えるようになりますが、一足早くこのサイトで動作するようにしてみました。
タブキーを押すと、カテゴリや、アーカイブページへのスキップリンクが表示されると思います
どうすれば、この機能が実装できるのかという点について説明します。
functions.php
上の例では、$wp_widget_factory というグローバル変数を使って、アクティブウィジェットの情報を取得して、リンクを作成しています。
上記の関数を、header.php の body要素直下で実行します。
( Twenty fourteenだとheader.phpに以下のように書けば、動作します )
という感じで、raindrops_skip_links()を書きます。
Twenty fourteenでテストするなら、必要なスタイル設定は、すでに設定済みなので、このままで動作します。
アクセシビリティとかいうと、なんだか面倒くさそうで、どんなことが便利になるのか具体例も少なく、考えるきっかけが難しい分野かもしれませんが、
ちょっとした具体例として、紹介させていただきます。
Note:
wp_get_sidebars_widgets()を使うと、もっと簡単で柔軟なやり方ができそうですが、「この関数のアクセスは、プライベートとしてマークされている。つまり、それは、プラグインやテーマの開発者が使用するためのものではないことを意味します」という事で、公式テーマなどでは使えないかもしれません
add_action( 'dynamic_sidebar', 'my_dynamic_sidebar' ); function my_dynamic_sidebar($widget){ var_dump( $widget); }
function remove_widgets( $sidebars_widgets ){ $sidebars_widgets['sidebar-2']= false; return $sidebars_widgets; } add_filter( 'sidebars_widgets', 'remove_widgets' );
add_filter( 'is_active_sidebar', 'hoho', 10, 2 ); function hoho( $sidebar, $index ) { if ( $index== 'sidebar-2' ) { return false; } return $sidebar; } if ( is_active_sidebar( 'sidebar-1' ) ) { echo 1; } if ( is_active_sidebar( 'sidebar-2' ) ) { echo 2; }