こんにちはディーメイクでwebデザイナーをしている鈴木です。
今回もさらっと説明する【Webサイトに関する基礎知識シリーズ】です。
このシリーズはWeb制作の現場でよく使われる言葉や
基本的な知識などをさらっと書いています。
第5回目となる今回はWebアクセシビリティについて
混同しがちなユーザビリティとの違いも含め書いてみたいと思います。
目次
1.Webアクセシビリティとは
アクセシビリティとは英語のAccessibilityのことで
Access（接近する、接続する）とAbility（〜できる、能力）を組み合わせてできている言葉です。
（目的に）アクセスしやすい、近づきやすいというニュアンスで使われます。
Webアクセシビリティの場合は、ユーザーがサイト内の目的とする情報にアクセスできたり
サービスを利用しやすいようにする場合につかわれます。
障害がある方や、インターネットの利用に慣れてないユーザーなど
様々な人がちゃんとサイトを利用できるような配慮をし
万人が情報やサービスを利用できることを目指します。
2.ユーザビリティとの違い
よく似た言葉でユーザビリティという言葉があります。
ユーザビリティとは英語のUsabilityのことで
Use（使う）とAbility（〜できる、能力）を組み合わせてできている言葉です。
ユーザビリティは国際規格のISO 9241-11に定義されてて
Webサイト以外にも使われる言葉です。
特定のユーザが特定の利用状況において，システム，製品又はサービスを利用する際に，効果，効率及び満足を伴って特定の目標を達成する度合い。
Wikipedia
Webサイトにおける「Webアクセシビリティ」と「ユーザビリティ」の違いは
・Webアクセシビリティ
万人に対して、情報に到達できる、サービスをきちんと利用できるようにする。
（対象：全ての人、誰一人取り残さない）
・ユーザビリティ
特定の利用者に対して使いやすく満足度の高いサイトを目指す。
（対象：対象となるユーザー）
ユーザビリティがサイトの対象となる利用者の使い勝手や満足度を向上することを指すのに対し
Webアクセシビリティは、どんな人でもサイトが利用できるようにすることを目指します。
3.何をすればいいか
アクセシビリティを向上させるためにデザインやコーディングの際にできる
比較的簡単な施策をいくつか紹介したいと思います。
・フォントに気を配る
高齢者や視覚障害の方でも読みやすいようにサイズや太さ、行間に気を付ける。
・色味に気を配る
色の組み合わせや濃淡に気をつけるだけではなく
色覚異常や色盲と言われる方の見え方などにも配慮する
・音声読み上げに配慮する
画像に代替情報（altで説明など）をつけたり、
見た目のためだけにソースの順番を無理に変えたりしないなど。
・字幕やキャプションをつける
動画などには、聴覚障害を持つ人でもなんの映像なのかわかるように
字幕やキャプションで補足をする。
・タイトルをしっかりつける
タイトルをしっかりつけることで、コンテンツを確認しなくても
そのセクションには何があるのかわかりやすくする。
・リンクやボタンをわかりやすくする
リンクの箇所をわかりやすくするだけではなく
遷移先はどこなのか、クリックするとどうなるのかなどを明確にしておく。
・ラベルや説明をつける
ラベルを適切につけることで、スクリーンリーダーが
inputが何を指しているか読み上げてくれる。
・HTMLタグを正しく使う
HTMLのタグを正しく使うことによって
キーボード操作やスクリーンリーダー読み上げが正しく行われます。
4.対応のメリット
しっかりと対応することで印象が良くなったり
不利益を被ったユーザーからのクレームを回避することにつながります。
特に公共のサイトや多くの人を対象とするサイトの場合は
対応することが責務とも言えるかもしれません。
ただ、それ以外のサイトでもWebアクセシビリティに対応することは
ユーザビリティの向上やSEO対策につながるものが多いです。
2024年4月施行の障害者差別解消法の改正では
Webアクセシビリティは義務にはなりませんでしたが
対応することでサイトの印象を良くし、トラブルが減るのであれば
できるだけ対応した方が良いと言えると思います。
5.まとめ
最近はSDG'sの普及や障害者差別解消法の改正などもあり
アクセシビリティも再注目されるようになってきました。
アプリやブラウザの進化もあって、できることも増えていると思います。
ただ「3.何をすればいいか」に書かれていることを見ても
デザインやコーディングする上ですでにやっていることが多いのでは無いでしょうか。
公共サイトや規模の大きなサイトは、できるだけしっかりと対応した方が良いと思いますが
まずはユーザビリティを意識して
出来ることからきちんと対応していけば良いと思います。
こちらの記事もチェック！
Webサイト作りで出てくる略語＆専門用語についてざっくり解説します
GoogleアナリティクスGA4の設定方法についてはこちら