お問合せ
商談予約
お電話
Webアクセシビリティ～すべての人にやさしいデザインのポイント
インターネットが必要不可欠となった現代では、Webアクセシビリティの重要性が高まっています。
アクセシビリティとは、「近づきやすさ」「利用しやすさ」を意味する言葉ですが、具体的にどのように対応すればよいかわからない方も多いのではないでしょうか。
本記事では、Webアクセシビリティとは何か、Webデザインをする際に意識すべきポイントなどを解説します。
Webアクセシビリティとは
Webアクセシビリティとは、Web上で提供されているコンテンツやサービスの利用しやすさを指します。アクセシビリティというと、障がいのある方に向けて対応することを思い浮かべる人も多いかもしれませんが、実はそうではありません。
障がいの有無やその度合いにかかわらず、あらゆるユーザーがWebの情報やサービスにアクセスできることを意味しています。
ユーザビリティとの違い
ユーザビリティとは、日本語で「使いやすさ」を意味する言葉です。日本産業規格（ＪＩＳ）では、以下のように定義されています。
「特定のユーザが特定の利用状況において，システム，製品又はサービスを利用する際に，効果，効率及び満足を伴って特定の目標を達成する度合い」（出典：JIS Z 8521:2020）
アクセシビリティとユーザビリティには、「ユーザーにとっての利用しやすさ」という共通点がありますが、想定されるユーザーの幅に違いがあります。アクセシビリティは幅広いユーザーにとっての使いやすさを表すのに対し、ユーザビリティは想定したユーザーにとっての使いやすさを表します。そのため、特定のユーザーにとって満足度の高い商品・サービスであれば、ユーザビリティが高いと言えるでしょう。
Webアクセシビリティが重要な理由
Webアクセシビリティが重要とされる理由のひとつに、インターネットの利用層が拡大したことが挙げられます。インターネットが爆発的に普及したことで、老若男女問わず仕事や学習、日常生活といったさまざまな場面でWebサービスを使うようになりました。
Webサイトのアクセシビリティが確保されていない場合、ユーザーの持つ特性や利用する環境によっては、必要な情報を得られなかったり、Web上での手続きが行えなかったりすることが考えられます。Webサイトやオンラインサービスへのアクセスが制限されてしまえば、社会生活で不利益が生じるだけでなく、災害時などは生命の危機に直面するおそれもあるのです。
また、アメリカやヨーロッパではアクセシビリティに関連する訴訟も起こっています。日本国内では訴訟に発展したケースはないものの、グローバル展開を目指す企業にとっては大きなリスクとなるでしょう。
Webアクセシビリティが確保できている状態とは？
Webアクセシビリティを確保するには、どのような状態を目指せばよいのでしょうか。具体的には、以下の４つを意識する必要があります。
- 目が見えない人でも情報が伝わる・操作できる
- キーボードだけで操作が可能
- 色覚障がいがある人でも得られる情報が欠けない
- 音声が聞こえない人であっても動画や音声コンテンツの内容を理解できる
上記のようなWebサイトを目指すことで、視覚障がいや聴覚障がいのある人、色覚特性を持つ人など、あらゆる人がWeb上で情報を入手したり、サービスを利用したりすることが可能となります。
Webアクセシビリティを向上させるための方法
最後に、Webアクセシビリティを高めるための具体的な方法を見ていきましょう。
画像には代替テキスト（alt属性）をつける
代替テキストとは、画像の内容をテキストで説明するためのものです。画像が表示されないときや、視覚障がいのある方などがスクリーンリーダーを使用した際に情報を取得できます。
代替テキストを設定する際は、画像の意図や意味が伝わる文言を記載することが大切です。テキストの長さに制限はありませんが、スクリーンリーダーの可読性を考慮すると80文字以内に収めることが推奨されています。
キーボードだけで操作できるようにする
パソコンを利用する人の中には、視覚障がいや上肢障がい、または一時的なケガなどによってマウスを使うことができない人もいます。そのため、すべての機能をキーボードだけで操作できるようにすることが大切です。
また、フォーカスインジケーター（選択中の要素を明確に示すためのもの）が表示されるようにしておくことも忘れてはいけません。
コントラスト比に注意する
障がい者や高齢者など、あらゆる人が見やすく読みやすいコンテンツにするには、十分なコントラスト比を保つことが大切です。文字色と背景色のコントラスト比は、4.5：１以上であることが推奨されています。
ただし、文字サイズが大きい場合や太字にする場合は、３：１でも問題ありません。コントラスト比を確認する際は、無料で利用できるコントラストチェッカーなどを利用するとよいでしょう。
動画や音声に代替コンテンツを付与する
聴覚障がいのある方のために、動画や音声には代替コンテンツを付与することが求められます。
具体的には、字幕（キャプション）をつけることで、視覚情報によって内容を伝えることが可能となります。
リンクを適切に表現する
リンクを適切に表現することも大切です。「こちら」や「こちらをクリック」とだけ書かれているケースも多く見られますが、このようなテキストだけでは音声ブラウザを利用している人は内容が理解できません。リンクテキストだけでリンク先の内容がわかるようにしましょう。
光を点滅させない
光の点滅を繰り返すようなコンテンツは、光感受性発作などを誘発しやすくなるため注意が必要です。アニメーションや映像などを作る際は、１秒間に３回以上点滅するコンテンツは作らないようにしましょう。
まとめ
今回は、Webアクセシビリティを確保する上で重要なポイントをピックアップして紹介しました。Webアクセシビリティを向上させることで、すべてのユーザーにとって利用しやすいサイトを構築できます。その結果、ユーザビリティが向上し、検索エンジンからの評価を高めることにもつながります。本記事で紹介したポイントを参考にしていただき、あらゆるユーザーが快適に利用できるWebサイトを目指していきましょう。
ウェブアクセシビリティ-「差別をしない」の実現に向けて-
問題の本質は何か、を徹底的に考えたカリキュラムで、現場で役立つスキルやノウハウを習得できる動画教材です。
ウェブアクセシビリティの概要、ウェブアクセシビリティ推進の背景を知り、ウェブアクセシビリティ対応に向けたアクションとして何が必要かを学習します。
セットでおすすめの研修・サービス
チラシ／ＷＥＢデザイン研修～顧客視点のクリエイティブディレクション
デザインを専門的に学んだことのない方を対象として、チラシやWeb画面を制作するために必要なデザインの基礎知識とディレクションスキルをつけることを目的とした研修です。
お客さまの心に訴求し、ねらった行動を起こしていただくための一連のプロセスとポイントをお伝えします。顧客心理に響く情報のレイアウト方法に加え、実践で使えるコピーライティングや配色のコツについても学びます。
ＵＩ（ユーザーインターフェイス）設計力向上研修
ＵＩを検討するうえで重要なのは、見た目の美しさもさることながら、「心理的な人の行動」と「環境がもたらす人の癖」を軸にした設計、すなわちユーザー視点での設計です。
本研修では、良いＵＩと悪いＵＩの事例を比較しながら、ユーザー視点と、シグニファイア（行動を促すシグナル的デザイン要素）の重要性を学びます。そのうえで、ユーザー視点をＵＩに反映する具体的な設計手法を習得し、演習を通じて、実践力を高めます。
ホームページ制作基礎講座～HTML＆CSS＆Javascriptの基本をマスターする（３時間×６回）
３時間×６回のレッスンで基礎からホームページの作り方を学ぶ講座です。 HTMLとCSS、JavaScriptを用いてスマートフォン対応のサイトを制作します。
ＯＳに標準搭載されているアプリケーションと、インターネットから入手できる無料ソフトだけを使って作成するため、ＰＣを持っていればどなたでもホームページが作れる内容になっています。
