リセットCSSを1行消したらアクセシビリティが向上した話

フロントエンドカンファレンス名古屋 2026
https://fortee.jp/fec-nagoya-2026/proposal/0ddb59c9-6b08-4f8f-8ca9-4463468cbf66

Transcript

1. pvcresin リセットCSSを1行消したら アクセシビリティが向上した話 フロントエンドカンファレンス名古屋 2026
2. pvcresin 仕事　SansanでEightのWebエンジニア 興味　フロントエンド／デザイン／型 趣味　アニメ／お笑い／謎解き 自己紹介
3. アクセシビリティ
4. - ガイドライン - 仕様 - 診断ツール - ライブラリ アクセシビリティ向上で参照するリソース WCAG WAI-ARIA Lighthouse, axe Headless UI, React Area
5. デザインシステム
6. デザインシステムによるアクセシビリティ向上  セマンティックマークアップ  ターゲットサイズ  レスポンシブ対応  アニメーション  コントラスト比  フォーカスインジケーター
7. デザインシステム導入あるある 機能追加のない古い画面では コンポーネントの置き換えが進まない
8. 実際に遭遇した問題 古い画面でキーボード操作をした際 ボタンのフォーカスが表示されなかった （WCAG: Focus Visible）
9. 問題のリセット CSS
11. なぜこんな記述があったのか
12. なぜこんな記述があったのか 背景 - button, input, link などにフォーカスが当たるとFocus Ringが表示 - かつてのブラウザはクリックでも表示しており、視覚的なノイズだった 結果 - 開発者の中で outline: none にして消す方法が横行 - しかし、これではキーボード操作によるフォーカスも非表示に...
13. :focus-visible の登場
14. :focus-visible の登場 - キーボード操作など、ユーザーがフォーカス位置を知る必要のある時だけ反応 する擬似クラス - ブラウザのデフォルトスタイルも :focus から :focus-visible に移行 - 何も書かずとも、意図した時だけFocus Ringが表示されるように！
15. このようなブラウザの変更をどう検知するか
16. このようなブラウザの変更をどう検知するか - CSSをはじめとするWeb標準の最新動向を追いかける - 「20XX年版 おすすめリセットCSS」と手元の環境を見比べる - （GitHubでChromiumやWebKitのUA CSSの変更を追いかける...）
17. まとめ
18. - button:focus { outline: none; }を消すことでFocus Ringが表示されるように - アクセシビリティの向上は、デザインシステムでも漏れる場合がある - 古い画面に対しても定期的にチェックすることが重要 まとめ