エラーとアクセシビリティ たじまん (@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の は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