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

エラーとアクセシビリティたじまん (@schktjm) at フロントエンドカンファレンス北海道 2025

自己紹介 • たじまん (schktjm) • アクセシビリティエンジニア • 北海道は大学時代のソロツーリング以来 2度目
2

プロポーザルフロントエンドの責務は広がり続けており、その中で「エラー」の扱いは重要な課題の一つです。 Result型などエラーハンドリングは確立されつつありますが、そのエラーを「 UIとしてどうユーザーに伝えるか」という観点での議論は、まだ十分とは言えません。本LTでは、その問いへの一つの答えとして、アクセシビリティの観点から「良いエラー UI」を考察します。具体的な UIデザインを交えながら、エラーメッセージの文言、表示タイミング、位置など、すぐに実践できる設計のヒントを紹介します。
このLTは、エラー実装に「アクセシビリティ」という新たな評価軸をもたらします。また、実装都合ではない、サービスの品質を高めるためのUI設計に取り組むきっかけを提供します。 ▼ 話すこと • エラーUIの設計方針 • ヒントとなるWCAG達成基準の紹介 ▼ 話さないこと • ロジックや描画層でのハンドリング実装 3

このUIはなにがダメですか？ 4 ※submitボタンを押下後にこのメッセージが表示されているとします

このような Flashメッセージは、 1⃣ 時間経過で消える 5 2⃣ 入力フォームから離れた位置にある [2.2.1:タイミング調整可能 ] が不適合
=> Webコンテンツに制限時間がかけられていない（必須の場合は除く） • 認知障害のあるユーザー • 視覚障害があるユーザー • 高齢者 [3.3.1: エラーの特定を理解する ] が不適合 => エラーの発生とエラーの内容が特定できる (※１) • すべてのユーザー • 視覚障害があるユーザー

どうすればいい？ 6

「Flashメッセージをやめよう！」 7

SmartHRもFlashメッセージと戦ってきました！ 8 SmartHR UIの <FlashMessage> は2022-02-14に非推奨になり、 2025-06-01のリリースで完全に削除されました 🎉 通知UIを改善している話 -
Speaker Deck 弱視ユーザーは制限時間がある通知の何に困るのか - SmartHR Tech Blog アクセシビリティ試験で見つかった人事評価機能の伸びしろ - SmartHR Tech Blog

今日は実際にあったエラー画面をアクセシビリティテストしたときどんな視点でチェックしているか共有します！ 9

このUIはなにがダメですか？ 10

1⃣ たくさんの入力フォームを記入 11 2⃣ 確認を押すとダイアログが開く 3⃣ 送信ボタンを押したらエラー文
静止画で解説するとこんな感じ

深堀りしてみる 12

[3.3.1: エラーの特定を理解する] 基準で考えるとユーザーはエラーが発生していることは気付けるけど、どの入力が誤っていたか特定できないと言えそう 🤔 13

14 特定できるように詳細なエラー文を出すという方法もある！けど、、、ダイアログを閉じると、どんなエラーだったか確認できなくなる 🫠

ダイアログをやめて、エラーを入力に近づけよう！ 15

エラー文を入力欄の近くにしてみた 16

NGではないけど「気になる点」がありますなんでしょう？ 17

18 1⃣ 確認ボタンを押す 3⃣ 入力欄を遡って探すとエラー箇所を発見 2⃣ ボタンの近くにエラーが表示された静止画で解説するとこんな感じ

項目数が多く、エラー箇所の特定に時間がかかる懸念がある 19 • 拡大鏡を使っているユーザー • 操作に時間がかかる高齢者

入力欄のトップにまとめがあると 💯 20 他にも、エラーが少ない場合はその要素にフォーカス移動させたり、トップのメッセージにエラー箇所へ飛ぶリンクがあるといいですね

さいごになんとなくダメそうではなく、「何がダメなのか」「誰が困るのか」を具体化することで説得力をつけよう 💪 21

ありがとうございました 22

備考 ※1: エラーテキストの表示自体はあるため不適合としない場合もありますが、 SmartHRではユーザーが認知できない可能性があるテキストは NGとしています。 23

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

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

Tajima Sachiko

More Decks by Tajima Sachiko

Other Decks in Technology

Featured

Transcript