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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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