あなたのAI製アプリ、誰でも使えますか?アクセシビリティのわかりやすいガイド

AIでアプリを作るとき、人は自分の使い方でテストしてしまう——自分の画面、自分の目、ノートパソコンを両手でしっかり構えた状態で。問題は、実際にアプリを開く人のかなりの割合が、そういう使い方をしていないことだ。スマホの文字サイズを2倍にズームしている人もいる。赤いエラーメッセージと、その周りの黒い文字の区別がつかない人もいる。赤ちゃんを抱っこしながら、親指一本でタップしている人もいる。アプリのアクセシビリティとは、単純にそういう人たちがちゃんと使い切れるかどうかの話であり——そして、AI製アプリの多くは、その問いを一度も投げかけられないまま世に出ていく。

これに対応するのに、専門の学位もコンプライアンスチームも要らない。必要なのは、アプリが人を締め出しがちな4つか5つのポイントを知っておくことと、それをビルダーにどう直してもらうか。よくあるパターンをエピソードとともに紹介しよう——一度見てしまえば、見つけやすくなるはずだ。

ズームすると自分のアプリのレイアウトが崩れるのはなぜ?

ほとんどのAI製アプリは、ひとつの固定した文字サイズを前提にデザインされているからだ。だから誰かがスマホやブラウザの文字を大きくすると——特に60代以上の人には多い操作だが——ボタンが重なり合い、列がぐちゃぐちゃに崩れ、コントロールが互いの下に潜り込んでしまう。

知り合いのある制作者が、母親の美容室向けにこぎれいな予約アプリを作った。見た目は上々だった。ところがお母さんがそれを開いてまず最初にしたこと——60代以上の人によくあることだが——は、ピンチ操作で文字を拡大することだった。とたんにレイアウトが崩壊した。ボタンは重なり、「予約する」ボタンはメニューの下に潜り込み、時間帯を並べた列は読めないほどぐちゃぐちゃな塊になってしまった。

これはAI製アプリで最もよくあるアクセシビリティの破綻であり、誰かがズームするまで目に見えない。ビルダーにこう頼もう。「文字を200%までズームしてもレイアウトが崩れないようにしてください。何も重なったり、はみ出したりしないように」。そして自分でも試してみること——スマホでシステムの文字サイズを最大にして、自分のアプリを開いてみる。それで崩れるなら、それが最初に直すべき箇所だ。

自分のアプリで、状態の表示を色だけに頼ってはいけないのはなぜ?

男性のおよそ12人に1人は色の見え方が違い、最も多いのは赤と緑の識別困難だからだ。つまり、単に赤いドットか緑のドットかだけで状態を示すと、その人たちには同じに見えてしまい、「支払い済み」と「未払い」の区別が本当につかない。

あるフリーランサーが、状態を色だけで示す請求書管理アプリを作った——緑のドット、赤のドットで。彼のクライアントの一人はたまたま赤緑色覚異常で、二つのドットが同じに見えるせいで、すでに支払い済みの請求書に何度も支払いを続けてしまっていた。情報自体はそこにあった。ただ、その人には届いていなかっただけだ。

対処法は機能というより習慣の問題だ。色だけを何かを伝える唯一の手段にしないこと。 色と一緒に、言葉かアイコンか形を添える。赤の隣に「期限超過」の文字を。緑の隣にチェックマークを。赤い枠線だけでなく、アスタリスクと「必須」の文字を。色を使うこと自体は構わない——ただ、それだけでメッセージを背負わせてはいけない。

スクリーンリーダーが名前ではなく「ボタン」としか読み上げないのはなぜ?

ラベルのないアイコンボタン——ゴミ箱のアイコン、鉛筆のアイコン、文字のない虫眼鏡のアイコンなど——には、スクリーンリーダー(視覚障害や弱視の人が画面を音声で読み上げさせるために使うソフト)が読み上げるためのテキストが存在しないため、文字どおり「ボタン」としか読み上げられない。「削除」でも「編集」でもなく、ただ「ボタン」。

AI製ビルダーは、見た目がモダンになるという理由で、すっきりしたアイコンボタンを好む。しかし、すべてのコントロールが「ボタン」としか呼ばれず、推測するしかないアプリを使うところを想像してみてほしい。すべてのアイコンに目に見える文字を添える必要はない——必要なのは、各コントロールに、たとえ目に見えなくてもスクリーンリーダーが読み上げられる名前を持たせることだ。ビルダーにこう頼もう。「すべてのアイコンボタンにアクセシブルなラベルを付けてください——ゴミ箱のアイコンは『削除』、鉛筆のアイコンは『編集』と読み上げられるように」。小さな変更だが、それが視覚障害のあるユーザーが操作できるアプリと、名もなきボタンの壁でしかないアプリとの違いを生む。

モバイルアプリのタップ対象は、どれくらいの大きさが必要?

デザイナーがよく使う目安は、タップできるものはすべて約44ピクセル——指先とほぼ同じくらいの大きさ——にし、タップできるもの同士がぎゅうぎゅうに隣り合わないよう、きちんと間隔を空けるというものだ。

誰かがバスの中で片手だけを使ってあなたのアプリを操作しているところを想像してほしい。親指は太くて不正確、バスは揺れている、そして閉じるための「×」ボタンは隅っこにある16ピクセルの点でしかない。二回外し、一回は裏にある別のものを押してしまい、あきらめてしまう。小さくて詰め込まれたタップ対象はただの不便さではなく、アクセシビリティの問題だ——手が震える人、指が大きい人、揺れる環境にいる人ほど、その影響を強く受ける。ビルダーにこう頼もう。「タップ対象を最低44ピクセルにし、誤タップを防ぐために間隔を空けてください」。そして実際に試してみる。スマホで自分のアプリを開き、歩き回りながら片手で主要な操作をしてみる。自分が何度も押し損ねるようなら、他の誰もが同じように押し損ねる。

自分のアプリのアクセシビリティを5分でチェックするには?

ツールなしでも、人が最もよく使う画面に対する3つの簡単なチェックだけで、たいていのことは自分で見つけられる。

ズームしてみる。 スマホやブラウザの文字を最大サイズにして、メインの画面を開く。何かが重なったり、消えたり、はみ出したりしないか?
色を抜いてみる。 アプリの中で色が何かを意味している箇所——状態、エラー、必須項目——をすべて見てみる。すべてグレースケールだと想像しても、何が起きているか分かるだろうか?分からないなら、言葉かアイコンを足す。
2分間、スクリーンリーダーをオンにする。 iPhone(VoiceOver)にもAndroid(TalkBack)にも標準で搭載されている。オンにして目を閉じ、自分のアプリの主要な目的を果たそうとしてみる。どのボタンに名前がないか、すぐに聞こえてくるはずだ。

これらはどれも、開発者である必要はない。必要なのは、自分自身としてテストするのを5分だけやめて、自分とは手も目も画面も違う誰かとしてテストすることだけだ。

すべてを一度に直す必要はない。人が最もよく使う画面をひとつだけ選ぼう——予約フォーム、サインアップ画面、メインの一覧画面——そして、その一画面が、拡大しても、色を抜いても、読み上げても機能するようにする。その一画面をきちんと仕上げることは、誰も訪れない隅々までをすべて監査するより、はるかに多くの人をカバーする。まずそこから始めよう。そうすれば、次に片手の親指とズームした画面であなたのアプリを開く人は、離脱するのではなく、ユーザーになってくれる。