アクセシビリティ要件を、構成・デザイン・実装の各工程へ組み込んだサイトリニューアル

ページ数と担当範囲が広い一方、社内にはアクセシビリティ対応の共通フローや網羅的なチェックリストがなく、対象範囲と検証方法が担当者の経験へ依存しやすい状態でした。ブランド表現を保ちながら、色だけに頼らない情報伝達、文字の視認性、キーボード操作、フォーカス表示、動きの制御を複数ページで揃える必要がありました。

また、拡張機能で高い点数を得ることと、規格への正式な適合を証明することは同じではありません。利用できる検証環境にも制約があったため、確認できた配慮と、未確認の適合性を分けて説明する必要がありました。

アクセシビリティ要件を一つの最終検査へまとめず、構成、デザイン、コーディングの課題へ分け、複数ページの制作指示に対象項目を明記しました。ナビゲーション階層やリンクの役割は、PC・スマートフォン、グローバルナビ・フッターで差が出ないよう確認しています。

Figmaのルールセットはページ順ではなく、タグ、リスト、カードなど部品の意味ごとに整理しました。デザインと実装が同じ部品名と状態を見ながら確認し、ページごとの個別判断を減らしています。

自動検査だけで完了とする案は採用せず、キーボード操作、音声ブラウザ、動きの停止など人の操作も確認しました。ただし正式な試験結果は確認できていないため、「完全準拠」や「適合済み」とは表現しません。

背景画像を明るくして見出しを読みやすくし、画像リンクの文字は画像の外へ出しました。色だけで状態や違いを伝えず、アイコンやイラストも併用しています。コントラストとフォーカス表示を確認しながら、ブランドの色や写真表現を残せる範囲を探りました。

自動スクロールする要素には停止ボタンと現在位置を示すインジケーターを設け、操作できない状態も見た目で分かるようにしました。スマートフォンではナビゲーションを一律に削らず、PC版との階層差が生まれないよう役割を確認しています。

静止画の見栄えだけでなく、フォーカス中、停止中、非活性、文字量が変わった状態をデザイン対象にし、実装担当が動作を推測しなくてよいルールセットへ整理しました。

キーボード操作でメニューを開く操作と、扉ページへ移動するリンクの役割を分離しました。マウス操作だけで成立する構造を避け、フォーカスの移動順と現在位置が分かる状態を確認しています。

スライダーは表示領域へ入ったときだけ自動再生し、ループさせず、キーボード利用者が終端を把握できる構成としました。操作できないボタンは非活性状態を示し、動きを止めても情報へ到達できるようにしています。

音声ブラウザなどでも確認しましたが、対象項目すべてを網羅した試験結果は未確認です。公開後の振り返りでは、個々の工夫を担当者の経験で終わらせず、要件の対象範囲、使用する検証手段、確認結果を誰でも再現できるチェックリストへ標準化する必要性を整理しました。