skip-link-focus-fix.jsとは:メモ

Twenty FifteenなどのWordPressテーマに入っているskip-link-focus-fix.jsというJSの動作がよく分からなかったのでメモ。

なお、同じskip-link-focus-fix.jsでもテーマによって対象のブラウザ判定に差があるようですが、このファイル名であればおそらく同じことを目的にしているのでは、と思います。

調べながら書いてはいますが内容の正確性に絶対の自信はありませんので、参考程度にご覧下さい。

Twenty Fifteenのskip-link-focus-fix.js

以下がTwenty Fifteenの「skip-link-focus-fix.js」の中身です。

/**
* Makes "skip to content" link work correctly in IE9, Chrome, and Opera
* for better accessibility.
*
* @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
*/
( function() {
var ua = navigator.userAgent.toLowerCase();

if ( ( ua.indexOf( 'webkit' ) > -1 || ua.indexOf( 'opera' ) > -1 || ua.indexOf( 'msie' ) > -1 ) &&
document.getElementById && window.addEventListener ) {

window.addEventListener( 'hashchange', function() {
var element = document.getElementById( location.hash.substring( 1 ) );

if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.nodeName ) ) {
element.tabIndex = -1;
}

element.focus();
}
}, false );
}
} )();

上記に記載されている以下のページで説明されています。

Fixing “Skip to content” links

簡単に言えば、以下のようなことかと思います。

視覚フォーカスと入力フォーカスのズレを解消

ページ内リンクで該当箇所に移動した場合、フォーカスはそのリンクに留まります。
この状態でtabキーで移動しようとすると、現在画面に見えているaやinputなどのフォーカス可能な要素ではなく、移動のために用いたページ内リンクの次の対象にフォーカスしてしまいます。

もう少し具体的に書くと以下のようになります。

1. ページ内リンク「A」をクリックして「B」へ
2. 「B」に移動
3. tabを押して移動（「B」の次に移動するつもり）
4. ページ内リンク「A」の次に移動（画面が上に戻る）

参照した記事では「視覚的なフォーカスと入力フォーカスがずれている」というような表現をされていますが、つまりは「ユーザーが期待した動きをしない」という状態です。

記事では注記が入っていますが、この問題は2013年現在で「Internet Explorer」と「Chrome」のみに影響ありとなっています。
コードを見ると、Twenty Fifteenではoperaも書いていますし、別のテーマではmsieと書いているものもあります。

解決方法

コードをみますと、だいたい以下のような動作の模様です。

• window.addEventListenerでURLのハッシュ変化を監視
• URLにハッシュがついたら、飛び先の要素にフォーカスを移す

tabの移動対象となるフォーカス可能な要素は限られていますから、javascriptで強制的に本来は対象外の要素に対してもフォーカスさせています。

if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.nodeName ) ) {
element.tabIndex = -1;
}

上記の部分は、移動先が本来フォーカス可能なタグであるaやselectなどである場合、element.tabIndex = -1;でtabの移動対象から外していますが、移動対象自体を移動後にtabで選択させることを防ぐためかと思います。

結び

何となく分かるつもりでしたが、こうして言葉にしてみるといろいろ理解できていないことがわかりました。なによりこの仕組みは2013年に公開されていますからね…。
動作がわかっても意義がわからず、意義がわかっても動作が分からず、ではだめですね。
なお、いくら個人的なメモとはいえ内容に間違いがあればご指摘いただけますと幸いです。