Web担当者やWebデザイナーなら一度は耳にしたことがあるのではないでしょうか？より多くのユーザーが使えるウェブコンテンツ、ウェブサービス、ツールに不可欠な基準について考えていきましょう。
目次
Webアクセシビリティとは？
Webアクセシビリティとは「高齢者や視覚、聴覚、身体のハンデ有無に関係なく、誰もがWebを使用できる」ことです。日本では、2004年6月に制定された「高齢者・障害者等配慮設計指針」としてJIS規格［JISX 8341-3］が制定され、Webアクセシビリティの基準になっています。
Webサイトが、身体にハンデをもつ人々を含めた「誰にとっても」使いやすいかどうかの定義がWebアクセシビリティの本質です。
特定のユーザーが特定の利用状況で「使いやすいと感じる」「使いづらいと感じる」使いやすいかどうかの尺度でなく、まず「使えるのか」。また、Webコンテンツを受け取ったユーザーが、どんな方法で受け取っても、その中身は同じ内容であること。情報のバリアフリー、Webアクセシビリティの基本的な考え方です。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
アクセシビリティの基準を達成するには？
ユーザーがちゃんと使えるWebサイト、Webページを達成する基本は、6つ！
１.何のページであるか、内容がしっかり伝わるタイトルをつける
ユーザーが欲しい情報やコンテンツ、記事が記載されたサイトなのか。内容に沿ったタイトルを記述しましょう。検索したときに余計な情報を入れない配慮も必要です。
２.見出し、リストなどの文書構造、フォームコントロールのラベルや説明はマークアップをする。
タイトル、見出し、ヘッダーやフッターなど、何の情報であるかマークアップで識別しておくことで、誰もがわかりやすい情報となります。また、識別しておくことで今後、共通部分の変更や対応がいつでも可能になります。
３.使用している画像には代替テキスト、動画にはキャプション（字幕）を用意する
マシンリーダブルに対応できるコンテンツにするのが大切です。使用している画像に代替テキストを必ず用意することによって、読み上げ変換や点字への変換が可能となります。また、検索データベースのインデックスにも対応できるのでメリットが大きいのです。
４.フォントやコンテンツの色に注意する
伝える情報の色のコントラストや、テキストの色味、太さを誰もがわかる内容にする。フォントの選択も、文字化けの起こりにくいWebフォントや書体を選ぶなど「JISX 8341-3」を基準に対応することをおすすめします。
５.エラーメッセージではエラー箇所と修正方法を明示する
フォームの入力後の確認画面でエラーが出た際に、どこがエラーなのか、どうしてエラーになるのかを、ユーザーがすぐにわかる状態にし、スムーズに完了できるような導線を作っておく。
６.動画にキャプション（字幕）を提供する
身体的なハンデによっても、聞こえにくい状態・状況であっても、同じ情報として受け取れるように字幕をつけておく。
全部の項目を見てよくわかるように、身体的なハンデや高齢者の方を配慮することでなく、Webサイト、Webコンテンツとして基本的な対応と項目です。
基本に沿ってサイトを制作し、どんな状況でもどんな状態の方でも使ってもらえるサイトやコンテンツというのが、Webアクセシビリティなのです。
ウェブアクセシビリティ基盤委員会 JIS X 8341-3:2016解説
Webアクセシビリティでデザイン・制作する
ウェブサイトを制作する上で大切にしてほしいのは、JISXに対応することです。JISXの基準に則り制作や既存ページのリニューアルをできるところから目指しましょう。また、デザイナーのほとんどの方はIllustratorやPhotoshop、Xdを使用しているのではないでしょうか？IllustratorやPhotoshopには、Webアクセシビリティに対応した機能があるので紹介します。
上部ツールバーの「表示＞色の校正＞P型（１型）視覚、D型（２型）視覚」この設定で視覚障がいの見え方を体感できます。この色校正を参考にコントラストや見え方を調整できるのです。Illustrator、Photoshopのどちらのソフトも同じツールバーに格納されています。
Webアクセシビリティは大きなリニューアルが必要なのではなく、「誰もが見やすく、使いやすい」当たり前のことを意識して制作しましょう。企業やクライアントへデザイナーから提案してもみるのも良いですね。そして、Webアクセシビリティは制作する側だけでなく、スマートフォンやPCなどのデバイスでも使用者の環境の在り方で選べるさまざまな機能や設定ができます。
iPhoneでは設定＞アクセシビリティでより個人仕様にカスタマイズが可能です。視覚サポート、身体及び動作、聴覚サポートと大きくわかれていて、それぞれの環境や必要な仕様にできる個別の設定も可能です。
Voice Overで画面上の項目を読み上げる機能や、キャプション機能、3D TouchやAssistiveTouch。こういった機能は、ハンデを抱える方だけでなく、ケガをしてしまったとき、料理中など、誰もが状況に応じて使い分けできます。まさにWebアクセシビリティ対応デバイスです。
誰もが見やすいサイトを目指そう
Webアクセシビリティは、高齢者や視覚、聴覚、身体のハンデ有無に関係なく、誰もがWebを使用できることですが、サイトやコンテンツと対応しているデバイスは、利用するユーザーにとっては両方とも必要不可欠です。当たり前のことを丁寧に意識して制作にあたりたいですね。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
