ゼロバンク・デザインファクトリー（※）の長島です。フロントエンドエンジニアとして、みんなの銀行アプリのアクセシビリティ向上をリードしています。
※ゼロバンク・デザインファクトリーは、ふくおかフィナンシャルグループの一員で、デジタルバンク「みんなの銀行」のバンキングシステムを開発しています。
前回（アクセシビリティをテーマにお届けする連載4回目）は、視覚障害のあるお客さまとの対話で得た気づきについてご紹介しました。
連載4回目：「僕たちは、なにも知らなかった」視覚障害者との対話でデザイナーとエンジニアが得た、本当の“使いやすさ”［後編］ アクセシビリティvol.4
https://note.minna-no-ginko.com/n/n5515bacc27e4
記事執筆の都合で時系列が前後してしまいますが、今回は連載5回目として、現在のアクセシビリティ向上の取組みが始まる「原点」となった、2022年前半に実施した社内勉強会についてお話しします。
なぜ勉強会は始まったのか？
みんなの銀行がアクセシビリティと本格的に向き合うことになったのには、いくつかの背景が重なっていました。2021年5月、みんなの銀行はお客さまへのサービス提供を開始し、そのほぼ同じ頃、私たちは「デザインシステム」の構築に着手していました。
デザインシステムとは、アプリを構成するボタンや色、レイアウトなどのデザイン要素と、それらを使うためのルールを体系的にまとめたもので、デザイナーとエンジニアが共通認識を持って効率的に開発を進めるための重要な仕組みです。
このデザインシステムの構築過程で、既存のUIを洗い出していくと、アクセシビリティ上の課題を抱えたデザインパターンがいくつも発見されました。例えば、スクリーンリーダー（画面の情報を音声で読み上げるソフトウェア）で操作した際に、ボタンがボタンだと分からなかったり、意図しない順番で情報が読み上げられたりするような問題です。
実は、サービス開始前からスクリーンリーダーへの対応は課題として認識されていました。しかし、まずはミニマムな機能でサービスを世に出し、お客さまからのフィードバックをいただきながら改善していくという方針のもと、サービス提供開始後の優先課題の一つとして位置づけられていました。
さらに、社会的な後押しもありました。2021年5月に「障害者差別解消法」が改正され、それまで努力義務だった民間事業者による「合理的配慮の提供」が、法的義務となることが決まりました。社会全体でアクセシビリティへの関心と要請が高まる、大きな転換点でした。
こうした社内の課題認識と社会の潮流、連載1回目に書いたみんなの銀行のミッション・事業の特徴が重なり、「今こそ本格的にアクセシビリティに取組むべきだ」という機運が高まりました。
連載1回目：アプリのアクセシビリティを改善しています アクセシビリティvol.1
https://note.minna-no-ginko.com/n/n84637dd5b03a
しかし、社内にアクセシビリティに関する知見のある者がおらず、何から始めて良いか分からないという状態でした。そこで専門的な知見を学ぶため、株式会社D-ZEROの平尾優典氏を外部講師としてお招きし、2022年1月から半年間にわたる社内勉強会がスタートしたのです。
勉強会で学んだ3つのこと
半年間の社内勉強会では、大きく3つのことに取組みました。
1．アクセシビリティの基本知識習得（WCAGの概要）
2．先進企業の取組み事例研究
3．みんなの銀行アプリのアクセシビリティチェック
一つひとつが、私たちにとって大きな学びと気づきに満ちたものでした。
1. アクセシビリティの基本知識習得（WCAGの概要）
まず私たちは、ウェブアクセシビリティの国際的なガイドラインである「WCAG（Web Content Accessibility Guidelines）」について学びました。これはISOやJIS規格の基礎にもなっている、世界標準の「ものさし」です。
出典： 総務省サイト「みんなの公共サイト運用ガイドライン（2024 年版）」
https://www.soumu.go.jp/main_content/000945249.pdf
WCAGは、「知覚可能」「操作可能」「理解可能」「堅牢」という4つの原則で構成されています。
・知覚可能：情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。（例：画像には内容を説明する代替テキストを入れる）
・操作可能：ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。（例：マウスが使えなくてもキーボードだけで全ての操作ができる）
・理解可能：情報及びユーザインタフェースの操作は理解可能でなければならない。（例：入力欄にラベルや説明文がついている）
・堅牢（けんろう）：現在及び将来の、支援技術を含むユーザエージェントとの互換性を最大化すること。（例：将来新しい技術が登場しても、正しく表示・動作するように作る）
これらを見て、私たちは「アクセシビリティとは、障害のある方のためだけの特別な対応ではない」ということに気づかされました。分かりやすい言葉遣いや一貫したデザインなど、これらはすべて普段から「良いデザイン」「良いUX（ユーザー体験）」として私たちが意識していることの延長線上にあったのです。
勉強会では、アクセシビリティがUXの土台であることが示されました。どんなに見た目が美しく、革新的な機能があっても、そもそも「使える」状態でなければ、ユーザー体験は始まりません。
アクセシビリティを確保することは、すべてのお客さまに快適な体験を届けるための、まさに第一歩なのだと理解しました。
2. 先進企業の取組み事例研究
次に私たちは、アクセシビリティへの取組みを積極的に発信している先進企業の事例を研究しました。
そこで見えてきたのは、多くの企業が「アクセシビリティ向上」と自社の「ミッション（存在意義）」を強く結びつけているという共通点でした。彼らはアクセシビリティを、コストや義務ではなく、自社のビジョンを実現するための重要な手段として位置づけていたのです。
例えば、freee株式会社のミッションは「スモールビジネスを、世界の主役に。」です。freeeがアクセシビリティに取組む理由について、freeeの開発情報ポータルサイトでは次のように述べられています。
・スモールビジネスを、世界の主役に「freeeのプロダクトを使う」という文脈において障害者を減らしたい
・freeeのアクセシビリティが向上すれば、ユーザーはビジネスに自力でアクセスできる
・結果、スモールビジネスの多様性は増加し、freeeは真に社会を変え得る存在となる
・世界の主役になれる人を1人でも多く
・1人が使えないことて失うユーザーは1人だけとは限らない
この「アクセシビリティを自社の事業にどう位置付けるか」という視点は、みんなの銀行で取組みを進める際にも意識するようにしています。また、私たちが調査した範囲では、当時、これらの先進企業のように事業とアクセシビリティを強く結びつけて発信している競合他行は、まだ多くは見られませんでした。
連載1回目でも触れた通り、だからこそアクセシビリティは、他行との競争における重要な差別化のポイントになりうると考えています。
3. みんなの銀行アプリのアクセシビリティチェック
そして、勉強会のハイライトとも言える活動が、自分たちのアプリのアクセシビリティチェックでした。iOSに標準搭載されているスクリーンリーダー「VoiceOver」を使い、実際にみんなの銀行アプリを操作しました。その結果、チェックした9つの主要な利用シナリオ（全125項目）のうち、実に25ヵ所でアプリの操作が続けられなくなる可能性のある致命的な問題が見つかりました。
連載1回目の記事で紹介した以下の動画のように、英語で読み上げが始まる、画面の裏側にある情報を読み上げてしまう、フォーカスがどこにあるか分からなくなる、といった問題です。
自分たちが作ったアプリが、特定のお客さまにとっては「使いづらい」どころか「使えない」部分があるという現実を、改めて認識させられました。これは、デジタルバンク、モバイル専業銀行である私たちにとって、非常に重い事実でした。
物理店舗を持たないみんなの銀行にとって、アプリはお客さまとの唯一の接点です。そのアプリが使えないということは、銀行の入り口が固く閉ざされているのと同じことです。私たちは、他行以上に高い水準のアクセシビリティを担保する責任があるはずです。
講師の平尾さんとそれぞれの課題の原因と改善策についてディスカッションを行い、一つひとつ改善を進めていきました。そこで教えていただいたことの中で特に印象に残っているのは、「情報を利用環境に関わらず過不足なく伝える必要がある」という点です。
親切に伝えようとするあまり、視覚的に表示されていない内容までスクリーンリーダーに読み上げさせてしまうことがあります。そうなると、スクリーンリーダーの利用者と、画面を視覚的に操作する利用者との間で、受け取る情報に差異が生まれてしまいます。
▲図1: アプリのログイン画面（左）とトップ画面（右）
具体例を挙げると、ログイン画面の左上にある左矢印のアイコンです（図1）。このアイコンをタップするとトップ画面に戻ります。勉強会の初期の段階では、このアイコンの代替テキストは「トップ画面に戻る」とする案がありました。
しかし視覚的には「トップ画面に」という情報はなく、画面遷移の方向のみが示されています。「トップ画面に戻る」と読み上げる案で視覚情報も一致させようとすると、「トップ画面に」という情報を何らかの形で視覚的にも表示する必要があります。そうなると、やや情報過多で煩雑なUIになりかねません。視覚的に「煩雑」だと感じるなら、音声読み上げでもそうなのかもしれない、という気づきもありました。
最終的にアイコンの代替テキストは「戻る」とすることになりました。音声読み上げの検討が視覚的デザインの見直しに繋がったのは、勉強会開始前には予期していなかった点でした。
その他、ディスカッションの技術的な詳細に興味のある方は、以下の『Qiita』で公開しているゼロバンク・デザインファクトリーの技術ブログをご覧ください。
ゼロバンク・デザインファクトリーの技術ブログ『Qiita』
https://qiita.com/m-nagashima-zdf/items/eae175ca0b21828b40b4