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

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