2024年4月1日から事業者による障害者への合理的配慮の提供が法的に義務化されることとなりました。
詳しい内容は下記記事に記載しておりますが、この記事では実際に案件の中で対応した内容を記載したいと思います。
実際に行ったこと
案件の内容は都合上記載できませんが、ある企業様のコーポレートサイト、採用サイトのリニューアルの際に、Webアクセシビリティに配慮した構成で構築をいたしました。
（今回はデザイン面ではなく、構築面での対応を行いました）
参考にしたもの
デジタル庁が公開している『ウェブアクセシビリティ導入ガイドブック』を参考にしています。
ポイント
本サイトのアクセシビリティでは、主に下記ポイントに対応して構築を行いました。
- マウスを使わずキーボードのみで操作できるように設計
- Tabキーでの選択時にフォーカスを設定
- Read moreボタンなどのリンクに対して、読み上げテキスト（aria-label）を適切に設定
- 見出しなどのHTMLタグを適切に設定
- 画像の代替テキスト（alt）を適切に設定
- 英語の大文字をCSS（text-transform: uppercase;）で表記し、単語として認識されるように設定
- 装飾の英文字などは読み上げないように設定
PageSpeed Insightsによる評価は下記の通りでした（計測時点）
- Performance：PC 84点、SP 60点
- Accessibility：94点
- Best Practice：100点
- SEO：92点
上記評価のうち、特に重要なのは2番目の「Accessibility」の評価です。
また、これらは障害者でも問題なく使えることを目的としているため特に以下の3点が重要と考えています。
- マウスを使わずキーボードのみで操作できるように設計
- Tabキーでの選択時にフォーカスを設定
- Read moreボタンなどのリンクに対して、読み上げテキスト（aria-label）を適切に設定
以下より、それぞれの内容を詳しく記載していきます。
1. マウスを使わずキーボードのみで操作できるように設計
閲覧者の中にはマウスを使わず、キーボードのみでパソコンを操作している方もいます。
その閲覧者にも使いやすいように設計することが、アクセシビリティの面では重要になってきます。
キーボード操作がしやすくなることで、車椅子を利用する方や手の不自由な方など、マウスやポインティングデバイスを使用できない閲覧者が情報にアクセスし、サービスを利用しやすくなります。
2. Tabキーでの選択時にフォーカスを設定
少し前までのウェブ制作ではデザインデータに合わせるため、CSSで下記のように指定することが一般的でした。
- ボタンやリンクをフォーカスした際に出る枠線が邪魔になるため、デフォルトの装飾を「outline: 0;」や「outline: none;」で消してしまう
- チェックボックスやラジオボタンを装飾するために、デフォルトの装飾を「display: none;」で消し、CSSで新たに装飾する
- メニューボタンやタブ切り替え等のクリックできる要素を<div>タグで作成する。
しかし、上記方法では、Tabキーでフォーカスが当たらなくなってしまうため、アクセシビリティに配慮した指定とは言えません。
そのため、下記のような対策を行っています。
- 2021年頃からモダンブラウザで、「:focus-visibleクラス」がデフォルトで使われるようになっています。
「:focus-visibleクラス」はクリックやフォーカスでは反応せず、キーボード操作でのみ反応する疑似要素となります。
マウス操作でoutlineが表示されなくなったため「outline: 0;」や「outline: none;」で消す必要はなくなりました。
とりわけ「:focus-visibleクラス」について設定する必要はありませんが、枠線とリンクが分かりにくい場合は、別でoutlineを設定する場合もあります。 - 「Visually hidden」というCSSパターンを使用することで、ウェブアクセシビリティに配慮しつつチェックボックスやラジオボタンを装飾できるようになります。
- <div>タグをボタン要素とした場合、tabキーでフォーカスが当たりません。
tabキーでフォーカスを当てる方法はいくつかありますが、目的はボタンですので<button>タグを使用するのが最善です。<button>タグはスクリーンリーダーで「ボタン」と読み上げられるため、ユーザーにも認知しやすくなります。
3. Read moreボタンなどのリンクに対して、読み上げテキスト（aria-label）を適切に設定
ウェブデザインにありがちな、通常のリンクのテキストとして「Read more」や「詳しく見る」と表記されることはよくあります。
ウェブサイトを目で見ているユーザーにとっては「どのページに飛ぶのか」がデザインと流れから理解できますが、スクリーンリーダーでは「リンク：Read more」としか読み上げられず何のリンクなのかが分かりません。
リンクタグに `aria-label` 属性を追記することで、見た目のテキストを無視した読み上げ専用のテキストを設定することができます。
これにより、スクリーンリーダーを使用した際、リンクの目的やコンテンツへのリンク先が明確に伝わります。
以下は、「Read more」 ボタンに `aria-label` を設定する例です。
<a href=”company.html” aria-label=”会社概要ページへ”>Read more</a>
この例では、リンクのテキスト 「Read more」の代わりに、`aria-label` 属性を使用してリンクの目的を明示的に示しています。スクリーンリーダーはこの属性の値を読み上げ、ユーザーに対して「リンク：会社概要ページへ」と伝えます。
また、`aria-label` を設定する際には以下のポイントに気を付けることが重要です：
- `aria-label` の値は簡潔かつ明確であるべきです。閲覧者に対してリンクの目的を分かりやすく伝えるように心掛ける。
- 同じページ内で同じ目的を持つリンクが複数ある場合、それぞれに適切な `aria-label` を設定して区別できるようにする。
- テキストラベルがすでにリンクテキストに含まれている場合は、追加の `aria-label` を必要としないことがあります。
4. 見出しなどのHTMLタグを適切に設定
HTMLタグを適切にマークアップすることはSEOの観点から非常に重要ですが、ウェブアクセシビリティの観点からも考慮する必要があります。
スクリーンリーダーの機能では通常のテキストは続けて読まれるのに対し、H1などの見出しタグは見出し単位として読み上げてくれるため、ページ構成が分かりやすくなります。
H1～H6を適切に設定することで、閲覧者がページ構成を把握しやすくなります。
また、見出しジャンプ機能があるソフトもあるため、ユーザーが知りたい情報にアクセスしやすくなる利点もあります。
ほぼ全てを<div>タグや<table>タグのみで構築されたサイトも存在しますが、SEO的観点はもちろん、ウェブアクセシビリティにおいても全く配慮されていないサイトという評価になってしまいます。
見出しタグ以外にも100種類以上のタグがありますが、ほぼ全てのタグに意味・役割があります。
これらの意味のあるタグ（セマンティックHTML）で正しく記述することで、サイト・ページの構成を把握してもらいやすい、ウェブアクセシビリティに配慮されたウェブサイトとなります。
セマンティックHTMLの重要性については、Goolge公式も下記のような動画をアップしています（英語）
5. 画像の代替テキスト（alt）を適切に設定
代替テキストは視覚障害者やテキストベースのブラウジングを行う閲覧者に、画像に関する情報を提供します。正確な代替テキストを提供することで、 画像の内容や目的が明確に伝わるため、視覚障害者も含むあらゆる方がウェブコンテンツを理解できます。
例えば仕事風景の画像を載せた場合、
「alt=”仕事風景”」と記述するのも間違いではありませんが「alt=”社員がパソコンを使って仕事をしている風景”」と記述することでユーザーは具体的な情景が思い浮かびやすくなります。
文字だけで画像の内容が想像できるように設定すると、ユーザーにとってより親切といえるでしょう。
6. 英語の大文字をCSS（text-transform: uppercase;）で表記し、単語として認識されるように設定
見出しとして「CONTACT」「NEWS」など、英単語を全て大文字で表記する表現はよく使われます。
人間の目では「CONTACT=Contact=お問い合わせ」「NEWS=News=お知らせ」と簡単に理解することができますが、スクリーンリーダーを使用した場合「C、O、N、T、A、C、T」と一文字ずつ読み上げられてしまい、ユーザーには全く意味が通じません。
短い単語ならまだ理解できても、キャッチコピーなど長い文章が全て大文字で読み上げられてしまうとユーザーは嫌になりサイトから離脱してしまう可能性もあります。
そこでCSSのtext-transformプロパティを設定することで、機械的には小文字表記のまま、デザイン上のみ大文字で表示することが可能となります。
以下は、text-transformプロパティを使用して英語のテキストをすべて大文字で表示する例です。
.text-uppercase {
text-transform: uppercase;
}
HTML内でこのスタイルを適用する要素を指定します：
<h2 class=”text-uppercase”>Contact</h2>
この場合、実機での見た目のテキストは「CONTACT」として表示されますが、スクリーンリーダーを使用した場合「Contact」と英単語として読み上げられます。
英語の大文字はデザインにおいてよく使われるため、ウェブアクセシビリティに配慮されたページを作成するには重要な指定となります。
後述の「装飾の英文字は読み上げない」設定と使い分けることで、よりユーザビリティの高いサイトとなります。
7. 装飾の英文字などは読み上げないように設定
<h1>
<span aria-hidden=”true”>Company</span>
<span>会社概要</span>
</h1>
上記の例はページタイトルとしてよく見る構造ですが、aria-hidden=”true”属性が付いた最初の<span>要素内のテキストは、スクリーンリーダーによって読み上げられません。これは装飾用のテキストであり、スクリーンリーダーには無視されます。
一方、2番目の<span>要素内のテキストは通常通り読み上げられます。
aria-hidden=”true”属性が無いとスクリーンリーダーには「Company 会社概要」と読み上げられるため、英語部分がノイズとなってしまいます。
サイトデザインと合わせて目で見ているユーザーにはあまり気にならないように思えますが、スクリーンリーダー利用者にとっては不親切な表記となります。
簡単な記述で設定でき、構築時のコストが抑えられますので、ユーザーの事を考えたウェブサイトを展開するならば積極的に指定すべきです。
まとめ
実際に構築したサイトにつきましては、お問い合わせいただければと思います。その他、Webに関するご相談などございましたら、お気軽にお問い合わせください。