最近話題のマイナンバーカードですが、総務省の「マイナポイント事業」に関連して「マイナポイント」アプリが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でテキストデータをきちんとマークアップして機械可読性を確保し、あらゆる人が支障なくサービスを利用できるようにしてほしいと考えました。（あぁでもそもそもガワアプリってどうなんだろう…）
「機械可読性を向上させよう」という目標はWebサイトと同じですが、今回はガワアプリなので検索エンジンのロボットなどがHTMLを読みに来ない世界であること、ある程度利用される端末が決まっていること（iOS・Android）がWebサイトと異なるのかなと考えました。検索エンジンのロボットなどがHTMLを読みに来ないから「画像1枚おいて完成」みたいにはなってほしくないですね。そういえばガワアプリのコンテンツはWCAG 2.1の「ウェブページ」になるのでしょうか…？（また調べることにする）