政令指定都市のトップページを比べて見た

私は、視覚障害者で、webアクセシビリティについては興味があり、3年前からwebアクセシビリティについて、調べてみたり、webサイトのアクセシビリティチェックをしたりしています。障害特性によりwebアクセシビリティの評価が逆であったり、健常者を含めても共通するものもあります。多くの人にとって見やすいようにその最大公約数を見出すためには、様々な人が、webアクセシビリティについてコメントすることは意味のあることだと思います、ですが、webサイトのアクセシビリティについて個人的に評価をしているサイトは見かけなかったので、自分のブログで試しにやってみました。

政令指定都市のホームページ

日本の市町村の数は、1718で、その内人口50万人以上で、法律で定められた政令指定都市は、20都市です。すべての市町村はそれぞれオリジナルなホームページを持っています。

　市町村によって、課題や政策がことなりますが、住民に提供しなければならない情報のカテゴリーは基本かわらないはずです。ホームページの入り口となるトップページには、行政情報、イベント情報、公募、入札、議会、首長のメッセージ等の多岐にわたるカテゴリーを表示し、詳細ページへのリンクを貼っています。また、情報の提供だけではなく、都市の魅力をアピールしてイメージを上げる場でもあります。各都市は、webの技術を駆使してこれらの情報を分かりやすく、見やすく、綺麗にみせようとしのぎを削っています。

ホームページのwebアクセシビリティについては、障害者差別解消法で努力義務があるため、総務省が「みんなの公共サイト運用ガイドライン」で達成規準の目標値をWCAG2.0（JIS X 8341-3:2016）の適合レベルAAに準拠するように定められています。

また、ホームページでは、例外なくアクセシビリティ方針を掲載してその準拠状況をチェックリストとともに開示しています。WCAG2.0のチェック項目は全部で61項目で、適合レベルAとAAの合計は45項目です。アクセシビリティ診断は、チェック項目の一つ一つについて、ツールを使ったりして行われますが、私がこの記事で行ったのは、それではなく、一障害者の視点で20都市のアクセシビリティを見比べて、感じたまま、書き連ねてみました。

政令指定都市一覧（リンク付き）

全体構成は似通っている

政令指定都市20都市のホームページは独自のものですが、全体構成は似通ったものになっています。

ヘッダー

ヘッダー部はロゴやハンバーガーメニュー、アクセシビリティ機能ボタン（文字拡大、読み上げ、外国語、画面背景等）が置かれています。ハンバーガーは、都市によって、逢ったり無かったり、またモバイル画面で現れたりします。アクセシビリティボタンはほとんどの都市は有りますが、無い都市もあります。

タブ見出し

ヘッダー直下に置かれるタブ見出しもハンバーガと同様ですが、モバイル画面でハンバーガーに切り替わる場合が多いです。

メインビジュアル以下

全ての都市に、タブ見出しの下に、メインビジュアルがあります。メインビジュアルは大きなサイズのスライドを複数枚カルーセルという手法でならべているところがほとんどです。

メインビジュアル以下はイベント情報リンク、トピックリンク、検索カテゴリーリンク、市政情報リンク、広告リンク、snsリンクが続きます。リンクにはテキスト、アイコン画像、サムネイル画像などが用いられています。

フッター

最後にフッターとなります。フッターは、著作権、プライバシーポリシー。サイトマップ、所在地情報、お問い合わせ等のお決まりの項目とwebアクセシビリティ方針へのリンクが貼られています。ただ、広島市のアクセシビリティ方針はサイトマップにしかリンクが見つからず、キーワード検索で入るしかありません。

全体構成のアクセシビリティ

ホームページの入り口であるトップページは、情報メニューのリンクが提示されていて、閲覧者は自分の目的のリンクを探して視線を移動してゆきます。なので、リンクの配置が直感的であるほど、ストレスも少ないし、ぼんやりとしか見えない私のような弱視者にとっては、直感的な配置は大事です。直感的とは、

人の自然な視線の動きに合わせたストーリー性のある配置

人の視線は、例外があるかもしれませんが、横書きの場合、上から下、左から右に流れてゆくので、それに合わせて情報リンクを意味については全体から詳細へ文字のサイズ太さは大から小太いから細い色は濃いから薄いへと、カテゴリー毎に並べると、楽に視線を移動できるはずです。

共通認識に基づいた配置

簡単に言えば、閲覧回数の多いポータルサイト、ECサイトのレイアウトで見慣れたレイアウト手法に習えば、あらかじめインプットされている配置にしたがって視線を移動すれば、欲しい項目が置かれているということになります。

全体レイアウトでカラム構成について言うと、札幌市が3カラムで他の都市は1カラムでした。

（レスポンシブ対応で、スマホでは札幌市も1カラムになります。）。3カラムのレイアウトは、どの項目がどのカラムにあるのか目移りして、1カラムに比べストレスを感じました。例えばYahooのポータルサイトは左カラムはカテゴリリンク、中央カラムはニュースリンク、右カラムはトピックや広告等でカラムの役割が分かりやすくしてあるので、目移りはあまり有りません。札幌市の場合は、そのような各カラムの役割が分かりにくかったです。ただ、他の都市が1カラムの中、上手く3カラムを使うことができたら、特徴的なサイトになるような気がします。

グローバルナビ

グローバルナビは、熊本市を除いて、右上のハンバーガメニュー、ヘッダー下のタブ見出しのどちらか、又は両方が使われています。普通レスポンシブ対応で、スマホ画面はハンバーガーメニューで、PC画面では、タブメニューに切り替わります。政令指定都市のトップページも約半分はそうです。そうでない都市は、ハンバーガーメニューのみ、タブメニューのみとなっています。弱視の私にとって、タブメニューが操作し難い事が多いです。理由は、いくつかありますが、一番大きいのは、タブをクリックあるいはフォーカスを当てると、ドロップダウンでパネルが開いたり閉じたりで、画面の変化に対応し難いことです。タブの操作性については各市様々工夫をされています。

ては各市様々工夫をされています。

個人的には、タブ画面の領域を大きくとり、境界がはっきりしていて、タブ画面の開閉や切り替えが、escやtabキーでできるようにしてほしいです。

一方、ハンバーガメニューは、画面が単一であることから、画面の変化が少ないので楽な面があります。政令指定都市のサイトではメインビジュアルの下に情報のカテゴリごとにアイコンやサムネイル、テキストでリンクアイコンが配置されているので、グローバルナビの必要度は低く、タブを使わず、項目を絞り込んだハンバーガのメニューだけでも大丈夫のような気がします。実際、タブメニューは使わず、モバイルでもPCの画面でもハンバーガーメニューという都市は、埼玉、川崎、神戸の3都市ありました。

ヘッダーの位置固定について

視覚障害者に限らず、老齢者はできるだけ画面を拡大して見ますが、拡大しすぎると、画面が狭くなって情報を探すのに不便になります。なので、画面の拡大は、それぞれ自分の見やすいところに合わせることになるのですが、サイトによっては、ヘッダ部の画面位置を固定して、下にスクロールしても動かなくしていることがあり、画面を拡大すると固定のヘッダー部も広がってますます見ようとしている部分が狭くなってしまいます。ヘッダ部をこていするのは、ヘッダーに置かれているコンテンツを常時配置することによる利便性を狙ったものだと思います。自治体のサイトの場合、外国語変換設定、読み上げや画面背景色文字拡大のアクセシビリティ機能設定のボタンが、ヘッダー部にあるので、ヘッダー固定でこれを使いやすくすることになります。このため自治体のサイトでは上スクロールでヘッダー部が表れて、下スクロールでヘッダー部が消えるようなサイトが半分くらいありました。他はヘッダー固定をしないか、固定するのは1行か狭い高さにしています、ただ、静岡市のサイトはタブ見出しを含めた部分まで固定してしまっていてこれでは画面の拡大は出来ません。

アクセシビリティ設定機能について

ほとんどの都市では、サイトを見やすくするための設定ができるようになっています。（横浜市は設定なし）この設定はヘッダーに置かれていることが多いです。

この設定のうち視覚障害者のための支援ツールとして読み上げ、文字サイズ拡大、色合い（背景色）などがあります。読み上げや文字サイズの拡大は専用のソフト、ブラウザの機能でも提供されているので、使うことはあまりないのですが、色合い（背景色）の切り替えはとても良いです。背景色を黒や青に反転して文字を白にすると、コントラストが上がり見やすくなります。私の場合、黒白でコントラストを上げるとかえって見え辛くなるので青白を選択しています。

背景色の設定は、半分以上の都市でできます。白、黒が基本です。それに青、黄の設定がある都市は、札幌、仙台、千葉、相模原、静岡、名古屋、大阪、神戸、広島、熊本の9都市でした。

メインビジュアルについて

どの都市も、ヘッダーとタブ見出し下に、スクリーンの半分以上の広さで画像や写真を配置しています。都市のイメージを高くするための写真、メッセージ画像や、市民に伝えなければならない防災安全情報、イベント情報などの複数枚のスライドを1枚づつ、横方向に並べて移動させるカルーセルと言われる手法を使って表示しています。各都市がそれぞれのねらいに従って、表示させているので、都市のイメージをきめるとも言える部分です。なので、障害者にもそのねらいを十分伝えられるような工夫がされています。

スライドは画像データなので、視覚障害者にその画像の情報を伝えるためには、画像に適切な代替テキストが必要です。スライドの文字情報は画像として表示されているので、スクリーンリーダでは読み上げられません。なので画像の文字は、可能な限り代替テキストにこれを入れてもらいたいと思っています。しかし、たくさんの文字情報を表示しているにも関わらずスライドのタイトルだけの代替テキストが多いです。また、観光情報や施設情報などで、文字情報のない写真がスライドとなっている場合もありますが、写真のタイトルだけではなく、絵が浮かぶような説明を期待します。私のような弱視者の場合、代替テキストの助けで、ぼやっとしかみえていない写真が見えてきます。20都市の中では堺市が、スライドの説明がとても丁寧でした。

カルーセルについて

メインビジュアルでは、カルーセルと言われる手法が使われています。視覚障害者にとっては、あまり使ってほしくない手法です。webアクセシビリティ上、横スクロールは原則避けるのが基本ですが、何故かカルーセルは、省スペースの名のもとよく使われています。

カルーセルでは、数秒ごとに画像をスライドする自動再生がデフォルトで動作する場合が多いです。サイトを見に来た人に、用意したどの画像も見逃させたくないという意図かもしれませんが、意図通りの効果があるようには思えません。それより、サムネイルで画像を並べておいて、詳しく見たい人には一覧表示ボタンを押させて、全ての画像を縦に展開させる方法はいかがでしょうか。

私は、自動再生では、スライドの内容を理解するのが間に合わないので、停止しますが、停止ボタンがなかなか見つけられずイライラして見るのをあきらめてしまうことがよくあります。停止ボタンはスライドの上部においてもらうと目につきやすいのですが、大抵は画像の下側隅に置かれています。またスライド選択ボタンは、小さな〇印になっている都市もたくさんありました。配慮されている都市は、選択ボタンをスライドの代替えテキスト付のサムネイル画像にしてくれていました。

、各都市のトップページの一言感想

都市名	感想
札幌市	3カラムで項目の配置が分かりにくい。リンクアイコンが小さい。
仙台市	ページ全体に設定された背景画像が目障りで前面のコンテンツが見えづらい。
さいたま市	ンビジュアルのスライド自動再生なしで選択ボタンがサムネイルになっていて選択しやすい。タブ見出しなしでハンバーガーメニューのみ。ハンバーガーメニューがすっきりしている。
千葉市	メインビジュアル以外にあと4か所にカルーセルを使ってスライド表示。ニュースとイベントはテキストによるスライド一覧表示ボタンあり。スライドの代替テキストが不十分。
横浜市	カルーセルの操作ボタンがなく操作しにくい。リンクアイコンにマウスオーバーしても読み上げない。
川崎市	メインビジュアルは1枚でブランドメッセージのみ。お知らせ、イベント情報はカルーセルでスライド。スライド一覧表示はテキストデータで表示。マウスオーバーでサムネイルがフワっと浮く。
相模原市	タブは見やすい。メインビジュアル（相模原市の魅力）写真の説明がもう一言ほしい。ハンバーガーメニューのドロップダウン画面の下層になった写真の説明を、マウスオーバーで読み上げてしまうのは残念。
新潟市	タブのドロップダウンメニューの文字サイズが小さい。メインビジュアルのカルーセル操作ボタン小さくコントラストも良くない。検索のカテゴリーアイコンが横１列で8個並べられているが、サイズが小さくて見えにくい。
静岡市	ロゴと検索フォーム、タブ見出しの表示が上部に固定。スクロールすると画面がっ狭く感じる。
浜松市	浜松市　タブ見出しのドロップダウンメニュー、リンクテキストをマウスホバーすると色反転して、視認性が良い。
名古屋市	リンクを開くと新しいタブで開くのでリンクを辿りにくい。　　　”情報を探す”のテキスト、アイコンが色が淡くコントラストが悪い。サムネイル画像がマウスホバーするとフワっと浮き上がるのでクリックしやすい。
京都市	テキスト、アイコンのサイズが大きめでコントラストが良い。カルーセルの制御ボタンの位置、サイズも見やすい。
大阪市	メインビジュアルの写真説明が丁寧。テキスト、アイコンのサイズが大きめでコントラストが良い。
堺市	テキスト、アイコンのサイズが大きく見やすい。画像の代替テキストが丁寧。
神戸市	アイコンのサイズが大きく見やすい。画像の代替テキストが丁寧　マウスオーバーでフワっと浮き上がったり、色反転したり工夫されている。
岡山市	レイアウトに統一感を感じる。四角の画像アイコンの面取り等。アイコンがどこより大きい。
広島市	リンクアイコンのサイズやテキストの文字サイズが大きく見やすい。画像の説明が丁寧。マウスオバーでフワっとうきあがったり、背景色が変わったりして分かりやすい。
北九州市	キーワード検索のモーダルウィンドウがメインビジュアルのカルーセルの上に透過されて配置。モーダルを閉じるにはボタンを押さなければならない。モーダルウィンドウは下のメインビジュアルが写っていて見えにくい。メインビジュアルは説明のない風景写真が自動再生される。
福岡市	上部のタブ見出しとヘッダー部が、固定されていて画面が狭まる。メインビジュアルの説明は丁寧。
熊本市	ハンバーガメニュー、タブ見出し等のグローバルメニューが省略されている。メインビジュアルのスライド説明なし。全体的に淡い色の文字やアイコン画像を使っていて、コントラストが悪い

最後に

コンテンツの量が膨大で、階層が深い自治体のホームページは、トップページの役割は重いです。なので、カルーセルやタブでコンパクトにコンテンツの入り口を並べることは、大変有効なのでしょう。ただ、これにアクセシビリティ向上のための技術を凝らしていただければ、視覚障害者にとっても使いやすいサイトになります。これらのアクセシビリティ向上のための技術は、教科書的な技術書で、明確にされているにもかかわらず、それに忠実でないサイトが多かったです。あと画像に対する代替テキストを丁寧に手抜きせずに入れて欲しいです。特に、大きな画像スライドを表示しているメインビジュアルの説明は、大きさに比例した説明をしてくれないと、視覚障害者は疎外感が大きくなります。

20都市のホームページを見て、気が付いたことですが、ページのデザインに統一感があるととても見やすく感じます。アイコン、画像のフレームの色や形、大きさが合わせてあると、認識が容易になります。どの都市も、そうした努力はされていると思いますが、なかでも岡山市が最も統一感がありました。

以上、個人的な見解ですが、政令指定都市のトップページを見比べて感じたことを、書いてみました。