Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!のアイキャッチ画像

マーケティング

更新日: 2023/12/5

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!

character_balloon

イエローちゃん教えてー

ブルーちゃんどうしたの?

character_balloon
character_balloon

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

あーWebアクセシビリティかぁ

character_balloon

じゃあ今日はWebアクセシビリティについて説明するね

character_balloon

Webアクセシビリティとは?

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_2枚目
character_balloon

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

character_balloon

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

character_balloon

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

ユニバーサルデザインとWebアクセシビリティは関係があるの?

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_4枚目
character_balloon

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

character_balloon

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

character_balloon

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

Webアクセシビリティとしてどんな試みがあるの?

character_balloon

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

character_balloon

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

Webアクセシビリティの試み1.読み上げ機能

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_8枚目
character_balloon

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

character_balloon

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

character_balloon

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

Webアクセシビリティの試み2.デザイン面の配慮

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_10枚目
character_balloon

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

character_balloon

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

character_balloon

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

Webアクセシビリティの試み3.機種やブラウザに依存しない設計

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_12枚目
character_balloon

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

character_balloon

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

character_balloon

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

W3Cが定めるWebアクセシビリティの仕様はなに?

character_balloon

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

character_balloon

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

W3Cが定める仕様1.視認しやすい色味

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_16枚目
character_balloon

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

character_balloon

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

character_balloon

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

W3Cが定める仕様2.文字化けしづらい文字

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_18枚目
character_balloon

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

character_balloon

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

character_balloon

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

W3Cが定める仕様3.読みやすい文字

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_20枚目
character_balloon

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

character_balloon

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

character_balloon

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

W3Cが定める仕様4.コンテンツに辿りつきやすい動線

Webアクセシビリティとは?誰もが使いやすいサイトを心がけよう!の画像_22枚目
character_balloon

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

character_balloon

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

character_balloon

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

まとめ

character_balloon

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

まとめ

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


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


◆ユニバーサルデザインと同じ発想で「誰でも使いやすい」を目指す


◆Webサイト制作においてWebアクセシビリティを意識して実現できる機能はたくさんある

なるほどーとても大切な取り組みなんだね

character_balloon

ありがとうイエローちゃん

character_balloon
character_balloon

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

最新の記事一覧
最新の記事一覧