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