「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デザイン

厚生労働省

厚生労働省のHP
引用:厚生労働省 Webトップページ

Webアクセシビリティに対する細かい方針を公表しています。

そのサイト上では、文字拡大サービスの提供や音声読み上げサービスの提供、サイト上の現在地の把握、「上の階層に戻る手助けとなるテキストリンク」の配置など、細部にわたり配慮されています。

厚生労働省のトップページ自体が、Webアクセシビリティの参考になる、多くの方にやさしいUI/UXデザインとなっているのです。

味の素株式会社

味の素株式会社のHP
引用:味の素株式会社 検査証明書

味の素株式会社は、Webアクセシビリティ達成等級AAを目標とし、ページごとの配慮を重ねてきました。

2015年度は優先度の高いと判断されたページについて実施。2016年度以降は、年度ごとに対象ページを決め基準を満たすページを増やしています。