ウェブ制作基盤の改善・改修

花王では、コンポーネントと呼ばれる予め用意されたウェブページを構成するパーツを組み合わせてページを作るコンテンツマネジメントシステム（CMS）を導入しています。このCMSが自動生成する各コンポーネントのHTML記述の改善および改修を実施してきました。これにより、コンポーネントを適切に組み合わせてページを作れば、コンテンツ（コントラスト比や代替テキストなど）以外のアクセシビリティは概ね確保できるウェブ制作環境が整いました。

コンポーネントのアクセシビリティ改修の例

カルーセルのコンポーネントに対し、次の２点の改修を実施しました。

言語対応：「前へ」「次へ」などの操作用コントローラーの代替テキストが、ページの言語設定に合わせた言語で出力するよう変更。対応言語：日本語、英語、簡体中文、繁體中⽂（zh-HK / zh-TW）、ベトナム語、タイ語、インドネシア語
見出し構造：メインの文章部分を見出し（H2〜H6）として設定できるようにし、画面読み上げソフトでもコンテンツの区切りが理解しやすくなりました。

以下の図は、画像やお知らせなどが横にスライドして切り替わる「カルーセル」に対して行った改善内容を示しています。

改修イメージ1

カルーセルの改修イメージ1

操作用コントローラーの代替テキストが、ユーザーの言語にあわせて読み上げられるようになりました。

改修イメージ2

カルーセルの改修イメージ2

スライド内の文章が「見出し」として認識できるようになり、スクリーンリーダーでも構造が伝わりやすくなりました。