アクセシビリティ

アクセシビリティは、目や耳・手の不自由な人、高齢の人、明るい屋外で使う人など、誰でも使えるようにすることです。国際的な基準として WCAG（Web Content Accessibility Guidelines）があり、達成の度合いは A・AA・AAA の3段階です。多くの組織は AA を目標にします。WCAG は Web の基準ですが、考え方はアプリにもそのまま使えます。

チェックのツール

コントラスト比は Figma のプラグインや、コントラストを測る Web のツールで確かめます。実装されたものは、ブラウザの開発者ツールや Lighthouse・axe などで自動チェックできます。ただし自動チェックで分かるのは一部だけなので、iPhone の VoiceOver や Android の TalkBack で実際に読み上げてみる、キーボードだけで操作してみる、を一度やってみると、分かることが多くあります。

Web エンジニア向け：アクセシビリティ

コントラスト比は、文字と背景の明るさの差を表す値で、1:1（同じ色）から 21:1（白と黒）までです。WCAG の AA では、通常の文字は 4.5:1 以上、大きな文字は 3:1 以上、入力欄の枠やアイコンなどの部品は 3:1 以上が目安です。

WCAG の「大きな文字」は 18pt（約 24px）以上、太字なら 14pt（約 18.5px）以上です。日本語などの文字は、同じくらいの大きさが目安です。コントラスト比の基準はぎりぎりで判定するもので、2.99:1 は 3:1 を満たしません。

見た目の大きさと押せる範囲は別に指定できます。小さなアイコンでも、押せる範囲を周りに広げれば押しやすくなります。デザインでは、押せる範囲を薄い枠などで示して渡すと、実装で範囲が狭くなるのを防げます。押せるものどうしが近すぎると押し間違えるので、間隔にも気をつけます。

マウスを使わず、キーボードやスイッチ（体の動きに合わせた入力の機器）で操作する人がいます。その人たちは Tab キーなどで、押せるものを順番に移動します。

デザインのレビューのときに、キーボードだけで画面を一通り操作してみると、フォーカスが見えない・順番がおかしい・抜け出せない、といった問題がすぐに分かります。

スクリーンリーダーは、画面の内容を音声（や点字）で伝える機能です。目の見えない人・見えにくい人が使います。iPhone の VoiceOver、Android の TalkBack が OS に入っています。

一度、自分のスマホで VoiceOver や TalkBack を有効にして、自分のデザインした画面を操作してみると、何が足りないかがよく分かります（操作のしかたが変わるので、有効にする前に止め方を確かめておきます）。

代替テキスト（alt）は、画像の内容を文章で表したものです。画像が見えない人に読み上げられ、画像が読み込めなかったときにも表示されます。

ユーザーが画像を投稿する画面や、運用の担当がバナーを入れる管理画面では、代替テキストを入力する欄を用意するかもデザインで決めます。

OS の動きを減らす設定（iOS の「視差効果を減らす」など）は、Web では prefers-reduced-motion で受け取れます。設定がオンのときに「動きを全部なくす」のではなく、「ふわっと出る」程度の小さな変化にすると、何が起きたかは伝わります。

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; transition: opacity 0.2s; }
}

アクセシビリティは「できればやる」ものから、取り組むことが求められるものになってきています。

法律の細かい扱いは会社の法務の担当に確かめる必要がありますが、デザイナーとしては「WCAG の AA を目標にする」と決めて、デザインシステムに組み込んでおくのが現実的な第一歩です。