Webアクセシビリティとは?みんなに使いやすいUI/UXデザイン
「Webで検索をすれば大概のことはわかる」、そう思っていませんか。
しかしなかには、検索でたどり着いた情報を閲覧するのが困難な方もたくさんいます。
Webアクセシビリティとは、誰もが「必要とする情報に簡単にたどりつけ、利用できる」ことを示します。工夫次第で情報が届きやすくなる、人にやさしいWeb仕様といえます。
では、具体的にどのようなデザインが、誰もが使いやすいサイトといえるのでしょうか。
Webアクセシビリティのポイントや事例とともに、「人にやさしいUI/UXデザイン」とは何か理解を深めていきます。
Webアクセシビリティとは
アクセシビリティとは、誰でも必要とする情報に簡単にたどり着け、利用できることです。障がい者限定と捉えられがちですが、実はそうではありません。
アクセシビリティはあくまでも、Webを利用する誰もが簡単に情報に辿りつけることを意味しています。Webにおいても、障害の有無に関わらず、誰もが閲覧しやすく情報を取得しやすいサイトづくりが重要と言えるでしょう。
Webアクセシビリティにも指標があります。省庁をはじめ日本の企業の多くは、日本工業規格「JIS X 8341-3」の基準準拠を目指しているようです。
Webアクセシビリティは、海外を視野に入れている企業はとくに気にかけた方がよいでしょう。アメリカにはアクセシビリティに関わる法規制が存在しています。不誠実なサイトは提訴される恐れもあるからです。
もちろんそのようなことがなくとも、多くの方が気持ちよく楽しんでもらえれば運営・制作側としてもうれしいものです。では、どのようなサイトデザインが望ましいのでしょうか。
みんなが使いやすいUI/UXデザインとは?
1.内容のわかる見出しである
視覚障がい者のなかには、見出しをジャンプしながら当たりをつけて本文を読む方がいます。そのため、本文の内容がわかりやすい見出しを入れることで、読みやすさが変わってくるのです。
ここでいう「わかりやすい」見出しとは、文字の装飾や記号が追加されていることではありません。あくまでも「本文の内容が何か」わかりやすいタイトルが重要です。
そうすることで、見出しだけを読み、素早く目的の文章に辿りつきやすくなります。
2.画像には代替えテキスト(alt属性)
画像読み上げソフトは、画像やリンクがどのようなものか視覚的にはとらえられません。そのため視覚障がい者は、どのような画像か理解できない場合があります。
代替えテキスト(alt属性)を設定すると、その部分の情報を読み上げソフトが感知できるようになります。どのような画像なのか視覚障がい者もわかりやすくなるのです。
またalt属性の設定は、SEOにおいても有効です。WebアクセシビリティとSEO、どちらの視点からも、alt属性の設定はしておくべきと言えるでしょう。
ほかにも、入力ボックスにはHTMLラベルをつけるとよりわかりやすくなります。
3.コントラストは4.5:1以上
視覚障がい者のなかには、色の違いが認識しにくい方もいます。
Webコンテンツの文字色と背景色のコントラストは、認識しやすい4.5:1以上とするとよいでしょう。
Webアクセシビリティ事例からみるUI/UXデザイン
厚生労働省
Webアクセシビリティに対する細かい方針を公表しています。
そのサイト上では、文字拡大サービスの提供や音声読み上げサービスの提供、サイト上の現在地の把握、「上の階層に戻る手助けとなるテキストリンク」の配置など、細部にわたり配慮されています。
厚生労働省のトップページ自体が、Webアクセシビリティの参考になる、多くの方にやさしいUI/UXデザインとなっているのです。
味の素株式会社
味の素株式会社は、Webアクセシビリティ達成等級AAを目標とし、ページごとの配慮を重ねてきました。
2015年度は優先度の高いと判断されたページについて実施。2016年度以降は、年度ごとに対象ページを決め基準を満たすページを増やしています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング