Tweet
Tweet

Slide 1

Slide 1 text

セマンティックHTMLによる アクセシビリティ品質向上の基礎 開発組織でアクセシビリティを進める技術 by SmartHR 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

ZOZOについて

Slide 3

Slide 3 text

© ZOZO, Inc. https://zozo.jp/ 3 ● ファッションEC ● 1,600以上のショップ、9,000以上のブランドの取り扱い ● 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新 着商品を掲載（2025年6月末時点） ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など

Slide 4

Slide 4 text

自己紹介

Slide 5

Slide 5 text

© ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 / hiro 2020年4月 株式会社ZOZOテクノロジーズ入社 2021年10月 株式会社ZOZO入社 ZOZOTOWNの開発・運用にウェブフロントエンドとして従事。 最近は開発環境の標準化、自動化ツールの導入、ドキュメント整備 を通じて、生産性向上を推進しています。 5

Slide 6

Slide 6 text

本日お話しすること

Slide 7

Slide 7 text

© ZOZO, Inc. 7 本日お話しすること 1. HTML 要素選択がアクセシビリティに与える影響 2. セマンティック HTML とフロントエンド品質 3. ネイティブ HTML と ARIA の使い分け 4. セマンティック HTML を実装・運用するための方法

Slide 8

Slide 8 text

1. HTML 要素選択がアクセシビリティに与える影響

Slide 9

Slide 9 text

© ZOZO, Inc. 9 具体例で理解する（div と button の比較） セマンティックを無視した極端な実装例
送信

Slide 10

Slide 10 text

© ZOZO, Inc. 10 具体例で理解する（div と button の比較） 問題点 ● キーボード操作ができない（Tab、Enter が効かない） ● スクリーンリーダーが構造を理解できない ● ブラウザの標準動作が効かない（フォーカス表示、右クリックなど） などなど… → これは「不便」ではなく、「使えない」状態

Slide 11

Slide 11 text

© ZOZO, Inc. 11 具体例で理解する（div と button の比較） アクセシビリティを担保させようとしてみた例
送信

Slide 12

Slide 12 text

© ZOZO, Inc. 12 セマンティック HTML なら… 送信 セマンティックな実装例

Slide 13

Slide 13 text

© 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 を選択するだけで、簡単に誰でも「使える」状態が実現する。

Slide 14

Slide 14 text

© ZOZO, Inc. 14 「使えない」から「誰でも使える」状態へ アクセシビリティとは、すべての利用者が同じ情報や機能に等しくアクセスできるこ とを意味する。 セマンティック HTML であれば、 ブラウザや支援技術が自動的にキーボード操作や音声読み上げを提供してくれる。 つまり、セマンティック HTML は、 特別な実装をしなくても「誰でも使える」状態（アクセシブル）になる。

Slide 15

Slide 15 text

2. セマンティック HTML とフロントエンド品質

Slide 16

Slide 16 text

まずはセマンティックについて 公式の定義を確認してみる。

Slide 17

Slide 17 text

© 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

Slide 18

Slide 18 text

© ZOZO, Inc. 18 セマンティック HTML = フロントエンドの品質 さきほどの button 要素の例を振り返る： ● を使う → ブラウザが機能を提供（仕様準拠） ●
を使う → 開発者が実装（仕様外）

Slide 19

Slide 19 text

これまでの話を統合すると

Slide 20

Slide 20 text

アクセシビリティは特別な対応ではなく、 フロントエンド開発の品質基準

Slide 21

Slide 21 text

3. ネイティブ HTML と ARIA の使い分け

Slide 22

Slide 22 text

「セマンティックって言うけど…」

Slide 23

Slide 23 text

「WAI-ARIA を使えば div でも問題ないのでは？」

Slide 24

Slide 24 text

© ZOZO, Inc. 24 WAI-ARIA とは WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）とは、W3C が策定したアクセシビリティを高めるための仕様。 HTML だけでは表現できない要素の役割・状態・関係を ARIA で明示的に伝えるこ とで、支援技術が正しく内容を理解できるようにするものである。

Slide 25

Slide 25 text

WAI-ARIA についても公式の定義を確認してみる。

Slide 26

Slide 26 text

© 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

Slide 27

Slide 27 text

「WAI-ARIA を使えば div でも問題ないか？」 「No」

Slide 28

Slide 28 text

セマンティックな HTML で表現できるものは WAI-ARIA を使わずに HTML 標準要素で実装するのが望ましい

Slide 29

Slide 29 text

他の公式文書には…

Slide 30

Slide 30 text

© 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

Slide 31

Slide 31 text

No ARIA is better than Bad ARIA.

Slide 32

Slide 32 text

ARIA なしの方が、悪い ARIA よりも良い。

Slide 33

Slide 33 text

© ZOZO, Inc. 33 ARIAを使うケース ● ネイティブ HTML で表現が難しい複雑な UI ○ 例： モーダル、タブ、アコーディオンなど ● 状態変化を支援技術に伝える必要がある

Slide 34

Slide 34 text

© ZOZO, Inc. 34 ARIAを使うケース W3C が提供する ARIA Authoring Practices Guide (APG) には、一般的な UI パターン（モーダル、タブ、アコーディオンなど）の実装例がガイドとして記載され ている。 ARIA の利用方法に加えて、キーボード操作（Tab、矢印キー、Escape など）、 フォーカス管理、スクリーンリーダーへの配慮など、包括的な実装ガイドラインが提供 されているため、アクセシブルな UI を実装する際の参考になる。

Slide 35

Slide 35 text

© ZOZO, Inc. 35 ARIAを使うケース APG の Patterns ページ

Slide 36

Slide 36 text

4. セマンティック HTML を実装するためには

Slide 37

Slide 37 text

© ZOZO, Inc. 37 セマンティックにするにはどうすればいいか 1. 文書構造を理解する デザインから「どんな情報が含まれていて、どう関係しているか」を考える。 例： 「大きな文字」は“見出し”か“リード文”かを判断する 2. 適切な要素を選ぶ 見た目ではなく「文脈（意味）」でタグを選択する。 例： 段落 →

、 強調 → 、 見出し →

〜

Slide 38

Slide 38 text

© ZOZO, Inc. 38 要素の組み合わせとルール 要素の正しい組み合わせをするためにコンテンツモデルを意識する必要がある。 HTML には「どの要素をどこに入れられるか」というルールがあり、 これをコンテンツモデルと呼ぶ。 例：

の中に

は入れられない。 許容できる要素・親要素は W3C や MDN の公式ドキュメントで確認できる。

Slide 39

Slide 39 text

© ZOZO, Inc. 39 要素の組み合わせとルール MDN より 要素の技術的概要

Slide 40

Slide 40 text

© ZOZO, Inc. 40 ツールで補助する ● 要素の意味や構造を人の目だけでチェックするのは難しい。 ● 見落としやすい誤りを、ツールで補助して防ぐ。 ツール 対象 機能 Markuplint HTML 全般 コンテンツモデル・構造の Lint eslint-plugin-jsx-a11y React/JSX アクセシビリティルールの Lint storybook-addon-a11y コントラストや ARIA 属性の確認

Slide 41

Slide 41 text

まとめ

Slide 42

Slide 42 text

© ZOZO, Inc. 42 まとめ アクセシビリティ = フロントエンド品質基準 1. アクセシビリティはフロントエンド品質そのもの 2. セマンティック HTML を優先し、 ARIA は必要最小限に 3. レビューと Lint ツールで継続的に品質を保つ

Slide 43

Slide 43 text

No content