企画・設計に関するFAQ

Q.

見出しの構造化はウェブアクセシビリティの確保や向上になぜ重要なのでしょうか?

A.

ウェブページの見出しは、情報の流れや内容の階層性を示すための重要な要素です。正しく構造化、デザインされた見出しは、全てのユーザーがページの内容を迅速に理解し、必要な情報へ簡単にアクセスする手助けとなります。以下のポイントと具体例を参考に、よりアクセシブルな見出しの配置・デザインを目指しましょう。

見出しによる構造化のポイント

1.階層性

内容の階層性や関連性に応じて適切なレベルの見出しを選択し、ウェブページの内容の流れや階層を正確に示すことで、ユーザーが情報アクセスを容易に行えるようサポートします。特に視覚障害のあるユーザーやスクリーンリーダーを使用するユーザーには、情報アクセスを容易にするために重要です。

見出しによる構造化のポイント2. 視覚的区別 のビジュアルイメージ。

2.視覚的区別

各レベルの見出しを視覚的に区別できるようにデザインすることで、ページの構造をユーザーに明確に伝えることができます。階層が高いものから見出しのフォントサイズ大きくし、他階層の見出しとフォントサイズの差をつける、太字を用いるなどが有効な方法です。

3.適切な配置

見出しはそのセクションの最初に配置することが最も理想的です。見出しの前にコンテンツが配置されると、そのセクションの内容や目的が不明確になることがあります。また、2カラムのレイアウトで左側にテキスト、右側に見出しを配置すると、スクリーンリーダーでの読み上げ順序は左から右の順となります。見出しよりも先にコンテンツが提示される状況が発生するため、注意が必要です。

Q.

アコーディオンメニューを使いたいのですが、アクセシビリティを確保するために気を付けるべきポイントを教えてください。

A.

アコーディオンメニューのデザイン効果は「コンテンツの開閉表現」です。視覚情報を利用しない場合においても、情報が間違いなく伝わるよう工夫してください。

  • アクセシビリティ確保のポイント
    • 明確な指示: 項目が展開・折りたたみ可能であることを明確に示す指示記号やテキストを用意する。
    • キーボード操作のサポート: タブキーでの移動やエンターキーでの展開・折りたたみなど、キーボード操作のサポートを十分に提供する。
    • 開閉状態の明示: メニューを開いているのか閉じているかの状態を、視覚的にも非視覚的にもわかりやすく示す。

アコーディオンメニューは、情報を効率的に表示するためのUIデザイン手法の一つです。視覚的に依存する側面も強いため、まずは該当コンテンツの表現として、最適かどうかを検討することが重要です。その上で、アコーディオンメニューのメリットを活かせるよう、ウェブアクセシビリティに対する工夫を検討し、実行してください。

  • メリット:
    • コンパクトな表示: 多くの情報や項目を限られたスペースに効果的にまとめられます。
    • ユーザーの選択: 必要な情報だけを展開して表示することができ、他の情報は非表示のままとすることが可能です。
    • 整理された情報: カテゴリーやセクションごとに情報を分けて表示することができるため、ユーザーが目的の情報を探しやすくなります。
  • デメリット:
    • 見落としのリスク: すべての項目が最初から表示されていないため、ユーザーが重要な情報を見落とす可能性があります。
    • 操作の混乱: 使い方が直感的でない場合、特定のユーザー群(例: 高齢者)にとって操作が難しくなる可能性があります。
Q.

タブメニューはウェブアクセシビリティの観点から問題があるデザインと言えますか?

A.

タブメニューは、適切な設計と実装を行うことでアクセシビリティ上の問題を解消することが可能です。

  • ポイント
    • キーボードによる操作が可能であること。
    • タブとそのコンテンツの間のフォーカス移動の順序が、論理的であること。
    • 視覚/非視覚いずれの環境においても、タブの選択(非選択)状態が明示されること。

タブメニューは「情報整理」「スペースの効率的利用」といったメリットがある一方で、「タブが増えることによる閲覧コストの増加」や「非選択状態のタブコンテンツ内容が隠されることによる一覧性の欠如」といったUI特性によるデメリットも存在します。
タブメニューを利用する際には、アクセシビリティ上の観点だけではなく、コンテンツに対してタブ利用の妥当性を総合的に検討してください。

タブメニューのアクセシビリティ上の問題を解消するためのポイント3点のビジュアルイメージ。

タブメニューのアクセシビリティ上の問題を解消するためのポイント3点のビジュアルイメージ。

タブメニューのアクセシビリティ上の問題を解消するためのポイント3点のビジュアルイメージ。

Q.

「ユニバーサルデザイン」と「アクセシビリティ」は違うものですか?

A.

アクセシビリティとユニバーサルデザインは「できるだけ多くの人が利用できることをめざす」という点が共通しています。違いは、アクセシビリティが「利用できることの度合い」を指す言葉であるのに対し、ユニバーサルデザインは「多くの人が利用できるモノや環境、サービスのデザイン」という点です。ユニバーサルデザインの考え方に沿ってつくられたものは、アクセシビリティが向上すると言えます。
また​「ウェブアクセシビリティ」とは、多種多様な人が、さまざまな環境や状況で、ウェブサイトにアクセスして利用できることを指します。​

Q.

障害のある人はウェブサイトをどのように閲覧しているのですか?

A.

ウェブサイトでは、ユーザーが情報を得る方法を選択して閲覧することができます。
例えば、視覚情報に対して障害がある場合は、スクリーンリーダーを使ってウェブサイトの情報を音声で得たり、文字の拡大や画面の拡大・色を変えるなどの機能を使用して閲覧します。聴覚情報に対して障害がある場合は、字幕機能や音声の文字起こしソフトを使用します。このようにユーザーは、障害の有無に関わらず、自分の好きな方法を選択して、様々な環境で閲覧しています。
能力や環境、状況に関わらず、情報を受け取ることができる表現方法を考えていくことで、より多くの人に情報を届けることができます。

Q.

ゼロから新規サイトを作成する場合と、既存サイトの改修では、ウェブアクセシビリティの確保、向上の取り組みに違いはありますか?

A.

基本的な取り組みに違いはありません。ただし、既存サイトの場合は「アクセシビリティ簡易確認シート」で改修前のウェブアクセシビリティの対応状況を確認し、事前に問題箇所を把握しましょう。構成、デザインが大幅に変わるリニューアルの場合は「アクセシビリティ簡易確認シート」を使う必要はありません。花王ウェブアクセシビリティガイドラインの「ウェブサイト公開までのチェックフロー」を参考にしてください。

Q.

花王のウェブアクセシビリティ方針に則って、企画・制作・運用を実行するために必要なスキルなどがあったら教えてください。

A.

まずは「花王ウェブアクセシビリティガイドライン」と、品質基準の目標としているWCAG(Web Content Accessibility Gudelines) 2.1 のレベルAAを理解する必要があります。WCAGの理解度の目安として「アクセシビリティ対応チェックシート」をご活用ください。

Q.

サイトのリニューアル時のウェブアクセシビリティ要件の書き方を、具体的に教えてください。

A.

基本的な要件は「花王ウェブアクセシビリティガイドライン」に則いつつ、ウェブサイトの目的やリニューアル時の状況を鑑みて策定してください。

  •  アクセシビリティ要件の項目例
    • 適用対象(対象範囲、例外)
    • 品質基準
    • 対応スケジュール
    • 検収体制(アクセシビリティ対応チェックシートの利用)
Q.

制作中のサイトに、ウェブアクセシビリティの問題があるかどうかを確認するだけで時間がかかってしまい、公開スケジュールに間に合いそうにありません。

A.

公開スケジュールに間に合わない場合は、公開後に対応を実行するなど、状況に合わせて対応計画を立ててください。

※花王がめざす「ウェブアクセシビリティの目標達成期限」までに対応を終わらせることが困難な場合も、期限が過ぎた後に継続して残りの対応を行えるよう対応計画を立ててください。また、期限の対応スケジュールはサイトの公開時期によって異なります。詳しくはガイドライン「4. 対応スケジュール」をご確認ください。

Q.

花王のウェブアクセシビリティの目標にむけて、企画・設計段階では、何から着手すればよいでしょうか?

A.

まずは、メディアやコンテンツの役割、ウェブサイトの利⽤状況、施策の予定など事業計画をもとに、ウェブアクセシビリティの取り組みの優先順位をつけましょう。
花王が品質基準の目標とする「WCAG2.1レベルAA」は、短期間で達成するには難しい場合があります。段階的、かつ持続可能となる計画を立てて進めてください。
 
※段階的な取り組みの目安として「アクセシビリティ対応チェックシート」では、対応優先度を設定しています。

Q.

掲載予定のコンテンツに、アクセシビリティ上の問題がある場合は、どうしたらよいですか? ウェブサイトと同時に展開する広告の画像を使う予定ですが、画像内の文字のコントラストが不足しています。

A.

問題が明らかになったコンテンツに対して、アクセシビリティを確保できる代替手段を検討してください。代替の提供が難しい場合、該当画像を変更することも検討ください。
どちらも困難な場合は、アクセシビリティが損なわれることで、ユーザーがどのように困る可能性があるかを理解した上で、できる範囲のアクセシビリティは確保できるよう、制作を進めてください。

Q.

アクセス数が少ないページは、ウェブアクセシビリティの対象外としても問題ないですか?

A.

アクセス数が少なくても、公開されているページであれば、対応は必要です。公開中、またはこれから公開するウェブサイトのすべてのページが対象範囲となります。
ただし、公開中のウェブサイトの場合、一度にすべてのコンテンツのアクセシビリティ向上を図るのは困難な場合があります。優先付けを行い、段階的な対応を計画してください。

表記について

花王株式会社のウェブサイトでは、「障害」の表記として、一部のコンテンツで「障がい」を使用しておりますが、本ガイドラインにおいては、スクリーンリーダーでのテキストの読み上げを考慮し、漢字表記としております。

Page Top