エラーとアクセシビリティ

フロントエンドカンファレンス北海道2025の登壇資料です。

スライド途中の動画:
https://youtu.be/3t1D41qvPjI
https://youtu.be/iKt5vqflzVM
https://youtu.be/Zyj8VwYi9-o
https://youtu.be/-ai0MASB8-Q

Transcript

1. エラーとアクセシビリティ たじまん (@schktjm) at フロントエンドカンファレンス北海道 2025
2. 自己紹介 • たじまん (schktjm) • アクセシビリティエンジニア • 北海道は大学時代のソロツー リング以来 2度目 2
3. プロポーザル フロントエンドの責務は広がり続けており、その中で「エラー」の扱いは重要な課題の一つです。 Result型などエラーハンドリン グは確立されつつありますが、そのエラーを「 UIとしてどうユーザーに伝えるか」という観点での議論は、まだ十分とは言えませ ん。 本LTでは、その問いへの一つの答えとして、アクセシビリティの観点から「良いエラー UI」を考察します。具体的な UIデザインを 交えながら、エラーメッセージの文言、表示タイミング、位置など、すぐに実践できる設計のヒントを紹介します。 このLTは、エラー実装に「アクセシビリティ」という新たな評価軸をもたらします。また、実装都合ではない、サービスの品質を 高めるためのUI設計に取り組むきっかけを提供します。 ▼ 話すこと • エラーUIの設計方針 • ヒントとなるWCAG達成基準の紹介 ▼ 話さないこと • ロジックや描画層でのハンドリング実装 3
4. このUIはなにがダメですか？ 4 ※submitボタンを押下後にこのメッセージが表示されているとします
5. このような Flashメッセージは、 1⃣ 時間経過で消える 5 2⃣ 入力フォームから離れた位置にある [2.2.1:タイミング調整可能 ] が不適合 => Webコンテンツに制限時間がかけら れていない（必須の場合は除く） • 認知障害のあるユーザー • 視覚障害があるユーザー • 高齢者 [3.3.1: エラーの特定を理解する ] が不適合 => エラーの発生とエラーの内容が特定できる (※１) • すべてのユーザー • 視覚障害があるユーザー
6. どうすればいい？ 6
7. 「Flashメッセージをやめよう！」 7
8. SmartHRもFlashメッセージと戦ってきました！ 8 SmartHR UIの <FlashMessage> は2022-02-14に非推奨になり、 2025-06-01のリリースで完全に削除されました 🎉 通知UIを改善している話 - Speaker Deck 弱視ユーザーは制限時間がある 通知の何に困るのか - SmartHR Tech Blog アクセシビリティ試験で見つかった人 事評価機能の伸びしろ - SmartHR Tech Blog
9. 今日は 実際にあったエラー画面を アクセシビリティテストしたとき どんな視点でチェックしているか 共有します！ 9
10. このUIはなにがダメですか？ 10
11. 1⃣ たくさんの入力 フォームを記入 11 2⃣ 確認を押すとダイ アログが開く 3⃣ 送信ボタンを押し たらエラー文 静止画で解説するとこんな感じ
12. 深堀りしてみる 12
13. [3.3.1: エラーの特定を理 解する] 基準で考えると ユーザーはエラーが発生しているこ とは気付けるけど、 どの入力が誤っていたか特定できな いと言えそう 🤔 13
14. 14 特定できるように詳細なエラー文を出すとい う方法もある！けど、、、 ダイアログを閉じると、どんなエラーだった か確認できなくなる 🫠
15. ダイアログをやめて、 エラーを入力に近づけよう！ 15
16. エラー文を入力欄の近くにしてみた 16
17. NGではないけど「気になる点」があります なんでしょう？ 17
18. 18 1⃣ 確認ボタンを押す 3⃣ 入力欄を遡って探す とエラー箇所を発見 2⃣ ボタンの近くにエ ラーが表示された 静止画で解説するとこんな感じ
19. 項目数が多く、エラー箇所の特定に 時間がかかる懸念がある 19 • 拡大鏡を使っているユーザー • 操作に時間がかかる高齢者
20. 入力欄のトップにまとめがあると 💯 20 他にも、エラーが少ない場合はその要素にフォーカス移動 させたり、トップのメッセージにエラー箇所へ飛ぶリンクが あるといいですね
21. さいごに なんとなくダメそうではなく、 「何がダメなのか」「誰が困るのか」 を具体化することで説得力をつけよう 💪 21
22. ありがとうございました 22
23. 備考 ※1: エラーテキストの表示自体はあるため不適合としない場合もありますが、 SmartHRでは ユーザーが認知できない可能性があるテキストは NGとしています。 23