行政DXで押さえておきたいウェブアクセシビリティの基本 「音声読み上げ」とは

行政デジタル化を推進するうえで知っておきたいウェブアクセシビリティについて、デザインの専門家の視点で分かりやすく紹介します。今回は、音声読み上げについて取り上げます。

株式会社グラファー
フロントエンドエンジニア　吾郷 協、下瀬 靖子

音声読み上げとは？

「音声読み上げ」というと、どんなイメージをお持ちでしょうか？「具体的な操作は分からないけれど、きっとソフトを使ってページの内容を読み上げるのかな？」などが多いのではないでしょうか。

音声読み上げは、Tabキーやスマートフォンのジェスチャーを使うことによって、情報を得たり操作をしたりすることができる機能です。実は、視力の弱い方だけでなく、通勤中や料理中などのタイミングで画面を見ずに操作したい方にも使われています。

音声読み上げは、どんなソフトウェアでできる？

音声を読み上げるためのソフトウェアにはさまざまな種類があります。例えばiPhoneの場合は「VoiceOver」、PCの場合は「PC-Talker」といったソフトウェアがよく使用されます。このような「スクリーンリーダー」と呼ばれるソフトウェアを使用することによって、音声だけでスムーズに操作をすることができます。

参考：「第1回支援技術利用状況調査報告書」

音声読み上げに適したサイトと、そうでないサイトがある

それでは専用の音声読み上げソフトさえ用意すれば、どんなウェブサイトでも閲覧できるのかというと、そういうわけでもありません。例えば以下のように音声読み上げへの対応が不十分な場合は、視覚障害者の方が適切に情報を得ることができません。

• 避難所等の情報や地図が画像PDFのみで掲載されているため、災害時に避難情報を得られない。

• ログイン時に画像を使ったパズル認証を求められてログインができない。

• 「VISA」「Master」など使用できるクレジットカードが画像で示されているが、代替テキストが設定されていないため、どのカードが使用できるのか認識できない。

• 入力内容にエラーがあったが、エラーメッセージが読み上げられないため、どこに誤りがあるのか分からない。

• 「Facebook」「LINE」などの画像に代替テキストが設定されていないため、実際にクリックするまで何のページが開くのか分からない。

実際に「パソコンからインターネット利用時に困ること」として、94％の方が「スクリーンリーダーで読み上げられないPDFやフォームがある」と回答しています。

パソコンからインターネット利用時に困ること

• スクリーンリーダーで読み上げられないPDFやフォーム（お問い合わせなどの入力項目）がある（94.4％）
• 画像や写真などに説明文がないため、スクリーンリーダーで読み上げられない（86.1％）
• 画像認証の利用が困難もしくは利用できない（ログイン作業など、毎回違う画像上に表示された文字を入力すること）（84.7％）
• ページレイアウトや構造が複雑過ぎる、または構造化されていない（73.6％）
• 情報量やリンクが多過ぎる（59.7％）

アンケート対象者：全盲者（n=72）
出典：総務省「公的機関に求められるウェブアクセシビリティ対応」

音声読み上げに対応したページの例

音声読み上げに対応したページの例として、私たちが携わる行政手続きのためのプロダクト「Graffer スマート申請」の画面を例に挙げて紹介します。

以下は、フォームに項目を追加できる機能の画面です。

「改善前」ではコピーする対象のフォームのラベルが「#1」「#2」のようになっているため、音声で読み上げたときに意味が通じにくくなっていました。さらに見た目だけではなく、内部のコード上もグループであることが明確でなく、読み上げたときにどこからどこまでがコピーされたフォームなのかが把握しにくい状態でした。

そこで「改善後」のように、ラベルを「1件目」「2件目」としたり、グループの範囲が分かるようなコーディングに変更したりといった修正を加えました。このようにすることで、音声だけでも内容が十分に理解できるようになっています。

改善前

読み上げ音声：課税所得証明書 任意。現在テキスト要素上にいます。課税所得証明書 #1。発行する年度 必須。指定された年度の課税内容が証明書に記載されます。テキスト末尾への挿入。必要な通数 必須。1年度1通につき200円です。テキストの先頭への挿入。終わり。追加する。あと10件まで追加できます。

改善後

読み上げ音声：課税所得証明書 任意。最大11件まで入力可能。現在グループ内にいます。1件目 課税所得証明書、グループ。発行する年度 必須。指定された年度の課税内容が証明書に記載されます。テキスト末尾への挿入。必要な通数 必須。1年度1通につき200円です。テキストの先頭への挿入。終わり。もう1件追加する 。あと10件まで追加できます。（※太字部分が追加・修正された箇所となります）

こうした取り組み全体が目の不自由な人の利用につながったことによって、「全盲者でスマートフォンを音声読み上げアプリにて使用しています。こうした電子申請はとても助かります。他の手続きにも取り入れてほしい」「全盲でも代筆を依頼しなくても自力で手続きできるので、とてもすばらしい」といったコメントをいただいています。

音声読み上げの方法

音声読み上げは、iPhoneやAndroidから簡単に試すことができます。興味を持たれた方は、以下を参考にぜひ一度お試しください。

■iPhone

「iPhoneでVoiceOverをオンにして練習する」

■Android

「「選択して読み上げ」を使用する」

アクセシビリティの向上は、より多くの市民が等しくデジタルを活用するために不可欠なものとなっています。この記事が、今まさにデジタル化を進めている職員の皆さまにとって、毎日の業務の中でアクセシビリティについて考えるきっかけになれば幸いです。