HTMLセマンティクス検証（ケース1〜6）

同一コンテンツをタグだけ変えて比較ができるサンプルです。 スクリーンリーダーの読み上げを確認してください。

ケース1: 一覧 + 記事構造の比較

一覧データを、どの程度まで構造化するかを比較します。

パターンA: ul, li, p

パターンB: ul, li, heading

  • アクセシビリティ勉強会

  • HTMLセマンティクス勉強会

  • フォーム改善ワークショップ

パターンC: ul, li, article, heading

パターンD: div, article, heading

ケース2: カード並びの構造比較

同一のカード内容を `div + p`、`ul + li + p`、`ul + li + heading` で比較します。

パターンA: `div` + `p`

サイト更新のお知らせ

勉強会資料公開

運用ルール改定

パターンB: `ul` + `li` + `p`

  • サイト更新のお知らせ

  • 勉強会資料公開

  • 運用ルール改定

パターンC: `ul` + `li` + `heading`

  • サイト更新のお知らせ

  • 勉強会資料公開

  • 運用ルール改定

ケース3: テキスト要素の比較

同一文章を `p` / `em` / `strong` / `small` / `b` / `span` で全体囲みして比較します。

パターンA: `p`

次回の勉強会は必須参加です。資料は前日までに確認してください。

Attendance at the next study session is required. Please review the materials by the day before.

パターンB: `em`

次回の勉強会は必須参加です。資料は前日までに確認してください。 Attendance at the next study session is required. Please review the materials by the day before.

パターンC: `strong`

次回の勉強会は必須参加です。資料は前日までに確認してください。 Attendance at the next study session is required. Please review the materials by the day before.

パターンD: `small`

次回の勉強会は必須参加です。資料は前日までに確認してください。 Attendance at the next study session is required. Please review the materials by the day before. 英語

パターンE: `b`

次回の勉強会は必須参加です。資料は前日までに確認してください。 Attendance at the next study session is required. Please review the materials by the day before.

パターンF: `span`

次回の勉強会は必須参加です。資料は前日までに確認してください。 Attendance at the next study session is required. Please review the materials by the day before.

ケース4: `div` / `section` / `article` の比較

同じ情報を3つの要素で囲み、意味づけの差を確認します。

パターンA: `div`

新入社員向けオンボーディング

対象: フロントエンドチーム / 所要時間: 30分

パターンB: `section`

新入社員向けオンボーディング

対象: フロントエンドチーム / 所要時間: 30分

新入社員向けオンボーディング(aria-labelledby付き)

対象: フロントエンドチーム / 所要時間: 30分

パターンC: `article`

新入社員向けオンボーディング

対象: フロントエンドチーム / 所要時間: 30分

ケース5: `table` と `dl / dt / dd` の比較

データが「行列の対応関係」か「用語と説明」かで、要素選択が変わるケースです。

パターンA: `table`

勉強会スケジュール
日付 テーマ 担当
アクセシビリティ基礎 UIチーム
HTMLセマンティクス フロントエンドチーム
フォーム改善 デザインシステムチーム

パターンB: `dl / dt / dd`

日付
テーマ
HTMLセマンティクス
担当
フロントエンドチーム
会場
第3会議室