「マイナポイント」アプリの利用者マイページのコンテンツが読み上げられない問題を調べた

最近話題のマイナンバーカードですが、総務省の「マイナポイント事業」に関連して「マイナポイント」アプリがiOS・Android向けに公開されています。試しに利用してみたところ「これはVoiceOverで内容が読み上げられるのだろうか?」と疑問を感じたので試してみました。

今回はマイナポイント予約済の方を対象にした「利用者マイページ」をテスト対象にします。というのも、マイナポイントの予約は『iPhoneのVoiceOver機能を使って「マイキーID」作成 | 全盲女子のポケット』という記事があり、マイキーIDは無事に取得できるそうです。記事を読み進めるとマイページにはいろいろと説明が書かれているとのことですが、その部分はうまく読み上げられないようです。なんでだろう。と書かれており、冒頭に記した私の疑問は調べる必要がありそうです。

ログイン画面

「利用者マイページへ」のボタンをタップし、利用者ログイン画面に進みます。ここではマイキーIDでもログインできるのですが、折角マイナンバーカードがあるのでカードを利用することにしましょう。その方が手間もかからず簡単なはずです。「マイナンバーカードでログイン」をタップします。

するとマイナンバーカードの読み取り方の説明が出てきます。「動画の通り」と言われても…という気がします。「iPhoneの上端をマイナンバーカードの中央に置いてください」と書いてあればみんな意図が分かりやすいように思いました。私の母のようになかなか文章を読まない人もいますが…。ちなみに、「全盲女子のポケット」の筆者さんはここでは引っかからなかったようです。
画面キャプチャ:マイナンバーカードの読み取り方の説明画面

疑問を感じた利用者マイページ画面へ

ログインが完了すると利用者マイページ画面へたどり着きます。マイナポイント申し込みは2020年7月からで、まだ制度概要の説明ページが出てきます。このページが「全盲女子のポケット」の筆者さんが利用できなかったページと考えられます。
画面キャプチャ:利用者マイページ画面

そこで、Charles Web Debugging Proxyを利用して通信内容をのぞいてみました。すると答えは簡単でした。マイナポイントアプリはいわゆる「ガワアプリ」で、コンテンツ部分はHTMLをロードしているだけでした。SwiftでiOSアプリを制作した経験があるのですが、マイナンバーカードの読み取りでネイティブアプリのAPIを使い、あとはHTMLで何とかしたいと考えられたのでしょうか。(iOSアプリとAndroidアプリの開発を楽にしたかった?)本文部分のHTMLは次のようになっていました。

<div class="articles">
    <img class="img-mypage-info" src="/mkjs/MKRAS030_SP.png" alt="お知らせ" />
    <input type="hidden" id="fwdUrl" name="fwdUrl" value="" />
</div>

原因はコンテンツ部分が画像1枚だった

原因は「テキストを含むの画像が1枚配置してあるだけ」であることが判明しました。代替テキストが「お知らせ」となっているので、VoiceOverは「お知らせ、メイン、イメージ、ランドマーク」とだけ読みげるのです。このコンテンツをなぜ画像化したのかは分かりませんが、内容をぱっと見た感じではHTML/CSSでも難なく同じレイアウトが再現できそうに思えるので、HTMLでテキストデータをきちんとマークアップして機械可読性を確保し、あらゆる人が支障なくサービスを利用できるようにしてほしいと考えました。(あぁでもそもそもガワアプリってどうなんだろう…)
画面キャプチャ:Charles Web Debugging Proxyで調査している様子。本文部分に配置された画像が表示されている。

「機械可読性を向上させよう」という目標はWebサイトと同じですが、今回はガワアプリなので検索エンジンのロボットなどがHTMLを読みに来ない世界であること、ある程度利用される端末が決まっていること(iOS・Android)がWebサイトと異なるのかなと考えました。検索エンジンのロボットなどがHTMLを読みに来ないから「画像1枚おいて完成」みたいにはなってほしくないですね。そういえばガワアプリのコンテンツはWCAG 2.1の「ウェブページ」になるのでしょうか…?(また調べることにする)