【イラスト付き】Webアクセシビリティとは？誰もが使いやすいサイトを心がけよう！

イエローちゃん教えてー

Webアクセシビリティってなに？？

Webアクセシビリティとは、Webを利用するすべての人が提供されている情報を取得したりサービスを利用したりできることだよ

「すべての人」には高齢者や身体的に障害がある人も含まれるんだ

障がい者差別解消法が施工され、ますます注目されている取り組みなんだよ

Webアクセシビリティのルーツはユニバーサルデザインの考え方だよ！

ユニバーサルデザインは、国籍・言語・年齢・性別・障がいなどを問わず利用できる施設や製品やサービスを指すものだよね

交通機関などのインフラや各施設、様々な製品で普及してきたけど、「誰にとっても使いやすい」ことが求められるのはWebの世界でも同じなんだよ

Webアクセシビリティを意識して実現できるアプローチはたくさんあるよ

具体的にWebアクセシビリティとしてどんなことを実践できるか紹介するね！

Webサイトにどんな内容が書いてあるのか、読み上げてくれる機能を搭載することができるよ

音声で文章を読み上げたり画像の内容を説明したりすれば、目が不自由な人も情報にアクセスしやすくなるよね

NHKオンラインでは読み上げ機能をいち早く実現しているんだよ

コントラストがはっきりしていて視認しやすい色やフォントだと、色覚障がいを持っていたり視力が低下していたりする人にも使いやすいよね

Web上にはたくさんの情報が溢れているから、パッと見て認識しやすいのはとても重要なんだよ

「誰もが使いやすい」を目指すWebアクセシビリティでは大切な要素といえるよね

iPhoneや高性能なパソコンだと、端末側にアクセシビリティへの配慮が搭載されていることもあるよね

例えば、iPhoneでは「設定」＞「一般」＞「アクセシビリティ」の項目でVoiceOverやズーム機能やタッチ調整などを設定できるよ

ただ、WebアクセシビリティではWebサイト側の意識として「誰でも使いやすい」を目指すから、端末に寄らないアクセシビリティを目指していくべきなんだよ

W3C（World Wide Web Consortium）では、Webアクセシビリティを進めるにおいてあるべき仕様を定めているんだ

どんな仕様がW3Cによって定められているか紹介するね

コントラストをはっきりさせて、文字や物体の差がわかりやすいデザインを心がけよう

同じような色が重なっていたり、境界線があいまいだと色覚障がいの人には見えづらいよ

Webアクセシビリティを意識しつつエモーショナルなデザインを手掛けるのがWebデザイナーの腕の見せどころだね！

機種依存の文字や半角カタカナは避け、文字化けしづらい文字を選択しよう

機種に依存して表現する方法は「誰もが使いやすい」というWebアクセシビリティの思想と反しているよ

誰でも、どんな機種でも、使いやすいWebサイトを心がけようね

読みやすいサイズ、くっきりとした色、認識しやすいフォントを意識して文字をデザインすることも重要だよ

高齢者や視力が低下している人にとっては小さくて薄い文字は読みづらいし、情報を取得できないよね

やむを得ず小さい文字にする場合も、太字にしたり背景色とのコントラストをはっきりさせたりいろいろな工夫ができるよ

ユーザーが求めている情報やコンテンツに辿り着きやすい動線を用意するのもWebアクセシビリティ向上に有効だよ

情報がただ羅列されているとどこになにがあるかわかりづらくて、求めている情報に辿り着けないよね

必要なコンテンツにスキップする機能や、サイトマップを整理してどのページになにが書いてあるかなどをわかりやすく明示しよう

最後にWebアクセシビリティについてまとめておくね

普段からWebアクセシビリティについてじっくり考えてみようね！