テックタッチアドベントカレンダー 22 日目を担当する、フロントエンドエンジニアの shoko です。クリスマスが大好きで、12 月に入ってからは毎日うきうきしています！
本日のテーマは「アクセシビリティ」です。
アクセシビリティとは？
アクセシビリティとは、Web システムやサイトを可能な限り多くの人が利用できるようにすることを意味します。
「可能な限り多くの人」というのは、ハンディキャップを持つ人々だけではなく、さまざまな状況や環境も含まれます。例えば、モバイルデバイスや回線の遅いネットワークを利用する場合、屋外の光が眩しい場所でデバイスを利用する場合、機械の故障でマウスが使えずキーボードで操作する場合…などです。このような状況や環境になることは誰でも考えられることであり、アクセシビリティを改善することは多くの人にとってメリットがあります。
しかし、アクセシビリティに興味を持っても、「何から始めたらいいのかわからない」「興味はあるけど、工数がかかりそうで手をつけられない」と、なかなかはじめの一歩を踏み出せない方も少なくないのではないでしょうか？
今回は、特別な工数をかけることなく、実装時に意識するだけで簡単に取り組むことができるアクセシビリティ改善を3つご紹介します。
1.画像に代替テキスト（alt属性）をつける
<img src="christmas_tree.jpg" alt="クリスマスツリーの写真">
画像の alt 属性に画像の内容を表す文言を指定します。 alt 属性を指定しておくと、スクリーンリーダー*1を利用しているユーザーが画像の内容を認識できるようになります。
alt 属性には必ず文字を指定しなければいけないわけではなく、意味を持たない装飾的な画像や、上記画像のように代替テキストが隣接する画像（寝ている猫）の場合には、空で指定します。このような場合に代替テキストを指定すると、スクリーンリーダーを利用しているユーザーに不要な情報や重複した情報を与えてしまう可能性があるためです。
また、空だからといって alt 属性を省略してしまうと、ファイル名が読み上げられるようになってしまい、ユーザーの混乱を招く可能性があるため注意が必要です。
// OK ✅ 空のalt属性 alt="" を指定する <div> <img src="sleeping_cat.jpg" alt=""> <strong>寝ている猫</strong> ... </div> // NG ❌ alt属性を省略する <div> <img src="sleeping_cat.jpg"> <strong>寝ている猫</strong> ... </div>
代替テキストに指定する文言に悩んだときは、W3C の画像チュートリアルにあるAlt Decition Tree をチェックしてみることをおすすめします。チュートリアル内にたくさん例が載っているので、きっと参考になると思います。
メリット
- スクリーンリーダーで代替テキストが読み上げられるので、視覚障がいのある人など視覚的に情報を知覚することが難しいユーザーにも画像コンテンツの情報を伝えることができる。
- 回線速度の遅いデバイスを利用していて画像の表示をオフにしていたり、何らかの理由で画像がリンク切れになってしまっていたりして画像が表示されない場合でも、代替テキストによって画像コンテンツの情報を伝えることができる。
2.ラベルと入力フォームを紐づける
<label for="title">タイトル</label> <input type="text" id="title">
label の for 属性、 input の id 属性に同じ値を指定することで、ラベルと入力フォームを紐づけることができます。これにより、スクリーンリーダーを利用しているユーザーがラベルを認識しやすくなる、フォームのクリック可能領域の拡大によりマウス利用時の操作性が向上するといった効果が期待できます。
<label htmlFor="title">タイトル</label> <input type="text" id="title" />
for は JavaScript での予約語であるため、React では代わりに htmlFor を使用します。
<label> タイトル <input type="text"> </label>
また、input を直接 label の内側に入れることでも同様の効果が得られます。この場合は関連付けが明確なため、for および id 属性は必要ありません。
メリット
- スクリーンリーダーなどの支援技術で入力フォームにフォーカスが当たった時に、ラベルの名前が読み上げられるので何のためのフォームなのかが理解しやすい。
- ラベル部分をクリックした時に入力フォームにフォーカスが当たるようになる。クリック可能領域を拡大できるので、マウス利用時の操作性が向上する。
3.フォーカスを見えるようにする
ブラウザは、フォーカスされた要素を可視化するためにフォーカスリングを実装しています。フォーカスリングとは、上記画像でいうと「利用規約」という要素を囲っている枠線のことです。キーボードで操作をする時、フォーカスが見えていたほうが迷わず操作がしやすいですよね。
このように通常はブラウザがフォーカスを見えるようにしているので問題がないのですが、クリックした後にもこのフォーカスリングが表示されることを嫌って、CSS で疑似クラス :focus にoutline: none; を指定し、フォーカスリングを消してしまっている場合があります。
そんな時には、:focus-visible を使うと良いでしょう。:focus-visible は、キーボードを使用してタブ移動をしてフォーカスが当たった時にのみフォーカスリングを表示できる疑似クラスです。
a:focus-visible { outline: 4px dashed brown; background-color: floralwhite; }
また、CSS で指定すれば、フォーカス時に独自のデザインをあてることもできます。
メリット
- キーボードで操作をしているユーザーが、画面上にある複数の要素のうち、どの要素がキーボードフォーカスを持っているかを認識しやすくなる。
- 注意力欠如、短期記憶の制約などのあるユーザーが、フォーカスがどこにあるのかを見つけることができるようになる。
おわりに
テックタッチでも少しずつアクセシビリティ改善を進めていますが、まだまだ道半ばです。テックタッチのミッションである「すべてのユーザーが、システムを使いこなせる世界に」を真に実現するため、これからも日々改善に取り組んでいきます。
最後まで読んでいただきありがとうございました。メリークリスマス！🎄
*1:画面に表示された内容を音声や点字など視覚以外の方法で伝える機能のこと
