自主プロジェクト個人開発 / A11y配慮 / フロントエンド実装
Promotee — アクセシビリティ配慮の面接フラッシュカードアプリ
非ネイティブ話者の面接練習を支える、キーボード完結のフラッシュカードアプリ。スクリーンリーダー対応、モーション制御、セマンティックなマークアップなど、アクセシビリティを前提に設計・実装した。
Accessibility ReviewAccessibility Remediation Supportアクセシビリティ改善レビューアクセシビリティ実装支援Frontend Partnerフロントエンド画面開発支援MVP初期版実装
関連サービス
アクセシビリティを後付けではなく設計段階から扱いたい、実装や検証まで含めて相談したいケースに近い実績です。
- UIの見た目だけでなく実際の操作性も改善したい
- キーボードやスクリーンリーダー対応を前提に設計したい
- A11yとパフォーマンスの両立を見ながら実装したい
背景
ノンネイティブ話者の面接準備を支えるために作った実用アプリで、ログイン不要・個人データ収集なし・キーボードとスクリーンリーダーで完結操作できることを重視して設計しました。
課題
インタラクティブなアプリでも、アクセシビリティを“最後に追加するもの”ではなく、企画・UI・実装・検証の最初から一貫して扱う必要がありました。
- 動的UIでもA11yを成立させる
- 見た目の美しさとコントラスト基準を両立する
- モーションや通知を含めて、負担の少ない体験にする
実施内容 / 進め方
- セマンティックHTML、キーボード操作、スキップリンク、Live Regionを実装
- 色コントラストを実測で見直し、Failになる組み合わせを修正
- prefers-reduced-motion とアプリ設定の両方に対応
- Toast通知もスクリーンリーダー前提でカスタム実装
- 主要画面をLighthouseと手動確認で検証
工夫した点 / 設計上のポイント
Accessibility by design
後からチェックリスト的に足すのではなく、最初からアクセシビリティを前提に構造とUIを組みました。
インタラクティブ状態での検証
静的ページだけでなく、状態を持つ画面でも実際の操作フローに近い形で検証しました。
トレードオフを見ながら調整
動画の preload やモーション設定など、パフォーマンスと使いやすさの両立を意識して調整しました。
結果
Lighthouse Accessibility
主要画面 100
Best Practices / SEO
主要画面 100
Performance
動的画面を含めて 97以上
- キーボード操作とスクリーンリーダーを前提にしたアプリとして成立
- アクセシビリティ・使いやすさ・パフォーマンスを両立できる手応えを得た