セマンティックHTMLによる アクセシビリティ品質向上の基礎

2025/11/19 に 開発組織でアクセシビリティを進める技術 by SmartHRで発表した登壇資料です。
https://smarthr.connpass.com/event/373387/

株式会社ZOZO
ZOZOTOWN開発本部
ZOZOTOWN開発2部 WEBフロントエンドブロック
菊地 宏之

#smarthr_a11y

Transcript

1. セマンティックHTMLによる アクセシビリティ品質向上の基礎 開発組織でアクセシビリティを進める技術 by SmartHR 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 Copyright © ZOZO, Inc. 1
2. ZOZOについて
3. © ZOZO, Inc. https://zozo.jp/ 3 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新 着商品を掲載（2025年6月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
4. 自己紹介
5. © ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 / hiro 2020年4月 株式会社ZOZOテクノロジーズ入社 2021年10月 株式会社ZOZO入社 ZOZOTOWNの開発・運用にウェブフロントエンドとして従事。 最近は開発環境の標準化、自動化ツールの導入、ドキュメント整備 を通じて、生産性向上を推進しています。 5
6. 本日お話しすること
7. © ZOZO, Inc. 7 本日お話しすること 1. HTML 要素選択がアクセシビリティに与える影響 2. セマンティック HTML とフロントエンド品質 3. ネイティブ HTML と ARIA の使い分け 4. セマンティック HTML を実装・運用するための方法
8. 1. HTML 要素選択がアクセシビリティに与える影響
9. © ZOZO, Inc. 9 具体例で理解する（div と button の比較） セマンティックを無視した極端な実装例 <!-- クリック可能な要素を div で実装 --> <div onclick="submit()">送信</div>
10. © ZOZO, Inc. 10 具体例で理解する（div と button の比較） 問題点 • キーボード操作ができない（Tab、Enter が効かない） • スクリーンリーダーが構造を理解できない • ブラウザの標準動作が効かない（フォーカス表示、右クリックなど） などなど… → これは「不便」ではなく、「使えない」状態
11. © ZOZO, Inc. 11 具体例で理解する（div と button の比較） アクセシビリティを担保させようとしてみた例 <!-- クリック可能な要素を div で実装 --> <div onclick="submit()" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();submit();}" tabindex="0" role="button" style="cursor:pointer;border-radius:4px;display:inline-block;outline:none" onfocus="this.style.boxShadow='0 0 0 3px rgba(0,123,255,0.5)'" onblur="this.style.boxShadow='none'" >送信</div>
12. © ZOZO, Inc. 12 セマンティック HTML なら… <!-- クリック可能な要素を button で実装 --> <button type="submit">送信</button> セマンティックな実装例
13. © ZOZO, Inc. 13 セマンティック HTML なら… 以下の機能をブラウザが担保してくれる。 1. Tab キーでフォーカス移動（HTML 仕様） 2. Enter/Space キーで実行（HTML 仕様） 3. 暗黙的に button ロールを持つ（WAI-ARIA 仕様） 4. フォーカス可能（tabindex="0" 相当） 5. CSS 疑似クラス（:hover, :focus, :active） 6. disabled 属性による無効化 7. form との連携（type="submit"） 正しい HTML を選択するだけで、簡単に誰でも「使える」状態が実現する。
14. © ZOZO, Inc. 14 「使えない」から「誰でも使える」状態へ アクセシビリティとは、すべての利用者が同じ情報や機能に等しくアクセスできるこ とを意味する。 セマンティック HTML であれば、 ブラウザや支援技術が自動的にキーボード操作や音声読み上げを提供してくれる。 つまり、セマンティック HTML は、 特別な実装をしなくても「誰でも使える」状態（アクセシブル）になる。
15. 2. セマンティック HTML とフロントエンド品質
16. まずはセマンティックについて 公式の定義を確認してみる。
17. © ZOZO, Inc. 17 セマンティック HTML とは セマンティック HTML とは、単なる表示や見た目を定義するだけでなく、 ウェブページやアプリケーション内の情報の意味（セマンティクス）を強化するために HTML マークアップを利用することを指す。 Semantic HTML refers to the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. — MDN Web Docs: Semantics in HTML
18. © ZOZO, Inc. 18 セマンティック HTML = フロントエンドの品質 さきほどの button 要素の例を振り返る： • <button> を使う → ブラウザが機能を提供（仕様準拠） • <div> を使う → 開発者が実装（仕様外）
19. これまでの話を統合すると
20. アクセシビリティは特別な対応ではなく、 フロントエンド開発の品質基準
21. 3. ネイティブ HTML と ARIA の使い分け
22. 「セマンティックって言うけど…」
23. 「WAI-ARIA を使えば div でも問題ないのでは？」
24. © ZOZO, Inc. 24 WAI-ARIA とは WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）とは、W3C が策定したアクセシビリティを高めるための仕様。 HTML だけでは表現できない要素の役割・状態・関係を ARIA で明示的に伝えるこ とで、支援技術が正しく内容を理解できるようにするものである。
25. WAI-ARIA についても公式の定義を確認してみる。
26. © ZOZO, Inc. 26 WAI-ARIA とは（Usign ARIA） 必要なセマンティクスと動作が組み込まれたネイティブ HTML 要素を利用できるな ら、要素を流用して ARIA を追加してアクセシビリティを確保するのではなく、ネイ ティブ要素を利用すること If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. — Using ARIA | W3C
27. 「WAI-ARIA を使えば div でも問題ないか？」 「No」
28. セマンティックな HTML で表現できるものは WAI-ARIA を使わずに HTML 標準要素で実装するのが望ましい
29. 他の公式文書には…
30. © ZOZO, Inc. 30 WAI-ARIA とは（APG） ARIA の誤った利用は、視覚的な体験を不正確に伝え、対応する非視覚的な体験に 壊滅的な影響を与える可能性がある。 Incorrect ARIA misrepresents visual experiences, with potentially devastating effects on their corresponding non-visual experiences. — Read Me First | ARIA Authoring Practices Guide (APG) | WAI
31. No ARIA is better than Bad ARIA.
32. ARIA なしの方が、悪い ARIA よりも良い。
33. © ZOZO, Inc. 33 ARIAを使うケース • ネイティブ HTML で表現が難しい複雑な UI ◦ 例： モーダル、タブ、アコーディオンなど • 状態変化を支援技術に伝える必要がある
34. © ZOZO, Inc. 34 ARIAを使うケース W3C が提供する ARIA Authoring Practices Guide (APG) には、一般的な UI パターン（モーダル、タブ、アコーディオンなど）の実装例がガイドとして記載され ている。 ARIA の利用方法に加えて、キーボード操作（Tab、矢印キー、Escape など）、 フォーカス管理、スクリーンリーダーへの配慮など、包括的な実装ガイドラインが提供 されているため、アクセシブルな UI を実装する際の参考になる。
35. © ZOZO, Inc. 35 ARIAを使うケース APG の Patterns ページ
36. 4. セマンティック HTML を実装するためには
37. © ZOZO, Inc. 37 セマンティックにするにはどうすればいいか 1. 文書構造を理解する デザインから「どんな情報が含まれていて、どう関係しているか」を考える。 例： 「大きな文字」は“見出し”か“リード文”かを判断する 2. 適切な要素を選ぶ 見た目ではなく「文脈（意味）」でタグを選択する。 例： 段落 → <p>、 強調 → <em>、 見出し → <h1>〜<h6>
38. © ZOZO, Inc. 38 要素の組み合わせとルール 要素の正しい組み合わせをするためにコンテンツモデルを意識する必要がある。 HTML には「どの要素をどこに入れられるか」というルールがあり、 これをコンテンツモデルと呼ぶ。 例： <p> の中に <div> は入れられない。 許容できる要素・親要素は W3C や MDN の公式ドキュメントで確認できる。
39. © ZOZO, Inc. 39 要素の組み合わせとルール MDN より <button> 要素の技術的概要
40. © ZOZO, Inc. 40 ツールで補助する • 要素の意味や構造を人の目だけでチェックするのは難しい。 • 見落としやすい誤りを、ツールで補助して防ぐ。 ツール 対象 機能 Markuplint HTML 全般 コンテンツモデル・構造の Lint eslint-plugin-jsx-a11y React/JSX アクセシビリティルールの Lint storybook-addon-a11y コントラストや ARIA 属性の確認
41. まとめ
42. © ZOZO, Inc. 42 まとめ アクセシビリティ = フロントエンド品質基準 1. アクセシビリティはフロントエンド品質そのもの 2. セマンティック HTML を優先し、 ARIA は必要最小限に 3. レビューと Lint ツールで継続的に品質を保つ