こんにちは！ASUE株式会社広報のN村です。

さて、2024年4月1日より障害者差別解消法の改正内容が施行されています。この改正内容は、民間事業者が障害のある方が生活する上での障害をできるだけ取り除く「合理的配慮の提供」を義務化するものです。

「合理的配慮の提供」とは、障害者が施設やサービスを利用する際などにその障害によって制限を受ける場合は、事業者側が過重な負担にならない程度に別途サポート等をする必要があるということです。例えば、入り口に段差があるお店に入るために、車椅子を使っている方へお手伝いをするなどが挙げられます。

この合理的配慮の提供の義務化は、国や地方公共団体といった行政組織だけでなく、今回の改正で民間の全ての事業者も対象となっており、2024年6月4日までに事業者側の対応が必要とされていました。

この「合理的配慮の提供」のために、例えばお店の入り口に予めスロープを設置しておくなどの「環境の整備」に関しては、これまで同様「努力義務」となっております。

Webサイトに関して言えば、利用者から「サイトの重要な部分の情報が読み取れない（例：画像になっている）」「この操作ができない（例：マウス操作ができないことでフォームを完了できない）」等の問い合わせがあった場合に、「代わりとなるテキストファイル等を問い合わせ利用者に送る」「電話やメールで別途対応をする」などが「合理的配慮の提供」にあたります。

一方、Webサイトを大幅にリニューアルしたりシステムの改修等を行うことは、事業者にとって負担が大きく、時間がかかる場合も多いため、「環境の整備」にあたると考えられます。

そのため、Webサイトのアクセシビリティ = ウェブアクセシビリティの確保は、現状では努力義務ではありますが、Webアクセシビリティの対応のためにすべきことはWeb担当者としては知っておきたいところかと思います。

ということで、本記事ではアクセシビリティとは何か？というお話と、Webサイトをアクセシビリティ対応するにあたってすべきことをご紹介します。

アクセシビリティとは？

アクセシビリティとは、「Access（近づく、アクセスする などの意）」+「Ability（できること、能力 などの意）」を組み合わせた言葉で、転じて現在では「商品やサービスを利用できること、利用しやすさ」のような意味を持ちます。

中でも、今回詳しくご紹介する「ウェブアクセシビリティ」とは、Webサイト利用者が年齢や利用環境、そして障害の有無に関わらず、サイト上で提供されているあらゆるサービスや情報を利用できることや利用しやすさを意味しています。

現在、多くのサービスや情報がWeb上で提供・発信されており、社会生活を送る上で必須の生活インフラとなっています。
そのため、それらのサービスや情報など、あらゆるものを誰であっても、デバイス環境などに関わらず利用できる状態にしておく必要があり、ウェブアクセシビリティを確保しておくことが重要なのです。

ウェブアクセシビリティの規格

Webサイトの合理的配慮の提供のための環境の整備にあたって、網羅的にきちんと対応するためにはガイドラインを利用し、準拠する必要があります。

国内では、一般に「JIS X 8341-3:2016」の規格（国際規格との一致規格）を利用しますが、どれを元に対応してもOKです。

が、このあたりの規格に正しく準拠して対応していることを示すためにはある程度厳密な手順を踏む必要もあり、専門的な知識も必要になってくるかと思います。

規模の大きい企業であればしっかりと対応を進められるかと思いますが、中小規模の企業や個人の店舗などではここまできっちりした対応は難しいかと思います。

実際の導入にあたっては、デジタル庁が配布しているウェブアクセシビリティ導入ガイドブックなどを参考に重要度が高く、対応しやすいところから進めていくのが良いかと思います！

Webアクセシビリティ確保のために知っておきたい基本事項

視認性の確保

まず、誰にでも「見やすい」サイトにすることが重要です。視認性の確保にあたって重要なポイントは以下の通り。

配色

アクセシビリティにおいて配色でまず気をつけるべきは、「テキストが読めること」と「色弱者の方への配慮」です。

読みやすいテキストにするための色のコントラスト比

テキストは一般的に文字色と背景色のコントラスト比が高いほど読みやすくなります。コントラスト比とは、色同士の明るさの比のことで、文字色と背景色のうち明るい方の色の相対輝度をL1、もう一方の相対輝度をL2としたとき以下の式で表すことができます。（HSLで色を表した際の輝度Lとは別なので要注意！ 相対輝度の計算は面倒なので割愛します、ググってください。）

例えば、白（#ffffff ）と黒（#000000 ）の場合、

となります。

一方、赤（#FF0000）と赤（#FF0000）の場合は、

となります。要するに、色のコントラスト比は1〜21の間で表されます。

実際の画像が以下の通り。

コントラスト比21の画像は文字を読むことができると思いますが、コントラスト比1は同じ色なので当然字は読めません。

一般的に、テキストを読みやすくするために必要なコントラスト比は4.5と言われています。これだけあれば、Web上だと29px以下のテキストであれば太字でなくても読みやすいようです。また、見出しなど30px以上のテキストサイズの場合はコントラスト比が3以上あれば最低限の視認性が確保できると言われています。

例えば、文字色が#f6cbcbの場合、背景色とのコントラスト比がおおよそ1.5、2、3、4.5、7での見え方はそれぞれ以下の通りです。

例：コントラスト比1.53の場合

例：コントラスト比2.01の場合

例：コントラスト比3.03の場合

例：コントラスト比4.64の場合

例：コントラスト比7.17の場合

視力等になんの問題もない方はどれでも読めるかもしれませんが、コントラスト比が大きくなるほどテキストが読みやすくなっているかと思います。

一方、白と黒（#ffffffと#000000）のようにコントラスト比が高すぎると目が疲れやすくなるため、少しだけコントラスト比を抑えた色にすると、長く読んでいてもストレスなくみることができます。

例：コントラスト比21の場合（文字色：#000000）

例：コントラスト比17.4の場合（文字色：#1A1A1A）

例：コントラスト比12.63の場合（文字色：#333333）

例：コントラスト比12.59の場合（文字色：#2C343E）←ASUE通信の小さい見出しの色です

基本的にどれも問題なく読める方が多いかと思いますが、コントラスト比21のものと比べて、コントラスト比を下げたものの方が背景と馴染んで目に優しい感じがすると思います。

視認性のためにもコントラスト比を大きくすることは重要ですが、この辺りも考慮して配色を決定しましょう！

色弱者の方でも読みやすい配色

色を認識する網膜にある錐体細胞などに異常があり、色の認識が正常な場合と異なる状態のことを色覚異常と呼びます。実は、意外とこのような状態の方は多く、男性は20人に1人、女性も500人に1人いると言われています。

色弱者の方のうち、P型とD型の色覚を持つ場合がほとんどであり、この2つの色覚は見え方が似ています。例えば、赤と緑・紫と青・オレンジと黄緑などの色の区別が難しくなっています。また、P型とD型で錐体細胞がないのではなく分光感度がずれている場合は、弱度と言われそれぞれC型との中間のような見え方をするそうです。

T型とA型については該当者はかなり稀ですが、T型では青と緑の区別がつきにくかったり、A型では色の明暗でしか区別できないなど、それぞれの色覚ごとに様々な見え方をしています。

例えば、色相環の見え方。（→色相環については次のブログをどうぞ：「デザインの配色はどう決める？ 配色のキホンと困ったときに頼れるWeb配色ツール」）

※実際の見え方とは多少差異があると思われます。

C型が一般的な見え方ですが、P型とD型では青色〜灰色と黄色〜黄土色の濃淡、T型では赤色と緑色の濃淡のように見えるのがわかると思います。P型とD型では、赤〜緑色の区別と青〜紫色の区別がつきにくく、T型では紫〜黄色と緑〜青色の区別がつきにくくなります。（A型は便宜上グレースケールで表現しましたが、錐体細胞を1種持つ場合は違う色で見えるかと思います。）

では、よくある目立たせたい注意書きはどのように見えるでしょうか。

C型とT型は赤色となっており、おそらくコンテンツ内にあれば目立つと思います。が、P型・D型は黄土色のようなくすんだ色合いであまり目立つとは言えないかもしれません。

このように文章中などで色を変えて目立たせたいものは青系・オレンジ系のカラーを使うと比較的どの色覚でも区別しやすくなります。

例：水色を使った場合

例：オレンジ色を使った場合

また、図やグラフなどを使用する場合は、色以外でも区別がつくようにするのがベストです。

例えば次のグラフ。

左がC型、右がP型の見え方のグラフです。緑と赤の線で目に特に問題がなければ見やすいと思いますが、P型ではほぼ同じ色になっており、見難いです。

こういう場合は、こちらの画像のように記号などを使うことで、グラフの線を色以外でも区別できるようにするのがベストです。

簡単な見え方の確認方法

また、色弱者の方がどのように見えているのか、Google Chromeのブラウザ上で簡易的に確認することが可能です。

デベロッパーツールについてはこちらもどうぞ。（→デベロッパーツールの使い方）

大きさ

続いて大きさ。スクリーン内をブラウザの拡大機能で見ることはある程度可能ですが、テキストであれば最低でもWebページ上で10pxは必要です。また、通常のテキスト（記事の本文など）は14〜16px以上が好ましいです。

10px以下は使用せず、10px〜12pxは使用する場合は注釈や補足等のちょっとしたテキスト（※重要な情報には使用しない）、14〜18pxを記事やブログの本文などの通常のテキスト、20px以上を見出しなどに使用するのがベターです。

テキストの読みやすさ

上述した視認性の確保ともつながる話ですが、誰であっても「読みやすいテキスト」にすることも重要です。重要なポイントは次の2点。

読みやすいテキストにするためのポイント

テキストの大きさはもちろん、行間が読みやすい程度に空いていることが読みやすさにあたっては重要です。

行間がほとんど空いていない状態（cssだとline-height:1）、文字が詰まってしまい読みにくいかと思います。これは、認知障害等がある方にとっては文章を読むことが困難になる原因となります。（たぶんそうじゃなくても目が滑って読めないね。）

また、逆に行間が大きくなりすぎると文章のまとまりを認識しにくくなるので、一般的に行間は1.5〜2くらいにしておくのがベストです。

また、一行あたりの文字数も多すぎたり少なすぎると読みにくくなります。例えばPCの横幅目一杯のコンテンツ幅で文章を載せてしまうと、目をたくさん動かさなきゃいけなくなり、多くの人が読みにくくなるかと思います。

例：一行が長すぎる場合（PCのみ表示）

　

　

　

　

例：一行が短すぎる場合（PCのみ表示）

これら例は極端ではありますが、このようなテキストのレイアウトは非常に読みにくくなってしまうので、コンテンツの幅・行間に気をつけたレイアウトにしましょう。

スクリーンリーダーで正しく読まれる文章

Webページを視覚障害等がある方が閲覧する場合、スクリーンリーダーのような音声など視覚以外の方法でユーザーに情報を伝えるシステムを使用して文章を読むことがあります。そのため、スクリーンリーダーを使った時に、正しく読まれることは重要です。

スクリーンリーダーは基本的にHTMLで記述された順番通りに文章など読み上げ、スペースや改行があればその部分で単語や文章を区切って読むことになります。

例：正しく読むことができない悪い例（1）スペースや改行でレイアウト調整

例えば、上記の表では、左側の列で文字数を揃えるために「日　時」「場　所」というように単語の中にスペースを入れています。それぞれ「日時（にちじ）」「場所（ばしょ）」と読み上げてほしいところですが、スペースがあることで「ひ　とき」や「ば　ところ」のように単語を区切って文字ごとに読まれる可能性があります。

また、改行で見栄えを整える場合も同じです。上記の例では、「かいじゃりすいぎょの」が「海（改行）砂利水魚の」となっているので、「うみ じゃりすいぎょの」などのように読まれる可能性があります。

例：HTMLの順番がおかしい

上記の例では、見出し→本文→サイドメニュー→サイドメニューのリストの順に読んでほしい内容だと思います。が、実は見出し→サイドメニュー→本文→サイドメニューのリストの順番にHTMLが組まれています。（※スマートフォンなどの小さい画面だと見にくいと思います。）

こちらは極端な例ですが、デザインで作られた見た目を重視した結果HTMLを変な順番に組んでしまうと、スクリーンリーダー等の使用者がうまく内容を読み取れない可能性が出てきます。

画像のAlt属性

続いて、画像のAlt属性について。

<img src="/images/xxxxxxxxx.jpg" alt="ここがAlt属性">

HTML上で画像は上記のような形で記述されますが、このなかに「alt="〜〜〜〜〜〜〜〜〜"」の形で書かれるのが画像のAlt属性です。（htmlに関する解説はこちらをどうぞ→Web広告運用者も知っておきたい！広告運用に役立つhtml/cssの基礎）

この画像のAlt属性は、スクリーンリーダーを使って音声等で情報を伝える場合にこの画像がどのような画像なのかの説明として使用されます。そのため、意味のある画像についてはAlt属性内にユーザーが情報を読み取れるような説明を記載する必要があります。また、Alt属性内に画像の内容とは関係ない文章を書くことはNGです。

例：Alt属性の付け方

<img src="https://asue.jp/blog/wp-content/uploads/img-accessibility-alt01.jpg" alt="グラフ：AとBの推移 横軸：2000年〜2024年、縦軸：量
当初はAの方が高い数値を示しながら両者とも上昇。その後Aのみが大きく下落し、2005年頃から2016年頃までBが上回っていた。その後、Aが上昇、Bが下落し、2024年はAが大きく上回っている" class="wp-image-31117"/>

例の画像は一切なんの意味も持たないグラフなのでAlt属性の内容にも意味もないのですが、このようにグラフの内容がどのようなものかわかるように書くのがAlt属性の正しい使い方です。

基本的にはAlt属性は必須の属性ですが、以下のような場合はなくてもいい（または詳しい説明を省略しても良い）と言われているので、自分が音声だけでページを読み取らなくてはいけない状況を想像してAlt属性を入れるとある程度良い感じに入れることができると思います。

状況に応じて、見えない場合でも情報が正しく読み取れるように記載しましょう。

Alt属性の使い方の悪い例：画像と無関係な文章を入れる

<img src="https://asue.jp/blog/wp-content/uploads/https-www.pakutaso.com-assets_c-2013-08-MAR62_nekohitoyasumi500-thumb-1000xauto-3359-e1429842572785.jpg" alt="むかしむかしあるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ洗濯におばあさんは川へ芝刈りに行きました。逆だよね。ちなみにこれは全く関係のない可愛い猫の写真。" class="wp-image-6921"/>

これがSNSで流行ってるやつです。Alt属性を使うとSNSの文字制限以上に記載できるため、関係ない写真を載せて日記やレポートなどを書く人が増えています。良くないです。

わかりやすいリンク

また、リンクの内容もアクセシビリティに関わってきます。例えば、スクリーンリーダーを使用するときリンク部分にジャンプして読み上げていく機能がありますが、そのときに「詳細はこちら」などのぼやっとしたテキストだと、どんなページに飛ぶのか、なんのリンクなのかがユーザーには読み取れません。

それ以外にもリンク切れだった場合などにも、リンクテキストがしっかりしていれば調べる手がかりになる場合もあるので、きちんとした記載を心がけましょう。

悪い例：押したときにどうなるかわかりにくい文言（以下のリンクはダミー）

リンク単体で、どのようなページに飛んだりどんな動きをするかがわからないような文言を、リンクやボタンのテキストにするのはよくありません。

リンク部分だけをみて、そこを押したときにどこに遷移するのか・何が起きるのかがわかる内容が好ましいです。

良い例：押した時に何が起こるかわかりやすい（以下のリンクはダミー）

キーボード操作が可能

マウスなしでキーボード操作のみでも、ページを閲覧するのに必要な操作が全て可能であることも重要です。デバイスなどの問題はもちろん、手に障害がある方など、マウスを操作できないユーザーがページを閲覧する可能性があります。

キーボードを使ったページ操作は、主に[Tabキー]などを使用して行われます。

一般にマウスも使用して操作されることが多いのは、リンクのクリックやフォーム入力、ボタンなどですが、このようによくマウスを使われるフォーム要素は、HTML要素を正しく選べば何もしなくてもTabキーを押せばフォーカスされるので、クリックなどの操作が可能です。

一方、閲覧に操作が必要ながらもTabキーを使ってフォーカスできない要素が以下の通り。

このような場合は、実装時に使用するHTML要素を変更したり、role属性などを適切に設定しつつWAI-ARIAオーサリングプラクティスなどを参考にJavascriptを用いてキーボード操作が可能になるように設定する必要があります。

簡単なWebアクセシビリティチェックツール

実際に自社のWebサイトがどの程度アクセシビリティに対応できているのか、いくつかチェックする方法があります。有料のものもありますが、今回は手軽に確認できる無料のツールをご紹介します！

Googleが提供するChrome拡張ツール「Lighthouse」

Googleが無料で影響するGoogle Chrome拡張ツール「Lighthouse」を使用すると、簡易的なアクセシビリティのチェックが可能です。

アクセシビリティ以外にも、パフォーマンス（読み込み速度等）なども無料で診断してくれるので簡易的なチェックにおすすめです！

　

画像のAlt属性をチェックできるChrome拡張ツール「Alt & Meta Viewer」

このツールでは、ページ全体の画像のAlt属性設定が簡単に確認できます。

　

総務省が配布するアクセシビリティチェックツール「miChecker」

総務省からは「miChecker」というWebアクセシビリティのチェックツールが無料で配布されています。こちらはPCにインストールする必要でMacは非対応となっております。

　

通常の見え方と比較可能な色覚ごとの見え方チェックツール「Colorblind Web Page Filter」

Colorblind Web Page Filterでは、ブラウザ上でURLを入力するだけでC型色覚（通常の色覚）とそれ以外の色覚での見え方を比較することが可能です。

URLを入力し、比較したい色覚タイプを選択すれば両方の見え方を表示してくれるので、通常の見え方と比較しながらチェックしたい場合におすすめです。

ただそれぞれの色覚での見え方をチェックしたい！という場合には、ブラウザのデベロッパーツールを使用して確認した方が大きな画面で見やすいです。

　

Google Chrome推奨スクリーンリーダー

また、音声での読み上げなどの確認を行いたい場合はスクリーンリーダーを使用します。Google Chromeでは、OSごとに推奨スクリーンリーダーがヘルプで紹介されているので、この辺りから適切なものを選ぶと良いかと思います。

まとめ

ひとくちにWebアクセシビリティといっても、対応すべき箇所や内容はかなり膨大です。

現状はWebサイト上の整備は「努力義務」にあたる部分ではありますが、いざ必要になった際にすべて対応するのはなかなか難しいと思います。今からやれる部分だけでも少しずつ対応していけると良さそうですね！