みんなの銀行アプリのアクセシビリティを改善しています

ゼロバンク・デザインファクトリー（※）の長島です。みんなの銀行では、“アクセシビリティ”を「より多くのお客さまが、より多くの利用環境から、より多くの場面や状況で情報やサービスにアクセスできること」と捉えて取組んでいます。主にスクリーンリーダー（音声読み上げソフト）における挙動改善を目的とし、2023年1月から定期的にリリースしています。今後、みんなの銀行アプリのアクセシビリティをテーマに連載でお届けしていきますが、第1回目は、2023年1月から9月5日のアップデートまでの改善と、アクセシビリティに取組む理由についてご紹介します。
※ゼロバンク・デザインファクトリーは、ふくおかフィナンシャルグループの一員で、みんなの銀行のバンキングシステムを開発しています。

みんなの銀行アプリのアクセシビリティ改善

これまでのリリースでは主に以下のサービスのアクセシビリティを改善しました。

■ログイン
■振込・定額自動振込
■お友だち紹介プログラム
■デビットカード
■カバー

下の動画は、改善前のアプリをスクリーンリーダーで操作した際の録画データです。

スクリーンリーダーの読み上げ 　改善前（YouTube）
https://youtu.be/0z3eL2r9eq8?si=WOlgAVZpvVbZ45IP

読み上げ言語が日本語ではなく英語になっています。また、画面の裏側など表示されない範囲を読み上げていることが分かります（ログイン後にデータを取得するので、ログインせずにお客さまの情報が読まれてしまうことはありません）。フォーカス制御が正しくできていないために表示が崩れてしまっています。他にも、画像の代替テキストが何を指しているか分からない、画面切り替え時に表示が崩れる、などの問題があります。

次に改善後のアプリをスクリーンリーダーで操作した際の録画データで比較します。下の動画では、改善前にあった問題が一通り改善されていることが分かります。

スクリーンリーダーの読み上げ　改善後（YouTube）
https://youtu.be/FsDcevSP54Q?si=Q1dgrcG7IQ3dgoF-

これまでに主に以下の点を改善し、UI は変更せずに、裏側の仕組みを変えています。

■言語設定を日本語にする
■視覚的に表示していない内容をスクリーンリーダーから隠す（表示している内容を過不足なくスクリーンリーダーに伝える）
■画像やアイコンに代替テキストをつける
■ボタンなどの要素の役割と名前を指定する
■遷移時、スクリーンリーダーに遷移を通知する
■表示内容の変更時に変更をスクリーンリーダーに通知する
■入力欄とラベルを紐付ける

技術的な詳細については、追って『Qiita』のテックブログに書いていく予定です（https://qiita.com/organizations/ZDF）。

今後ですが、類似の修正をみんなの銀行のレコードやローンなどの既存機能にも加え、新規機能は上記改善を含んだ状態でリリースしていく予定です。

一方で、全盲のお客さまとのインタビューやユーザビリティテストを通して、上記の改善だけではスクリーンリーダーで操作できるようにならない箇所があることも分かっています。具体的にいうと以下の2点です。

■口座開設・ローン・カバー申込時の本人確認書類撮影
■セブン銀行ATMにおける入出金時のQRコード読み取り