- Home
- 花王ウェブアクセシビリティFAQ
花王ウェブアクセシビリティ FAQ
花王のウェブサイト制作に携わっている方からよくいただくウェブアクセシビリティに関する質問と回答を掲載しております。ウェブアクセシビリティ確保・向上の取り組みの際の参考にしてください。
新着情報
2022/12/2 新しい質問を6点追加しました（ビジュアル・UIデザイン／チェックシート・その他）。
企画・設計
「ユニバーサルデザイン」と「アクセシビリティ」は違うものですか？
- NEW
アクセシビリティとユニバーサルデザインは「できるだけ多くの人が利用できることをめざす」という点が共通しています。違いは、アクセシビリティが「利用できることの度合い」を指す言葉であるのに対し、ユニバーサルデザインは「多くの人が利用できるモノや環境、サービスのデザイン」という点です。ユニバーサルデザインの考え方に沿ってつくられたものは、アクセシビリティが向上すると言えます。
また「ウェブアクセシビリティ」とは、多種多様な人が、さまざまな環境や状況で、ウェブサイトにアクセスして利用できることを指します。
障害のある人はウェブサイトをどのように閲覧しているのですか?
- NEW
ウェブサイトでは、ユーザーが情報を得る方法を選択して閲覧することができます。
例えば、視覚情報に対して障害がある場合は、スクリーンリーダーを使ってウェブサイトの情報を音声で得たり、文字の拡大や画面の拡大・色を変えるなどの機能を使用して閲覧します。聴覚情報に対して障害がある場合は、字幕機能や音声の文字起こしソフトを使用します。このようにユーザーは、障害の有無に関わらず、自分の好きな方法を選択して、様々な環境で閲覧しています。
能力や環境、状況に関わらず、情報を受け取ることができる表現方法を考えていくことで、より多くの人に情報を届けることができます。
ゼロから新規サイトを作成する場合と、既存サイトの改修では、ウェブアクセシビリティの確保、向上の取り組みに違いはありますか？
基本的な取り組みに違いはありません。ただし、既存サイトの場合は「アクセシビリティ簡易確認シート」で改修前のウェブアクセシビリティの対応状況を確認し、事前に問題箇所を把握しましょう。構成、デザインが大幅に変わるリニューアルの場合は「アクセシビリティ簡易確認シート」を使う必要はありません。花王ウェブアクセシビリティガイドラインの「ウェブサイト公開までのチェックフロー」を参考にしてください。
花王のウェブアクセシビリティ方針に則って、企画・制作・運用を実行するために必要なスキルなどがあったら教えてください。
まずは「花王ウェブアクセシビリティガイドライン」と、品質基準の目標としているWCAG（Web Content Accessibility Gudelines) 2.1 のレベルAAを理解する必要があります。WCAGの理解度の目安として「アクセシビリティ対応チェックシート」をご活用ください。
サイトのリニューアル時のウェブアクセシビリティ要件の書き方を、具体的に教えてください。
基本的な要件は「花王ウェブアクセシビリティガイドライン」に則いつつ、ウェブサイトの目的やリニューアル時の状況を鑑みて策定してください。
制作中のサイトに、ウェブアクセシビリティの問題があるかどうかを確認するだけで時間がかかってしまい、公開スケジュールに間に合いそうにありません。
公開スケジュールに間に合わない場合は、公開後に対応を実行するなど、状況に合わせて対応計画を立ててください。
※花王がめざす「ウェブアクセシビリティの目標達成期限」までに対応を終わらせることが困難な場合も、期限が過ぎた後に継続して残りの対応を行えるよう対応計画を立ててください。また、期限の対応スケジュールはサイトの公開時期によって異なります。詳しくはガイドライン「4. 対応スケジュール」をご確認ください。
花王のウェブアクセシビリティの目標にむけて、企画・設計段階では、何から着手すればよいでしょうか？
まずは、メディアやコンテンツの役割、ウェブサイトの利⽤状況、施策の予定など事業計画をもとに、ウェブアクセシビリティの取り組みの優先順位をつけましょう。
花王が品質基準の目標とする「WCAG2.1レベルAA」は、短期間で達成するには難しい場合があります。段階的、かつ持続可能となる計画を立てて進めてください。
※段階的な取り組みの目安として「アクセシビリティ対応チェックシート」では、対応優先度を設定しています。
掲載予定のコンテンツに、アクセシビリティ上の問題がある場合は、どうしたらよいですか？ ウェブサイトと同時に展開する広告の画像を使う予定ですが、画像内の文字のコントラストが不足しています。
問題が明らかになったコンテンツに対して、アクセシビリティを確保できる代替手段を検討してください。代替の提供が難しい場合、該当画像を変更することも検討ください。
どちらも困難な場合は、アクセシビリティが損なわれることで、ユーザーがどのように困る可能性があるかを理解した上で、できる範囲のアクセシビリティは確保できるよう、制作を進めてください。
アクセス数が少ないページは、ウェブアクセシビリティの対象外としても問題ないですか？
アクセス数が少なくても、公開されているページであれば、対応は必要です。公開中、またはこれから公開するウェブサイトのすべてのページが対象範囲となります。
ただし、公開中のウェブサイトの場合、一度にすべてのコンテンツのアクセシビリティ向上を図るのは困難な場合があります。優先付けを行い、段階的な対応を計画してください。
コンテンツ作成
コンテンツを作る際の注意点はありますか？
- NEW
ページの全体像をわかりやすく見せる、カテゴリーや機能をユーザーの観点にたって絞り込むなど、適切な情報設計が必要です。これらの課題を解決すると、障害がない人にとっても、わかりやすく理解しやすいものになります。
CM動画のキャプション(字幕)にはBGMマークや、登場人物が複数名いる場合は誰が話しているか識別できるような工夫がありますが、どこまでキャプションに入れるべきか分かりません。
- NEW
キャプションで提供する情報は、動画内の音声情報です。原則として、発話内容だけでなく、音で伝える情報の全てが対象となります。背景音や効果音といった発話以外の音が、動画の内容を理解するのに必要な情報を伝えている場合は、音に関する情報もキャプションに含めます。「この動画で一番伝えたい情報は何か？」を判断基準として、内容を検討してください。
また、キャプション作成時には、繰り返し出てくる表現の表記を統一するなど、キャプションの書き方ルールについても検討すると、より伝わりやすいものとなります。CM動画のキャプションはテレビ放送の字幕をYouTube用に編集しているため、テレビ放送の字幕ルールに則った内容になっています。
原稿の執筆段階では問題がなくても、次工程のデザインによっては、アクセシビリティの問題になりそうな場合があります。どのように対応するのがよいですか？
「アクセシビリティ対応チェックシート」を利用して申し送りをしてください。
「要確認」にチェックを入れ、該当箇所と懸念点を「要確認理由」へ記入して、次の工程へ必ず引き継いでください。
１つの画像を別の箇所にも利用する時に、同じ代替テキストを使っても問題ないですか？
同じ画像であっても、前後の文脈やページにおける役割によって、適切な代替テキストが異なることもあるため、注意が必要です。
画像を利用している箇所ごとに「この画像を掲載する目的は何か？」を意識し、画像を認識できない状態でも、代替テキストを聞く（読む）ことで同じ体験を提供できるよう代替テキストを作成してください。
ポイント
-
画像から得た視覚情報が、代替テキストに適切に反映されているか。
-
画像から得られない視覚情報が、代替テキストに含まれていないか。
-
代替テキストの内容は、文脈に合っているか。
- 画像の種類（写真／地図／グラフ／イラストなど）を伝えているか。
- 装飾画像の代替テキストは空（""）になっているか。
ビジュアル・UIデザイン
ウェブアクセシビリティに配慮してデザインすると、ビジュアルがシンプルになりすぎるのではという心配があります。
ウェブアクセシビリティの対応をする＝ビジュアルをシンプルにすること、ではありません。
より多くの人が情報を使えるようにすることが、ウェブアクセシビリティの目的です。せっかくのビジュアルデザインも、限定された人や状況、環境においてのみ伝わるのでは効果は減少します。色のコントラストに関する制約も、より多くの人にとって情報を得やすくするための配慮です。代替手段への変更も含め、ビジュアルの工夫をお願いします。
公開中のウェブサイトは、広告と連動したビジュアルをたくさん掲載しています。今後は広告ビジュアルに対しても、アクセシビリティに配慮した制作が必要でしょうか？
ブランドサイトと広告を連動させる場合は、ブランドサイトでの利用を念頭に置いて広告の制作段階からアクセシビリティの配慮が必要となります。広告制作段階で配慮すれば、結果として広告自体もより多くの方に情報を入手しやすいものにできます。
とはいえ、すべての広告物を一度に見直すのは難しいため、ブランドサイト用に別途ビジュアルを用意するのも一つの手段です。
イラストを依頼する時に、どのようなことに気をつける必要がありますか？
知覚可能（Perceivable）、操作可能（Operable）、理解可能（Understandable）の３点をイラスト作成時のポイントとして依頼してください。
ウェブサイトでのイラストの役割によって優先する注意点は変わってきますが、多様なユーザーの特徴を考え、さまざま視点で検討することが大切です。
ポイント
- 特定の感覚だけに依存した表現をしていないか。
- 色のコントラスト比の要件を満たしているか。
- イラスト内にのみ文字情報を入れていないか。
- 性別や人種等の固定化した表現をしていないか。
- イラストに代替テキストを作成しているか。
ブランドのロゴがコントラスト比の要件を満たしていません。ロゴの色も変更する必要がありますか？
WCAG2.1では、ロゴやブランド名の一部である文字に対しては、コントラスト比の要件はありません。
ただし、ブランドのロゴカラーを使ってウェブサイト内のカラー設定をする場合には、注意が必要です。
例えば、見出しタイトルにロゴと同じカラーを用いたときは、見出しタイトルはコントラスト比の要件を満たす必要があります。
ウェブサイトのデザイン段階では、どのようなことに気をつける必要がありますか？
ビジュアルの表現やUIデザインを検討する際は、知覚可能（Perceivable）、操作可能（Operable）、理解可能（Understandable）の3つのポイントを考慮してください。
花王ウェブアクセシビリティガイドラインの「5-2 コンテンツ作成で考慮すること」「5-3 ビジュアル・UIデザインで考慮すること」や「アクセシビリティ対応チェックシート」で、注意すべき点を確認してください。
開発・オーサリング
花王AEM Sitesで制作する場合に注意することはありますか。
花王AEM Sitesで制作するウェブサイトは、コンポーネントを適切に使用することで、アクセシビリティ要件の一部を満たすことができます。
コンポーネントの適切な使用については花王AEM Sitesマニュアルサイトで設定や操作方法について確認して制作へ進めてください。
運用
ライターとデザイナー、オーサーなど、複数の会社で制作する場合は「アクセシビリティ対応チェックシート」を担当会社ごとに記入して、複数ファイルで提出してもよいですか？
「アクセシビリティ対応チェックシート」は、フェーズごとに別ファイルとして提出することはできません。
チェックシートの運用目的の一つは、チェックした内容を次のフェーズ（作業工程）へ引き継ぐことです。チェック担当は、必ずチェックシートを次のフェーズへ引き継いでください。
フェーズによってチェック担当の会社が異なる場合は、花王サイト担当がチェックシートの受け渡しを行ってください。
また、個別に記入したシートを後から１つのファイルにまとめても、チェックシートとして正しく機能しないため、運用時には注意が必要です。（自動集計機能に問題が発生します）
アクセシビリティ対応チェックシートの運用フロー
画像の代替テキストの内容は、誰がいつ、どのように決定するのがよいですか？
基本はコンテンツ作成段階で代替テキストを作成しますが、デザインに伴い代替テキストを変更する必要が発生する場合もあります。また、提供を受けた画像であれば、画像提供者でないと判断できない場合などもあります。企画・設計時に代替テキストの運用方針を検討・決定してください。
※画像に対する代替テキストの提供は、alt属性を入れることと限定的に捉えられがちですが、キャプションやグラフの説明文など、画像とは別のテキストコンテンツとして配置することも検討してください。
ポイント
-
どのような情報をテキストとして提供するのか。
-
コンテンツの意図を決定するのは誰か。
-
代替テキストの内容が適切かどうかの判断をするのは誰か。
- デザイン時のレイアウトの構成に伴って、代替テキストの内容に変更が必要かどうか確認をするのは誰か。
チェックシート・その他
花王AEM Sitesで「アクセシビリティ対応チェックシート」を使って制作したウェブサイトの事例はありますか？
2022年11月時点で「アクセシビリティ対応チェックシート」を使って制作されたウェブサイトをいくつかご紹介します。
※現時点では満たしていない品質基準の要件もあります。また、後日更新または削除予定のページもあるため、未対応のページもあります。
「アクセシビリティ対応チェックシート」のチェック担当は１つのフェーズに複数名いてもよいですか？
１つのフェーズにつき複数名で分担してチェックしていただいても構いません。
ただし、チェックシートの「記入者名」欄にはフェーズの代表者として１名のお名前を記入してください。
「アクセシビリティ対応チェックシート」に記載した内容が正しいかどうかは、どのように確認すればよいですか？
2022年中はアクセシビリティ対応チェックシートを使った、チェック担当のセルフチェックのみとなります。
2023年以降については、チェックシート提出後に第三者機関によるアクセシビリティチェックやユーザーテストを実施することを、今後検討予定です。
「アクセシビリティ対応チェックシート」と「アクセシビリティ簡易確認シート」の違いを教えてください。
「アクセシビリティ対応チェックシート」は、コンテンツ作成、デザイン、オーサリングの各制作フェーズの終了時と全制作作業完了時にWCAG要件を満たしているかどうかを確認するためのものです。本シートを使わずに制作したウェブサイトの改修時、または新しいウェブサイトを制作する際は、利用が必須です。
「アクセシビリティ簡易確認シート」は、「アクセシビリティ対応チェックシート」を使わずに制作した公開中のウェブサイトに対して、チェック対象を特に重要なウェブアクセシビリティの要件に絞り、ウェブサイトの対応状況を簡易的に把握するためのものです。原則、「アクセシビリティ対応チェックシート」を使わずに制作をしたウェブサイトは利用が必須ですが、構成、デザインが大幅に変わるリニューアルの場合は任意となります。
比較表
-
*日々の運用範囲内の更新やコンテンツ追加をする際は「アクセシビリティ対応チェックシート」の利用・提出は不要です（例：バナー画像の差し替え）。ただし継続してアクセシビリティが確保されるよう、アクセシビリティ要件に配慮した制作・運用にあたってください。
上記画像で表現した情報を、テキストファイルとしても提供いたします。
「アクセシビリティ簡易確認シート」はどのタイミングで提出すればよいですか？提出期限はありますか？
「アクセシビリティ簡易確認シート」の提出期限はありません。ただし、アクセシビリティ向上の改修計画の際に参考となりますので、できるだけ早いタイミングでの実施を推奨します。
公開中のウェブサイトのアクセシビリティ改修コストはどのように見積もればよいでしょうか？目安があれば教えてください。
コンテンツの量や種類、ウェブサイトの規模やアクセシビリティ状況によって変わります。アクセシビリティ簡易確認シートの結果を参考にして、作業コストを見積もってください。
リニューアルや大規模な更新を予定しているウェブサイトであれば、アクセシビリティの確保をリニューアル要件に入れて実施する方が、単独でアクセシビリティ対応をおこなうより効率的な場合があります。
「アクセシビリティ対応チェックシート」で「満たす」としてよいか迷う場合は、どうすればよいですか？
要件を満たさない場合、または別のフェーズ（作業工程）で確認が必要な場合は「要確認」にチェックを入れて、詳細を「要確認理由」へ記入します。満たしているか迷う場合も同様に「要確認理由」へその内容を記入してください。
要確認理由の記入例
コントラスト比で判断に迷ったケース（アクセシビリティ対応チェックシートC-5-1、C-5-2）
画像内の大きい文字でコントラスト 3:1 を確保したが、文字画像（画像内文字）はデバイス幅が小さくなると、文字サイズが小さくなるケースがあるため、「満たす」にチェックを入れて良いか迷って「要確認」にチェックをいれた。
リンクの目的で判断に迷ったケース（アクセシビリティ対応チェックシートD-2-1）
チェック項目にある「リンク先が推察できる」とは、どの程度の読解力を想定したら良いか判断つかなかったので「要確認」にチェックを入れました。
「アクセシビリティ対応チェックシート」は１ページごとに１シートを使って記入しますか？
原則としては、ページ単位ではなく、作業した対象範囲をまとめてチェック、記入を行ってください。
ただし作業範囲が広く、数十ぺージに及ぶ場合は、ディレクトリごとにチェックシートを分けるなど適宜調整してください。
「アクセシビリティ対応チェックシート」の項目で、ほとんどのページでは満たしているが、１ページだけ満たさないものがあります。「満たす」にチェックしてよいですか？
1ページでも要件を満たさない場合は「要確認」にチェックを入れ、対象箇所と詳細を「要確認理由」へ記入してください。
「アクセシビリティ対応チェックシート」の項目をすべて満たさないと、公開できませんか？
すべての項目を満たしていないとウェブサイトを公開できない、という規定はありません。
花王グループではすべての項目を満たすことを目指していますが、技術的に対応が困難、または時間やコストがかかる項目もあります。「対応指標」も活用しながら2024年3月の対応期限に向けて段階的な改修を計画して取り組んでください。
「アクセシビリティ対応チェックシート」にある「対応指標」は、ウェブアクセシビリティガイドラインの「3. 目標とする品質基準」とどのような違いがありますか？
対応指標はWCAC 2.1 レベルAA の対応に向けて、段階的な取り組みを支援するために、対応の目安として設定しました。品質に関しての基準ではありません。
「アクセシビリティ対応チェックシート」の項目を、優先度Ⅰ～Ⅲの3段階で分類しています。最終的にはすべての項目を満たすことが目標ですが、まずは優先度Ⅰ・Ⅱの項目を80%満たすよう取り組んでください。
「対応指標」の優先度とは何ですか？
できるところから、より多く取り組むための対応時の目安が「優先度」です。年齢や障害の有無、利用している機器や環境などに対する優先度ではありません。以下の３段階で設定しています。
-
優先度Ⅰ：満たしているかどうかの判断が比較的容易、かつページ内で使用頻度が高いコンテンツに関わる項目。またはWCAGで最低限の要件として求められる項目。見直しの負荷が、比較的低いと考えられる。
-
優先度Ⅱ：満たしているかどうかの判断がやや難しく、見直しの負荷もやや高い項目。
- 優先度Ⅲ：満たしているかどうかの判断に専門的な知識を要する項目。コンテンツボリューム、使用頻度がともに低い項目。
「アクセシビリティ簡易確認シート」はウェブサイトすべてのページを確認する必要がありますか？
「アクセシビリティ簡易確認シート」は、公開中のウェブサイトのアクセシビリティ傾向を把握するためのツールです。対象ページはウェブサイトの規模によって異なります。
対象ウェブサイト
-
公開中のウェブサイト。
-
2023年3月までに公開予定で「アクセシビリティ対応チェックシート」を使わずに制作を開始しているウェブサイト。（公開後に実施）
対象ページ
-
10ページ以下のウェブサイトは全ページが対象。
-
11ページ以上のウェブサイトはトップや主要なページなど、10ページ程度を選定する。
「アクセシビリティ簡易確認シート」で利用するチェックツールを使って「アクセシビリティ対応チェックシート」のチェックを行っても問題ないですか？
「アクセシビリティ対応チェックシート」でチェックを行う際、機械的にチェックできる項目はブラウザの拡張機能などさまざまなチェックツールやサービスを利用しても問題ありません。ただし機械によるチェックができない項目、最終的には人間の判断が必要となる項目が多くありますのでご注意ください。
花王ウェブアクセシビリティガイドライン「5-6. ツールの利用」にW3Cで紹介されているツールを掲載していますので参考にしてください。
※ツールやサービスの使い方、チェック結果に関する質問はお受けできませんのでご了承ください。
「アクセシビリティ簡易確認シート」の結果にエラー/NG判定の項目がありませんでした。改修しなくてよいということですか？
「アクセシビリティ簡易確認シート」は、現状のウェブサイトの傾向を把握することを目的としているため、確認項目がアクセシビリティの基本となる要件に絞られています。簡易確認シートではエラー/NG判定が無くても、確認項目以外でアクセシビリティの課題を抱えている可能性があります。このシートで掴んだ傾向をもとにアクセシビリティ向上の計画をたて、実行へ進めてください。
表記について
花王株式会社のウェブサイトでは、「障害」の表記として、一部のコンテンツで「障がい」を使用しておりますが、本ガイドラインにおいては、スクリーンリーダーでのテキストの読み上げを考慮し、漢字表記としております。
- Home
- 花王ウェブアクセシビリティFAQ
