「渋谷駅前エリアマネジメント」公式サイトウェブアクセシビリティ対応｜導入事例

2026/6/12 掲載
変化し続ける渋谷駅前の情報を、誰もが安心して利用できる公式サイトで発信！

めまぐるしく変化し続ける渋谷駅前エリアで活動する「渋谷駅前エリアマネジメント」は、遊び心をプラスしてより楽しく、安心・安全で使いやすい街づくりに取り組まれています。

本プロジェクトの公式サイトにおいて、JIS X 8341-3:2016（アクセシビリティ等級A）に配慮したウェブアクセシビリティ対応を行いました。

●実施内容
画像のaltの設置、キーボード操作などを中心に以下の対応を実施しました。あわせて、本サイトにおけるウェブアクセシビリティの考え方や対応方針を明文化したページを制作しました。

① 画像への代替テキストの提供
音声読み上げを利用される場合でも、画像が持つ意味や文脈を正しく伝えることができます。
　・情報を伝える目的の画像には、内容が分かる代替テキスト（alt）を設定
　・装飾目的の画像は、不要な音声読み上げを避けるため、適切にalt属性を指定

② テキストとして提供される情報の確保
利用環境に左右させることなく、誰もが確実に情報へアクセスできることを目指しました。
　・画像のみで情報を伝える構成を避け、必要な情報は必ず文字情報を提供
　・PDFや画像形式の資料を掲載する場合も、必要なテキスト情報を提供

③ キーボードによる操作への配慮
マウス操作が難しい場合も、迷うことなくサイトをご覧いただける構成としています。
　・主要なリンクやボタンに対し、キーボード操作のみでもアクセスできるよう対応
　・フォーカスが移動する順番が論理的になるよう、設計に配慮
　

▲Tabキーを利用して、選択箇所（青枠）が移動する仕組み
　
④ 適切な文書構造
見出しのみを読み上げた場合でも、情報が不足なく、正しく伝わるよう工夫しています。
　・ページに見出し構造（h1、h2 など）を用い、情報の階層を明確化
　・リストや表などの構造化要素を活用し、音声読み上げ環境でも理解しやすい構成

⑤ 音声読み上げソフトへの配慮
ページごとに表記が異ならないよう配慮し、利用者が混乱しない環境としています。
　・ナビゲーションリンクやフォームなどに適切なラベルを設定し、音声読み上げソフトで利用しやすい実装
　・意味を持つアイコンやボタンには、aria-label等を用いて適切な名前を付与

⑥ 自動で切り替わるコンテンツへの操作ボタンの設置
動きのある表現によるストレスや誤操作を防ぎ、利用者が自分のペースで安心して閲覧できるようにしています。
　・自動で切り替わるメインビジュアルには、利用者が任意で停止・再開およびコンテンツの切り替えができる操作ボタンを設置

▲停止・再開および任意での切り替えができるボタンを設置（赤枠箇所）

●成果
上記に対応により、総務省が提供するmiChecker（ウェブアクセシビリティ評価ツール）において、ウェブアクセシビリティ対応度スコアが400点満点中「291点」から「394点」へ向上しました。年齢、障がいの有無、利用環境にかかわらず、誰もが安心して情報を取得できる公式サイトを実現しています。

▲miCheckerにおけるウェブアクセシビリティ評価の推移

▷ 「渋谷駅前エリアマネジメント」公式サイトはこちら