HTMLにおけるアクセシビリティの向上方法
アクセシビリティに関する知識が乏しいと感じたので、調べたついでに情報をまとめました。
あまり信頼性が高くない情報となるので、適宜自分でググってみてください。
また、間違いなどがあった場合はご指摘いただけますと幸いです🙇♂️
アクセシビリティとは
一般的に、「多くの人が使いやすい」ということをアクセシブルと言います。
そして、アクセシブルな作りになっているものを「アクセシビリティが高い」と表現します。
例えば、車椅子の人にとって階段は使えませんが、スロープは使いやすいです。
なので、階段はアクセシビリティが低く、スロープはアクセシビリティが高いと表現できます。
これは、Webの世界でも同様です。
「多くの人にとって使いやすいサイト＝アクセシビリティの高いサイト」と言えます。
そして、たくさんの人がWebを使う現代では、アクセシビリティの高いサイトを作ることはとても大事だと言えます。
Web上のアクセシビリティ
では、どのようなことを意識すれば良いのでしょうか？
Webを使う上で主に障害になるのが、目が不自由であることと、手が不自由であることです。
目が不自由であれば、コンテンツの情報を正しく認識できません。
同じように、手が不自由だと、アプリを正しく動作させることができません。
ただ、基本的な対策はブラウザやPCがしてくれます。
例えば、文字を拡大できたり、色調を変えたりすることができます。
また、条件が合えばマウスを使わずに、キーボードだけで画面を操作することも可能です。
さらに、文字の読み上げ機能などもあります。
けれど、正しくHTMLでマークアップができてないと、不自由が生じる可能性があります。
例えば、目が見えない人にとって、alt属性が設定されていないと画像の内容を正しく認識することができません。
また、表示を閉じるためのボタンが「x」の場合、テキストの読み上げ機能を使っても、「エックス ボタン」などと読まれてしまうので、何のボタンなのか分からなくなってしまいます。
なので、アクセシビリティを高めるための技法を使って、最低限のアクセシビリティは守る必要があるわけです。
アクセシビリティ向上の具体的な方法
次に、アクセシビリティ向上に繋がる、具体的な実装方法をいくつか紹介していきます。
まず、アクセシビリティを意識する上で、次の2つの仕様を意識しましょう。
- WCAG:アクセシビリティ向上のために意識すべきことが書かれている
- WAI-ARIA:現代のWebアプリにおいて、アクセシビリティを上げるための機能が書かれている
今回は、これらの仕様を元にして解説していきます。
具体的には、以下のことを意識するようにしましょう。
1.マウスで操作可能なものは、キーボードでも操作可能にする
まず、マウスで操作可能なものは、キーボードでも操作可能にしましょう。
基本的に、HTMLのインタラクティブ要素は、キーボードでも操作できるようになっています。
ただ、JSなどでインタラクティブ要素以外に機能を追加した場合は、キーボードでも操作できるようにしましょう。
これは、「tabindex属性」などを付けることで実現できます。
2.アクセシブルな名前をつける
次にアクセシブルな名前をつけることを意識しましょう。
例えば、先ほども説明したようにalt属性の設置は必須ですし、xボタンなどの分かりにくい要素もNGです。
この時に使えるのが、「aria-label属性」です。
こちらは、画像のalt属性のようなものを一般的なタグにも付与できるようになります。
この属性を設定することで、読み上げ機能などがこのラベルを読み上げてくれます。
3.制約がある場合は、roleを使う
基本的にHTMLを正しく使えていれば、アクセシビリティ上で大きな問題はないです。
ただ、現代はフレームワークやライブラリのせいで、制約が出てくる場合があります。
例えば、ライブラリを使った結果、detailsタグではなくdivタグでアコーディオンが実装される可能性があります。
そう言う時は、role属性を使いましょう。
例えば、このrole属性を使うことで、支援機能がまるでdeitalsタグを扱っているように振る舞ってくれます。
4.制約がある場合は、stateを活用する
3番と同じ理由で、正しいHTMLを使えてないせいで、開閉の状態などをユーザーに伝えられない可能性があります。
そう言う時は、stateの属性を使いましょう。
これを使うことで、テキストの状態をユーザーに知らせることができます。
主なstateは次のとおりです。
- aria-expanded:開閉の状態を表します
- aria-hidden=表示・非表示の状態を表します
- aria-selected=選択の状態を表します
- aria-checked=チェックの状態を表します
5.aria属性を活用するが基本的にはHTMLの機能を使う
roleとstateについて説明してきました。
こちらはWAI-ARIAという機能になり、他にもpropertyというものがあります。
これらは便利ですが、飽くまで使うのは制約がある時にしましょう。
基本的には、HTMLで正しくコーディングすることが優先です。
6.WCAGの仕様に沿う実装を意識する
今までは、WAI-ARIAに沿った実装方法を紹介してきました。
最後に、WCAG2.1を元にしたアクセシビリティの向上方法について解説します。
端折ってる内容もあるので、詳しくは以下のリンクを参照してください。
1.知覚可能にする
全員が、コンテンツの内容を知覚できるような作りにする必要があります。
具体的な実装方法としては、次のとおりです。
- 画像にalt属性をつける
- 音声や映像は、耳が聞こえなくてもわかるように字幕や手話を使う
- 同じように目が見えなくても分かるように、音をつける
- 内容を理解しやすいように、コンテンツを意味のある構造にする
- 色を見やすいコントラストにする
- 音声や手話、映像などは見やすい速度にする
- テキストの間隔を見やすくする
- ホバー時や選択時などの状態を分かりやすくする
2.操作可能にする
全員が、支援ツールを使って操作可能にする必要があります。
具体的な実装方法としては、次のとおりです。
- キーボード操作を可能にする
- ゆっくりの入力でも間に合うタイムアウト制限にする
- 頻繁な点滅は避ける
- Navタグや、tabindex属性を使った分かりやすいナビゲーションを提供する
3.理解可能にする
全員が、コンテンツの内容を理解できるようにしましょう。
具体的な実装方法としては、次のとおりです。
- ユーザーにとって分かりやすい言語、用語を使う
- 音声の場合はハッキリと発音する
- 次の動きが予測しやすいような作りにする
- 事前にエラーを回避するようにバリデーションなどを設ける
4.その他
その他意識すべきことは、次の通りです。
- 古いブラウザなどでもなるべく正常に動作するように作る
- これらをページ内全てで意識する
まとめ
今回は、HTMLを実装する際に気をつけるべきアクセシビリティについて解説してきました。
これらを意識すれば、大幅にアクセシビリティを向上させることができるはずです。
ぜひ、今日から意識してみてください。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion