【0.気持ち整理編】
【1.導入編】
【2.キーボード操作】
いまここ【2-1.キーボード操作改善＋スクリーンリーダー編】

振り返りと概要

前回の記事ではあえてキーボードで操作できない悪い例を紹介しました。
今回の記事ではそれを修正してキーボードで操作できるかを確認した後、スクリーンリーダーの使い方などを簡単に説明していきます。

キーボードで操作できるように修正する

前回作った非アクセシブルなページ

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

それぞれに問題がありました。
さっそく修正していきましょう。

リンク

href属性にリンク先のパスを指定しましょう。

このリンクはスクリーンリーダーでの読み上げで改善すべきポイントがまだ残っています。

ボタン

buttonタグに変更しましょう。
忘れがちですが、type属性を指定するようにしましょう。

デフォルトはtype="submit"です。
これが原因でsubmitされてしまうことがあります。
ただのボタンならtype="button"を指定するのを忘れないようにしましょう。

このボタンはスクリーンリーダーでの読み上げで改善すべきポイントがまだ残っています。

アコーディオン

簡単に変更したいならdetailsタグに変更しましょう。
デフォルトで開きたい場合はdetailsタグにopen属性を指定します。

detailsタグでアニメーションをつけたい場合はテクる必要がありちょっとめんどくさいです。
ICS MEDIAさんの記事にわかりやすくまとまっているのでこの記事では説明しません。

detailsタグを使用しない場合はbuttonタグで実装することになります。
詳しい実装方法はこちら

このアコーディオンの「buttonでの実装」についてはスクリーンリーダーでの読み上げで改善すべきポイントがまだ残っています。

タブ

タブは実装が少し多いです。

タブをbuttonタグに変更する
アクティブなタブのtabindexを0、それ以外のtabindexを-1にする
タブにフォーカスした状態で左右をキーを押すと隣のタブに移動する
最初のタブで左キーを押すと最後のタブ、最後のタブで右キーを押すと最初のタブ、のようにフォーカスがループする
タブにフォーカスした状態でエンターキーを押すとタブパネルが切り替わる
見えているタブ以外をhidden属性で隠す
タブにフォーカスできるようにtabindex="0"を指定する

ここまでが 最低限 の実装です。
詳しい実装方法はこちら

このタブはスクリーンリーダーでの読み上げで改善すべきポイントがまだ残っています。

ここまで

ここまで対応するといったんキーボードで操作できるようになります。
今回作ったキーボード操作可能なページ

タブキーでのフォーカスの移動
EnterまたはSpaceキーでのボタンのクリックやアコーディオンの開閉
左右キーでのタブの選択とEnterまたはSpaceキーでのタブの切り替え

ができるか確認してみましょう。

これでサイト内のコンテンツにキーボードからもアクセスできるようになりました！

スクリーンリーダー

スクリーンリーダーとは、コンピューターの画面読み上げを行なってくれるソフトウェアのことです。

こちらを使用することで、視覚に頼ることなくコンテンツから情報を得ることができます。
実際に使ってみましょう！

Windowsユーザーの方

NVDAにインストールの手順が載っているので入れてください。

日本視覚障害者ICTネットワークさんの調査によるとWindowsユーザーが圧倒的に多く、「PC-Talker」という支援技術を用いている方が多いようです。
僕は「NVDA」の名をよく聞く印象だったのでこの記事ではNVDAの方を紹介しています。

Macユーザーの方

システム環境設定→キーボード→キーボードショートカット→アクセシビリティ
でショートカットキーを確認してください。
cmd+F5でVoiceOverが起動するようになっていると思います。

補足
VoiceOverの操作

特定の支援技術に対応する　というよりかは、正しいマークアップを行っておく、そうするとどの支援技術でも正しく読み上げられるようになる　と思っておくとよさそうです。

スクリーンリーダーが立ち上がったら、その状態で
今回作ったキーボード操作可能なページ
に戻ってタブキーで

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

にフォーカスしてそれぞれ何と読まれるのか確認してみましょう。
目を閉じて確認するといいかもしれません！

どうでしたか？
おそらくこう感じたのではないでしょうか。

リンク
リンク　こちら　と言われても何のリンクかわからない
ボタン
+1 ボタン　と言われても意味がわからないし、いまカウントがいくつなのかもわからない
アコーディオン
- detailsの方は問題なさそう
- buttonの方はアコーディオンが開いているのか閉じているのかわからないしそもそもアコーディオンなのかもわからない
タブ
哺乳類ボタンと言われてもこれがタブだとわからない

このように、リンク、ボタン、アコーディオン、タブについてそれぞれスクリーンリーダーユーザーのために対応が必要なことがお分かりいただけたと思います。

「Webをもっと使いやすくする　誰にでも使えるようにする」

ここで最初の記事に戻ってみましょう。

「Webをもっと使いやすくする　誰にでも使えるようにする」
が最終目的でした。

スクリーンリーダーを使うユーザー数は視覚障害者数から概算できるであろうと推測すると、ざっくり30万人のうち数%〜数十%程度のユーザーがスクリーンリーダーなどを使い、視覚以外から情報を得ている可能性があると考えられそうです。

その中で自分が関わっているサイトやアプリケーションにどれくらいの人数が来ているかはわかりませんが、そもそもマウスでしか操作できないなら来ていてもすぐに離脱してしまっているのではないでしょうか。

この記事ではひとまずキーボードでの操作をサポートしましたが、＋スクリーンリーダーへのサポートもできれば 「Webをもっと使いやすくする　誰にでも使えるようにする」 が達成できそうですね！

まとめ

キーボードで操作できるだけでは不十分
スクリーンリーダーへの対応が必要

今回の記事でキーボードやスクリーンリーダーなどへの対応が必要なことを知り、
スクリーンリーダーがひとまず立ち上がるようになりました。
細かい使い方は使う中で覚えていくと思うので詳しく説明しません。

次の記事からは読み上げに対して改善する方法を学んでいきましょう！

関連記事