WordPress Snippet

ワードプレスをカスタマイズしよう

WEB アクセシビリティ スキップリンク考

http://d.hatena.ne.jp/tenman/20140731/p1(アクセシビリティに関する記事を書いています。)よろしければこちらも、

デフォルトテーマ 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;
}