【アクセシビリティ対応】ブロックスキップを実装した際の「tabindex」の処理について

おつかれさまです。
久々の投稿でございます。

今回は、アクセシビリティについての記事になります。
お客様から突っ込まれても良いように、ここで復習しておきましょう。

オリンピック並みのJIS規格

某案件、アクセシビリティ対応ということで、四苦八苦しました。
聞く所によると、JIS規格は3年か4年に一度改訂のチャンスがあるらしい。（オリンピックかｗ）

で、JISのページを見てみると、最終改訂されたのが、、、
2010年8月20日となっておりました。
日本工業標準調査会：データベース-JIS詳細表示

ということで、今回は「ブロックスキップ」でハマったので、メモ。

ブロックスキップって何？

7.2.4.1 ブロックスキップに関する達成基準
複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利用可能でなければならない。

と書かれております。

詳しくは、富士通さんのドキュメントをどうぞ。
www.fujitsu.com

問題点

• Chrome、Safariは、ブロックスキップを作動させた後にエンターキーでメインコンテンツに移動し、その後tabで移動したらページ上部に遷移してしまう。
• つまり、アンカーした先から、tabindexが作動してくれない。
• アクセシビリティ対応で有名な富士通さんのサイトを元に実装

www.fujitsu.com

現状の症状

• IE、Firefoxは、アンカーした先から、tabindexが作動する。（OK）
• Chrome、Safariは、ページ上部に遷移してしまう。（NG）

参考にした富士通さんのサイトも同じ挙動(T_T)

そもそもな話

「Macの場合は、環境設定を変更しない限り、tabindexが使えない」という驚愕の事実((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

そして、スマホのアクセシビリティはどうなるのか？

誰が答えを持っているのか。何が正解なのか。これからの課題になりそうです。

対策（Macな方向けにまずは、tabでのコントロールを有効にする）

1. システム環境設定から「キーボード」に移動
2. 「ショートカット」の項目に移動
3. フルキーボードアクセスを「すべてのコントロール」にする。

実は、ブラウザ側でも対応が必要(・∀・)

1. Safariの場合は、ブラウザ側の設定も必要。
2. 「環境設定」から、一番右端の「詳細」タブへ移動
3. 「Tabキーを押した時にWebページ上の各項目を強調表示」のチェックボックスにチェックを入れる

Chrome、Safari対処法

ようやく、本題に入れますねｗ
対処法の手順は下記の通りです。

1. メインコンテンツ部分にidを振り、そのブロックにtabindex="0"を追加
2. JS側でメインコンテンツのidをフックに ブロックスキップをクリック時にfocusがあたる設定を追加

参考例）

$('#blockskip a').click(function(){
     $('#contents').focus();
});

ということで。。。
ブロックスキップをエンターした時に、メインコンテンツにfocusを設定してあげる。
で解決できました。

現場からは、以上です。

追伸

参考書籍。
2007年物です。

僕の同窓生が書いてたりします。
中身は論文ですねｗ

amzn.to

物好きな方は、ご一読をおすすめしますｗ

でわでわ。