こんにちは。アイレットデザイン事業部の岩井です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回は、Webアクセシビリティについてです。
デザイン作業での工夫や気づきをご紹介できればと思います。
※基本的なWCAGに関する達成項目がどうのってお話しではないです

インターフェース設計でまず押さえること

コンポーネント単位の「意味の一貫性」
見た目の統一に加えて、ボタン／リンク／タブなどの意味と操作体系をそろえる。
ポイント：
開閉系（アコーディオン等）は開状態の表示、戻り導線、フォーカス可視化までをワンセットで設計。

状態遷移を網羅する
Normal / Hover / Focus / Disabled / Error / Success を配色とアイコン・テキストで二重表現。
ポイント：
・UIの状態（disabled / error / success / pending）をデザインで網羅しておくこと。
・エラー時だけ視認性が低い配色、pending時にインジケータが曖昧、など気をつける

フロー全体のフォーカス設計
「入力 → 確認 → 完了」をキーボード・タッチで通し稽古。
ポイント：
フォーカス移動の順序、エラー発生時の戻り先、完了後の次アクションを設計段階から具体化。

可操作性の担保（タッチターゲットと間隔設計）
マウス前提の密集UIは、タッチや運動障害のある人に厳しい設計になる。
小さなゴミ箱や三点リーダーに重要操作を詰め込み、誤タップや見落としが多発しないように。
ポイント：
・主要操作のタップ領域は最小44–48px 四方を目安（モバイル前提）
・隣接する操作は8–12px 程度の間隔を確保（誤タップ防止）
・テキストリンクは下線＋十分な行間で“触れる場所”を明確に

陥りやすいミス

コントラスト比だけに頼らない
「WCAGの数値は満たしているけど読みにくい」ケース。
例：背景が#F7F7F7、文字が#767676 → 4.6:1で基準はクリア。でも高齢者や暗い環境では視認性が落ちる。
→数値だけでなく実環境テストを

多言語対応を意識していない
日本語で最適化したボタンが英語化で崩壊するケース。
例：「次へ（2文字）」→「Continue（8文字）」で折り返しが発生。
→翻訳テキストを想定したUI設計を

アニメーションによる不快感
強いパララックスや無限ループのようなアニメーションは「reduced motion」への配慮が不可欠。play/stopボタンも忘れずに

ARIAラベルの乱用
開発に「とりあえずaria-label付けて」と渡すと、かえってスクリーンリーダーが混乱
→デザイナーは「UIに表示される文言」と「読み上げられる文言」が矛盾しない設計を

できる工夫（UXを意識）

フォーカスで現れるスキップリンク
狙い：毎回左上からタブ開始しがだるい。本題へ行くまでが面倒
仕様：「メインへ」「検索へ」「フィルタへ」「結果へ」などを1行で配置。
通常は非表示、フォーカス時にだけ表示（太いアウトラインと十分なコントラスト）。
完全に不可視な隠しボタンはNG

繰り返し領域の「島スキップ」
狙い：カード100枚など、重複UIを一気に飛ばす。
仕様：リスト先頭に「次のセクションへ」「ページ末へ」の島スキップリンクを用意（フォーカス表示）。

ボタン位置の配慮
狙い：キーボード経路の短縮。
仕様：最後の入力 → Tab → 主要CTA→ Enter
「戻る」が主要CTAの手前にあると、Tab/Enterで誤って戻る事故が起きやすい。

テーブルの仕様を使い分ける
狙い：横スク不要で読みやすく。
仕様：モバイルではスタック表（見出し→値のペア）へ切替、PCでは列固定＋行ハイライト。数値要約やミニ要約を併記。
小さい文字で横スクはNG。PC画面を縮小配置もNG

まとめ

・法準拠（WCAG）は「基準」。UXは「体験」。実務では必ず一体運用
・「WCAGを満たせばOK」は 最低ライン。
・「気持ちよく・速く・迷わず」設計を心がけましょう
・実環境でのテストを必ずしよう