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

  • 他ページと区別できるページタイトルを設定する(2.4.2 A
  • 概要を理解できる見出しを提供する(1.3.1 A2.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 A1.2.1 A1.2.2 A1.2.4 AA
  • 映像に同じ目的を果たす音声解説を提供する(1.1.1 A1.2.1 A1.2.3 A1.2.5 AA

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

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

下記に、WCAG 2.1 レベル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.1 A
  • 複数のナビゲーション手段を提供する(2.4.5 AA
  • ジェスチャーだけではなくシングルポインタによる操作も提供する(2.5.1 A
  • デバイス/利用者の動きによる操作をUIコンポーネントでも可能にする(2.5.4 A

理解を可能にする

  • 色だけに頼った表現をしない(1.4.1 A
  • 入力コントロールの目的が理解できるラベル/説明を提供する(1.1.1 A2.4.6 AA3.3.2 A
  • 入力エラーの場所/内容/修正方法を示す(3.3.1 A3.3.3 AA
  • ナビゲーションの並び順についての一貫性を保つ(3.2.3 AA
  • UIコンポーネントのアイコン/ラベルについての一貫性を保つ(3.2.4 AA

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

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

下記に、WCAG 2.1 レベル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 A2.1.2 A2.4.7 AA
  • 文字キーのショートカットによる利用者の誤操作を防ぐ(2.1.4 A
  • コンテンツの制限時間は解除/調整/延長できるようにする(2.2.1 A
  • 適切なキーボードフォーカスの順序を提供する(2.4.3 A
  • シングルポインタを実行前にキャンセルできる(2.5.2 A

理解を可能にする

  • ページ全体または一部分に対して言語設定を行う(3.1.1 A3.1.2 AA
  • フォーカス時/入力時に予測できない変化を起こさない(3.2.1 A3.2.2 A
  • 入力コントロールとラベル/説明を関係付ける(1.1.1 A3.3.2 A
  • 入力エラーの場所/内容を示し、必要に応じて確認画面を提供する(3.3.1 A3.3.4 AA

互換性を確保する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

構文解析

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

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

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

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

Page Top