NTTドコモ モバイル社会研究所の発表によれば、2024年における携帯電話所有者のスマートフォン比率はなんと97%にもなります。

今や、ほとんどの人がスマートフォンを手にしていて、生活の一部となっています。

日本での障害者手帳所持者は約610万人、うち身体障害者は約416万人とされ、モバイルアプリのアクセシビリティ*について影響を受けやすい、視覚障害・聴覚障害・肢体不自由に限っても、約223万人いらっしゃいます。

スマートフォンには、だれもが制限なく利用できるよう「アクセシビリティ機能」が数多く搭載されていますが、その機能すらまだまだ知られておらず、アプリにおいても、いつでも、どこでも、だれでも「使える」ようにはなっていません。

今年11月「モバイルアプリアクセシビリティ入門── iOS＋Androidのデザインと実装」（以下、モバイルアプリアクセシビリティ入門）が発売、その刊行記念イベントをfreeeが2023年にオープンした本屋、透明書店で開催しました。

本イベントに登壇したのは、「モバイルアプリアクセシビリティ入門」の執筆に携わったフリー社の伊原、阿部、めろんと、株式会社CyberAgentの本田さん。また、freeeのプロダクト開発において、Webやアプリのアクセシビリティ機能の開発に従事している中根の5名。

フリー社からも複数のメンバーが登壇したこちらのイベントの様子とともに、モバイルアプリのアクセシビリティにおける現在地をレポートします！

モバイルアプリのアクセシビリティに取り組み、サービスにアクセスできるユーザーを増やすために

本書の刊行には、フリー社の有志のメンバーがアクセシビリティの推進のために様々な活動を行ってきたという背景があります。

伊原の入社年である2017年に活動がスタート。「アクセシビリティについて啓発していきたい」という想いに共感する有志のメンバーが集い、社内はもちろん社外でも多岐にわたって活発に活動を行っています。

改めて、本書を刊行する決意をした理由について、伊原はこう話します。

伊原「モバイルアプリを利用する方は国内でも非常に多く、かつ利用時間も長い。にもかかわらず、iOSやAndroidにアクセシビリティのための機能が備わっているということがあまり知られていません。この機能を活かせるようにするには、アプリの開発段階からアクセシビリティの有用性をしっかり検討していかなければならないのでは、という思いから、この本を刊行するに至りました。Webに関するアクセシビリティの情報は徐々に増えてきましたが、モバイルアプリのアクセシビリティについては国内ではあまり紹介されていません。こうした情報の不均衡さをなくしていきたい、という思いもありました。」

そんな願いが込められた本書のページ数はなんと264ページ。「入門ということで、これでも半分近く削りました」とのこと。この本にかける執筆者たちの強い想いが伝わってきます。

スマートフォンに搭載されたアクセシビリティ機能を実際に体感

今回のイベントでは本書の紹介はもちろんですが、実際にiOS・Androidに搭載されているアクセシビリティ機能のデモが実演されました。

iOSからは11項目、Androidからは5項目と、計16項目にも及ぶアクセシビリティ機能たち。デモの実現も、1時間以上に。

それぞれの機能がどのような方に向けたものなのかや、アプリ開発の際、アクセシビリティに対応するために考慮すべきデザイン性についても丁寧に解説。

ここでは、特に印象的だったiOSの機能「色反転・グレースケール」「VoiceOver」「顔の向きによるポインタ操作」「視線入力」、そしてAndroidの機能「TalkBack」「選択して読み上げ・画面の読み上げ」について紹介します。

iOSでは、「設定」メニュー内にある「アクセシビリティ」のタブ内にて、様々なアクセシビリティ機能を有効にできます。

色反転・グレースケール

「色反転・グレースケール」は「画面表示とテキストサイズ」内から機能を有効にできます。中でも「色反転」には「反転（クラシック）」「反転（スマート）」の2種類が用意されています。

「反転（クラシック）」をオンにすると、画面の色やアイコンの色はもちろん、なんとカメラの撮影画面も色が反転。スマホ上の全ての色が反転してしまいます。
一方「反転（スマート）」であれば、、画像やメディア、そして暗い色のスタイルを使用したアプリなどは除外される形で反転される仕様に。

この機能はどのような方が使うケースが多いのでしょうか？

伊原「通常の画面のまま白ベースだと、画面が眩しいと感じてしまう方や、文字のコントラストが上げられるので、黒ベースの方が文字やアイコンをはっきり見やすいという方もいらっしゃいます。この機能はそうした視覚の方に向けた機能として搭載されています。」

「グレースケール」機能をオンにすると、画面から色が消え、全体がモノクロに。どのような場面で使用するか、普段アクセシビリティの開発に従事するエンジニアでも判断が難しい「グレースケール」。解説を求められた阿部も少し困った表情に。

ここで助け舟として、中根が「グレースケール」機能の意外な使い所を解説。

中根「アプリ開発側が使うケースが多いですね。色覚特性がある方もちゃんと視認できるかどうかを確かめたり、アプリ内のテキスト情報が十分かどうかを確認できたりするのがグレースケールの利点です。情報を構造化する際に色に頼りすぎていないかを判断するのに使う場合もあります。」

顔の向きによるポインタ操作

「顔の向きによるポインタ操作」は、スマホに内蔵される前面カメラによって、顔の動きを追うことで、スマホの操作を可能にする機能です。

阿部「この機能は顔を大きく動かさなくても操作できるように設定できるのも魅力の一つですね。本機能を有効にできるスイッチコントロールはオプション機能がたくさんあって、とても柔軟に設計されているので、他の機能以上にいろんな方が利用できる機能だと思います。」

伊原「スイッチを押したり、キーボードで操作するよりも、顔の動きでポインタを動かせるほうが効率が良いという方もいらっしゃいますよね。」

今年9月にリリースされたばかりのiOS18から新たに導入された機能である「視線入力」は顔の動きではなく、視線の動きを前面カメラで読み取り操作するもの。デモを見守る皆さんの目も、最先端のテクノロジーに釘付けになります。そしてなんとか入力に成功すると、会場からは拍手が。

阿部「今操作してみて、ボタンがもっと大きければ入力も楽にできるのになと思いました。」

伊原「そこはアプリ開発においてもとても重要なポイントですね。タップ領域をそれなりのサイズ感にしなければ、操作が難しくなるので、アクセシビリティガイドラインに沿ったデザインにすることが有効だと思います。」

Androidの実演はめろんにバトンタッチ。「選択して読み上げ・画面の読み上げ」機能のデモに挑みます。

「選択して読み上げ」は、指で範囲を選択することで、選択した範囲にある文字やデザイン要素を音声で読み上げ。
「画面の読み上げ」は、画面表示されている全体の要素を読み上げるというもの。

ここでは実演しためろんが、Androidのアクセシビリティ機能の便利な点を紹介。

めろん「Androidには、アクセシビリティのショートカットを呼び出せる機能がついているので、普段から利用している機能があれば、自身で設定することでショートカットから簡単に利用できるのが良い点だと思います」

また、アプリ開発のデザインにおける注意点を本田さんが説明。

本田さん「アプリ実装の際、デザイン面で注意した方が良いのは、この機能が左上から右下にかけて、F字に読み上げられる点です。情報のコンテクストが上から下に流れていくように要素を並べていかないと、先に知りたい情報が後から聞こえてきたり、逆に後から聞かないとわからないような情報が先に聞こえる、というような混乱を招いてしまう可能性があります。設問で例えると、『質問よりも先に回答が聞こえてきてしまう』、そんなことも起こりかねません」

iOSの「VoiceOver」そして、Androidの「TalkBack」の機能紹介においては、普段この機能を利用する中根が実演。両機能は、先程触れた読み上げ機能同様、画面内の要素を音声で読み上げてくれるものですが、ダブルタップやスワイプ、フリックなど一定のジェスチャで、インタラクティブに操作できます。

少し速度が速いようにも聞こえる音声を瞬時に聞き取る中根。実際に利用しているユーザーとしてはVoiceOverとTalkBackのどちらの方が使いやすいのでしょうか？

中根「視覚障害者の中では、iOSのユーザーの方が多いんですが、どちらかというとiPhoneのほうが早くスクリーンリーダーを搭載したので先行者利益のようなイメージもあります。TalkBackもVoiceOverに負けない機能性を持っています。最近はTalkBackの方が選べる声の種類が豊富で、サードパーティー性の音声合成エンジンも多いので、使い道によってはTalkBackの方が好みという方もいらっしゃいますね」

「モバイルアプリアクセシビリティ入門」で紹介されているのはどんなテーマ？

「モバイルアプリアクセシビリティ」について、本書ではどのように紹介されているのか、各章ごとのテーマについて簡単にダイジェストでお伝えします！

本書は7章と付録で構成されています。
第1章はモバイルアプリにおけるアクセシビリティの概観について
第2章はモバイルアプリのデザインとアクセシビリティについて紹介
第3章からはiOS・Androidそれぞれのアクセシビリティ機能について解説

第1章「モバイルアプリのアクセシビリティとは」では、そもそもアクセシビリティとは何なのか、そしてモバイルアプリにおけるアクセシビリティとは何を指すのか、という基礎的な解説が主なテーマに。また英語圏の企業で設けられているアクセシビリティに関する指針（ガイドライン）の紹介や、2023年に発売した「Webアプリケーションアクセシビリティ」にアップデートされた約2年分の法律・統計情報なども網羅しています。

第2章「モバイルアプリのデザインとアクセシビリティ」では、モバイルアプリにアクセシビリティ機能をデザインとして落とし込んでいく上でのTipsはもちろん、その前提とも言えるアクセシビリティを設置する意義についても解説しています。この章を読むと、Webでのデザインとモバイルアプリでのデザインにおいて、実は考慮すべき点があまり変わらない、ということも実例を通して理解できます。

第3章からはiOSアプリにおけるアクセシビリティについて。第3章では、比較的知名度の高い「VoiceOver」を含めた各アクセシビリティ機能の利用方法について丁寧に解説。
第4・5章では、iOSアプリ開発〜実装面において実践すべきアプローチを知ることができます。

第6・7章では、Androidアプリにおけるアクセシビリティについて解説。iOSアプリでの開発〜実装面での対応が、Androidアプリにおいても応用が効くという耳寄り情報が掲載されていたり、また実際にフリー社でアプリ開発を進める中で遭遇する「あるある課題」を紹介。

付録として、「WCAG 2.2とモバイルアプリ」も掲載。「WCAG 2.2」は「Webコンテンツ」をよりアクセシブルにするための推奨事項が広範囲にわたって列挙されるガイドラインとして知られています。

Webコンテンツとモバイルアプリ開発には共通点が多いため、このガイドラインを参照する場面が多いものの、アイコンや文字、タップサイズの達成基準のような細かな相違点も存在しているので、アプリ開発においてどの程度適応すべきかは悩みどころの一つ。本付録には、こうした悩みをどう解決すべきかが紹介しています。

アクセシビリティの普及活動を続けるfreeeが目指す社会

今回イベントで紹介されたアクセシビリティ機能は、なかなか日常で触れ合う機会がないものが数多くあります。ただそれらは、だれもが公平に情報を得られ、生活をしていける社会への、あたりまえに近づくための一歩。

心身機能の制約が「障害」であると捉える、医学的な事実に基づいて、その人が障害者であると判断する考え方が「医療モデル」です。一方、手話通訳や字幕付きのコンテンツが少ないといった社会環境の不備が、その人の不便を生み、社会環境がその人を障害者にしているとする考え方を「社会モデル」と呼びます。

社会環境のアクセシビリティが高ければ、医療モデルで「障害者」となる人でも、社会モデルでは「障害がない人」として生きていくことができる。freeeではこの考え方に基づき、“freeeの製品を使う”という文脈における「障害者」をゼロにすることを理想としています。

アクセシビリティ向上に取り組むfreeeだからこそ、利用いただいているユーザー様もいらっしゃいます。

▼「ユニバーサルな働き方」を実践されるユーザー様事例

実は、freeeでアクセシビリティの取り組みを始めたきっかけは、全盲である中根が入社したことも大きく起因しています。障害がある当事者も含めた複数人で使用感を、自社の中でも試しながら、これからもfreeeのビジョンである「だれもが自由に経営できる統合型経営プラットフォーム」をつくり続けていきます。