ウェブアクセシビリティって？
よく聞くけど、どういう意味なの？
対応しなければいけないの？
具体的になにをすればいいの？
6月4日までにって聞いたけど本当？
法を犯してしまう可能性はあるの？
ウェブアクセシビリティとは、障がいや環境に関係なく、
誰もがウェブサイトで情報やサービスを利用できることを指します。
例えば、視力が弱い人や色の違いが分かりにくい人でも、
同じように情報を得たりサービスを使えたりすることです。
2024年4月に障害者差別解消法が改正され、
民間企業も障がいのある方への配慮が法的に求められるようになりました。
ウェブサイトやアプリなども、障がいのある方にも使いやすい環境を
整備する必要があります。
その実施期限は「遅くとも2024年6月4日までに」とされています。
どんな人に配慮するの？
ウェブアクセシビリティを確保することで、
障がいのある人や高齢者、色覚特性のある人など
より多くの人がウェブを使いやすくなります。
配慮の対象としては、以下のようなユーザーが挙げられます注1。
視覚障がいのある人
聴覚障がいのある人
上肢障がいのある人
発達障がいや
学習障がいのある人
知的障がいがある人
色覚特性のある人
高齢の人
一時的に障がいが
ある状態の人
どんなことに気をつけたらいいの？
アクセシビリティの国際標準ガイドライン
「WCAG（Web Content Accessibility Guidelines）」では、
ウェブサイトに求められることが4つに分けて定義されています。
知覚可能
利用者が提供されている情報を知覚できなければならない
操作可能
利用者がインターフェースを操作できなければならない
知覚可能
利用者がユーザインタフェースの操作と情報とを理解できなければならない
堅牢性
利用者が技術の進歩に応じてコンテンツにアクセスできなければならない
新築分譲サイトでよくある事例
ここでは具体例に気を付けるべきポイントとして、新築分譲サイトでよく見られるアクセシビリティ上の問題点を7つご紹介します。
ウェブアクセシビリティに対応していない例
ウェブアクセシビリティに対応している例
#01 背景と文字色の色が似ている
#01
背景と文字色の色が似ている
背景と文字の色が似ていると、視力が弱い人や色覚障がいのある人にとっては非常に読みにくくなります。
色覚障がいには、人により認識が苦手な色があり、例えば「青と紫」「赤と緑」「水色とピンク」などが識別しにくくなります。さらに彩度の低い色では識別はより困難になります。
国立遺伝学研究所の発表によると、日本人男性の約20人に1人、女性は500人に1人が色覚障がいを持っているとも言われており、総数では約320万人に及びます注2。
JIS X8341-3:2016 1.4.3 コントラスト(最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。(レベルAA)
#02 拡大すると文字が重なる
#02
拡大すると文字が重なる
弱視や高齢の方は文字を拡大して読むことが多いです。
画面を200%に拡大しても文字やボタンが重ならないようにしておくことが必要です。
これにより、視力が低い方も安心してサイトを利用できます。
JIS X8341-3:2016 1.4.4 テキストのサイズ変更 : キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損なうことなく、支援技術なしで200%までサイズ変更できる。(レベルAA)
#03 画像に代替テキストがない(ALT設定がない)
#03
画像に代替テキストがない
(ALT設定がない)
視力に障がいがある人は、音声読み上げソフトを使ってサイトを閲覧します。
そのため、画像の内容を説明する「代替テキスト（ALT設定）」を設定しましょう。
音声ソフトは代替テキスト（ALT設定）を読み上げます。今回の例では「新宿駅」を「新宿駅新南改札出口の外観」のような詳細な説明にすることで、より正確に伝えることができます。
JIS X8341-3:2016 1.1.1 非テキストコンテンツ : 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。 (レベルA)
#04 色だけで区別している
#04
色だけで区別している
背景と文字の色が似ていると、視力が弱い人や色覚障がいのある人にとっては非常に読みにくくなります。
色覚障がいには、人により認識が苦手な色があり、例えば「青と紫」「赤と緑」「水色とピンク」などが識別しにくくなります。さらに彩度の低い色では識別はより困難になります。
日本人男性の約20人に1人、女性は500人に1人が色覚障がいを持っているとも言われており、総数では約320万人に及びます。
JIS X8341-3:2016 1.4.3 感覚的な特徴 : コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。(レベルA)
#05 キーボード操作で戻れない
#05
キーボード操作で戻れない
上半身に不自由がある方など、マウス操作が難しい方もいます。
キーボードだけでサイトを操作できるようにすることが必要です。
例えば、キーボードのみで操作する方がサイト内のコンテンツをクリックした際に、元の画面に戻るボタンがキーボード操作で押せないと、そのページから動けなくなってしまいます。
元の画面に戻るボタンをキーボードで操作できるようにすることで、すべてのユーザーがスムーズにサイトを利用できるようになります。
JIS X8341-3:2016 2.1.1 キーボード : コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。(レベルA)
#06 自動で動く要素を停止することができない
#06
自動で動く要素を停止することができない
サイト内のコンテンツが自動で動くと、視覚障がいのある方や発達障がいのある方、高齢の方などが情報を追いにくくなることがあります。
自動で動くスライドショーやアニメーションには、一時停止ボタンを設置して、ユーザーが自分のペースで情報を読むことができるようにしましょう。
JIS X8341-3:2016 2.2.2 一時停止、停止、非表示 : 動きのある、点滅している、スクロールする、又は自動更新する情報は、次のすべての事項を満たしている。(レベルA)
#07 単語内にスペースや改行が入っている
#07
単語内にスペースや改行が入っている
デザインの都合で単語内にスペースや改行が入っていると、音声読み上げソフトが単語を正しく読み上げられなくなることがあります。
例えば、「横断」が「ヨコ」「ダン」と読まれてしまう可能性があります。
文字間は適切に設定し、読みやすくすることが重要です。
JIS X8341-3:2016 1.3.2 意味のある順序 : コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。(レベルA)
お問い合わせ
ウェブサイトのアクセシビリティ調査から方針決定、コンテンツ制作、ウェブサイト制作まで、ご要望に応じて対応が可能です。
ウェブアクセシビリティ対応については、お気軽にプライムクロスにご相談ください。
こちらから
注1 出典 "ウェブアクセシビリティ導入ガイドブック” デジタル庁 (https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf (2024年6月27日時点)
注2 出典 岡部正隆/伊藤啓 “色覚の多様性と色覚バリアフリーなプレゼンテーション” 国立遺伝学研究所 (https://www.nig.ac.jp/color/barrierfree/barrierfree1.html (2024年6月27日時点)