行政のWebアクセシビリティ向上施策

ごあいさつ

はじめまして。わたしは東京都各局のWebサイトのUI/UX向上施策、特にWebサイトのアクセシビリティの向上に注力して取り組んでいるテクニカルグループの鈴木です。

この記事では、行政におけるWebアクセシビリティとの向き合い方や、GovTech東京での取り組みを伝えていきます。

アクセシビリティとは

現代のデジタル社会において、「アクセシビリティ」は単なる専門用語ではなく、私たち一人一人の生活に深く関わる重要な概念です。

Webアクセシビリティ基盤委員会は、アクセシビリティを「アクセスのしやすさ」と定義しています。つまり、誰もが平等に情報や技術を享受できる環境づくりの本質を言い表しています。

https://waic.jp/knowledge/accessibility/

例えば、重要な講演会に参加しようとしたとき、音声での情報取得が難しい状況だとします。リアルタイムの文字起こしや手話通訳がなければ、内容を理解することが困難です。しかし、これらの支援があれば、同じ状況でも講演の内容を十分に理解することができます。

また、赤ちゃんがお昼寝をしているとき、自宅で仕事中に重要な動画を見る必要があるとします。音声を出して視聴すれば子どもが目を覚ましてしまうかもしれません。しかし、自動文字起こし機能や字幕があれば、同じ状況でも静かに内容を十分理解することができます。

アクセスのしやすさとは、その情報にいつでもだれでもどんな状況でもアクセスできるということになります。行政では、一人一人の状況に関係なく、全ての人々に平等に情報にアクセスしやすい環境を整えることが重要だと考えています。

アクセシビリティを意識するようになったきっかけ

昨年度、あるWebサイトをリリースする前にユーザビリティテストとアクセシビリティテストを実施する機会がありました。

Webサイトを作成した当初は、機械的なアクセシビリティチェックに合格し、文字色と背景色のコントラスト比や画像の代替テキストを指定するalt属性の設定なども概ね網羅できていると考えていました。

しかし、視覚障がいのあるテスターの方と実施した実際に利用してもらうテストで、以下の課題が明らかになりました。

• 一部のセクションでナビゲーションが機能しない
• 情報の流れが理解できない箇所がある
• 想定していた操作どおりに動かない

この結果から、私たちの配慮が大きく不足していたことを痛感しました。それなのに、テスト終了後にテスターの方から思いがけない言葉をいただきました。

「私たちのことまで考えてくれてありがとう」

テスターの方のこの言葉が、アクセシビリティの本質を深く示唆していると感じました。
アクセシビリティは、単なる技術的なチェックリストの達成ではありません。実際のユーザーに体験してもらって初めて、私たちの「できているつもり」が必ずしも十分ではなかったことがわかります。

その言葉を聞いて、さらに改善を重ねていく必要性を強く実感しました。

GovTech東京内での取り組み

このようなきっかけもあり、テクニカルグループのUIUXを担当しているメンバーと一緒に、Webアクセシビリティに関する知見を共有するための取り組みを行っているので紹介します。

NVDA勉強会の実施

2024年8月よりNVDAを使用したハンズオン形式の実践的なトレーニングを中心に行う勉強会を始めました。
NVDAとは、NVDA（Non Visual Desktop Access）の略で、オープンソースのWindows用スクリーンリーダー（音声読み上げソフト）です。現在では、日本でも広く普及しているスクリーンリーダーの一つです。

他にも読み上げ機能を提供している支援技術には、VoiceOver、PC Talkerなどがあります。
これらのソフトウェアは皆さんも一度は耳にしたことがあるかもしれませんが、実際に使用してみて初めて、その使用感や課題が具体的に見えてきます。

主な実施内容

1. NVDAの基本操作
2. ウェブサイトの構造的に伝わりやすいナビゲーション手法
3. アクセシビリティ対応のためのコーディングテクニック
4. 事例研究

実際に少し手を動かしただけでもこんなことがわかります。

• キーボード操作では必要な箇所にフォーカスされないこと
• スクリーンリーダーで読み上げられなかったボタンがあること
• フォームとラベルの対応関係が不明瞭で入力を進められないこと
• 画像にalt属性が入っていないために意味が伝わらないこと

気づいたことと同時にどうしたら改善できるのか、どんな実装をすれば課題が解決できるのかを考えています。この活動を通して少しでもWebアクセシビリティに意識を持ってくれたり、仲間が増えるといいなと思っています。

Sight Worldへの参加

2024年11月に、視覚障害者向けの総合イベントが開催され、UIUXを担当するメンバー3名で参加してきました。多くの企業が視覚障害者向け製品を出展したり、体験型イベントや講義などが開催されていました。
https://www.sight-world.com/

私たちは、NVDAユーザーが日頃どのように仕事を進めているのかを紹介する「Life with NVDA ~NVDA利用者の仕事術を知ろう～」に参加しました。

講演内容

• NVDA日本語チームの仕事の進め方
• 他のスクリーン・リーダーユーザーがNVDAを使い始めた理由
• NVDAの最新事情
• NVDAアドオン開発の話

その中で最も印象的だったことは、「健常者と同じことができる」という考え方です。健常者と同じアプリを普通に使えることが仕事やコミュニケーションの効率性がよくなるということが話されていました。

これまでも視覚障がい者向けの専用ソフトウェアは存在しました。
しかし、健常者とは異なるソフトウェアを使わなければならなく、専用ソフトの使い方で困ったときも、気軽に相談できる相手が見つからないという課題がありました。

それに対して、オフィスツールなどの一般的なソフトウェアで読み上げ機能を適用することで、同僚に気軽に聞けたり、同じ環境で作業することで、自然なコミュニケーションが実現できて良かったとおっしゃっていました。

もちろん、個々の状況に応じた特別な配慮や合理的配慮は欠かせないと考えています。
ですが、どんな状況でも、その人がどんな特徴を持っていようと、誰もがなんらかの方法を使いながら、自分の力で目的を達成できる環境を整えることがいかに大切かを、強く実感しました。

行政のアクセシビリティ向上施策

GovTech東京内での勉強会やイベント参加内容について紹介しましたが、実務的な取り組みについても少し紹介していきたいと思います。

PDFのアクセシビリティ対応

東京都では、行政情報の公開手段としてPDFがよく活用されています。多くの場合、Webサイトにはタイトルのみを掲載し、詳細情報はPDFファイルとして提供しています。

PDFの主な利点は、使用するOSやアプリケーションに依存せず、PDFリーダーやWebブラウザがあれば、作成時と同じ表示やレイアウトを正確に再現できることです。

また、社内への説明時にパワーポイント等で作成資料していることが多いので、その資料をPDF化することで容易に情報公開の資料として作れることも利点にあげられます。

しかし、情報のアクセシビリティを考慮すると、PDFを提供する際は以下の点に留意する必要があります。

まず、支援技術（例えば、スクリーンリーダーや拡大鏡等）を使用するユーザーが必要な情報を取得でき、内容を理解できるように設計されたPDFにすることが重要です。

このようなPDFを「アクセシブルなPDF」といいます。これは、元のパワーポイント作成時から読み上げを意識したり、PDF自体に読み上げ機能をを設定したりすることで実現できます。

アクセシブルなPDFの特徴

• コンテンツの情報が正しく論理構造化されている
• 情報構造に即したナビゲーション機能が用意されている
• PDF内の画像などのテキストコンテンツが代替テキストをもつ
• セキュリティ設定など、支援技術がコンテンツにアクセスできるようになっている
• 大見出し、中見出し、小見出しとなるように見出しレベルを適切に設定する

Acrobat ProによるアクセシブルなPDFにするためのアクション

• 見出し、リスト、外部リンクなどの情報を追加できるタグを追加する
• 画像に代替テキストを付与する
• 文書と画像の読み上げの順が正しくなるよう画像にアンカーを追加する
• 目次から該当文書に移動するリンクを追加する
• 言語設定、文書名などのプロパティを設定する
• イラスト、図表が複雑だった場合は、シンプルな作図に直したり、本文やテーブルに組みなおすことを検討をする
• 太字、赤字、下線、拡大のみによる一部協調などを用いない

また、PDFをHTMLページに埋め込む際には、リンク先がわかるようにすることが重要です。これにより、ユーザーは必要な情報に直接アクセスできます。また、ページ数が多いPDFの場合、以下のような工夫が有効です。

• アンカーリンクの設定：HTMLページ内にアンカーリンクを設け、ユーザーが特定のセクションに直接ジャンプできるようにする。
• PDFの分割：長いPDFを複数の部分に分け、それぞれを個別のリンクとして提供することで、ユーザーが必要な部分だけをダウンロードできるようにする。

さらに、本来はPDFと同等の内容をHTML形式でも公開することが望ましいとされています。
HTMLであれば、ユーザーが自身の環境設定（カラー設定や文字の大きさなど）に合わせて柔軟に情報にアクセスできるためです。PDFのみでの提供では、このようなカスタマイズができません。

したがって、情報を公開する際は、その情報を本当にPDFでしか提供できないのか慎重に検討し、PDFで提供する場合も、アクセシビリティへの配慮や使いやすさの工夫を行うことが重要です。

行政からの情報提供は、どのような形式であっても、すべてのユーザーが適切に情報にアクセスできることを最優先に考える必要があります。

フォーム改善

東京都では、イベントやアンケート、行政手続きなど多くのフォームが使用されています。これらのフォームを作成する際には、アクセシビリティを確保するための重要なポイントがあります。以下に、フォーム作成時にチェックすべき項目をいくつか紹介します。

①プレースホルダーを利用しない

プレースホルダーとは、フォームの入力欄にあらかじめ薄い文字で表示される入力例や説明のことです。フォーム作成時によく使用される機能で、皆さんも目にしたことがあるはずです。

しかし、プレースホルダーを入力例として使用すると、文字の色が薄すぎて見づらく、すでに入力された内容と区別がつきにくいという問題があります。
さらに、入力を始めると例示が消えてしまうため、短期記憶に制約のある方が必要な入力内容を忘れてしまう可能性があります。

これらの課題は、WCAGのアクセシビリティガイドライン（2.4.6）でも指摘されており、特に認知機能や記憶力に制約のある方々にとって大きな障壁となります。

プレースホルダーはカーソルを入れると消えてしまうため、入力内容を確認しながら作業を進める必要がある人にとって使いづらい要素となっています。
そのため、基本的にプレースホルダーは利用せず、ラベルの下に例示を記載することが望ましいです。

この方法であれば、ユーザーはフォームに値を入力した後でも例示の表示を確認でき、入力済みの内容と見分けをつけることができます。また、記憶に頼ることなく、必要な情報を常に参照しながら入力を進めることができます。

②わかりやすいラベルの命名

東京都では、紙での手続きを100％デジタル化することを目指しています。しかし、紙の申請をデジタル化する際に、紙の申請で使用している言葉をそのまま流用してしまう傾向があります。

例えば、「旅券番号」というのがあります。
なんとなく意味は分かりそうですが、一瞬考え込んでしまうかもしれません。これは一般的には「パスポート番号」と呼ばれているものです。

このように、行政の書類や業務で日常的に使用している用語をそのまま使ってしまうと、多くのユーザーにとって馴染みのない言葉になってしまいます。
専門用語を一般的な言葉に置き換えるだけで、ユーザーは違和感や不安を感じることなく、スムーズに理解できるようになります。

行政では、いわゆる「行政用語」と呼ばれる言葉を日常的に使用しています。これらは堅苦しい表現や漢字の多用が特徴的です。
しかし、これらをそのままユーザーに提示するべきではありません。家族や友人、他部署の同僚に確認してみるだけでも、より分かりやすい表現に改善できるはずです。

③必須のテキスト表示

フォームでの「必須項目」の表現で＊（アスタリスク）のみで表示していることがよくあります。
「＊（アスタリスク ) のある項目はすべて必須項目です。」のように説明テキストを提供するか、「必須」といったテキストでわかるラベルにする必要があります。

理解させる必要のあるアイテムを感覚的にだけ伝えるのではなく、テキストによる識別情報もあわせて提供することが重要です。

今回は3つの例を挙げましたが、フォームのアクセシビリティのチェック項目はこれ以外にも数多く存在します。行政に対する手続は頻繁に行うものではありませんが、申請のたびに躓いてしまうと、ユーザーにとって不快な体験となってしまいます。

そのため、年に数回であれ数年に1回であれ、ユーザーがストレスなく手続きを完了できる環境づくりに取り組んでいきたいと考えています。

これからにむけて

アクセシビリティという言葉は、GovTech東京内でも以前よりも浸透してきたと感じています。
ですが、行政のWebサイトには、まだまだ改善の余地が多く残されています。GovTech東京として取り組める課題も数多くあるはずです。

アクセシビリティは単なる技術的な要件ではありません。それは、多様な利用者の尊厳と権利を尊重する姿勢です。また、Webには本質的にアクセシブルな特性があり、工夫次第でアクセシビリティを高め、社会をより便利にできると確信しています。

現在はまだまだ小さい範囲の活動になりますが、今後さらに取り組みを広げ、アクセシビリティの重要性への理解者を増やしながら、真の意味で「誰一人取り残さない東京」を実現していきたいと考えています。