コンテンツからみるWebアクセシビリティの課題と提案

コンテンツは本当にアクセシブルか

Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。

Webアクセシビリティにある 2 つの『デザイン』

もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに重点が置かれています。正しくマークアップされていて、誤字脱字がない正しい文章が表記されていれば「アクセシブルなコンテンツである」という評価になりがちということです。機械的に評価できるような仕組みをつくり、効率よく最低限の質を担保することができますが、人と向き合うアクセシビリティを実践するには、もう一歩踏み出す必要があると思います。

今回は、それをどのように考えるかの例として、世田谷区の Web サイトを扱います。

世田谷区のような自治体の Web サイトを選んだ理由は、2 つあります。ひとつは、自らアクセシビリティへの積極的な取り組みをしていると公言している点。もうひとつは、自治体の特性上、広い利用者をターゲットにしている点です。今回は、UI としての Web アクセシビリティではなく、コンテンツからみた Web アクセシビリティにフォーカスしてみていきます。

アクセシブルな『書庫』

公共施設の Web サイトは、とにかく膨大なコンテンツが掲載されているのが特長です。住民にすべての情報を公開しなければならないという想いからのことだと思いますが、「とにかく出す」ことが目的になっていることから、重複コンテンツや、たらい回しが所々に見られます。

例えば、ある住民が「戸籍の証明書がほしい」と思い、 Web サイトへ訪れたとします。トップページからだと、請求方法が分かる画面と、FAQ 経由の画面 の 2 つへ辿り着きます。いずれの画面もマークアップもそこそこですし、読みやすい文章なので、問題ないようにみえます。恐らく、チェッカーをかけても高い評価を得ることができるはずです。

しかし、利用者の目的と照らし合わせると、コンテンツの課題が幾つかあることが分かります。

• FAQには答えが書かれていないので、別の画面をみる必要がある
• 最初から最後までしっかり読まないと理解できない
• 結局「問い合わせてください」と言われて、Web だけでは解決しないこともある

利用者だけでなく、サイト管理者にも不都合なことが幾つかあります。

• 似たようなコンテンツを 2 つともメンテナンスしなければならなくなる
• 数が増えると構造化されていない文章、余計なものが入った形状ができやすくなる
• 数が増えれば表記ブレが発生しやすくなる。西暦と年号の表記がバラバラなど
• ページ番号という、管理側しか分からない情報を付けることで、混乱を招くこともある

PDF 版の書類がダウンロードできることからみても分かるとおり、公共施設の Web サイトは基本的に『膨大な書類を置いておく書庫』のような存在です。きちんと整理整頓されていますが、そこから自分にとって意味のある情報を探し当てるのは至難の業。「戸籍の証明書が欲しい」という利用シーンにしても同様です。どこかに必ずニーズに応えてくれる情報はありますが、それはしっかり読まないと辿り着けないわけです。

書類からWebコンテンツへ再設計

それでは、書類ではなく、Web に最適化したコンテンツにするにはどうしたら良いのでしょうか、まず最初に、コンテンツの消費の仕方が、Web と紙では異なることを理解しなければいけません。

紙の場合、言葉をひとつひとつ読むのが一般的ですが、Web では F 型パターン で読まれることが多いです。つまり、最初の 2, 3 行は読みますが、あとは流し読みをする傾向があります。世田谷区役所の Web サイトでは、流し読みを少しでもしやすくするために、ヘッダーやリスト表示を使っていますが、申し込みやお問い合わせといった、利用者の目的へ繋がるコンテンツが明確に提示されていないことがあります。どこに何があるか分かり難いので、最初から最後まで読まないといけないという状態になっています。

こうした課題を解決するために、ひとつのコンテンツに以下のような『枠組み』を設ける必要があります。

• 広い意味をもった言葉ではなく、詳細な目的を示すタイトルにする
• その画面で何ができるのか、何が書かれているのか分かる概要を表示する
• 利用者が知っておきたい用語は（過剰にならない程度に）ハイライトする
• ヘッダーやリストを用いて、重要なポイント、きちんと読んだほうが良いところを示す
• 答え（導線）が何で、どうすれば良いのかを明確に示す（詳しくはこちら、は答えではない）
• 流し読みをしやすくために、目的と関係のないコンテンツは、なるべく排除する

戸籍の証明画面は、タイトルからみても分かるとおり、戸籍の証明に関わるすべての情報が羅列している状態です。書類やパンフレットだと、こうした構成でも問題ないかもしれませんが、Web では単刀直入なコンテンツを掲載し、次への明確な道筋を示す必要があります。見せ方はデバイスに応じて変えても良いと思いますが、CMS では可能な限り細分化したほうが良いでしょう。戸籍の証明画面は以下のように細分化ができます。

1. 戸籍の証明とは
2. 証明書の請求に関する注意事項
3. 用途によって異なる戸籍の種類
4. 戸籍の証明書の申請方法と手順
5. 証明書の請求時に必要なもの

戸籍の証明といっても様々な目的があるので、上記のように細分化したほうが、それぞれどのような情報を得ることができるのか明確になります。コンテンツを小さな塊として管理しておけば、別の画面で必要になったとしても、書き直す手間が省かれ、重複による質の低下を抑えることができます。また、住民から「○○について知りたい」という要望に対して、ピンポイントの情報を返すことができるようになります。

現行の階層画面の代わりに、こうした画面に切り替えることができるはずです。

Webアクセシビリティはこれから本番

昨年、コンテンツのアクセシビリティが未来を保証するという記事を執筆しましたが、コンテンツへアクセスできるかどうかは、これから深刻な問題になります。今までのような文書単位のコンテンツ管理では、障がい者どころか、健常者も、まともにコンテンツが取得できなくなります。上記のような再設計は「不可能」「理想論」という見方もあると思います。しかし、変換ツールや自動チェックでは解決できないコンテンツの問題は、必ず取り組まなければならなくなります。

マークアップをはじめとした技術やビジュアルで解決できる課題は、Webアクセシビリティ全体の半分に過ぎません。もう半分に該当するコンテンツは、まだ未開の地といっても過言ではありません。上積みに上積みを重ねて肥大化したコンテンツは、見ただけででウンザリしてしますが、この大きな課題を取り組まなければ、サイトを何度リニューアルしても成果は上がりませんし、スマートフォン向け Web サイトを作っても「使えない」という評価になってしまいます。

Web アクセシビリティの取り組みは、技術的な部分だけでなく、ほかにも色々あります。コンテンツも、Web アクセシビリティにある側面のひとつに過ぎません。例えばビジュアルから入ることもできるわけです。自分ができるところから興味をもつことで、Web アクセシビリティの新たな魅力を引き出すことになるかもしれません。コンテンツは様々な専門家が関わる分野なので、大変ですが面白いですよ。