ようこそ
メインページのコンテンツ...
アクセシビリティ入門
Webアクセシビリティは重要です...
基本的なテクニック
いくつかのテクニック...
セマンティックHTML
セマンティックHTML...
構造要素
header、navのような要素...
CSSとアクセシビリティ
CSSは改善できます...
セマンティックHTML
理解可能な方法でコンテンツを構造化するために適切なHTML要素を使用する
ページ構造
悪い例
私のサイト
<!-- pageStructure.badComment -->
<div class="page-header">
<div class="site-title">pageStructure.siteTitle</div>
<div class="navigation">
<div>pageStructure.home</div>
<div>pageStructure.about</div>
</div>
</div>
<div class="page-content">
<div class="content-title">pageStructure.welcome</div>
<div>pageStructure.mainContent</div>
</div>
<div class="page-footer">
pageStructure.copyright
</div>良い例
私のサイト
ようこそ
メインページのコンテンツ...
<!-- pageStructure.goodComment -->
<header>
<div class="site-title">pageStructure.siteTitle</div>
<nav aria-label="pageStructure.mainNav">
<ul>
<li><a href="/">pageStructure.home</a></li>
<li><a href="/about">pageStructure.about</a></li>
</ul>
</nav>
</header>
<main>
<h1>pageStructure.welcome</h1>
<p>pageStructure.mainContent</p>
</main>
<footer>
<p>pageStructure.copyright</p>
</footer>説明： 明確なセマンティック構造は、スクリーンリーダーがナビゲートし、コンテンツを理解するのに役立ちます。セクション要素（header、nav、main、footer）は重要なランドマークを作成します。
見出し階層
悪い例
<!-- headings.badComment -->
<div class="title-large">headings.intro</div>
<p>headings.content</p>
<div class="title-medium">headings.section1</div>
<p>headings.content</p>
<div class="title-medium">headings.section2</div>
<p>headings.content</p>
<div class="title-small">headings.subsection</div>
<p>headings.content</p>良い例
アクセシビリティ入門
Webアクセシビリティは重要です...
基本的なテクニック
いくつかのテクニック...
セマンティックHTML
セマンティックHTML...
構造要素
header、navのような要素...
CSSとアクセシビリティ
CSSは改善できます...
<!-- headings.goodComment -->
<h1>headings.intro</h1>
<p>headings.content</p>
<h2>headings.basicTechniques</h2>
<p>headings.content</p>
<h3>headings.semanticHTML</h3>
<p>headings.content</p>
<h4>headings.structureElements</h4>
<p>headings.content</p>
<h3>headings.cssAccessibility</h3>
<p>headings.content</p>説明： 論理的な見出し階層（h1 → h2 → h3）を使用すると、スクリーンリーダーがナビゲーションアウトラインを作成し、ユーザーがコンテンツ構造を理解できます。
ボタン対クリック可能な要素
悪い例
💾 保存
🗑️ 削除
👤 プロフィールを表示
ℹ️ 詳細情報<!-- buttonsVsLinks.badComment -->
<div @click="handleSave" style="cursor: pointer;">
💾 buttonsVsLinks.save
</div>
<div @click="handleDelete" style="cursor: pointer;">
🗑️ buttonsVsLinks.delete
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
👤 buttonsVsLinks.profile
</span>良い例
<!-- buttonsVsLinks.goodComment -->
<button type="button" @click="handleSave">
💾 buttonsVsLinks.save
</button>
<button type="button" @click="handleDelete">
🗑️ buttonsVsLinks.delete
</button>
<a href="/profile">
👤 buttonsVsLinks.profile
</a>
<button type="button" @click="toggleModal">
ℹ️ buttonsVsLinks.moreInfo
</button>説明： アクションには適切な要素を使用します：アクションにはボタン、ナビゲーションにはリンク。これにより、適切なセマンティクスと期待されるキーボード動作が保証されます。
リストと構造化データ
悪い例
オムレツの材料：
卵3個
牛乳大さじ2
塩コショウ
バター大さじ1
手順：
1. 卵を牛乳と混ぜる
2. バターを熱する
3. 卵を注ぎ、調理する
4. 半分に折って提供
<!-- lists.badComment -->
<div class="list-title">lists.ingredientsTitle</div>
<div>lists.eggs</div>
<div>lists.milk</div>
<div>lists.seasoning</div>
<div class="list-title">lists.stepsTitle</div>
<div>1. lists.step1</div>
<div>2. lists.step2</div>
<div>3. lists.step3</div>良い例
オムレツの材料：
- 卵3個
- 牛乳大さじ2
- 塩コショウ
- バター大さじ1
手順：
- 卵を牛乳と混ぜる
- バターを熱する
- 卵を注ぎ、調理する
- 半分に折って提供
<!-- lists.goodComment -->
<h3>lists.ingredientsTitle</h3>
<ul>
<li>lists.eggs</li>
<li>lists.milk</li>
<li>lists.seasoning</li>
</ul>
<h3>lists.stepsTitle</h3>
<ol>
<li>lists.step1Full</li>
<li>lists.step2</li>
<li>lists.step3</li>
<li>lists.step4</li>
</ol>説明： 適切なリスト要素を使用すると、スクリーンリーダーがアイテムの数をアナウンスし、ナビゲーションを容易にします。