有限会社ユニバーサルワークスは、47都道府県・20政令指定都市の自治体公式サイトを対象に、「自治体サイトWebアクセシビリティ調査 2026」を実施しました。今年で24回目となる今回のテーマは「使える？押せる？カルーセル」です。
カルーセルは、複数のスライドを順番に見ることのできるコンポーネントで、自治体サイトにおいては地域を象徴する写真を掲載したり、複数の重点施策を掲出したりする領域として広く利用されています。ですが、複数のスライドが格納されること、それらを切り替えるボタン等を備える必要があること、動きを伴ったり自動再生されたりすることなどから、一口にカルーセルと言ってもその様相は多岐に渡ります。
本調査では、各自治体の公式サイトのトップページに置かれているカルーセルについて、基本構造やボタン等の利用可否、得られる情報等を確認し、実際に利用者が遭遇する課題を抽出しました。この調査が、カルーセルを用いるべきかを判断するための一助として活用されること、また、利用する場合により望ましい実装について検討する機会となることを願います。
調査方法
47都道府県・20政令指定都市の公式サイト内に設けられたカルーセルを評価者（視覚障害者および健常者）が閲覧し、調査観点に基づき確認を行いました。
調査対象の特定
以下の基準に基づき調査対象とするカルーセルを特定しました。
- 公式サイトのトップページに設置されているカルーセルを対象とする
- PC向けとスマートフォン向けページとで、カルーセルの有無・様相が異なる場合には、PC向けを対象とする
- トップページ内に複数のカルーセルが設置されている場合には、ページ上部にあるもの、面積の大きなものを対象とする
- ただし、調査対象候補のカルーセルが装飾的な役割を担っている場合、内包コンテンツが少ない場合、備わる機能・ボタンが少ない場合には、別のカルーセルを対象とすることを妨げない
調査内容・観点
調査内容と観点を以下に記します。
※調査対象が存在しない場合、または該当する機能やボタンが設置されていない項目については「-」を記しています。
スクリーンショット
調査対象コンテンツとみなしたカルーセルの周辺のスクリーンショットを掲載しています。カルーセルが存在しない場合には、トップページのスクリーンショットなどを掲載し、調査対象が存在しなかった旨を記しています。
基本構造・設置仕様
カルーセル有無
トップページ内のカルーセルの設置有無を記しています。併せて、自動再生がなされていない場合については「（自動再生なし）」と付記しています。
カルーセルが存在しない場合は「なし」とし、以降の調査項目には「-」を記しています。
対象カルーセルの種別
調査対象としたカルーセルがどのような役割・情報を担っているかを記しています。ページ上部において大きな画像を伴っているものは「メインビジュアル」とし、それ以外の場合には、設置場所や直前の見出し等を記すことで、調査対象のカルーセルを特定します。
掲載枚数
カルーセル内に格納されているスライド（画像やリンク）の総枚数です。
表示秒数
自動再生時、1枚のスライドが表示されてから次のスライドへ切り替わるまでの間隔（秒数）を測定しています。
用いているライブラリ等
カルーセルを実現するために使用されているJavaScriptライブラリやプログラム（Slick、Swiperなど）を確認できる範囲で記しています。
自動再生・操作制御
再生・停止ボタンのタイプと表記
自動再生を止めるためのボタンの有無、その種類（トグルボタンか単一ラベルか）、ボタンに記される名称（代替テキストやaria-labelの場合も含む）を確認しています。
マウスホバー・フォーカス時の自動停止
スライドにホバーした（マウスポインターを乗せた）際や、キーボード操作でフォーカスが当たった際に、スライドの自動再生が一時停止するかを確認しています。
表示されているボタンのキーボード操作
画面上に見えている再生・停止ボタンやナビゲーションボタンに対し、Tabキー等でフォーカスを当て、EnterキーやSpaceキーで実際に操作可能かを確認しています。
すべてのボタンが操作できる場合には「○」、いずれか一つでも操作できないボタンがある場合には「×」としています。
前後移動ボタンの有無と表記
「前へ」「次へ」といったスライドを手動で切り替えるボタンの有無と、ボタンが備わっている場合には、そのボタンの名称（代替テキストやaria-labelの場合も含む）を確認しています。
スワイプ操作の可否
スマートフォンにおいて、フリック・スワイプ操作でスライドを切り替えられる場合には「可」としています。
スライド選択UI・支援技術対応
スライド選択ボタンの有無
特定のスライドを直接表示させるためのインジケーター（ドットや数字等のボタン）の有無を記しています。
スライド選択ボタンの形状等
インジケーターの形状やラベルの有無について記しています。
スライド選択ボタンのカレント／非カレントの区別
現在表示されているスライドに対応するボタンについて、どのような視覚的差異があるか記しています。
スライド選択ボタンの代替テキスト
スライド選択ボタンに対して設定されている代替テキストを記しています。「n」は選択対象のスライド番号、「N」は格納されている総数を表しています。
例えば、代替テキストが「1番目のスライドを表示」「2番目のスライドを表示」…である場合には「n番目のスライドを表示」と記し、「1/5」「2/5」…である場合には「n/N」としています。
スライドの構成要素
1枚のスライドがどのような要素で構成されているかを「画像」「画像とテキスト」のいずれかで記しています。画像が複数含まれている場合や、スライド内に複数のスタイルのテキストが含まれている場合であっても「画像」「画像とテキスト」のいずれかとしています。
画像の代替テキスト（例）
スライド内で用いられている画像に設定されている代替テキストを記しています。複数のスライドが格納されていますので、それぞれ異なる代替テキストが設定されていますが、一例のみ抽出しています。
画面外スライドへのフォーカス防止
画面に表示されていないリンクやボタンに対して、キーボードのTabキーでフォーカスが当たってしまう現象が防止されているかを確認しています。
再生／停止操作時の音声フィードバック
再生・停止ボタンを操作した際のボタンの状態等がスクリーンリーダーに通知されるかを確認しています。通知内容が適切でない場合にはその旨を記しています。
評価コメント
評価者からのメッセージです。
調査項目に関する説明、内包されるコンテンツの状況、確認された問題点や改善の手立て等について、コメントしています。