花王ウェブアクセシビリティ FAQ

花王のウェブサイト制作に携わっている方からよくいただくウェブアクセシビリティに関する質問と回答を掲載しております。ウェブアクセシビリティ確保・向上の取り組みの際の参考にしてください。

新着情報

2023/8/18 新しい質問を5点追加しました(企画・設計コンテンツ作成開発・オーサリング運用)。

2023/7/31 新しい質問を3点追加しました(企画・設計コンテンツ作成開発・オーサリング)。

企画・設計

Q.

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

  • NEW
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.

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

コンテンツ作成

Q.

イラストを使って4つの手順を示す場合、代替テキストはどのように書くのがベストですか?

  • NEW
A.

イラストで情報を伝える際に、さまざまな状況のユーザーにも伝わるように、代替テキストを準備してください。
以下は、コーヒーマシンの使い方を4つの手順イラストで説明した場合の一例です。代替テキストを考える際の参考にしてください。
※イラストは「コーヒーマシンの使い方」を伝えるために、操作箇所がどこなのかを示すものとして用いています。

ステップ1
コーヒー豆を入れる

ステップ1の操作図。コーヒー豆を上部の容器から注ぐ。

代替テキスト例

  • OK例: 「ステップ1の操作図。コーヒー豆を上部の容器から注ぐ。」
  • NG例: 「コーヒー豆を入れる」や「ステップ1」

ステップ2
水を注ぐ

ステップ2の操作図。マシン背面にある水タンクを外し、清潔な水を注ぐ。

代替テキスト例

  • OK例: 「ステップ2の操作図。マシン背面にある水タンクを外し、清潔な水を注ぐ。」
  • NG例: 「水を入れる」や「ステップ2」

ステップ3
ボタンを押す

ステップ3の操作図。マシン正面のコーヒー抽出口の上の右側にある開始ボタンを押す。

代替テキスト例

  • OK例: 「ステップ3の操作図。マシン正面のコーヒー抽出口の上の右側にある開始ボタンを押す。」
  • NG例: 「ボタンを押す」や「ステップ3」

ステップ4
コーヒーを注ぐ

ステップ4の操作図。できたてのコーヒーをカップに注ぐ。

代替テキスト例

  • OK例: 「ステップ4の操作図。できたてのコーヒーをカップに注ぐ。」
  • NG例:「コーヒーを注ぐ」や「ステップ4」
Q.

ウェブ上の漫画の代替テキストは、どのように設定すれば良いですか?

  • NEW
A.

漫画はストーリー、セリフ、視覚的な要素が複雑に組み合わさったコンテンツであり、これを代替テキストで簡潔に伝えるのは難しい場合があります。以下のアプローチを一例として参考にしてください。

  1. 基本の考え方
    • 代替テキストのalt属性を使用して、漫画の主要なシーンやアクションを簡潔に説明する。
    • altだけに頼るのではなく、ページ内で追加の説明を提供することも検討する。

    例: 「山田さんと田中さんがオフィスで会話をしているシーン」の漫画のalt

    基本の考え方のalt例。山田さんと田中さんがオフィスで会話をしているシーンでは、「山田さんと田中さんがオフィスで会話中」というaltを指定している。

  2. 追加の説明(拡張説明)
    • alt属性だけでは情報が不足する場合、ウェブページ内の別の場所に、より詳細な説明やセリフを記載します。これにより、視覚的な情報を補完し、物語の文脈を提供できます。

    例: 直下または隣接するテキストエリアに漫画の説明を追加する。

    追加の説明の表示例。山田さんと田中さんがオフィスで会話をしているシーンに対して、「山田さんと田中さんがオフィスで会話中」というaltの他に、漫画の一コマの横に「山田さんが『今日は新しいプロジェクトのキックオフミーティングだね!』と田中さんに話しかける。」という説明を追加している。

    山田さんがオフィスに到着。
    田中さんに、『今日は新しいプロジェクトのキックオフミーティングだね!』と話しかける。

  3. 視覚要素の取捨選択:
    • 漫画の各コマに含まれるすべての要素や背景を説明するのではなく、物語や情報の伝達に重要な要素だけを取り上げることで、情報の過多を避けることができます。
  4. コンテキストの維持
    • 代替テキストはそのコマやページの中でのキャラクターやアクションのコンテキストを伝えることが重要です。

最終的に、目的はすべてのユーザーに漫画の主要な内容と文脈を伝えることです。代替テキストの設定や追加の情報提供を通じて、より多くの人々にアクセス可能なコンテンツを提供することを心がけましょう。

Q.

タブ内のコンテンツに対して、アクセシビリティを向上するためには、何を確認するとよいですか?

A.

タブメニューの中に設置するコンテンツに対しては、以下のような点に注意することでアクセシビリティを向上することができます。

  1. 見出し要素の利用
    • タブ内のコンテンツだけではなく、タブ外のコンテンツとの見出し構造の関係も確認する。

    タブ内とタブ外の見出し構造の例を示した図。タブ外の見出しはh2、ダブ内の見出しはh3になっている。

    タブ内とタブ外の見出し構造の例を示した図。タブ外の見出しはh2、ダブ内の見出しはh3になっている。

    タブ内とタブ外の見出し構造の例を示した図。タブ外の見出しはh2、ダブ内の見出しはh3になっている。

  2. コントラストの確保
    • 非選択状態のタブメニューにおいても、視認性を確保する。
  3. タブメニューの選択状態の表現
    • タブの選択・非選択状態を、色だけに頼らない表現方法で示す。
  4. タブメニューのラベル内容
    • タブメニューのラベルが、関連するタブコンテンツの内容を明確に伝えるようにする。

タブメニューに掲載するコンテンツには、特別な観点が必要となることはありません。タブメニューであろうとなかろうと、アクセシビリティチェックシートを使って問題がないか確認してください。
また、タブコンテンツに画像を使用する際は、代替テキストについての検討が必要となる場合もあります

Q.

動画にはどのような代替コンテンツが必要ですか?

A.

意味のある画像には内容を伝える「代替テキスト」を設定するように、音声や映像、または音声・映像の両方を含むコンテンツに対して、音声を聞くことができない、または映像を見ることができない状況でも、内容がわかる代替が必要です。
音声情報に対しては「キャプション(字幕)」、映像情報に対しては「トランスクリプト」や「音声解説」が代替コンテンツとなります。
また、動画では、上記のような代替コンテンツの他に、短いテキストでコンテンツを識別するための「ラベル」も準備しましょう。

代替コンテンツ

  • 内容を伝える
    • 画像→代替テキスト(img 要素の alt 属性)
    • 動画→トランスクリプト、キャプション、音声解説

代替コンテンツで「内容を伝えるもの」を説明している図。画像の代替テキストと、動画のキャプチャ内で「音声解説」「トランスクリプト」「キャプション」がどれにあたるかを説明している。

  • 認知(識別)させる
    • 動画→ラベル(iframe 要素の title 属性)

動画の代替コンテンツで「認知(識別)させるもの」を説明している図。動画のキャプチャ内で「ラベル」がどれにあたるかを説明している。

Q.

映像とBGMだけの動画に、字幕は必要ですか?

A.

動画の音声情報には、字幕(キャプション)が必要です。音声情報とは、音声によって伝える情報のことを指します。BGMも音声情報となるため字幕が必要です。
聴覚障害があるユーザーや、音声を利用できない、音声が聞き取りにくい環境のユーザーも、音声で表現された内容を理解できるように字幕を提供しましょう。


BGMを通じて表現している動画コンテンツの雰囲気を伝える。

どのような楽曲が流れているのかを字幕で説明することで、BGMによってどのような印象を持ってほしいのかを伝えられます。

  • 字幕の例:
    • ♪遅いテンポの落ち着いたメロディ♪ 
    • ♪軽快なピアノの登場曲♪ 

BGMだけが流れる状態に対する情報を提供する。

発話がない状態で BGM だけ流れてるような場合に、字幕を提供することで「字幕が何かのトラブルで表示されてないのかも?」などの不安を解消することができます。

字幕の例:

  • ♪[音楽]♪
  • ♪BGM♪

「♪音楽♪」という字幕が書かれている動画のキャプチャ画像

BGMだけが流れている時の字幕の例

Q.

ウェブアクセシビリティに配慮したウェブサイトを作るには、画像は極力使わず、テキストをメインにした方がいいのでしょうか。

A.

ウェブアクセシビリティの配慮=画像を使わない、ではなく、画像(視覚情報)だけに頼った表現にしないことが重要です。さまざまな状況にあるユーザーが利用しやすいデザインを検討していってください。

  • 例:テキストを用いることのメリット
    • ユーザーがブラウザの設定を変更して、テキストの文字サイズを自身が見やすい大きさ・書体・色にすることができる。
    • ページのテキストをコピー&ペーストできる。
    • ユーザーが自動翻訳エンジンを利用して、好きな言語で閲覧することが可能になる。
Q.

文字を含む画像は「代替テキストがあれば問題ない」と判断されますでしょうか?

A.

文字を含む画像に「代替テキストを設定」しただけでは、アクセシビリティの問題が解消できたとは限りません。画像に含まれる文字のコントラストを確保する必要もあります。
画像に対する代替テキストは、視覚的に画像情報を獲得できない状況や状態に対して、テキストで画像情報を提供します。一方で、画像内の文字のコントラストを確保することは、主に見える状況や状態に対して、「画像をより見やすくする」対応です。
どちらも画像の情報をより多くの人に伝えるための対応ですが、それぞれ異なる状況・状態に対する改善方法のため、画像が文字を含む場合、代替テキストの設定に加え、文字のコントラストを確保する必要があります。

Q.

アイコンにも代替テキストは必要ですか?

A.

アイコンの画像が表示されないとユーザーに機能を伝えることができない場合は、代替テキストを用意しましょう。

  • 例:代替テキストが必要な場合
    • 新製品に対するアイコン「New」
    • オンラインショップへのリンクボタンアイコン
  • 例:代替テキストがなくても問題ない場合
    • 隣接してテキストが用意されているアイコン
      ※画像が無くても周囲のテキストから同じ情報を得られるため、代替テキストは必要ありません。altは「空」に設定します。

また、アイコンの代替テキストで注意が必要なのは、代替テキストがアイコンの見た目の説明のみで、機能の説明となっていない場合です。例えば設定用のアイコンとしてよく利用される「歯車」のアイコンに対し、見た目のままに「歯車」という代替テキストを用意しても、機能の説明としては不十分となります。

代替テキストが必要となる例、代替テキストがなくても問題ない例、注意が必要な例、それぞれのビジュアルイメージ

代替テキストが必要となる例、代替テキストがなくても問題ない例、注意が必要な例、それぞれのビジュアルイメージ

代替テキストが必要となる例、代替テキストがなくても問題ない例、注意が必要な例、それぞれのビジュアルイメージ

Q.

画像の代わりとなる代替テキストは、SEOにどのような効果がありますか?

A.

検索エンジンのクローラーが画像に関する情報を得ることができるようになります。適切なキーワードを使用し、またページのコンテンツの内容に沿った役に立つ内容にすることによって、SEO上の評価が上がる可能性があります。

Q.

画像の代わりとなる代替テキストを設定することで、ウェブサイトのパフォーマンスにどのような影響がありますか?

A.

画像の代わりとなる代替テキストを適切に設定することで、ウェブサイトのパフォーマンスには、次のような影響があります。

  • 画像から視覚的に情報を得ることが難しいユーザーに対し、画像と同等の情報を提供することができる。
  • 検索エンジンのページへの理解が深まり、SEOに寄与する。
  • Googleが提供している「PageSpeed Insights」のようなウェブサイトの表示速度を測定・評価するツールで分析した際に、画像が読み込まれる前にテキスト情報が読み込まれるため、ページの読み込み速度が向上することが期待される。
Q.

画像の代わりとなる代替テキストは短すぎると問題がありますか?

A.

画像の代わりとなる情報を伝えることができていれば、文章の短さは問題にはなりません。

Q.

代替テキストをAIに書いてもらってもいいですか?

A.

AI を利用して代替テキストを作成しても構いませんが、AI が作成したテキストでは、意図していない情報となったり、情報が不足する可能性があります。各制作フェーズの担当者、ウェブサイトオーナーにあたる花王サイト担当においては、非テキストコンテンツ(画像や音声、映像)の代わりとなる情報となっているか、AI のみに依存せず、責任を持って確認するようにしてください。

Q.

コンテンツを作る際の注意点はありますか?

A.

ページの全体像をわかりやすく見せる、カテゴリーや機能をユーザーの観点にたって絞り込むなど、適切な情報設計が必要です。これらの課題を解決すると、障害がない人にとっても、わかりやすく理解しやすいものになります。

Q.

CM動画のキャプション(字幕)にはBGMマークや、登場人物が複数名いる場合は誰が話しているか識別できるような工夫がありますが、どこまでキャプションに入れるべきか分かりません。

A.

キャプションで提供する情報は、動画内の音声情報です。原則として、発話内容だけでなく、音で伝える情報の全てが対象となります。背景音や効果音といった発話以外の音が、動画の内容を理解するのに必要な情報を伝えている場合は、音に関する情報もキャプションに含めます。「この動画で一番伝えたい情報は何か?」を判断基準として、内容を検討してください。

また、キャプション作成時には、繰り返し出てくる表現の表記を統一するなど、キャプションの書き方ルールについても検討すると、より伝わりやすいものとなります。CM動画のキャプションはテレビ放送の字幕をYouTube用に編集しているため、テレビ放送の字幕ルールに則った内容になっています。

Q.

原稿の執筆段階では問題がなくても、次工程のデザインによっては、アクセシビリティの問題になりそうな場合があります。どのように対応するのがよいですか?

A.

「アクセシビリティ対応チェックシート」を利用して申し送りをしてください。
「要確認」にチェックを入れ、該当箇所と懸念点を「要確認理由」へ記入して、次の工程へ必ず引き継いでください。

Q.

1つの画像を別の箇所にも利用する時に、同じ代替テキストを使っても問題ないですか?

A.

同じ画像であっても、前後の文脈やページにおける役割によって、適切な代替テキストが異なることもあるため、注意が必要です。
画像を利用している箇所ごとに「この画像を掲載する目的は何か?」を意識し、画像を認識できない状態でも、代替テキストを聞く(読む)ことで同じ体験を提供できるよう代替テキストを作成してください。

  • ポイント
    • 画像から得た視覚情報が、代替テキストに適切に反映されているか。
    • 画像から得られない視覚情報が、代替テキストに含まれていないか。
    • 代替テキストの内容は、文脈に合っているか。
    • 画像の種類(写真/地図/グラフ/イラストなど)を伝えているか。
    • 装飾画像の代替テキストは空("")になっているか。

ビジュアル・UIデザイン

Q.

パララックスのデザインをする時に、ウェブアクセシビリティの観点から、気を付けることはありますか?

A.

パララックスは、ウェブデザインにおいてよく用いられるテクニックの一つです。画面の背景や一部の要素がスクロールに合わせ、異なる速度など個別に動くことで、立体的な印象(視差効果)を与えます。パララックスを用いたデザインが「ウェブアクセシビリティ観点でNG」ということはありませんが、以下に注意してデザインしてください。

  • キーボード操作でも、パララックス表現が含まれるウェブページのコンテンツにアクセスできるようにする。
  • キーボード操作時に、カーソルが当たる(フォーカスされている)箇所を見失わないように視覚的に示す。
  • 動くことによって、文字や UI が見えづらくなるのを避ける。(例: コントラストを確保する)
  • 動くことによって、情報が追いづらくならないよう工夫する。(例:動きを控えめにする。または動きを設定できるようにする)
  • スクロールを停止したら動きも止まるなど、常に動き続けることがないようにする。

また、パララックスと共に用いられるアニメーション表現との組み合わせで、ユーザーが視覚的な混乱やめまい(画面酔い)を感じることもあるため、利用の際は注意してください。

Q.

ボタンのオンマウス時にアニメーションなどのマイクロインタラクションを設定することを検討しています。ウェブアクセシビリティの観点から、気を付けることはありますか?

A.

ボタンのオンマウス時にアニメーションを実装すること自体には問題ありませんが、次のポイントに注意してデザインしましょう。

  • フォーカス状態の明示
    • フォーカスが当たったことをユーザーに明示することが重要です。例えば、ボタンがアクティブな状態になった場合には、視覚的に判別可能な変化を加えることで、利用者にわかりやすく伝えることができます。その際は、通常時とフォーカス時のボタンの背景色のコントラスト比率には3:1以上の変化を付けましょう。
  • キーボード操作に対応
    • マウスだけでなく、キーボードによる操作にも対応しましょう。例えば、Tabキーを押してフォーカスを当てた際は、オンマウスと同様の変化を設定してください。
  • ボタンの色と文字色のコントラスト比
    • アニメーションがあったとしても、文字色と背景色とのコントラスト比率は4.5:1以上にしましょう。
  • 効果音
    • マイクロインタラクションに効果音を組み込む場合は、自動的に再生されるのではなく、利用者が「再生する/再生しない」を選択できるようにしましょう。

ボタンのオンマウス時のマイクロインタラクションの注意ポイント4点のビジュアルイメージ。

ボタンのオンマウス時のマイクロインタラクションの注意ポイント4点のビジュアルイメージ。

ボタンのオンマウス時のマイクロインタラクションの注意ポイント4点のビジュアルイメージ。

Q.

動きのあるデザインを検討しています。画面内の要素が動いていることは、ウェブアクセシビリティの観点で、問題がありますか?

A.

動きのあるウェブデザインには、注意が必要です。動きのある要素は、ユーザーに対して楽しい体験を提供する一方で、視覚障害や注意欠陥・多動性障害(ADHD)などに対して、視認性を下げ、集中力を乱す場合もあります。実装するときは次の点に気を付けて、アクセシブルな動きのあるデザインを実現しましょう。

  • 動きを停止できる
    • 動きに過敏なユーザーには、動きを停止できる機能が必要になります。5秒以内に自動的に停止させる、もしくは「停止/再開」できる手段をボタンなどで併設してください。また、これらの操作はキーボードでもできるようにしてください。
      動きの中に情報が含まれる場合は、動きを停止した状態でも情報が取得できるようにしてください。
  • 動きが適度である
    • 画面内の要素が過剰な動きをすると、ユーザーにとって視覚的な刺激が強くなり、混乱を招く可能性があります。動きの強さや頻度を調整して、過度な刺激とならないようにデザインしましょう。動きによっては、強さや頻度を下げたバージョンや、動きを完全に省略したバージョンをユーザーが選択できるよう、代替手段の提供も検討してください
Q.

ウェブアクセシビリティに配慮してデザインすると、ビジュアルがシンプルになりすぎるのではという心配があります。

A.

ウェブアクセシビリティの対応をする=ビジュアルをシンプルにすること、ではありません。
より多くの人が情報を使えるようにすることが、ウェブアクセシビリティの目的です。せっかくのビジュアルデザインも、限定された人や状況、環境においてのみ伝わるのでは効果は減少します。色のコントラストに関する制約も、より多くの人にとって情報を得やすくするための配慮です。代替手段への変更も含め、ビジュアルの工夫をお願いします。

Q.

公開中のウェブサイトは、広告と連動したビジュアルをたくさん掲載しています。今後は広告ビジュアルに対しても、アクセシビリティに配慮した制作が必要でしょうか?

A.

ブランドサイトと広告を連動させる場合は、ブランドサイトでの利用を念頭に置いて広告の制作段階からアクセシビリティの配慮が必要となります。広告制作段階で配慮すれば、結果として広告自体もより多くの方に情報を入手しやすいものにできます。
とはいえ、すべての広告物を一度に見直すのは難しいため、ブランドサイト用に別途ビジュアルを用意するのも一つの手段です。

Q.

イラストを依頼する時に、どのようなことに気をつける必要がありますか?

A.

知覚可能(Perceivable)、操作可能(Operable)、理解可能(Understandable)の3点をイラスト作成時のポイントとして依頼してください。
 
ウェブサイトでのイラストの役割によって優先する注意点は変わってきますが、多様なユーザーの特徴を考え、さまざま視点で検討することが大切です。

  • ポイント
    • 特定の感覚だけに依存した表現をしていないか。
    • 色のコントラスト比の要件を満たしているか。
    • イラスト内にのみ文字情報を入れていないか。
    • 性別や人種等の固定化した表現をしていないか。
    • イラストに代替テキストを作成しているか。
Q.

ブランドのロゴがコントラスト比の要件を満たしていません。ロゴの色も変更する必要がありますか?

A.

WCAG2.1では、ロゴやブランド名の一部である文字に対しては、コントラスト比の要件はありません。
 
ただし、ブランドのロゴカラーを使ってウェブサイト内のカラー設定をする場合には、注意が必要です。
例えば、見出しタイトルにロゴと同じカラーを用いたときは、見出しタイトルはコントラスト比の要件を満たす必要があります。

Q.

ウェブサイトのデザイン段階では、どのようなことに気をつける必要がありますか?

A.

ビジュアルの表現やUIデザインを検討する際は、知覚可能(Perceivable)、操作可能(Operable)、理解可能(Understandable)の3つのポイントを考慮してください。
花王ウェブアクセシビリティガイドラインの「5-2 コンテンツ作成で考慮すること」「5-3 ビジュアル・UIデザインで考慮すること」や「アクセシビリティ対応チェックシート」で、注意すべき点を確認してください。

開発・オーサリング

Q.

アクセシビリティを確保したアコーディオンメニューを、もっと使いやすくするには、どうすればいいですか?

  • NEW
A.

アコーディオンメニューは、情報を開閉する形式のメニューです。使いやすさを高めるためのポイントは以下です。

  • ポイント
    1. 色の選択: 色の組み合わせによっては、区別しづらくなることもあります。コントラストの確保に加えて、色覚特性を考慮し、明瞭に区別できる色の組み合わせを選びます。
    2. 文字の大きさ・フォント: 文字は目に負担をかけない大きさにし、普遍的に読みやすいフォントを採用します。
    3. 操作の状態: 操作対象が開いているか、閉じているかを、わかるように表示します。
    4. 操作の返答: ユーザーが何かを操作した時、それに応じた明確な反応(視覚や音声での通知など)を示すことで、何が起こったかを確認しやすくします。
    5. 記号や画像の選定: よく知られていて、誤解の少ないアイコンや画像を選択します。さらに詳しい説明が必要な場合は、テキストでの補足を行います。

これらのポイントを取り入れることで、多様なユーザーにとって使いやすいアコーディオンメニューの実現が期待されます。

Q.

選択されていないタブメニューのコンテンツが音声で読み上げられないのは、ウェブアクセシビリティの観点から問題になるでしょうか?

A.

タブメニューは表示するコンテンツを切り替える役割を持つため、選択されていないコンテンツは通常「非表示」になります。
例えば、以下のような情報や機能が提供されている場合、非表示のコンテンツが読み上げられないことは大きな問題にはなりません。

  • ポイント
    • 読み上げにより、タブメニューのどの情報が選択されているのかを理解できる。
    • キーボードだけでも表示・非表示の切り替えが操作できる。
    • 操作箇所と変化対象が近い場所に配置されており、表示の変化に気付きやすい。

「視覚的に非表示の情報が読み上げられない」というポイントは、「より多くのユーザーに同等の体験を提供する」というアクセシビリティの考え方に基づいています。
ただし、これは一つの考え方であり、特定の状況に応じて「視覚的に非表示の情報をあえて読み上げる」ような対応をとる場合もあります。具体的な状況によって最適なアクセシビリティ対策は異なるため、一つひとつのケースで慎重に判断することが大切です。

タブメニューの読み上げにおいて、アクセシビリティ上の問題を解消するためのポイントのビジュアルイメージ。

Q.

花王AEM Sitesで制作する場合に注意することはありますか。

A.

花王AEM Sitesで制作するウェブサイトは、コンポーネントを適切に使用することで、アクセシビリティ要件の一部を満たすことができます。
コンポーネントの適切な使用については花王AEM Sitesマニュアルサイトで設定や操作方法について確認して制作へ進めてください。

運用

Q.

アコーディオンメニューを使って、アクセシビリティを考慮したデザインをしたが、一部のユーザーから使いづらいとの声がありました。どのような対応をすればよいですか?

  • NEW
A.

ユーザーから、使いづらいというフィードバックがあった場合、対応方法は色々あり、指摘内容やサイトの状況によって対応を検討・決定します。
以下に一例をあげましたので、参考にしてください。

  • ユーザーテストの実施: 実際に使いづらさを感じているユーザーを中心に、操作をしてもらいながら問題点を可視化します。
  • フィードバックを元にした検討: 具体的な操作の難しさや不便さを明らかにし、課題に対して様々な角度から検討します。
  • 専門家の意見を取り入れる: アクセシビリティの専門家や関連団体との連携を通じて、問題の解決方法を探求し、サイトの改善を進めます。
Q.

ライターとデザイナー、オーサーなど、複数の会社で制作する場合は「アクセシビリティ対応チェックシート」を担当会社ごとに記入して、複数ファイルで提出してもよいですか?

A.

「アクセシビリティ対応チェックシート」は、フェーズごとに別ファイルとして提出することはできません。
 
チェックシートの運用目的の一つは、チェックした内容を次のフェーズ(作業工程)へ引き継ぐことです。チェック担当は、必ずチェックシートを次のフェーズへ引き継いでください。
フェーズによってチェック担当の会社が異なる場合は、花王サイト担当がチェックシートの受け渡しを行ってください。
 
また、個別に記入したシートを後から1つのファイルにまとめても、チェックシートとして正しく機能しないため、運用時には注意が必要です。(自動集計機能に問題が発生します)


アクセシビリティ対応チェックシートの運用フロー

アクセシビリティ対応チェックシートの運用フロー図。3つの工程「コンテンツ制作」「ビジュアル・UIデザイン」「オーサリング開発」の順に1つのファイルを各工程で引き継ぐ運用フローを表している。

Q.

画像の代替テキストの内容は、誰がいつ、どのように決定するのがよいですか?

A.

基本はコンテンツ作成段階で代替テキストを作成しますが、デザインに伴い代替テキストを変更する必要が発生する場合もあります。また、提供を受けた画像であれば、画像提供者でないと判断できない場合などもあります。企画・設計時に代替テキストの運用方針を検討・決定してください。

※画像に対する代替テキストの提供は、alt属性を入れることと限定的に捉えられがちですが、キャプションやグラフの説明文など、画像とは別のテキストコンテンツとして配置することも検討してください。

  • ポイント
    • どのような情報をテキストとして提供するのか。
    • コンテンツの意図を決定するのは誰か。
    • 代替テキストの内容が適切かどうかの判断をするのは誰か。
    • デザイン時のレイアウトの構成に伴って、代替テキストの内容に変更が必要かどうか確認をするのは誰か。

チェックシート・その他

Q.

花王AEM Sitesで「アクセシビリティ対応チェックシート」を使って制作したウェブサイトの事例はありますか?

A.

花王グループの現在までの取り組み状況は、「各サイトにおけるウェブアクセシビリティの取り組みページ」に掲載しています。
※記載される状態は確認日時点のものとなり、現在の状態と異なる場合があります。

Q.

「アクセシビリティ対応チェックシート」のチェック担当は1つのフェーズに複数名いてもよいですか?

A.

1つのフェーズにつき複数名で分担してチェックしていただいても構いません。
ただし、チェックシートの「記入者名」欄にはフェーズの代表者として1名のお名前を記入してください。

Q.

「アクセシビリティ対応チェックシート」のすべてのフェーズのチェック担当が同じ人でもよいですか?

A.

同じ方がすべてのフェーズのチェックを担当いただいても問題ありません。

Q.

「アクセシビリティ対応チェックシート」に記載した内容が正しいかどうかは、どのように確認すればよいですか?

A.

2022年中はアクセシビリティ対応チェックシートを使った、チェック担当のセルフチェックのみとなります。
2023年以降については、チェックシート提出後に第三者機関によるアクセシビリティチェックやユーザーテストを実施することを、今後検討予定です。

Q.

「アクセシビリティ対応チェックシート」と「アクセシビリティ簡易確認シート」の違いを教えてください。

A.

「アクセシビリティ対応チェックシート」は、コンテンツ作成、デザイン、オーサリングの各制作フェーズの終了時と全制作作業完了時にWCAG要件を満たしているかどうかを確認するためのものです。本シートを使わずに制作したウェブサイトの改修時、または新しいウェブサイトを制作する際は、利用が必須です。

「アクセシビリティ簡易確認シート」は、「アクセシビリティ対応チェックシート」を使わずに制作した公開中のウェブサイトに対して、チェック対象を特に重要なウェブアクセシビリティの要件に絞り、ウェブサイトの対応状況を簡易的に把握するためのものです。原則、「アクセシビリティ対応チェックシート」を使わずに制作をしたウェブサイトは利用が必須ですが、構成、デザインが大幅に変わるリニューアルの場合は任意となります。


比較表

アクセシビリティ対応チェックシートとアクセシビリティ簡易確認シートの比較表。内容を記載したテキストファイルは、本項の末尾にある「比較表 ダウンロードテキストファイル」というリンクより確認できます。

  • *
    日々の運用範囲内の更新やコンテンツ追加をする際は「アクセシビリティ対応チェックシート」の利用・提出は不要です(例:バナー画像の差し替え)。ただし継続してアクセシビリティが確保されるよう、アクセシビリティ要件に配慮した制作・運用にあたってください。

上記画像で表現した情報を、テキストファイルとしても提供いたします。

Q.

「アクセシビリティ簡易確認シート」はどのタイミングで提出すればよいですか?提出期限はありますか?

A.

「アクセシビリティ簡易確認シート」の提出期限はありません。ただし、アクセシビリティ向上の改修計画の際に参考となりますので、できるだけ早いタイミングでの実施を推奨します。

Q.

公開中のウェブサイトのアクセシビリティ改修コストはどのように見積もればよいでしょうか?目安があれば教えてください。

A.

コンテンツの量や種類、ウェブサイトの規模やアクセシビリティ状況によって変わります。アクセシビリティ簡易確認シートの結果を参考にして、作業コストを見積もってください。
リニューアルや大規模な更新を予定しているウェブサイトであれば、アクセシビリティの確保をリニューアル要件に入れて実施する方が、単独でアクセシビリティ対応をおこなうより効率的な場合があります。

Q.

「アクセシビリティ対応チェックシート」で「満たす」としてよいか迷う場合は、どうすればよいですか?

A.

要件を満たさない場合、または別のフェーズ(作業工程)で確認が必要な場合は「要確認」にチェックを入れて、詳細を「要確認理由」へ記入します。満たしているか迷う場合も同様に「要確認理由」へその内容を記入してください。

  • 要確認理由の記入例
    • コントラスト比で判断に迷ったケース(アクセシビリティ対応チェックシートC-5-1、C-5-2)
      • 画像内の大きい文字でコントラスト 3:1 を確保したが、文字画像(画像内文字)はデバイス幅が小さくなると、文字サイズが小さくなるケースがあるため、「満たす」にチェックを入れて良いか迷って「要確認」にチェックをいれた。
    • リンクの目的で判断に迷ったケース(アクセシビリティ対応チェックシートD-2-1)
      • チェック項目にある「リンク先が推察できる」とは、どの程度の読解力を想定したら良いか判断つかなかったので「要確認」にチェックを入れました。
Q.

「アクセシビリティ対応チェックシート」は1ページごとに1シートを使って記入しますか?

A.

原則としては、ページ単位ではなく、作業した対象範囲をまとめてチェック、記入を行ってください。
ただし作業範囲が広く、数十ぺージに及ぶ場合は、ディレクトリごとにチェックシートを分けるなど適宜調整してください。

Q.

「アクセシビリティ対応チェックシート」の項目で、ほとんどのページでは満たしているが、1ページだけ満たさないものがあります。「満たす」にチェックしてよいですか?

A.

1ページでも要件を満たさない場合は「要確認」にチェックを入れ、対象箇所と詳細を「要確認理由」へ記入してください。

Q.

「アクセシビリティ対応チェックシート」の項目をすべて満たさないと、公開できませんか?

A.

すべての項目を満たしていないとウェブサイトを公開できない、という規定はありません。
花王グループではすべての項目を満たすことを目指していますが、技術的に対応が困難、または時間やコストがかかる項目もあります。「対応指標」も活用しながら2024年3月の対応期限に向けて段階的な改修を計画して取り組んでください。

Q.

「アクセシビリティ対応チェックシート」にある「対応指標」は、ウェブアクセシビリティガイドラインの「3. 目標とする品質基準」とどのような違いがありますか?

A.

対応指標はWCAC 2.1 レベルAA の対応に向けて、段階的な取り組みを支援するために、対応の目安として設定しました。品質に関しての基準ではありません。

「アクセシビリティ対応チェックシート」の項目を、優先度Ⅰ~Ⅲの3段階で分類しています。最終的にはすべての項目を満たすことが目標ですが、まずは優先度Ⅰ・Ⅱの項目を80%満たすよう取り組んでください。

Q.

「対応指標」の優先度とは何ですか?

A.

できるところから、より多く取り組むための対応時の目安が「優先度」です。年齢や障害の有無、利用している機器や環境などに対する優先度ではありません。以下の3段階で設定しています。

  • 優先度Ⅰ:満たしているかどうかの判断が比較的容易、かつページ内で使用頻度が高いコンテンツに関わる項目。またはWCAGで最低限の要件として求められる項目。見直しの負荷が、比較的低いと考えられる。
  • 優先度Ⅱ:満たしているかどうかの判断がやや難しく、見直しの負荷もやや高い項目。
  • 優先度Ⅲ:満たしているかどうかの判断に専門的な知識を要する項目。コンテンツボリューム、使用頻度がともに低い項目。
Q.

「アクセシビリティ簡易確認シート」はウェブサイトすべてのページを確認する必要がありますか?

A.

「アクセシビリティ簡易確認シート」は、公開中のウェブサイトのアクセシビリティ傾向を把握するためのツールです。対象ページはウェブサイトの規模によって異なります。

  • 対象ウェブサイト
    • 公開中のウェブサイト。
    • 2023年3月までに公開予定で「アクセシビリティ対応チェックシート」を使わずに制作を開始しているウェブサイト。(公開後に実施)
  • 対象ページ
    • 10ページ以下のウェブサイトは全ページが対象。
    • 11ページ以上のウェブサイトはトップや主要なページなど、10ページ程度を選定する。
Q.

「アクセシビリティ簡易確認シート」で利用するチェックツールを使って「アクセシビリティ対応チェックシート」のチェックを行っても問題ないですか?

A.

「アクセシビリティ対応チェックシート」でチェックを行う際、機械的にチェックできる項目はブラウザの拡張機能などさまざまなチェックツールやサービスを利用しても問題ありません。ただし機械によるチェックができない項目、最終的には人間の判断が必要となる項目が多くありますのでご注意ください。
花王ウェブアクセシビリティガイドライン「5-6. ツールの利用」にW3Cで紹介されているツールを掲載していますので参考にしてください。

※ツールやサービスの使い方、チェック結果に関する質問はお受けできませんのでご了承ください。

Q.

「アクセシビリティ簡易確認シート」の結果にエラー/NG判定の項目がありませんでした。改修しなくてよいということですか?

A.

「アクセシビリティ簡易確認シート」は、現状のウェブサイトの傾向を把握することを目的としているため、確認項目がアクセシビリティの基本となる要件に絞られています。簡易確認シートではエラー/NG判定が無くても、確認項目以外でアクセシビリティの課題を抱えている可能性があります。このシートで掴んだ傾向をもとにアクセシビリティ向上の計画をたて、実行へ進めてください。

表記について

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

Page Top