5. 各フェーズで考慮すること

ウェブサイト・メディアのアクセシビリティの確保は、デザイナー、エンジニア、QAテスターなどの制作担当のみが担うものではありません。要件やゴールを設定する企画段階からアクセシビリティに配慮しなければなりません。
花王アクセシビリティ対応チェックシート（以下、アクセシビリティ対応チェックシート）の申し送り欄を活用するなど、制作フェーズを横断した連携を心掛けてください。

企画・設計から運用に至るまのでウェブサイト制作の流れを、5つのフェーズで表現した図。5-1.企画設計、5-2.コンテンツ作成、5-3.ビジュアル・UIデザイン、5-4.開発・オーサリング、5-5.運用。各フェーズには、想定されるタスクの例が列挙されている。5-1.企画設計には、戦略立案、予算の確保、オリエン/発注、制作仕様策定、サイト設計。5-2.コンテンツ作成には、コンテンツインベントリの作成、原稿作成、ビジュアルアセットの作成（写真・図版説明など）。5-3.ビジュアル・UIデザインには、ビジュアルデザイン（フォント・配色・アイコン・行間など）、UIデザイン（ナビゲーション・インタラクションなど）、画面デザイン。5-4.開発・オーサリングには、マークアップ、プログラミング、オーサリング、表示・動作確認。5-5.運用には、コンテンツ更新、サイト改修、不具合修正がそれぞれ記載されている。

  • *
    上記はウェブサイト制作で想定されるタスクの一例です。

5-1 企画・設計で考慮すること

企画・設計段階は、​アクセシビリティを​技術的な​基準を​満たすだけでなく、​実際の​利用体験と​して​確保する​ための​出発点です。​この​段階での​方​針や​判断は、​後の​工程や​利用者体験に​直結します。​
そのため、​各フェーズでの​決定が​利用者に​ど​のように影響するかを​踏まえ​、​担当者が​実質的な​対応を​行える​環境を​整える​ことが​重要です。​以下の​取り組みを​検討してください。

  • 本質的な目的の共有：
    • アクセシビリティ対応の目的は、技術的な基準を満たすことだけではなく、誰もが使いやすい体験を提供することです。この認識をプロジェクト全体で共有することで、形式的な対応にとどまらず、利用者に価値を届ける取り組みとして実現できます。
  • 意図の可視化と継承：
    • 設計上の判断や背景にある考え方を記録し、引き継ぐ仕組みを導入しましょう。これにより、担当者の変更や長期運用でも、当初の設計意図を維持し、品質を保つことができます。
  • 実効性の確保：
    • アクセシビリティ対応チェックシートによる確認に加えて、利用体験を考慮する視点や、改善を続けるための仕組みを検討することが有効です。

オリエンテーションの実施

花王サイト担当は、コンテンツや​デザイン、​開発仕様の​検討を​開始する​前に、​制作関係者全員に本ガイドライン、及びアクセシビリティ対応チェックシートを事前に提供してください。また、各フェーズで誰がアクセシビリティ対応チェックシートで確認を行うのか、役割分担を​明確に​してください。​

AEM Sitesでのサイト構築・運用

花王AEM Sites でウェブサイトを制作する場合は、花王AEM Sites 側で提供しているコンポーネントを適切に使用することで、コンテンツ以外のウェブアクセシビリティは概ね確保することができます。

ただし、オーサリングやグラフィックパーツ次第では、アクセシビリティを確保できないことがあるため、指定のアクセシビリティ対応をもとに、アクセシビリティが確保できているか、必ずチェックを行ってください。

5-2 コンテンツ作成で考慮すること

ウェブサイトの情報は、パソコンやスマートフォンに搭載されているブラウザなどのソフトウェアを通して、利用者へと伝わります。そのため、コンテンツは、見た目の表現だけでなく機械が理解できる形にする必要があります。

下記に、WCAG 2.2 レベルA、及びレベルAA の達成基準をもとに、コンテンツ作成において考慮すべき事項を一部抜粋しました。障害の有無、年齢、環境や状況に関わらず、作成するコンテンツが利用者に届くよう気をつけてください。

  • 他ページと区別できるページタイトルを設定する（2.4.2 A）
  • 概要を理解できる見出しを提供する（1.3.1 A／2.4.6 AA）
  • リンク先を判断できるリンクラベルを設定する（2.4.4 A）
  • 画像に同じ目的を果たす代替テキストを提供する（1.1.1 A）
  • 激しく光を点滅させるコンテンツを使用しない（2.3.1 A）
  • 形／位置／音だけに頼った表現をしない（1.3.3 A）
  • 可能な限りCAPTCHAを避ける（1.1.1 A）
  • 音声に同じ目的を果たすキャプションを提供する（1.1.1 A／1.2.1 A／1.2.2 A／1.2.4 AA）
  • 映像に同じ目的を果たす音声解説を提供する（1.1.1 A／1.2.1 A／1.2.3 A／1.2.5 AA）

5-3 ビジュアル・UIデザインで考慮すること

WCAG の原則のうち、知覚可能（Perceivable）、操作可能（Operable）、理解可能（Understandable）の3つが、ビジュアルの表現やUIデザインを検討する上で考慮しておくポイントとなります。

下記に、WCAG 2.2 レベルA、及びレベルAA の達成基準をもとに、ビジュアル・UIデザインに関わる考慮事項を一部抜粋しました。特定の感覚に依存しない表現方法の他、能力や環境、状況に関わらず、操作できるように気をつけてください。

視認しやすくする

  • 文字と背景色のコントラスト比を高くする（1.4.3 AA）
  • UIコンポーネント／グラフィカルオブジェクトのコントラスト比を高くする（1.4.11 AA）
  • 文字は画像化せずテキストのまま使用する（1.4.5 AA）

多様な操作に対応する

  • 自動再生される音声を停止させる仕組みを提供する（1.4.2 A）
  • 動き続けるコンテンツに停止させる仕組みを提供する（2.2.2 A）
  • フォーカスインジケータを見えるようにする（2.4.7 AA）
  • フォーカス箇所が、他の要素によって隠されないようにする（2.4.11 AA）
  • エリアをスキップできる（2.4.1 A）
  • 複数のナビゲーション手段を提供する（2.4.5 AA）
  • ジェスチャーやドラッグだけではなくシングルポインタによる操作も提供する（2.5.1 A ／2.5.7 AA）
  • デバイス／利用者の動きによる操作をUIコンポーネントでも可能にする（2.5.4 A）
  • 操作箇所は十分なサイズを確保する（2.5.8 AA）

理解を可能にする

  • 色だけに頼った表現をしない（1.4.1 A）
  • 入力コントロールの目的が理解できるラベル／説明を提供する（1.1.1 A／2.4.6 AA／3.3.2 A）
  • 入力エラーの場所／内容／修正方法を示す（3.3.1 A／3.3.3 AA）
  • 利用者に繰り返し同じ情報を入力させない（3.3.7 A）
  • ナビゲーションの並び順やヘルプページの掲載箇所は一貫性を保つ（3.2.3 AA／3.3.6 A）
  • UIコンポーネントのアイコン／ラベルについての一貫性を保つ（3.2.4 AA）

5-4 開発・オーサリングで考慮すること

ウェブサイトの情報は、パソコンやスマートフォンに搭載されているブラウザなどのソフトウェアを通して、利用者へと伝わります。そのため、コンテンツは、見た目の表現だけでなく機械が理解できる形にする必要があります。

下記に、WCAG 2.2 レベルA、及びレベルAA の達成基準をもとに、開発・オーサリングに関わる考慮事項を一部抜粋しました。コンテンツ作成やビジュアル・UIデザインの担当者と連携し、各利用者が、利用者自身にあった方法でウェブサイトを利用できるように考慮してください。

機械可読性を確保する

  • 画像に同じ目的を果たす代替テキストを提供する（1.1.1 A）
  • セマンティクスを伝える要素でマークアップする（1.3.1 A）
  • コンテンツを意味のある順序で並べる（1.3.2 A）
  • リンク画像にリンク先を判断できるリンクラベルを設定する（2.4.4 A）
  • UIコンポーネントのラベルを Accessible Name に含む（2.5.3 A）

多様な操作に対応する

  • 表示／操作の向きを制限しない（1.3.4 AA）
  • 利用者情報の入力フィールドに適切なautocomplete属性を設定する（1.3.5 AA）
  • 文字サイズを拡大できるようにする（1.4.4 AA）
  • 可変なレイアウトによってコンテンツをリフローさせる（1.4.10 AA）
  • 文字や行の間隔の変更に対応する（1.4.12 AA）
  • ホバー／フォーカスで追加コンテンツを表示しても利用者の操作を妨げない（1.4.13 AA）
  • UIコンポーネントをキーボードで操作可能にする（2.1.1 A／2.1.2 A／2.4.7 AA）
  • 文字キーのショートカットによる利用者の誤操作を防ぐ（2.1.4 A）
  • コンテンツの制限時間は解除／調整／延長できるようにする（2.2.1 A）
  • 適切なキーボードフォーカスの順序を提供する（2.4.3 A）
  • シングルポインタを実行前にキャンセルできる（2.5.2 A）

理解を可能にする

  • ページ全体または一部分に対して言語設定を行う（3.1.1 A／3.1.2 AA）
  • フォーカス時／入力時に予測できない変化を起こさない（3.2.1 A／3.2.2 A）
  • 入力コントロールとラベル／説明を関係付ける（1.1.1 A／3.3.2 A）
  • 入力エラーの場所／内容を示し、必要に応じて確認画面を提供する（3.3.1 A／3.3.4 AA）
  • 認証情報の入力時にパスワードマネージャやコピー＆ペーストの利用を妨げない（3.3.8 AA）

互換性を確保する

  • 独自のUIコンポーネントに Accessible Name／role／state を提供する（4.1.2 A）
  • コンテンツが変化した内容を適切なタイミングで通知する（4.1.3 AA）

また、WCAG で紹介されている達成方法の中には、技術的には可能であっても、ブラウザ、及び支援技術でサポートされていないこともあるため、開発・オーサリングにあたっては、必ず想定している端末やブラウザで検証を行ってください。

5-5 運用で考慮すること

ウェブサイトのアクセシビリティの確保は、運用フェーズに入ると徐々に品質が下降する傾向があります。

花王グループでは、Webサイトのアクセシビリティの確保は一時的の対応ではなく、持続可能な対応として、継続的に取り組むことが大切だと考えています。

ウェブサイトに新しいコンテンツを追加したり、更新を行ったりする際も、アクセシビリティの確保をしっかり要件に入れ、品質が下降することのないよう、日々の運用にあたってください。

5-6 すべてのフェーズで気を付けること

花王アクセシビリティ対応チェックシートの利用

「アクセシビリティ対応チェックシート」は、制作作業開始前にWCAGの要件を確認し、制作作業完了後に要件を満たすよう作業したか確認するためのものです。次のいずれかに当てはまる場合はチェックシートの利用・提出が必須です。

  • 新しいウェブサイトを制作するとき
  • 「アクセシビリティ対応チェックシート」を使わずに制作したウェブサイトを改修するとき
  • アクセシビリティ改善改修を実施済みのサイトに対して、構成・デザインなどが大幅に変わるリニューアルをするとき

なお、日々の運用範囲内の更新やコンテンツ追加をする際は「アクセシビリティ対応チェックシート」の利用・提出は不要です。

アクセシビリティ対応チェックシート利用の流れ

  • 制作フェーズで、各フェーズの担当者はアクセシビリティ対応チェックシートの該当項目について対応状況を確認し、次のフェーズ担当にチェックシートを引き継ぎます。
  • オーサリング・開発フェーズの担当は、ウェブサイト公開前のテストサイト確認時（プレビューエリアでの確認時）に、アクセシビリティ対応チェックシートを花王サイト担当に提出してください。
  • 花王サイト担当は、アクセシビリティ対応チェックシートを満たしていることを確認し、校了とします。

アクセシビリティチェックツールの利用

ウェブコンテンツのアクセシビリティを機械的にチェックするツールはさまざま提供されていますが、現時点では十分な導入検証ができていないため、花王グループとして導入しているチェックツールはありません。

ただし、WCAG 2.2 レベルAA の達成基準の一部は、ツールを使うことで効率的にチェックできるものもあります。以下に挙げるW3Cで紹介されているツールについては、アクセシビリティ対応チェックシートの項目と合わせて、適宜、活用ください。
（掲載するツールの動作や評価結果の精度を保証するものではありません）

構文解析

コントラスト比のチェック

キーボードフォーカス順序の確認

自動チェックツール

アクセシビリティオーバーレイツールの利用​

近年、オーバーレイツールと呼ばれる「自動でアクセシビリティ向上」を謳うサービスが登場しています。

オーバーレイツールをウェブサイトに導入することで、画像に対する代替テキストの提供など自動的に行われるとされていますが、オーバーレイツールの導入すると、スクリーンリーダーなど支援技術が正しく操作できなくなるなどの問題が報告されているため、信頼性の観点から、現時点では花王グループでは使用することを認めておりません。

ウェブアクセシビリティガイドライン

ウェブアクセシビリティガイドライン

Page Top