【2.キーボード操作編】ここから始めようWebアクセシビリティ

【0.気持ち整理編】
【1.導入編】
いまここ【2.キーボード操作】

振り返り

気持ち整理編では「なぜやるのか」「何のためにやるのか」を整理しました。
導入編では「どうやって学ぶのか」「やりがちなミス」をみて知識をつけました。

ここからは、スクリーンリーダーを使う前にまずキーボードでサイト内を操作してみよう　というのをやります。
この記事では、キーボードで操作できないコンテンツを見ていきます。次の記事でそれを改善していきましょう。

キーボードでサイト内を操作してみる

一旦二つだけ覚えてください。

Tab
フォーカス可能な「現在フォーカスしている要素の次の要素」にフォーカスを移動します。

Shift + Tab
フォーカス可能な「現在フォーカスしている要素の前の要素」にフォーカスを移動します。

今回は特別にメインコンテンツ内に、よく使用される

リンク
ボタン
アコーディオン
タブ

があるページを用意しました。
ただし、このページのコンテンツはキーボードで操作できません。
https://shamokit.com/examples/a11y/bad

スクリーンリーダーでの読み上げ
実はこれらのコンテンツはスクリーンリーダーでの読み上げに対してもよくない実装になっています。

こちらの改善については次の次の記事あたりで対応します。

まずマウスで操作する

まずはマウスだけで以下を確認してみてください。

TOPページはこちらの「こちら」の部分をクリックしたらTOPページに遷移する
「+1」と書いてあるボタンをクリックすると「クリックするとメッセージが表示されます！」というメッセージが、何回クリックしたかを教えてくれるメッセージに変わる
「このページについて」と書いてあるテキストをクリックすると「このページ内のコンテンツは、キーボードで操作できないようにわざと悪い実装やマークアップをしているページです。
絶対に真似しないでください。」というメッセージが表示される
「哺乳類」「魚類」「鳥類」のタブをクリックするとその下のタブパネルが切り替わる
！！タブの中身は正しい情報ではない可能性があります！！

動いてますね。

キーボードで操作する

Chromeをお使いの方はブラウザのアドレスバー（URLが入力されているところ）あたりをクリックしてからTabキーを2回くらい押すと「しゃもきっとブログ」のロゴにフォーカスが当たって角丸のアウトライン（ボーダー）が表示されると思います。
（キーボードでサイト内のコンテンツにフォーカスできれば何でもいいです。）

そこからタブを何度か押していってみてください。
そして以下を確認してください。

TOPページはこちら　のリンク（に見えるもの）にフォーカスできない
「+1」と書いてあるボタンにフォーカスできない
「このページについて」と書いてあるテキストにフォーカスできない
「哺乳類」「魚類」「鳥類」のタブにフォーカスできない

どうでしたか？グローバルメニューの[メールアイコン]Contactの次のフォーカスがフッターのコンテンツになっていて、メインコンテンツ内にアクセスできなかったと思います。

つまり、 キーボードで操作するユーザーがメインコンテンツにアクセスできていない ということです。
これは「Webを誰にでも使えるようにする」という観点で大問題です。
大した問題ではないと思う方はこの記事を読んでいないはずです。

試しに自分が所属している会社のサイトやアプリケーションをキーボードで操作してみましょう。

おそらくほとんどの方が「このコンテンツにアクセスできない」という部分を見つけると思います。
サイトやアプリケーションの品質を高め、より多くのユーザーが利用できるものにするためにアクセシビリティの改善をやっていきましょう！

具体的に何が悪かったのか

なぜキーボードで操作できなかったのかみていきましょう。
この記事内では簡単な説明にとどめ、修正しません。

リンク

みた感じ「こちら」に下線が引いてあるのでリンクに見えます。
検証ツールで見てみるとaタグでマークアップされています。

あれ、おかしいですね。aタグならキーボードでフォーカスできるはずです。
ところが、よくみるとhref属性が設定されていません。
これのせいですね。JSでページ遷移を実現させているようです。

「+1」ボタン

divでマークアップされているのが原因です。
buttonタグでのマークアップが妥当でしょう。

アコーディオン

こちらもdivで実装されているのが原因です。
アコーディオンについてはbuttonでマークアップするか、detailsタグでの実装が選択肢になると思います。
特に理由がなければdetailsタグでの実装をお勧めします。

detailsタグで実装すればCtrl + Fでの検索においてコンテンツ内にヒットした場合自動でアコーディオンが開くメリットがあり、こちらであればJSがなくても実装できます。

タブ

こちらもdivで実装されているのが原因です。
タブについてもbuttonでのマークアップがいいと思います。

タブに関してはキーボードでの操作のためにJSでの実装が必要です。

まとめ

正しいマークアップがされていないとキーボードで操作できないことがわかりました。

リンク
「+1」ボタン
アコーディオン

に関してはタグを変更すれば少なくともキーボードでの操作は可能になるので、次回の記事では答え合わせ＋補足にとどめ、タブの実装をメインに解説して修正していきます。

次回でキーボードでの操作はできるようになりますが、この記事の序盤で書いたように、実はそれだけではスクリーンリーダーユーザーへの対応が不十分です。

このシリーズはあと数記事続きます。
できるだけ多くなりすぎないボリュームで進めているので、どんどん先に進みたい人は前回の記事で紹介した本やブログなどを読んでどんどんアクセシビリティを改善していってください。

僕もまだ目を通せていませんが、以下の二つのサイトにも実装例が載っているようなのでひとまず共有しておきます。

これから

次回の記事でキーボード操作可能にした後、スクリーンリーダーの紹介と簡単な使い方の説明を行い、その後スクリーンリーダーでの読み上げで問題のあった部分の改善を行います。

できるだけゆっくり進める予定なので、あと3〜４記事くらいかかると思います。