Webアクセシビリティですべきことをまとめてみる（HTML限定）

# 経緯
2023年10月にWCAG2.2が正式に勧告されました
しかし、自分はこれまでアクセシビリティが具体的に何を指し、何を実施すべきか理解できていませんでした
そこで、今回このテーマについて詳細に調査してみることにしました

既に日本語で詳細にまとまっている情報も存在しますが、内容がやや複雑で完全に理解することは難しかったため、自分自身でより理解しやすいように内容を再解説し、具体的なサンプルを加える作業を行いました

アクセシビリティに関する分類や内容は非常に広範囲にわたり、すべてを網羅することは難しいため、今回はフロントエンドエンジニアの基礎知識となるHTMLに特化した`HTML Techniques`に焦点を当ててまとめます


## 達成基準（優先度が高い順）
アクセシビリティには**達成基準**という基準が設けられている
これらの基準には優先度があり、優先度が高いほど達成が推奨されている

- <b>AAA</b>
  - 可能な限り広範なユーザーに対して、最もアクセスしやすいウェブ体験を提供するための基準
  - このレベルを達成することで、ほとんどのユーザーがウェブコンテンツにアクセスすることが可能
  - すべてのウェブサイトでAAAレベルの全基準を満たすことは必要ではなく、また実現が難しい場合もある
- <b>AA</b>
  - Aレベルの基準をさらに強化し、より多くのユーザーにウェブコンテンツをアクセスしやすくするための基準となる
  - AAレベルを達成しない場合、多くのユーザーがウェブコンテンツへのアクセスに困難を感じる可能性がある
- <b>A</b>
  - ウェブコンテンツが基本的なアクセシビリティを満たすために必要な基準
  - このレベルを達成しない場合、一部のユーザーはウェブコンテンツにアクセスできないか、大きな困難を感じる可能性がある
- <b>非推奨</b>
  - 現在では適用されない、実装が困難である、または他の達成基準と競合する可能性があるため、使用しないことが推奨されている基準

:::note info
> すべてのウェブサイトでAAAレベルの全基準を満たすことは必要ではなく、また実現が難しい場合もある

<b>AAA</b>で上記の注記があるが、<b>A</b>, <b>AA</b>, <b>AAA</b>のすべての達成基準と技術を考慮することは、可能な限り広範なユーザーにアクセスしやすいウェブコンテンツを提供する上で重要となる
すべての基準を完全に満たす必要はないが、可能な限り多くの基準を達成するよう努力すべきである
:::


## 達成基準の採用方法に関して
達成基準には`Sufficient（十分な達成方法）`と`Advisory（参考達成方法）`がある

- `Sufficient（十分な達成方法）`
  - 特定の達成基準を満たすためにWCAGワーキンググループが推奨する方法
  - 達成基準を満たすための最低限の要件を示している
- `Advisory（参考達成方法）`
  - 達成基準を満たすための追加勧告
  - 必須ではないがアクセシビリティ向上のための追加要件を提示している

達成基準ごとに以下でまとめたが、特定の項目にはこれらの特徴がある
- `Sufficient（十分な達成方法）`と`Advisory（参考達成方法）`が両方指定されている
- `Sufficient（十分な達成方法）`や`Advisory（参考達成方法）`が複数指定されている

今回は以下のルールに基づき項目を並べている
- `Sufficient（十分な達成方法）`が指定されている場合はその方法のレベルを採用
- `Sufficient（十分な達成方法）`がなければ`Advisory（参考達成方法）`のレベルを採用
- 上記で一番高いレベルを採用

:::note info
例： [H2](https://www.w3.org/WAI/WCAG22/Techniques/html/H2)には以下の方法が示されている
- `Sufficient（十分な達成方法）`
  - 1.1.1: Non-text Content -> <b>A</b>

- `Advisory（参考達成方法）`
  - 2.4.4: Link Purpose(In Context) -> <b>A</b>
  - 2.4.9: Link Purpose(Link Only) -> <b>AAA</b>

この場合は`Sufficient（十分な達成方法）`の1.1.1のレベルである<b>A</b>を採用

![スクリーンショット 2023-12-15 13.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/553ab283-76cb-61d6-1486-b11dc2a92056.png)
:::


## AAA
### H24: Providing text alternatives for the area elements of image maps
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H24

#### 要約
`<area>`要素を使用する場合は`alt`属性を付与する

#### 目的
画像上の選択可能領域と同じ役割を果たすテキストによる代替を提供することで、ユーザーが各エリアの目的や機能を理解できるようにする

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用するユーザー

#### 未対応例
画像の各エリアが何を表しているのか理解できず、ウェブサイトを正しく利用できなくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmMaxj" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmMaxj">
  H24: Providing text alternatives for the area elements of image maps - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
各エリアが何を表しているのかを説明する具体的な`alt`属性を付与することで、画像の各エリアが何を表しているのか理解でき、ウェブサイトを正しく利用することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyajgMG" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/dyajgMG">
  H24: Providing text alternatives for the area elements of image maps - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H28: Providing definitions for abbreviations by using the abbr element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H28

#### 要約
略語や頭字語を使用する場合、元の語や定義を`<abbr>`要素を使用して定義する

#### 目的
略語や頭字語の意味をすべてのユーザーに理解してもらうため

#### 対象
すべてのユーザー

#### 未対応例
略語や頭字語が何を指しているのか理解できず、ユーザーがウェブコンテンツのすべての情報を得られない可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxMJymV" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/xxMJymV">
  H28: Providing definitions for abbreviations by using the abbr element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
略語や頭字語の定義を提供することで、ユーザーはより情報を理解しやすくなる
`<abbr>`要素を用いると、ユーザーがマウスのポインタを重ねたときにツールチップが表示され、スクリーンリーダーでも読み上げが可能になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjxBmwK" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/JjxBmwK">
  H28: Providing definitions for abbreviations by using the abbr element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H28)のアクセシビリティ解説と[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/abbr)の`<abbr>`要素の解説で少し差がある

WCAGでは「頭字語や頭文字を含むあらゆる略語に対して、`<abbr>`要素を使用することは常に適切である」と説明されている
一方MDNでは「略語や頭字語すべてに`<abbr>`要素を使わなければならないというわけではない」と説明されている

アクセシビリティのみを考慮するのであればあらゆる略語に対して、`<abbr>`要素を使用することがベストプラクティスだと思われるが、一部の略語が非常に頻繁に使用され、それらの使用によってコンテンツが読みにくくなる場合などは、適切なバランスを見つけることも重要である
:::


### H30: Providing link text that describes the purpose of a link for anchor elements
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H30

#### 要約
`<a>`要素のリンクテキストを提供して、リンクの目的を説明する

#### 目的
リンクテキストを`<a>`要素のコンテンツとして提供することにより、リンクの目的をユーザーに伝える

#### 対象
すべてのユーザー

#### 未対応例
リンクテキストがリンク先のコンテンツを明確にしないために、ユーザビリティとアクセシビリティが損なわれる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGzjQdz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/bGzjQdz">
  H30: Providing link text that describes the purpose of a link for anchor elements - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
リンクテキストがリンク先のコンテンツを明確に示すことで、ユーザーが情報を効果的に理解しアクセスできるようになる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOdpQPj" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/jOdpQPj">
  H30: Providing link text that describes the purpose of a link for anchor elements - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

画像をリンクとして使用する場合は、`<img>`要素の`alt`属性にリンク先のコンテンツを理解できるテキストを指定する
なお、テキストを画面に無理やり表示させる必要はないが、`alt`属性の使用は必須である

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZqQOL" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZqQOL">
  H30: Providing link text that describes the purpose of a link for anchor elements - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
リンクが画像とテキストの両方を包含している場合、テキストの内容によって`<img>`要素の`alt`属性を使い分ける必要がある

もしリンクの目的がテキストによって十分に説明されている場合、そのリンクに含まれる画像は追加情報を提供しないため、その画像の代替テキストは空（`alt=""`）にしても問題ない
この場合、スクリーンリーダーは画像を無視し、テキストリンクのみを読み上げる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRzBwwe" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/GRzBwwe">
  H30: Providing link text that describes the purpose of a link for anchor elements - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

しかし、もし画像がリンクの目的とは別の追加情報を提供する場合（例えば、画像が記事のサムネイルで、その記事の内容に関する情報を視覚的に提供している場合など）、その画像には適切な代替テキストが提供されるべきである
この場合、スクリーンリーダーはテキストリンクと画像の代替テキストの両方を読み上げる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="VwgBVNE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/VwgBVNE">
  H30: Providing link text that describes the purpose of a link for anchor elements - after4</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H40: Using description lists
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H40

#### 要約
用語とその定義、質問とその回答などペアで関連する情報をリスト化する場合は、情報、構造、および関係性を適切に伝えるために、`<dl>`要素（説明リスト）、`<dt>`要素（用語）、`<dd>`要素（定義）を使用する

#### 目的
ペアで関連する情報の構造と関係性を正確に伝えることで、ウェブコンテンツをより理解しやすくする

#### 対象
すべてのユーザー
→ 特に視覚障害者や認知機能の制限があるユーザー

#### 未対応例
情報の構造や関係性が不明瞭になり、ユーザーに混乱を招く可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxLBJQ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxLBJQ">
  H40: Using description lists - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
情報の構造と関係性が明確になり、すべてのユーザーにとってコンテンツを理解しやすくなる


<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOPNXO" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOPNXO">
  H40: Using description lists - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H53: Using the body of the object element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H53

#### 要約
`<object>`要素を使用する場合、その中にテキストによる代替コンテンツを含めて、画像や動画などの非テキストコンテンツの代替を提供する

#### 目的
視覚障害を持つユーザーや、何らかの理由で非テキストコンテンツを見ることができない、または非テキストコンテンツが読み込まれなかったり、ユーザーが意図的に非テキストコンテンツを無効にしている場合に、コンテンツの内容を理解することができるようにする

#### 対象
視覚障害を持つユーザーや、何らかの理由で非テキストコンテンツを見ることができない、非テキストコンテンツが読み込まれない、意図的に非テキストコンテンツを無効にしているユーザー

#### 未対応例
非テキストコンテンツがレンダリングできないときに、そのコンテンツの情報を得ることができない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyaLayN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/dyaLayN">
  H53: Using the body of the object element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`<object>`要素の中にテキストを入れることで、非テキストコンテンツがレンダリングできないときでも、そのコンテンツの情報を得ることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbMbYZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbMbYZ">
  H53: Using the body of the object element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
非テキストコンテンツが正常に読み込まれてレンダリングが成功した場合、代替テキストは表示されない


<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPXaGd" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPXaGd">
  H53: Using the body of the object element - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H54: Using the dfn element to identify the defining instance of a word
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H54

#### 要約
何らかの用語の初出や重要な用語の定義について説明する際に、`<dfn>`要素を使用してその用語をマークアップする

#### 目的
単語またはフレーズの定義を最初に提供することで、ユーザーが内容を理解するのを支援する

#### 対象
すべてのユーザー
→ 特に用語や専門用語に慣れていないユーザー

#### 未対応例
ユーザーはテキストの特定の部分や用語の意味を理解するのが困難になることがある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="VwgNgKz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/VwgNgKz">
  H54: Using the dfn element to identify the defining instance of a word - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーは単語やフレーズの定義を簡単に理解でき、結果として全体的なページ内容の理解が向上する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYPYKo" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYPYKo">
  H54: Using the dfn element to identify the defining instance of a word - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
定義する用語が何度も出現する場合、一般的には最初に出現する用語にだけ`<dfn>`要素で囲むようにする
また`<dfn>`要素は用語自体を囲むために使用され、その定義を囲むわけではないことに注意する必要がある

なお、[H28: Providing definitions for abbreviations by using the abbr element](#h28-providing-definitions-for-abbreviations-by-using-the-abbr-element)で紹介されている`<abbr>`要素と組み合わせると、よりアクセシビリティを向上させることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNPVmRP" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/WNPVmRP">
  H54: Using the dfn element to identify the defining instance of a word - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H59: Using the link element and navigation tools
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H59

#### 要約
`<head>`要素の中で`<link>`要素を使い、`rel`属性や`href`属性を用いてウェブサイトのナビゲーションを向上させる

#### 目的
HTMLページがウェブサイトの中でどの位置にあるのかを示す情報（メタデータ）を提供し、ユーザーがウェブサイト全体から特定のコンテンツを効率的に発見できることを支援する

#### 対象
すべてのユーザー

#### 未対応例
ユーザーが現在表示しているページの情報やコンテンツを見つけるのに苦労する可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBMgLb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBMgLb">
  H59: Using the link element and navigation tools - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ウェブサイトのアクセシビリティが改善され、すべてのユーザーが情報を容易に見つけられるようになる
これにより、ウェブサイトのユーザビリティが向上し、結果としてUXも向上する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJdGqEy" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/OJdGqEy">
  H59: Using the link element and navigation tools - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H62: Using the ruby element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H62

#### 要約
`<ruby>`要素, `<rp>`要素, `<rt>`要素を使用してルビを振るようにする

#### 目的
テキストの読み方を示す注釈を提供し、コンテンツを理解するのに必要な情報をユーザーに提供する

#### 対象
- 日本語や中国語などの東アジアの言語を学習しているユーザー
- 読解能力に課題を持つユーザー
- 視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ユーザーはテキストの正しい読み方を理解するのが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbwyVR" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbwyVR">
  H62: Using the ruby element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーはテキストの読み方を直接見ることができ、コンテンツの理解が容易になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdvYOzK" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/mdvYOzK">
  H62: Using the ruby element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
ルビは主に、既にその言語に精通しているが、特定の単語やフレーズの読み方が難しいユーザーに対して提供される

例えば日本語のコンテンツの場合、日本語を理解しているが特定の単語やフレーズの読み方が難しい日本語話者に対しては、ルビを振ることでコンテンツの理解に役立つが、日本語を全く理解していない外国人などのユーザーに対しては、読み方を教える目的でルビを振ることは一般的には行われない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abXgyBa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/abXgyBa">
  H62: Using the ruby element - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H69: Providing heading elements at the beginning of each section of content
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H69

#### 要約
コンテンツの各セクションの開始位置に見出し要素（`<h1>` ~ `<h6>`）を提供する

#### 目的
見出し要素を使用して論理的な階層構造をマークアップすることで、ユーザーがコンテンツの構造を理解しやすくなり、特定の情報を迅速に探すことができるようになる

#### 対象
すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
見出し要素がない場合、ユーザーはコンテンツのセクションを識別し理解することが困難となる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOdoyZM" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/jOdoyZM">
  H69: Providing heading elements at the beginning of each section of content - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
見出しを提供することで、ユーザーは各セクションの内容を素早く理解し、関連する情報を効率的に見つけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxMNgYj" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/xxMNgYj">
  H69: Providing heading elements at the beginning of each section of content - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H76: Using meta refresh to create an instant client-side redirect
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H76

#### 要約
クライアント側で即時リダイレクトを行う場合は、`<meta>`要素の`http-equiv`属性を`"refresh"`とし、`content`属性に`0;URL=[リダイレクト先のURL]`を指定する

#### 目的
ユーザーが混乱することなく、即時に新しいページにリダイレクトすることを可能にする

#### 対象
すべてのユーザー

#### 未対応例
クライアント側で即時リダイレクトを行わず、ユーザーが手動でリンクを選択して遷移する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="VwgOVwX" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/VwgOVwX">
  H76: Using meta refresh to create an instant client-side redirect - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`<meta>`要素を使用してクライアント側で即時リダイレクトを実装する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWoVEKZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/NWoVEKZ">
  Untitled</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
自動リダイレクトの実装については、通常、サーバー側の技術を用いることが推奨される
しかし、[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H76)では、サーバー側の技術で制御が困難な場合に限り、クライアント側でリダイレクトを実装してもよいとされている

一方[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)では、自動リダイレクトによってスクリーンリーダーなどの支援技術を利用するユーザーや弱視のユーザーが混乱を引き起こす可能性があると警告している

WCAGの[タイミング調節可能](https://www.w3.org/TR/WCAG22/#timing-adjustable)や[割り込み回避](https://www.w3.org/TR/WCAG22/#interruptions)といった達成基準を考慮すると、自動リダイレクトはこれらの基準に反する可能性があるため、実装にあたっては以下のような対策が推奨される

- ユーザーに対して明確な通知を行う
- リダイレクトまでの猶予時間を設ける
- ユーザーがリダイレクトを自ら制御できるようにする
:::


### H83: Using the target attribute to open a new window on user request and indicating this in link text
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H83

#### 要約
新規ウィンドウやタブで開くリンクを作成する場合は、`target`属性を使用し、リンクテキストを明記する

#### 目的
ユーザーが意図せずに新しいウィンドウやタブが開くことによる混乱を避ける

#### 対象
- 視覚障害者や認知障害者を含むスクリーンリーダーなどの支援技術を利用するユーザー
- 新しいウィンドウやタブが開くことによる混乱を避けたいすべてのユーザー

#### 未対応例
新しいウィンドウやタブが予期せずに開くことでユーザーが混乱し、ウェブサイトのナビゲーションが困難になる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJdYqge" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/OJdYqge">
  H83: Using the target attribute to open a new window on user request and indicating this in link text - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
新しいウィンドウやタブでリンクが開くことをリンクテキストに明記することで、ユーザーは操作を行う前に情報を得ることができ、予期しないウィンドウやタブが開くことによる混乱を回避することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPgRzm" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPgRzm">
  H83: Using the target attribute to open a new window on user request and indicating this in link text - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
テキストとして入れずにアイコンなどで表現することも可能だが、特にスクリーンリーダーなどの支援技術を利用するユーザーを考慮して`aria-label`属性の指定や[H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak](#h86-providing-text-alternatives-for-emojis-emoticons-ascii-art-and-leetspeak)の対応を行う必要がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZmdJd" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZmdJd">
  H83: Using the target attribute to open a new window on user request and indicating this in link text - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::

:::note warn
`target`属性を使用しないことで、ユーザー自身がリンク先を新しいウィンドウやタブで開くかどうかを選択できるようになる
ウェブブラウザでは、リンクを通常クリックすると「現在開いているタブで開く」、またはリンクを右クリックすると「新しいタブで開く」または「新しいウィンドウで開く」を選択することができる

`target`属性を使用すると、リンクは常に新しいタブまたはウィンドウで開かれるため、ユーザーの選択の自由が制限される
そのため、ユーザーの選択の自由を尊重する観点から、実装する機能や目的に応じて`target`属性の使用を検討することが重要である
:::


### H89: Using the title attribute to provide context-sensitive help
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H89

#### 要約
`title`属性を使用して、フォームの入力フィールドに応じたヘルプ（書式情報や入力例など）を提供する

#### 目的
`title`属性にヘルプ情報を記載することで、フォームの入力フィールドに対する追加的な情報やヒントを提供し、すべてのユーザーが適切に入力できるよう支援する

#### 対象
すべてのユーザー
→ 特に視覚障害者や認知障害者

#### 未対応例
`title`属性がない場合、特定の要素やオブジェクトに関する補足情報をユーザーが取得できず、ウェブサイトの使用が困難になる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYRePm" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYRePm">
  H89: Using the title attribute to provide context-sensitive help - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`title`属性を使用して説明を提供することで、ユーザーは特定の要素やオブジェクトの目的や使用方法を理解しやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZWmrx" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZWmrx">
  H89: Using the title attribute to provide context-sensitive help - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H89)では「`title`属性によるヘルプ情報の提供だけを行うのではなく、他の方法と併用してユーザーを支援すべきだ」と明記されている

現在のブラウザやスクリーンリーダーなどの支援技術のすべてが`title`属性に記載された情報をユーザーに提供しているわけではない
そのため、`title`属性だけに頼るのではなく、他の技術との併用が必要であることが勧告されている

一例として`<label>`要素や`aria-describedby`属性を用いて明示的に説明を提供することが推奨されている
`placeholder`属性を用いて入力例を提供することも有効だが、`placeholder`属性のテキストは入力を開始すると消えてしまうため、ユーザーが入力中に参照することができなくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBoeQN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBoeQN">
  H89: Using the title attribute to provide context-sensitive help - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H96: Using the track element to provide audio descriptions
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H96

#### 要約
`<video>`要素を用いる際、視覚情報を補完する音声解説を提供するために`<track>`要素を使用する

#### 目的
視覚情報を音声で補足することにより、視覚障害を持つユーザーが動画の内容をより深く理解できるようにする

#### 対象
視覚障害者や、視覚情報にアクセスするのが困難または不可能なユーザー
例えば運転中のユーザーや、環境光の影響で画面が見えにくいユーザーなど

#### 未対応の一例
映像によってユーザーは映像の内容を十分に理解できない可能性がある
これは映像コンテンツの利便性とアクセシビリティを低下させ、排他的な体験をもたらす可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYaPZNb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/LYaPZNb">
  H96: Using the track element to provide audio descriptions - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
映像を一時停止して音声による説明が追加されている
これにより、視覚障害のあるユーザーや視覚情報にアクセスできないユーザーが、映像コンテンツの内容を理解できるようになる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BabBzKV" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/BabBzKV">
  H96: Using the track element to provide audio descriptions - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
上で挙げた例は`<track>`要素を使用しているものではないが、視覚障害者が動画を視聴した際に音声による補足情報を提供することで、動画の内容を理解する手助けとなることを示している

また、映像コンテンツ内で視覚情報が不足している場合、音声がない部分で映像と音声解説が同時に流すようにすることもある
一例として、映画でキャラクターが話していないシーンで、そのシーンの視覚的な要素を説明する音声が流すようにすることで動画の内容をより理解できるようにする
:::


### H100: Providing properly marked up email and password inputs
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H100

#### 要約
ログインフォームでメールアドレスとパスワードの入力フィールドを使用する際に、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドを正確に識別できるように`type`属性（例: `type="email"`, `type="password"`）を適切に設定する

#### 目的
ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識し、適切な入力支援を提供できるようにするため

#### 対象
すべてのユーザー
→ 特に記憶に自信がないユーザーや、入力の効率を向上させたいユーザー

#### 未対応例
`type`属性が適切に設定されていない（`type="text"`）ため、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識できず、入力時のユーザーサポートが不十分になる場合がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="RwvzwYd" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/RwvzwYd">
  H100: Providing properly marked up email and password inputs - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`type`属性を適切に設定する（`type="email"`, `type="password"`）ことで、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識し、キーボードの最適化や入力エラーの検出、自動入力などのユーザーサポートが提供される

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKJjKGg" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/KKJjKGg">
  H100: Providing properly marked up email and password inputs - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
[H98: Using HTML 5.2 autocomplete attributes](#h98-using-html-52-autocomplete-attributes)の`autocomplete`属性と組み合わせて実装することでユーザーエージェント（ブラウザやパスワードマネージャーなど）によるユーザーサポート + ユーザーによって以前入力された内容を再利用することができるため、よりユーザビリティを向上させることができる

そのためなるべく組み合わせて実装するのが望ましい
:::











## AA
### H58: Using language attributes to identify changes in the human language
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H58

#### 要約
文章の途中で言語が変わる場合は`lang`属性を使用して明示する

#### 目的
`lang`属性を用いることで、ページ上の言語変更をスクリーンリーダーなどの支援技術に明示し、ユーザーが内容を正しく理解してナビゲートできるようにする

#### 対象
盲目のユーザーや、視覚障害者、非母語話者など、スクリーンリーダーなどの支援技術を利用するユーザー

#### 未対応例
正しく設定されていない場合、異なる言語の文章が正しく読み上げられず、理解が困難になる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZrwVg" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZrwVg">
  H58: Using language attributes to identify changes in the human language - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
言語属性が適切に設定されている場合、スクリーンリーダーなどの支援技術はそれぞれの言語に適した発音で文章を読み上げる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyaLrOg" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/dyaLrOg">
  H58: Using language attributes to identify changes in the human language - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H98: Using HTML 5.2 autocomplete attributes
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H98

#### 要約
`input`要素に`autocomplete`属性を使用する

#### 目的
`autocomplete`属性を指定することでユーザーが前回のフォーム送信時にブラウザに入力した情報を保存することができ、次回以降同じ種類の情報を再度入力する際に、自動的にその情報を提供することができる
これにより、ユーザーは情報の再入力を省くことができ、誤入力のリスクも減らすことができる

#### 対象
すべてのユーザー
→ 特に身体的障害や記憶障害を持つユーザー

#### 未対応例
ユーザーは同じ情報を何度も入力する必要がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmrNxE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmrNxE">
  H98: Using HTML 5.2 autocomplete attributes - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーは以前に入力した情報を再利用してフォームを迅速に入力することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbqYGa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbqYGa">
  H98: Using HTML 5.2 autocomplete attributes - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
[H100: Providing properly marked up email and password inputs](#h100-providing-properly-marked-up-email-and-password-inputs)にも記載したが、`H98`と`H100`はともにフォーム入力のアクセシビリティとユーザビリティの向上を目的としている

この2つを組み合わせて実装することで、ユーザビリティをより向上させることができる
:::








## A
### H2: Combining adjacent image and text links for the same resource
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H2

#### 要約
画像とテキストのリンクが同じリソースを指している場合は、両方を含む1つの`<a>`要素を用いて実装する

#### 目的
キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザーが混乱やサイト利用が困難にならないようにするため、リンク情報を明確かつ一貫性のある方法で提供する

#### 対象
キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
テキストリンクと画像リンクがそれぞれ別の`<a>`要素として実装されている場合、以下の問題が発生する可能性がある
- スクリーンリーダーが別々のリンクと判断し、同じリソースへのリンクを繰り返し読み上げる
- キーボードの`tab`キーを使用してナビゲーションする際、テキストリンクと画像リンクの両方でフォーカスが停止し、余分な操作が必要になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MWLBBxJ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/MWLBBxJ">
  H2: Combining adjacent image and text links for the same resource - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
テキストリンクと画像リンクを1つの`<a>`要素内に組み合わせることで、以下の利点がある
- スクリーンリーダーが1つのリンクとして認識し、一度だけ読み上げる
- キーボードの`tab`キーでのナビゲーション時に1つのリンクにのみフォーカスが当たり、より効率的な操作が可能になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbazxo" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbazxo">
  H2: Combining adjacent image and text links for the same resource - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H25: Providing a title using the title element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H25

#### 要約
`<head>`要素の中に`<title>`要素を挿入して、ウェブブラウザのタブ、履歴、お気に入りリストから該当のページを容易に見つけられるようにする

#### 目的
ページの全文を読むことなく、ユーザーがウェブサイト内での現在の位置を素早く把握できるようにする

#### 対象
すべてのユーザー
→ 視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ユーザーがページの内容や目的を素早く理解することが難しくなり、アクセシビリティが低下する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmMayY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmMayY">
  H25: Providing a title using the title element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーがページの内容や目的をより素早く理解しやすくなり、アクセシビリティが向上する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBjJvV" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBjJvV">
  H25: Providing a title using the title element - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
`<title>`要素にはページの内容や目的を簡潔かつ明確に表現する内容を含めるべきであり、同じタイトルを複数のページで使用しないように注意する必要がある
これはユーザーがブラウザのブラウザのタブ、履歴、お気に入りリストから該当のページを特定しやすくするためにも重要な役割を果たす

また、似たようなものとしてほとんどのHTML要素に指定可能な`title`属性があるが、こちらは補足情報を提供するためのものであって、ページを識別する主要な手段ではない。`<head>`要素の中に1つだけ存在する`<title>`にはページ全体の内容を正確に反映させるようにすべきである
:::


### H32: Providing submit buttons
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H32

#### 要約
フォーム内に送信ボタンを提供する

#### 目的
キーボード操作だけではなく、マウスやタッチ操作を主に使用するユーザーもフォームを容易に送信できるようにする
これによりすべてのユーザーが等しくサービスを利用できる環境を提供する

#### 対象
すべてのユーザー
→ 特にキーボードを利用しているユーザーや、マウスやタッチ操作を主に使用するユーザー

#### 未対応例
送信ボタンが存在しないと、ユーザーはフォームを送信できず、ユーザー体験が悪化する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abXjPoY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/abXjPoY">
  H32: Providing submit buttons - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
送信ボタンを追加することで、ユーザーはフォームを送信することができ、ユーザー体験が向上する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poGZqoR" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/poGZqoR">
  H32: Providing submit buttons - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H33: Supplementing link text with the title attribute
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H33

#### 要約
`<a>`要素で作成したリンクテキストに`title`属性を付ける

#### 目的
視覚的なヒントが少ないもしくは存在しない場合に、リンクの目的をユーザーにより良く理解させる

#### 対象
スクリーンリーダーなどの支援技術を利用しているユーザーやマウスオーバーを使ってリンクの詳細を確認するユーザー

#### 未対応例
リンクの目的が不明確なままとなり、ユーザーの理解を妨げる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOBGWX" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOBGWX">
  H33: Supplementing link text with the title attribute - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`title`属性を指定することでリンクの目的をより明確に理解することが可能となる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRzbzbx" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/GRzbzbx">
  H33: Supplementing link text with the title attribute - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
リンク先の重要な情報や警告など、リンクをクリックする前にユーザーが知っておくべき内容は、`title`属性ではなく直接リンクテキストとして提供すべきである
`title`属性はホバーや特定のスクリーンリーダーを使用しているユーザーだけがアクセスできる補足情報を提供するためのものであり、重要な情報はすべてのユーザーがアクセスできる形で提供するべきである

例として「リンクの遷移先はマイページである」という情報はすべてのユーザーが知っておくべき情報となる
この場合、リンクのテキストにその情報を含めるか、リンクテキストと一緒に画像を使用する場合は`alt`属性を用いてスクリーンユーザーなどの支援技術を利用しているユーザーも含め、すべてのユーザーが認知できるようにする必要がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYeLbYq" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/zYeLbYq">
  H33: Supplementing link text with the title attribute - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::

:::note warn
[こちらの警告欄](#h89-using-the-title-attribute-to-provide-context-sensitive-help)でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーなどの支援技術のすべてが`title`属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、`title`属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H33)では一例として、[C7 Using CSS to hide a portion of the link text](https://www.w3.org/WAI/WCAG22/Techniques/css/C7)や[H30: Providing link text that describes the purpose of a link for anchor elements](#h30-providing-link-text-that-describes-the-purpose-of-a-link-for-anchor-elements)を活用すべきだと記載されている
:::


### H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H34

#### 要約
ウェブページ上で異なるテキストの読み方向を明示するために、`Unicode`の`RLM（Right-to-Left Mark）`または`LRM（Left-to-Right Mark）`を使用する

#### 目的
異なる文字方向を持つテキスト要素が正確に表示され、ユーザーが容易に読み取れるようにする

#### 対象
- 多言語を扱うウェブサイトやアプリケーションで、テキストの方向が異なる場合
- 右から左に読む言語（アラビア語やヘブライ語など）を使用するユーザー
- スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ブラウザはテキストの方向を正しく解釈できず、テキストが不適切に表示される可能性がある
また、スクリーンリーダーなどの支援技術では正しく読み上げられない可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPrRwM" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPrRwM">
  H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ブラウザはテキストの方向を正しく解釈し、適切に表示することができる
`Unicode`の`RLM（Right-to-Left Mark）`や`LRM（Left-to-Right Mark）`を使用することで、スクリーンリーダーはテキストを適切な方向で読み上げることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYeLbzN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/zYeLbzN">
  H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
上の対応例に記載しているコード内のそれぞれの文字は以下の通りとなる
これらはすべて特殊な非印刷文字となっているため画面に表示されない

- `&rlm;`, `&#x200F;`, `&#8207;`が`RLM（Right-to-Left Mark）`
- `&lrm;`, `&#x200E;`, `&#8206;`が`LRM（Left-to-Right Mark）`

記述方法としては、右から左へ読むアラビア文字の前後にそれぞれ`RLM（Right-to-Left Mark）`と`LRM（Left-to-Right Mark）`を指定することで、アラビア文字の部分は右から左へ、その他の部分は左から右へ読むようにと明示することができる

HTMLのコードを見るとアラビア文字が`&#8207;`と`&#8206;`の間にないように見えるが、画面にこれらが表示されない場合、動作としては正常である
:::

:::note warn
[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H34)ではこの技術の概念として[こちら](https://www.w3.org/International/articles/inline-bidi-markup/)の記事が紹介されており、そちらでは対応方法として[H56: Using the dir attribute on an inline element to resolve problems with nested directional runs](#h56-using-the-dir-attribute-on-an-inline-element-to-resolve-problems-with-nested-directional-runs)で紹介されている`dir`属性を使用してテキストの方向を指定する方法が推奨されている

基本的にはdir属性を用いてテキストの方向を指定するだけで大半の状況を制御することが可能だが、一部の複雑な状況では制御しきれない場合がある。その時は、RLMやLRMを用いてより詳細に制御を行うことで問題を解決することができる。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOLQrz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOLQrz">
  H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H36: Using alt attributes on images used as submit buttons
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H36

#### 要約
`<input>`要素の`type="image"`を用いる場合は`alt`属性を必ず含めるようにする

#### 目的
視覚障害者が画像ボタンの機能を理解し、適切にウェブサイトを操作できるようにする

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
`alt`属性が欠けていると、スクリーンリーダーは画像のファイル名を読み上げるか、または何も読み上げない場合がある
その結果、ユーザーは画像ボタンの機能や目的を理解できない可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYqJZwr" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/LYqJZwr">
  H36: Using alt attributes on images used as submit buttons - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`alt`属性を使用すると、スクリーンリーダーはそのテキストを読み上げ、画像ボタンの機能や目的を理解することができる
なお、`alt`属性には画像の説明をするのではなく、ボタンの機能に関する説明文を含める必要がある
同一ページ内にそれぞれ異なる動作をする複数の送信/実行ボタンがある場合、そのボタンのラベルは特に重要である

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmPLKM" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmPLKM">
  H36: Using alt attributes on images used as submit buttons - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H37: Using alt attributes on img elements
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H37

#### 要約
`<img>`要素を使用するときは、画像が伝える内容や機能を表現する短いテキストを`alt`属性に指定する

#### 目的
画像に重要な情報が含まれる場合、その情報を代替テキストに含めることで、画像と同じ役割を果たすことができる

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー
または画像が読み込めない環境にあるユーザー

#### 未対応例
`alt`属性がない場合、スクリーンリーダーは画像のファイル名を読み上げるか、または何も読み上げない場合がある
さらに画像が表示されない場合、代替テキストがないためユーザーは画像の内容を理解する手段がなくなってしまう
これにより、ウェブサイトの利用に支障をきたし、アクセシビリティが損なわれる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNPgGqE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/WNPgGqE">
  H37: Using alt attributes on img elements - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`alt`属性がある場合、スクリーンリーダーは代替テキストを読み上げる
また、画像が表示されない状況でも、ユーザーは代替テキストを通じて画像の情報を得ることが可能である

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBgMavw" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/qBgMavw">
  H37: Using alt attributes on img elements - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
`alt`属性に指定するテキストは、視覚的な特徴を説明するのではなく、画像が伝えようとしている情報や意図をユーザーが理解できるような内容を含むべきである

例えば、上の対応例に記載されているサンプルコードでは、`alt`属性のテキストを「りんごの生産量グラフ」とすると、テキストは視覚的な特徴のみを伝えるため、画像を見ることができないユーザーは画像が伝えるべき具体的な情報を得ることができない
そのため、画像が伝えるべき情報を具体的に示すテキストを`alt`属性に設定することが推奨される
:::

:::note info
背景や境界線など、画像が装飾的な目的のみを果たし、コンテンツの理解には必要ない場合、その画像は`alt`属性を空にするか、`role="presentation"`属性を使用してマークアップすることが推奨される
これにより、スクリーンリーダーはその画像を無視することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKJxgYy" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/KKJxgYy">
  H37: Using alt attributes on img elements - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H39: Using caption elements to associate data table captions with data tables
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H39

#### 要約
`<table>`要素を用いる場合は、その内容を説明する`<caption>`要素を使用する

#### 目的
`<table>`要素と`<caption>`要素を関連付けることで、表のデータとその概要をプログラム的に関連付ける
それにより、テーブルが何を表しているかをユーザーが直観的に理解しやすくする

#### 対象
すべてのユーザー
→ 特に視覚障害を持つユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
`<caption>`要素を使用しない場合、ユーザーはテーブルの目的や内容を理解しにくい
特にスクリーンリーダーなどの支援技術を利用しているユーザーは、テーブルの構造を理解するのが難しくなる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="RwvYoNr" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/RwvYoNr">
  H39: Using caption elements to associate data table captions with data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
テーブルの目的や内容が明確になり、すべてのユーザーがテーブルの内容をよりよく理解することができるようになる
特にスクリーンリーダーなどの支援技術を利用しているユーザーは、標題（`caption`要素）が読み上げられることによってテーブルの内容を把握しやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPZWaQ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPZWaQ">
  H39: Using caption elements to associate data table captions with data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
`<table>`要素をレイアウト目的で使用する場合は`<caption>`要素を使用する必要はない

レイアウトテーブルは要素のコンテンツの配置を制御することが目的であり、ユーザーにとってテーブルそのものは見えない（意識されない）ものであるべきと考えられている
このようなテーブルに`<caption>`要素を使用すると、スクリーンリーダーなどの支援技術がこのテーブルに注目し（読み上げるなどしてしまう）、ユーザーが混乱する可能性がある
そのため、マークアップする際はそのテーブルがどのような目的で使用されているのかを考慮し、`<caption>`要素を入れる必要があるかどうかを検討することが重要である

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="wvNLZxg" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/wvNLZxg">
  H39: Using caption elements to associate data table captions with data tables - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H42: Using h1-h6 to identify headings
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H42

#### 要約
見出しを識別するための見出し要素（`<h1>` ~ `<h6>`）を使用する

#### 目的
コンテンツの構造と情報の階層性を明確にする
見出しタグは、情報の流れとその重要性を視覚的に表現できるだけではなく、HTMLの構造的な意味も持つ
これにより、視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーが、情報を容易に理解し、ページをナビゲートすることが可能となる

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
適切な見出し要素を使用しないと、ユーザーがページの構造や内容を理解するのが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="RwvYXGv" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/RwvYXGv">
  H42: Using h1-h6 to identify headings - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
適切な見出し要素を使用すると、すべてのユーザーがページの構造を理解しやすくなり、情報を効率的に探すことが可能となる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="PoVdMGr" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/PoVdMGr">
  H42: Using h1-h6 to identify headings - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
基本的には見出し要素は連続的（`<h1>`要素の子要素には`<h2>`要素を用いる）に適用する必要がある
SEOへの影響に関して議論があるものの、アクセシビリティを考慮すると、見出し要素は連続的に順序を守って記述することが推奨されている
:::


### H43: Using id and headers attributes to associate data cells with header cells in data tables
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H43

#### 要約
`<table>`要素を使用して作成したデータテーブルにおいて、データセルが複数の行や列のヘッダーセルと関連付けられている場合、`id`属性と`headers`属性を使用して紐付けをする

#### 目的
視覚障害者や認知障害を持つユーザーがテーブルの構造と関連性を適切に理解できるようにする

#### 対象
視覚障害者や認知障害者、またはスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
テーブルのデータが適切に解釈されず、どのデータセルがどのヘッダーセルと紐づいているのか識別することが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poGYYRw" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/poGYYRw">
  H43: Using id and headers attributes to associate data cells with header cells in data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
テーブルに`id`属性と`headers`属性を用いて紐付けを行うことで、ユーザーはどのデータセルがどのヘッダーセルと紐づいているのか識別することが可能となる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abXMMpj" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/abXMMpj">
  H43: Using id and headers attributes to associate data cells with header cells in data tables - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
[こちらの警告欄](#h39-using-caption-elements-to-associate-data-table-captions-with-data-tables)に記載した内容と重複するが、データを表示する目的ではなくレイアウト目的で`<table>`要素を用いた場合は、セルとヘッダーを紐づける必要がないため、`id`属性と`headers`属性を用いる必要はない
紐づけようとした場合、ユーザーにとって意味がない要素に対してスクリーンリーダーなどの支援技術がこのテーブルに注目（読み上げるなどの動作をする）し、ユーザーが混乱する可能性があるためである
:::


### H44: Using label elements to associate text labels with form controls
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H44

#### 要約
フォームコントロールに`<input>`要素を使用する際は、`<label>`要素を使って関連付け、ラベルとコントロールの関係を明確にする

#### 目的
フォームコントロールの目的を明確にし、その目的を視覚的にも聴覚的にもユーザーに伝えることで、ユーザビリティを向上させる

#### 対象
すべてのユーザー
→ 特に視覚障害者、認知障害者、およびスクリーンリーダーなどの支援技術を利用するユーザー

#### 未対応例
未対応の場合、視覚障害のあるユーザーがフォームコントロールを適切に理解できない可能性がある
また、フォーム要素がラベルに囲まれていない場合、クリック可能な領域が限定され、操作性が低下する
以下は`<span>`要素を使用した例であり、`span`要素をクリックしても入力フィールドにフォーカスは当たらない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poGYYpW" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/poGYYpW">
  H44: Using label elements to associate text labels with form controls - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ラベルが適切に関連付けられると、画面読み上げツールはフォームコントロールとラベルを一緒に読み上げ、ユーザーはそのコントロールの目的をより容易に理解できるようになる
`<label>`要素をクリックすると入力フィールドにフォーカスが当たる
紐づける際は、`<label>`要素の`for`属性と`<input>`要素の`id`属性を一致させる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOGGVY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOGGVY">
  H44: Using label elements to associate text labels with form controls - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
以下は`<label>`要素を用いて関連付けることが推奨されるフォームコントロールの一例である

- テキスト入力フィールド（`<input type="text">`, `<input type="password">`など）
- チェックボックス（`<input type="checkbox">`）
- カラーピッカー（`<input type="color">`）
- ファイル選択ボタン（`<input type="file">`）
- ラジオボタン（`<input type="radio">`）
- ダイアルコントロール（`<input type="range">`）
- セレクトボックス（`<select>`）
- テキストエリア（`<textarea>`）

一方、通常は`<label>`要素の使用が不要または推奨されないフォームコントロールは以下となる
- 送信およびリセットボタン ( `<input type="submit">`, `<input type="reset">`)
- 画像ボタン ( `<input type="image">`)
- 隠しフィールド ( `<input type="hidden">`)
- スクリプトボタン (`<button>`, `<input type="button">` )

ただし、これらの要素に対しても、ユーザーがコントロールをより明確に識別できるようにする、または追加情報を提供するために、特定の状況や要件に応じて`<label>`要素を用いることが適切な場合がある
実装内容や状況によって使い分けることを検討する必要がある
:::

:::note info
`<input type="radio">`や`<input type="checkbox">`を使用する場合、関連するテキストをラベルとして提供することが重要である
理由としては、ラベルを介してユーザーはどの選択肢を選択しているのかをより明確に識別できるためである

選択要素（ラジオボタンやチェックボックス）の後ろに選択肢のテキストを配置することが一般的であるため、通常`<label>`要素を用いて実装する場合は入力要素の後に配置する
ただし、さらにユーザビリティを向上させるために`<label>`要素で`<input>`要素とテキストを囲む方法もある
これによりクリック可能な領域が拡大し、操作が容易になる

`<input>`要素の後ろに`<label>`要素を指定する方法
枠線で囲まれた部分をクリックするとチェックをつけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxqmOR" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxqmOR">
  H44: Using label elements to associate text labels with form controls - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`<label>`要素で`<input>`要素とテキストを囲む方法
上と同じように枠線で囲まれた部分をクリックするとチェックをつけることができ、より広いクリック可能領域を提供する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPXbVm" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPXbVm">
  H44: Using label elements to associate text labels with form controls - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H48: Using ol, ul and dl for lists or groups of links
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H48

#### 要約
リストやリンクグループを作成する場合は`<ol>`要素, `<ul>`要素, `<dl>`要素を用いる

#### 目的
ウェブページ上の情報を整理し、視覚的にも聴覚的にも、特にスクリーンリーダーなどの支援技術を利用しているユーザーにとって理解しやすい形で提供する

#### 対象
すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ユーザーがリストの開始と終了を正確に把握することが難しくなり、情報を理解するのが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abXMMRX" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/abXMMRX">
  H48: Using ol, ul and dl for lists or groups of links - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
リスト要素を使用すると、情報が適切に構造化され、すべてのユーザーが情報を理解しやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBgvvJG" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/qBgvvJG">
  H48: Using ol, ul and dl for lists or groups of links - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
`<ol>`要素, `<ul>`要素, `<dl>`要素の使い分けとして以下のように定義されている

- `<ol>`: リストが順序付けられている場合、例えば手順やランキングリストなどに使用
- `<ul>`: リストが順序に依存しない場合、例えば一般的なリストや項目群に使用
- `<dl>`: 用語と定義や質問と回答など、情報の名前-値のペアをグループ化する場合に使用

ただし、すべてのリストがマークアップを必要とするわけではない
例えば、カンマや句点で区切られた単純な列挙の場合は、無理にリストとしてマークアップする必要はない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJdKPRP" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/OJdKPRP">
  H48: Using ol, ul and dl for lists or groups of links - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H49: Using semantic markup to mark emphasized or special text
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H49

#### 要約
特別な、または強調したいテキストに対して、意味的なマークアップ（`<strong>`要素や`<em>`要素など）を使用する

#### 目的
セマンティックHTMLを使用して強調または特別なテキストをマークアップすることで、テキストの意味が視覚的にだけでなく、プログラムによる解釈やスクリーンリーダーなどの支援技術を通じても伝わるようにする
これにより、対象となるユーザーが情報をより容易に理解できるようになる

#### 対象
視覚障害者や視覚的な強調を理解するのが難しいユーザー
またはスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
視覚的には強調されているが、意味的なマークアップが使用されていない
そのため、対象となるユーザーは、テキストが強調されていることを理解することが困難になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOGGQy" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOGGQy">
  H49: Using semantic markup to mark emphasized or special text - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
セマンティックHTMLを使用することにより、プログラムやスクリーンリーダーなどの支援技術がテキストの強調を認識し、ユーザーに伝えることができる。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjxzzVq" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/JjxzzVq">
  H49: Using semantic markup to mark emphasized or special text - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H51: Using table markup to present tabular information
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H51

#### 要約
表形式の情報を表示する場合は、`<table>`要素, `<tr>`要素, `<th>`要素, `<td>`要素を用いてマークアップする

#### 目的
テーブルを視覚的に理解することが困難なユーザーに対しても、表示形式の変更があった場合でも、テーブル内の情報とその関係性が維持されるようにマークアップする
これにより、すべてのユーザーがテーブルの情報にアクセスしやすくなる。

#### 対象
すべてのユーザー
→ 特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
以下のような見出しセル（`<th>`要素）がない場合、テーブルの構造が明確でないため、表の構造や情報を正確に把握することが困難になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XWOQojo" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/XWOQojo">
  H51: Using table markup to present tabular information - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
表の構造を明確にマークアップすることで、ユーザーが構造とデータの関係性をより容易に理解できるようになる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYeXyKe" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/zYeXyKe">
  H51: Using table markup to present tabular information - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H56: Using the dir attribute on an inline element to resolve problems with nested directional runs
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H56

#### 要約
テキストの方向を正しく指定したい場合は`dir`属性をインライン要素に使用する

#### 目的
テキストブロック内の異なる方向のテキストが混在していることによる表示の問題を解消する
特に、インライン要素に対して`dir`属性を使用すると、ネストされた異なる方向のテキストの問題を解決できる

#### 対象
右から左に読む言語を使用するユーザーや、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
未指定の場合、テキストの読みやすさが損なわれ、特に右から左に読む言語を使用するユーザーにとっては理解しづらくなる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRzLzMG" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/GRzLzMG">
  H56: Using the dir attribute on an inline element to resolve problems with nested directional runs - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
テキストの方向性を適切に指定すると、テキストはスクリーンリーダーなどの支援技術により適切に解釈され、すべてのユーザーが容易に理解できる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGzJzoz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/bGzJzoz">
  H56: Using the dir attribute on an inline element to resolve problems with nested directional runs - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H57: Using the language attribute on the HTML element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H57

#### 要約
`<html>`要素に`lang`属性を指定する

#### 目的
ページの主要な言語を表す有効な言語コードを指定することで、支援ツールがページを適切に解釈し、正確に作動させるようにするため

#### 対象
特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー
または自動翻訳ツールを使用する非母国語話者

#### 未対応例
言語属性が設定されていない場合、スクリーンリーダーは適切な発音規則を適用することができず、自動翻訳ツールは原文の言語を推測しなければならない
このため、誤った発音や訳語が出力される可能性が高まる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdvgvxK" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/mdvgvxK">
  H57: Using the language attribute on the HTML element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
言語属性が正しく設定されていると、スクリーンリーダーや自動翻訳ツールはより適切な発音や翻訳を出力する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRzLzxB" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/GRzLzxB">
  H57: Using the language attribute on the HTML element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
言語コードは[BCP47](https://datatracker.ietf.org/doc/html/rfc5646)で定義されている言語タグを使用する
BCP47の読解が難しいという場合は[こちら](https://syncer.jp/html-glossary/attribute/global-attribute/lang)に記載されている主要な言語コードを使用すれば基本的に問題はない
:::

:::note info
ここでは`<html>`要素に`lang`属性を指定することでページ全体の言語を設定するが、作成するページによってはページ内に複数の言語が混在する場合がある
その場合は、[H58: Using language attributes to identify changes in the human language](#h58-using-language-attributes-to-identify-changes-in-the-human-language)のような方法を用いることを推奨する
:::


### H63: Using the scope attribute to associate header cells and data cells in data tables
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H63

#### 要約
`<table>`要素を用いて実装する際、`<th>`要素に`scope`属性を利用してヘッダーとデータセルを関連付ける

#### 目的
視覚障害や認知障害を持つユーザーがデータテーブルを理解しやすくする

#### 対象
視覚障害や認知障害を持つユーザー
特に、スクリーンリーダーなどの支援技術を利用してテーブルにアクセスするユーザー

#### 未対応例
スクリーンリーダーなどの支援技術はヘッダーとデータセルの関連性を自動的に認識できない可能性がある
これにより、ユーザーはテーブルの情報を理解するのに困難を感じる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmRYKE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmRYKE">
  H63: Using the scope attribute to associate header cells and data cells in data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`scope`属性を用いて明示的に定義することで、スクリーンリーダーなどの支援技術はヘッダーとデータセルの関連性をより正確に理解し、その情報をユーザーに伝えることが可能になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaMeQXE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/BaMeQXE">
  H63: Using the scope attribute to associate header cells and data cells in data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
ヘッダーとデータセルの紐付けに関しては[H43: Using id and headers attributes to associate data cells with header cells in data tables](#h43-using-id-and-headers-attributes-to-associate-data-cells-with-header-cells-in-data-tables)でも同じような達成基準が設定されている

おおまかには以下のような使い分けとなる
`H63`が比較的単純に、`H43`がより複雑な指定が可能となると理解しておくと良い
- `H63`: ヘッダーが複数の行や列に跨らないようなシンプルなテーブルにおいて、ヘッダーがどのセルなのか、どの方向（縦: `col`や横: `row`など）の見出しなのかを定義
- `H43`: ヘッダーが複数の行や列に跨るような複雑なテーブルにおいて、各データセルがどのヘッダーに対応するものなのかを細かく定義

より詳しく内容を知りたいという方は[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/th)や[こちら](https://programmercollege.jp/column/1605/)を参考にすると良い

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYebKm" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYebKm">
  H63: Using the scope attribute to associate header cells and data cells in data tables - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::

:::note info
`scope`属性は`<th>`要素に指定すると記載されているが、必ずしも指定しないといけないというわけではない
一例として、1行目、1列目にヘッダーが来る場合は`<th>`要素だけを実装するだけでも、スクリーンリーダーなどの支援技術が自動で解釈してユーザーに情報を伝えてくれるため問題はないと考えられる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGzXdGr" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/bGzXdGr">
  H63: Using the scope attribute to associate header cells and data cells in data tables - after3</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::

:::note warn
基本的に`scope`属性は`<th>`要素に設定するものとなる
ただし以下のようなパターンに該当する場合、`<td>`要素にも`scope`属性を指定することを検討する必要があるので注意が必要

- `<td>`要素で実装されたデータセルが行・列のヘッダーとしても機能する場合
- `<th>`要素に指定されたスタイルなどを当てたくないなどの特別な理由により、`<th>`要素ではなく`<td>`要素で実装されたヘッダーの場合

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZmNBE" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZmNBE">
  H63: Using the scope attribute to associate header cells and data cells in data tables - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H64: Using the title attribute of the iframe element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H64

#### 要約
`<iframe>`要素を用いる場合は必ず`title`属性を指定するようにする

#### 目的
視覚的には識別できない<iframe>要素をスクリーンリーダーなどの支援技術を利用しているユーザーも内容を確実に理解できるようにする

#### 対象
視覚障害のあるユーザーや、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
`<iframe>`要素の内容が何であるかをユーザーが理解するのが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdvYRVa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/mdvYRVa">
  H64: Using the title attribute of the iframe element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーは`<iframe>`要素の内容をより理解しやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYRdNb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYRdNb">
  H64: Using the title attribute of the iframe element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
[こちらの警告欄](#h89-using-the-title-attribute-to-provide-context-sensitive-help)でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーなどの支援技術のすべてが`title`属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、`title`属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H64)では具体的な対応方法は記載されていないが、一例として`<a>`要素を用いてリンクテキストを併用する、`aria-label`属性や`aria-labelledby`属性を利用してラベルを提供し、スクリーンリーダーに読み上げられるように対応するといった方法が挙げられる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBmqyw" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBmqyw">
  H64: Using the title attribute of the iframe element - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H65: Using the title attribute to identify form controls when the label element cannot be used
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H65

#### 要約
`<label>`要素を使えない場合、`title`title属性を指定してフォームコントロールの認識を行えるようにする

#### 目的
ユーザーがフォームコントロールの目的を理解するのを助けることで、ウェブコンテンツをより使いやすく理解しやすくなる

#### 対象
すべてのユーザー
→ 特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
特にスクリーンリーダーなどの支援技術を利用しているユーザーは、フォームコントロールの目的を理解するのが難しくなる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ZEwNLee" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/ZEwNLee">
  H65: Using the title attribute to identify form controls when the label element cannot be used - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`title`属性を追加すると、スクリーンリーダーはその情報を読み取り、フォームコントロールの目的や意味をユーザーに伝えることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExrzZWb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/ExrzZWb">
  H65: Using the title attribute to identify form controls when the label element cannot be used - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
[こちらの警告欄](#h89-using-the-title-attribute-to-provide-context-sensitive-help)でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーといった支援技術のすべてが`title`属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、`title`属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H65)では具体的な対応方法は記載されていないが、最適な方法は[H44: Using label elements to associate text labels with form controls](#h44-using-label-elements-to-associate-text-labels-with-form-controls)で記載されている`<label>`要素を併用するようにすることが最適解となっている
ただ今回のように`<label>`要素が使えない場合は一例として`aria-label`属性や`aria-labelledby`属性を利用してラベルを提供し、スクリーンリーダーに読み上げられるように対応するといった方法が挙げられる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxMvVXx" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/xxMvVXx">
  H65: Using the title attribute to identify form controls when the label element cannot be used - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H67

#### 要約
スクリーンリーダーなどの支援技術が無視すべき画像について、`<img>`要素で`alt`属性を空（`alt=""`）にする + `title`属性を使用しない

#### 目的
視覚障害のあるユーザーやスクリーンリーダーなどの支援技術を利用するユーザーがアクセスする際に、不必要な情報を伝えずに、ページの主要なコンテンツに焦点を当てる

#### 対象
視覚障害のあるユーザーやスクリーンリーダーなどの支援技術を利用するユーザー

#### 未対応例
画像が情報を伝えるためのものではないにも関わらず、スクリーンリーダーが`alt`属性や`title`属性に指定されたテキストを読み上げてしまうため、ユーザーに混乱をもたらす可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxMNgLW" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/xxMNgLW">
  H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
スクリーンリーダーは無視すべき画像を読み上げないため、ユーザーはページの主要なコンテンツに集中することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBbNxd" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBbNxd">
  H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
`alt`属性を空にすることと、`alt`属性自体を指定しないことはスクリーンリーダーなどの支援技術において厳密に違う動作となることがある

- `alt`属性が空（`alt=""`）: スクリーンリーダーはその画像を無視する
- `alt`属性未指定: スクリーンリーダーは画像のファイル名やURLを読み上げることがある

未指定の場合画像のファイル名やURLを読み上げる可能性があり、その場合ユーザーにとって混乱を招く可能性があるため、`alt=""`を指定するようにすべきである

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBgeZYb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/qBgeZYb">
  H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H71: Providing a description for groups of form controls using fieldset and legend elements
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H71

#### 要約
`<fieldset>`要素と`<legend>`要素を用いて関連するフォームコントロールのグループ化を行い、説明を提供する。

#### 目的
視覚的なコンテキストに依存できないユーザーが、フォーム内の関連コントロールを一組として理解しやすくする

#### 対象
視覚障害者、認知障害者、高齢者など、視覚的なコンテキストに依存できないすべてのユーザー

#### 未対応例
視覚的なコンテキストに依存できないユーザーは、フォーム内の関連コントロールの目的を理解するのが困難になる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWoVLLw" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/NWoVLLw">
  H71:Providing a description for groups of form controls using fieldset and legend elements - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
視覚的なコンテキストに依存できないユーザーでも、フォーム内の関連コントロールを一組として理解しやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxaLLb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxaLLb">
  H71:Providing a description for groups of form controls using fieldset and legend elements - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
フォームのコントロールに関しては[H44: Using label elements to associate text labels with form controls](#h44-using-label-elements-to-associate-text-labels-with-form-controls)にも同じような達成基準が設定されている

これらの使い分けに関しては以下のように定義されている
- `H44`: チェックボックスで実装される選択肢が単数存在する場合は`<fieldset>`要素と`<legend>`要素を使用せず、`<label>`要素のみ使用して実装する
- `H71`: ラジオボタンやチェックボックスで実装される選択肢が複数存在する場合は、グループ化と説明のために`<fieldset>`要素と`<legend>`要素を使用して実装する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNPXLBa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/rNPXLBa">
  H71:Providing a description for groups of form controls using fieldset and legend elements - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H77: Identifying the purpose of a link using link text combined with its enclosing list item
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H77

#### 要約
リスト項目とリンクテキストを組み合わせて、リンクの目的が遷移前にわかるようにする

#### 目的
リスト項目を含むリンクテキストを使って、リンクの目的が遷移する前に理解できるようにする

#### 対象
視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザーなど、リンクの目的を理解するのに支援が必要なユーザー
特に、テキストだけでリンクの目的を理解することが難しいユーザーや、複数のリンクが並んでいる場合にどのリンクがどのコンテンツに対応するのかを判断するのが難しいユーザーが対象となる

#### 未対応例
リンク先のコンテンツを予測できないため、ユーザーが混乱したり誤ったリンクをクリックするリスクがある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="wvNbQBZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/wvNbQBZ">
  H77: Identifying the purpose of a link using link text combined with its enclosing list item - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
リンク先のコンテンツを予測しやすくなり、必要な情報を効率的に見つけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOdoQPO" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/jOdoQPO">
  H77: Identifying the purpose of a link using link text combined with its enclosing list item - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
リンクを理解するために必要な追加情報（説明文）は基本的にリンクよりも前におくことが有用とされている
これはスクリーンリーダーなどの支援技術は基本的にページを上から下へ読み進めるため、リンクの後に追加情報があると理解が難しくなる可能性があるからである

ただし、すべての情報をリンクの前に置かなければならないというわけでもない
対応例のようにリンクテキストが具体的であればリンク先の予測自体は可能となる
あくまでリンクの前に説明文があれば理想的ではあるが、リンクテキストが具体的であれば説明文がリンクの後ろに置かれていても`H77`の要件は満たされると考えられる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbomrx" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbomrx">
  H77: Identifying the purpose of a link using link text combined with its enclosing list item - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H78

#### 要約
段落内のテキストとリンクテキストを組み合わせて、リンクの目的が遷移前にわかるようにする

#### 目的
リンクテキストとそれを含んでいる段落のテキストから、リンクの目的を特定する

#### 対象
リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
リンクテキストが「ここをクリック」や単にURLのみである場合、一部のユーザーはリンク先のコンテンツを予測できず混乱する可能性がある。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="VwgOVXV" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/VwgOVXV">
  H78: Identifying the purpose of a link using link text combined with its enclosing paragraph - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
リンク先のコンテンツを予測しやすくなり、ユーザーは必要な情報を効率的に見つけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaMeGxa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/BaMeGxa">
  H78: Identifying the purpose of a link using link text combined with its enclosing paragraph - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
[H77: Identifying the purpose of a link using link text combined with its enclosing list item](#h77-identifying-the-purpose-of-a-link-using-link-text-combined-with-its-enclosing-list-item)に同じ内容が記載されているが、リンクを理解するために必要な追加情報（説明文）は基本的にリンクよりも前におくことが最も有用とされている

理由等に関しては`H77`に記載されている内容を参照してください
:::


### H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H79

#### 要約
テーブルセル内のリンクテキストと関連するテーブルヘッダーセルを組み合わせて、リンクの目的が遷移前にわかるようにする

#### 目的
リンクとそれを含んでいるデータテーブルのコンテキストから、リンクの目的を特定する

#### 対象
リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
リンクテキストが「ここをクリック」や単にURLのみである場合、一部のユーザーはリンク先のコンテンツを予測できず混乱する可能性がある。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKJLrra" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/KKJLrra">
  H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
リンク先のコンテンツを予測しやすくなり、ユーザーは必要な情報を効率的に見つけることができる。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBgGQQM" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/qBgGQQM">
  H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H80: Identifying the purpose of a link using link text combined with the preceding heading element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H80

#### 要約
リンクテキストと直前の見出し（`<h1>` ~ `<h6>`）を組み合わせてリンクの目的を遷移前にわかるようにする

#### 目的
リンクのテキストとその直前にある見出しのコンテキストから、リンクの目的を特定する

対象

#### 対象
リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ユーザーはリンク先のコンテンツを予測できず、混乱する可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdvYQaZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/mdvYQaZ">
  H80: Identifying the purpose of a link using link text combined with the preceding heading element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーはリンク先のコンテンツを予測しやすくなり、より効率的に必要な情報を見つけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOqJQqY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/gOqJQqY">
  H80: Identifying the purpose of a link using link text combined with the preceding heading element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
可能な限りリンクテキストだけでリンク先のコンテンツを予測しやすいようなものを設定することが理想です
そのため対応例に記載したようなコードが理想的ではあるが、リンクテキストだけではリンクの目的が特定できない場合や、リンクテキストが短すぎる場合などは、リンクテキストとは別に追加の文脈を入れることも可能である


<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYeOae" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYeOae">
  H80: Identifying the purpose of a link using link text combined with the preceding heading element - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H81

#### 要約
リストが入れ子になっている状況で、親リスト項目と組み合わせたリンクテキストを用いて、入れ子になったリストの中でリンクの目的を特定する

#### 目的
入れ子になったリストに含まれるリスト項目によって与えられる文脈から、リストの中のリンクの目的を特定する

#### 対象
リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ユーザーはリンク先のコンテンツを予測できず、混乱する可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNPBLXZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/WNPBLXZ">
  H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
より明確なリンクテキストを提供することで、ユーザーはリンク先のコンテンツを予測しやすくなり、必要な情報を効率的に見つけることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBgGLVz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/qBgGLVz">
  H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
[H80: Identifying the purpose of a link using link text combined with the preceding heading element](#h80-identifying-the-purpose-of-a-link-using-link-text-combined-with-the-preceding-heading-element)に関連する説明があるが、可能な限りリンクテキストだけでリンク先のコンテンツを予測しやすくすることが望ましい
ただし、リンクテキストだけではリンクの目的が特定できない場合や、リンクテキストが短すぎる場合などは、リンクテキストに加えて追加の文脈を提供することも適切
:::


### H84: Using a button with a select element to perform an action
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H84

#### 要約
`<select>`要素に対して、選択後にアクションを実行するボタンを併用する

#### 目的
`<select>`要素の値を選択しただけで意図せずアクションが実行されることを防ぎ、ユーザーがアクションを明示的に制御できるようにする

#### 対象
すべてのユーザー
→ 特にキーボードを使用して操作するユーザーにとっては、選択肢をナビゲートするだけで意図しないアクションがトリガーされるのを防ぐために重要

#### 未対応例
選択した値により即座にアクションが実行される設定は、ユーザーが混乱しやすく、意図しない結果を招く可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOqJEzN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/gOqJEzN">
  H84: Using a button with a select element to perform an action - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーが自分の選択を確認し、その選択を明示的に確定させることができる
これにより、何が起こるか予測しやすくなり、使いやすさとアクセシビリティが向上する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYRoxN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYRoxN">
  H84: Using a button with a select element to perform an action - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H85: Using optgroup to group option elements inside a select
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H85

#### 要約
`<optgroup>`要素を使用して`<select>`要素内の`<option>`要素をグループ化する

#### 目的
選択肢を視覚的にまたは論理的にグループ化し、選択肢の数が多い場合でもユーザーが簡単に選択できるようにする

#### 対象
視覚障害者、認知障害者、運動障害者や選択肢を見つけるのが難しいユーザー

#### 未対応例
`<optgroup>`要素を使用しない場合、選択リストが長くなり、ユーザーが必要な選択肢を見つけるのが難しくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxaXqy" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxaXqy">
  H85: Using optgroup to group option elements inside a select - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`<optgroup>`要素を適用すると、選択リストがカテゴリごとに整理され、選択肢を見つけやすくなる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmRVKm" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmRVKm">
  H85: Using optgroup to group option elements inside a select - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
`<optgroup>`要素を使う際には以下の点に注意する

- `<select>`要素の直下にのみ`<optgroup>`要素を配置する
- `<optgroup>`要素の直下にのみグループ化したい`<option>`要素を配置する
- `<optgroup>`要素の中では`<optgroup>`要素を使用してグループ化させることはできない
- `<optgroup>`要素に`label`属性を指定することで、グループ化する際のラベルテキストを指定することができる

より詳細に知りたい方は[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/optgroup)を参照
:::

:::note warn
スクリーンリーダーなどの支援技術を利用している場合、`<optgroup>`要素によるグループ化情報がユーザーに必ずしも伝わらない可能性がある
そのため、各`<option>`要素のテキストは、その選択肢が何を意味し、どのグループに属しているのかを理解できるような内容にすることが重要である
:::


### H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H86

#### 要約
視覚的な要素である絵文字、顔文字、アスキーアート、リーツスピークの代替テキストを提供する

#### 目的
視覚的な表現の情報を理解できないユーザー（視覚障害者、読字障害者、認知能力に制約のあるユーザーなど）が、絵文字、顔文字、アスキーアート、リーツスピークなどの情報を理解できるようにするため

#### 対象
視覚障害者、読字障害者、認知能力に制約のあるユーザー

#### 未対応例
対象ユーザーは、視覚的な表現の意味を理解することができないため、以下の各コンテンツから情報を得ることが難しい

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYqovyo" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/LYqovyo">
  H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
対象ユーザーも視覚的な表現の情報を理解することができるようになる
対応例のコードでは、絵文字に代替テキストを提供する方法をいくつか記載している
他の顔文字やアスキーアート、リーツスピークも基本的には同様の手法を用いることでアクセシビリティを向上させることができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYRPMq" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYRPMq">
  H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
隠しテキストに関してSEO観点で懸念がありそうだが、現時点では大きな問題はないと思われる
キーワードを詰め込んで検索ランキングを不正に上げる、不適切なコンテンツの隠蔽などは検索エンジンにとってスパムと判定されてペナルティを受ける可能性がある
しかし、今回はスクリーンリーダーに有用な情報を提供するために隠しテキストを用いているため、一般的には問題とはならない

また適切ではないスタイルの定義となる`display: none`や`visibility: hidden`, `width, height, font-size: 0`などのスタイルを用いていないため、情報がスクリーンリーダーにとってアクセス不可能になることはない

参考サイトは[こちら](https://chaika.hatenablog.com/entry/2022/11/18/080000)を参照
:::

:::note warn
[こちらの警告欄](#h89-using-the-title-attribute-to-provide-context-sensitive-help)でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーといった支援技術のすべてが`title`属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、`title`属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している
:::


### H88: Using HTML according to spec
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H88

#### 要約
HTMLを規格に合わせて使用する

具体的には以下3点を考慮する必要がある
- HTMLの仕様で定義されている機能のみを使用する
- HTMLの仕様によって指示された方法で機能を使用する
- コンテンツが正しく解析されることを確認する

#### 目的
HTMLとXHTMLをそれぞれの仕様に従って使用することで、スクリーンリーダーなどの支援技術が作者の意図に合った相互運用可能な機能の表現を提示できるようになる

#### 対象
すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
HTMLを正しく使用しないと、ウェブページが意図した通りにレンダリングされないか、アクセスが困難になる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYbwoaL" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYbwoaL">
  H88: Using HTML according to spec - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ウェブページは意図した通りに機能し、アクセシビリティツールは内容を適切に解釈することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="wvNbVxe" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/wvNbVxe">
  H88: Using HTML according to spec - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H90: Indicating required form controls using label or legend
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H90

#### 要約
必須のフォーム要素を示す場合は`<label>`要素や`<legend>`要素を用いて明示する

#### 目的
ウェブアプリケーションやフォームにおいて、特定の入力フィールドがデータ送信のために必須であることをユーザーに明確に示す

#### 対象
すべてのユーザー

#### 未対応例
一部のユーザーは、入力フィールドが必須であることを理解できず、フォームの送信時にエラーが生じるリスクがある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmrvNb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmrvNb">
  H90: Indicating required form controls using label or legend - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ユーザーがフォームコントロールが必須であることを容易に理解できるようにし、フォームのエラー率を低下させる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaMgBym" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/BaMgBym">
  H90: Indicating required form controls using label or legend - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
`required`属性をフォーム要素に指定することで、ブラウザにそのフィールドが必須であることを指示できる
これはユーザーが該当フィールドに入力することを要求し、フォームが送信される前にブラウザが検証を行います
もし必須フィールドが空の場合は、ユーザーに警告を出して送信を阻止することができる
この機能は、フォームの完全性を保証し、ユーザーの誤操作を減らすのに役立つ

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGZbKBq" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/bGZbKBq">
  H90: Indicating required form controls using label or legend - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H91: Using HTML form controls and links
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H91

#### 要約
HTMLの基本機能を使用して入力フォームやリンクを作成する

#### 目的
フォームやリンク要素をキーボードで操作可能にし、スクリーンリーダーなどの支援技術ともうまく連携できるようにする

#### 対象
すべてのユーザー
→ 特に視覚障害、運動障害、認知障害を持つユーザー

#### 未対応例
一部のユーザーはウェブサイトの操作が困難になり、重要な情報や機能にアクセスできなくなる可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExrBYNa" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/ExrBYNa">
  H91: Using HTML form controls and links - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
すべてのユーザーがウェブサイトを容易に操作し、情報にアクセスできるように改善される

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYqKPbZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/LYqKPbZ">
  H91: Using HTML form controls and links - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
厳密には、フォームやリンクを作成するHTML要素はアクセシビリティAPIに紐づけられている
これにより各HTML要素には`役割（role）`, `名前（name）`, `値（value）`, `状態（state）`というアクセシビリティ情報が紐づけられており、スクリーンリーダーなどの支援技術はこのアクセシビリティ情報を抽出してユーザーに情報を提供する

これらの要素を適切に使用してフォームやリンクを作成することで、すべてのユーザーが容易に操作できるようになる

各HTML要素のそれぞれのアクセシビリティ情報を確認したい場合は[こちら](https://www.w3.org/WAI/WCAG22/Techniques/html/H91)を参考にすると良い
:::


### H95: Using the track element to provide captions
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H95

#### 要約
`<video>`要素を使用する際に、字幕や音声の説明などの補足的な情報を提供するために`<track>`要素を使用する

#### 目的
視覚的な情報とは別にテキストベースで映像の字幕や音声の説明などの補足的な情報を提供することで、音声を利用できない環境や聴覚に障害がある場合でもユーザーが映像コンテンツを理解できるようにする

#### 対象
主に聴覚障害者や、音声情報の受け取りが難しい状況にあるユーザー

#### 未対応例
字幕や音声の説明がないビデオでは、聴覚障害者や音声情報へのアクセスが限られた環境にいるユーザーは、ビデオの内容を完全に理解できない可能性がある
[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)の`HTML Demo: <track>`にて`<track>`要素を削除した状態で動画を再生すると、映像に対応する字幕や音声の説明が表示されず、コンテンツの理解が困難になることが確認できる

#### 対応例
ビデオの音声情報をテキスト形式で提供することにより、聴覚障害者や音声情報へのアクセスが制限されているユーザーもビデオコンテンツの内容を理解することが容易になる
[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)の`HTML Demo: <track>`にて`<track>`要素を含めた状態で動画を再生すると、映像に対応する字幕や音声の説明が表示され、コンテンツの理解を助けることが確認できる

:::note warn
こちらは[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)の`HTML Demo: <track>`で挙動を確認することができるため、未対応例、対応例ともにサンプルコードは記載していません。
:::


### H97: Grouping related links using the nav element
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H97

#### 要約
`<nav>`要素を使用して関連するナビゲーションリンクをグループ化する

#### 目的
スクリーンリーダーなどの支援技術を利用しているユーザーがリンクのグループを特定しやすく、またそれらをスキップしやすくすることで、ウェブサイトのナビゲーションを効率的に行うことができるようにする

#### 対象
視覚障害者や認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
リンクの関係性を容易に把握できない場合、ユーザーのナビゲーションが困難となり、ウェブサイトのユーザビリティが低下する可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKJjKpK" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/KKJjKpK">
  H97: Grouping related links using the nav element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`<nav>`要素を使用することでリンクのグループを明示し、リンクの関係性を容易に把握することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxwYNz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxwYNz">
  H97: Grouping related links using the nav element - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note info
`<nav>`要素が同一ページ内で複数回使用される場合は、各ナビゲーショングループを識別できるようにするため`aria-label`属性や`aria-labelledby`属性を使用してナビゲーショングループを区別すると良い

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOqVdXO" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/gOqVdXO">
  H97: Grouping related links using the nav element - after2</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
:::


### H101: Using semantic HTML elements to identify regions of a page
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H101

#### 要約
セマンティックHTML要素を使用してページの領域を識別する

#### 目的
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーがページの構造とコンテンツを理解しやすくするため

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
それぞれの領域が何を表しているのかが明確に示されていない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="eYxwYxG" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/eYxwYxG">
  H101: Using semantic HTML elements to identify regions of a page - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ページの各領域が適切なセマンティックHTML要素でマークアップされている
これにより、視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーは、各領域が何を表しているのかを容易に理解することができる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdvZdvZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/mdvZdvZ">
  H101: Using semantic HTML elements to identify regions of a page - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>















## どれにも属さない
### H99: Provide a page-selection mechanism
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H99

#### 要約
ページ選択メカニズムを提供する。

#### 目的
特定のページへ直接アクセスする手段をユーザーに提供し、スクリーンリーダーなどの支援技術を利用しているユーザーがページの位置情報を明確に理解できるようにする

#### 対象
すべてのユーザー
→ 特に視覚障害、認知障害、運動障害を持つユーザー

#### 未対応例
対応前のHTMLドキュメントでは、ページリストがプログラムで取得できない可能性がある
さらに、ページリストが存在しても、ユーザーやスクリーンリーダーなどの支援技術がその存在や位置情報を十分に認識できない場合がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOdjOLb" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/jOdjOLb">
  H99: Provide a page-selection mechanism - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`role`属性と`aria-labelledby`属性を用いて、ページリストの役割とタイトルを明示することで、ユーザーやスクリーンリーダーなどの支援技術がページリストを適切に認識し、位置情報を取得することが可能になる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="GRzbRvz" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/GRzbRvz">
  H99: Provide a page-selection mechanism - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


















## 将来的に削除される可能性あり
WCAG2.2に現在残っているが、達成基準が削除されているため将来的に削除される可能性があるテクニックを以下にまとめる

:::note warn
達成基準の削除は技術進化やアクセシビリティ理解の向上によるものであり、削除されたからといって遵守が不要になるわけではない
将来的にWCAGから削除される可能性のあるテクニックについても、達成基準が非推奨でない限り、基本的には遵守するべきである
:::

### H74: Ensuring that opening and closing tags are used according to specification
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H74

#### 要約
HTMLを書くときは、それぞれの要素に対して開始タグと閉じタグを正しく使用する

#### 目的
スクリーンリーダーなどの支援技術がコンテンツを解析するときに生じる可能性がある基本的なエラーを回避する

#### 対象
すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ウェブページが予期せぬ動作をする、または正しく表示されない可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJdYBNQ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/OJdYBNQ">
  H74: Ensuring that opening and closing tags are used according to specification - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ウェブページが予期した通りに動作し、スクリーンリーダーなどの支援技術が内容を正確に解釈する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poGmxyG" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/poGmxyG">
  H74: Ensuring that opening and closing tags are used according to specification - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### なぜ削除となる可能性があるか
元々[4.1.1: Parsing（構文解析）](https://www.w3.org/WAI/WCAG22/Understanding/parsing)を達成するためのテクニックとなっていたが、WCAG2.2でこの基準が削除された

この基準は必要だったのは、ブラウザやスクリーンリーダーなどの支援技術がウェブページを正しく読み取ることを保証するためだったが、HTMLの仕様の改善とブラウザのエラー処理能力の向上により、ブラウザもエラーをうまく処理できるようになったため、この基準は不要となった
また、スクリーンリーダーなどの支援技術はかつてウェブページのコードを独自に解析していたが、現在はブラウザの解析結果に依存するようになった
その結果、WCAG2.2からこの基準は削除されている

この基準に関連する問題は[1.3.1: Info and Relationships（情報と関係性)](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)や[4.1.2: Name, Role, Value（名前、役割、値）](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value)でカバーされている


### H75: Ensuring that Web pages are well-formed
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H75

#### 要約
XMLベースのマークアップ言語を正しく使ってマークアップをする
- 開始タグと終了タグが対になっていること（例：`<p>`と`</p>`）
- タグが適切にネストされていること（例：`<b><i>text</i></b>`は正しいが、`<b><i>text</b></i>`は不適切）
- 属性値が引用符で適切に囲まれていること（例：`<img src="image.jpg" alt="image">`）
- 閉じタグが不要なタグが適切に使用されていること（例：`<img>`, `<input>`など）

#### 目的
ウェブページのマークアップが正しくないと、スクリーンリーダーなどの支援技術がコンテンツを適切に解析できないことがある
このようなエラーを避けるために、ウェブページは適切に形成されている必要がある

#### 対象
すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
ブラウザがマークアップを正しく解析できないため、ウェブページが意図した通りに表示されない、または適切に機能しない場合がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaMeqRV" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/BaMeqRV">
  H75: Ensuring that Web pages are well-formed - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
ウェブページが適切に形成されている場合、ブラウザはページを正しく解析し、一貫性のある表示と動作が期待できる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNPBajY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/WNPBajY">
  H75: Ensuring that Web pages are well-formed - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### なぜ削除となる可能性があるか
[H74: Ensuring that opening and closing tags are used according to specification](#h74-ensuring-that-opening-and-closing-tags-are-used-according-to-specification)と同じ


### H93: Ensuring that id attributes are unique on a Web page
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H93

#### 要約
`id`属性は必ず重複しないようにする

#### 目的
異なる要素に同じ`id`属性を持つコンテンツを解析しようとしたときに、支援技術が問題を引き起こすことが知られている主要なエラーを回避する

#### 対象
すべてのユーザー
→ 特に支援技術を使用しているユーザーやキーボードだけで操作するユーザー

#### 未対応例
`id`属性が一意でない場合、スクリーンリーダーなどの支援技術が正しく要素を識別できない場合がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzBoKZZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/YzBoKZZ">
  H93: Ensuring that id attributes are unique on a Web page - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
すべての`id`属性が一意である場合、スクリーンリーダーなどの支援技術が正しく機能し、ユーザーが容易に情報にアクセスできる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOqNYmX" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/gOqNYmX">
  H93: Ensuring that id attributes are unique on a Web page - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### なぜ削除となる可能性があるか
[H74: Ensuring that opening and closing tags are used according to specification](#h74-ensuring-that-opening-and-closing-tags-are-used-according-to-specification)と同じ


### H94: Ensuring that elements do not contain duplicate attributes
#### 原文
https://www.w3.org/WAI/WCAG22/Techniques/html/H94

#### 要約
要素に同じ属性を重複して指定しないようにする

#### 目的
重複した属性を持つ要素を解析する際にスクリーンリーダーなどの支援技術が適切に機能しない可能性がある主要なエラーを回避する

#### 対象
すべてのユーザー
→ 特に視覚障害や認知障害を持ち、スクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
スクリーンリーダーなどの支援技術が正しく機能せず、ウェブサイトが意図した通りに動作しない可能性がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWYXLgJ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/QWYXLgJ">
  H94: Ensuring that elements do not contain duplicate attributes - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
重複する属性を削除または統合することで、ウェブページのアクセシビリティが向上し、意図した通りに動作するようになる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNmrveY" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/oNmrveY">
  H94: Ensuring that elements do not contain duplicate attributes - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### なぜ削除となる可能性があるか
[H74: Ensuring that opening and closing tags are used according to specification](#h74-ensuring-that-opening-and-closing-tags-are-used-according-to-specification)と同じ














## 非推奨
WCAG2.1には存在していたが2.2からは削除されているものを以下にまとめる

### H4: Creating a logical tab order through links, form controls, and objects
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H4

#### 要約
初期設定のタブ順番が十分でない時に、`tabindex`属性を使用してフォーカスの当たる順番を正しくすることでより論理的なタブ順番を提供する

#### 目的
視覚的な順序と論理的な順序を一致させることで、ユーザーが予測可能な順序で情報や機能にアクセスできるようにする

#### 対象
キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

#### 未対応例
順序が不規則な場合、ユーザーは直感的な操作を行うことができず、混乱する可能性がある
下記では`tab`キーで進むと新郎と新婦の情報を行き来する不規則なフォーカスの順番となる場合がある

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWoBLLj" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/NWoBLLj">
  H4: Creating a logical tab order through links, form controls, and objects - before</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 対応例
`tabindex`属性を適切に設定することで、順序が規則的になり、ユーザーは直感的な操作を行うことができる
下記では、`tab`キーで進むと新郎の全情報から新婦の全情報に移る規則正しい順番となる

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNPKggO" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/WNPKggO">
  H4: Creating a logical tab order through links, form controls, and objects - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 削除理由
[G59](https://www.w3.org/WAI/WCAG22/Techniques/general/G59)の達成基準「HTMLの構成を正しくする」を実践することでこの問題は自動的に解決するため
WCAG2.2では`G59`に従うことが推奨される


### H35: Providing text alternatives on applet elements
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H35

#### 要約
`<applet>`要素に代替テキストや代替コンテンツを設定する

#### 目的
`<applet>`要素に対する代替テキストまたは内容を提供することで、すべてのユーザーがその機能や情報にアクセスできるようにする

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーや、テキストのみでウェブを閲覧するユーザー

#### 削除理由
`<applet>`要素はHTML5で廃止され、現在は使用されていないため

#### 代替案
`<applet>`要素の代わりに`<object>`要素を使用することが推奨されている

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poGMxWZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/poGMxWZ">
  H45: Using longdesc - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H45: Using longdesc
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H45

#### 要約
`<img>`要素を使う際、詳細な説明が必要な場合は`longdesc`属性を使用する

#### 目的
長い説明を要する画像について、視覚障害者や視覚的な情報を理解できないユーザーに対して、その情報の詳細な説明を提供するため

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 削除理由
`longdesc`属性はHTML5で非推奨となったため

#### 代替案
`<img>`要素に長文の説明を加えたい場合は`aria-describedby`属性を使用するか、説明文を画像の近くに配置する
または、あるいは詳細な説明へのリンクを提供したい場合は`<a>`要素などでリンクを作成する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYboVGN" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/vYboVGN">
  H45: Using longdesc - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H46: Using noembed with embed
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H46

#### 要約
`<embed>`要素を用いる場合、サポートされていないブラウザやスクリーンリーダなどの支援技術でのアクセスを考慮して`<noembed>`要素を併用して代替コンテンツを提供する

#### 目的
すべてのユーザーがコンテンツにアクセスできるようにするため、サポートされていないブラウザやスクリーンリーダーなどの支援技術を利用しているユーザーに対応できる代替方法を提供する

#### 対象
すべてのユーザー
→ 特にサポートされていないブラウザやスクリーンリーダーなどの支援技術を利用しているユーザー

#### 削除理由
`<noembed>`要素はHTML5で廃止され、現在は使用されていないため

#### 代替案
`<noembed>`要素の代わりに`<object>`要素内に代替コンテンツを提供することが推奨されている
この方法は[H53: Using the body of the object element](#h53-using-the-body-of-the-object-element)で説明されている


### H60: Using the link element to link to a glossary
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H60

#### 要約
`<link>`要素の`rel="glossary"`属性を使用して用語集へのリンクを作成する

#### 目的
すべてのユーザーがウェブコンテンツの内容を理解できるようにするため、専門的な言葉や固有名詞が理解しにくいユーザーに対しても、用語集へのリンクを提供することで情報へのアクセス性を向上する

#### 対象
すべてのユーザー

#### 削除理由
`<link>`要素のrel="glossary"`属性はHTML Living Standardで非推奨となったため

#### 代替案
`<link>`要素の`rel="glossary"`属性の代わりとして`<a>`要素を使用して直接用語集へのリンクを提供する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZmZGZ" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZmZGZ">
  H45: Using longdesc - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### H70: Using frame elements to group blocks of repeated material
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H70

#### 要約
繰り返し性のあるコンテンツブロックをグループ化するために`<frame>`要素を使用する
ここでいう繰り返し性のあるコンテンツブロックとは、ナビゲーションメニューやリンク集、ヘッダーなどが該当する

#### 目的
コンテンツの構造とナビゲーションを改善し、ユーザーが情報を効率的に探すことを支援する

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 削除理由
`<frame>`要素はHTML5で非推奨となったため

#### 代替案
`<frame>`要素の代わりにセマンティックHTMLを用いて繰り返し性のあるコンテンツブロックを適切にグループ化することが推奨される
例としてナビゲーションは`<nav>`要素、リストは`<ul>`要素や`<ol>`要素、ヘッダーには`<header>`要素などが該当する

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZmwNW" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZmwNW">
  H60: Using the link element to link to a glossary - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
厳密には、[WCAG](https://www.w3.org/WAI/WCAG22/Techniques/html/H70)から定義自体は削除はされていないが、削除理由にも記載した通り`<frame>`要素はHTML5で非推奨とされている
そのため、現代のウェブ開発では`<frame>`要素の使用は推奨されないため、非推奨の欄に入れている
:::


### H73: Using the summary attribute of the table element to give an overview of data tables
#### 原文
https://www.w3.org/WAI/WCAG21/Techniques/html/H73

#### 要約
テーブルの概要を説明するために`<table>`要素の`summary`属性を使用する

#### 目的
テーブルにどのようにデータがまとめられているかという短い概略や、テーブルをどのように読み進めるかという短い説明を提供する

#### 対象
視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

#### 削除理由
`<table>`要素の`summary`属性はHTML5で非推奨となったため

#### 代替案
`<table>`要素の`summary`属性の代わりに`<caption>`要素や`aria-describedby`属性を用いて概要を説明するようにする


<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLZmwYW" data-preview="true" data-user="tbba0anw98e" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tbba0anw98e/pen/yLZmwYW">
  H70: Using frame elements to group blocks of repeated material - after</a> by t.i (<a href="https://codepen.io/tbba0anw98e">@tbba0anw98e</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## まとめ
今回、ウェブアクセシビリティについて一通り調査してみました
すべてを完璧に理解することができたというわけではないが、普段意識していなかった部分でもウェブアクセシビリティの向上に貢献していることに気づき、非常に学びの多い経験となったためとても良かったと思います
この記事が、ウェブアクセシビリティに対する理解を一歩深めるきっかけとなり、どのように取り組めば良いのか解決するための手がかりとなれば幸いです


## 参考元
https://www.w3.org/WAI/WCAG22/Techniques/#html

https://waic.jp/translations/WCAG21/Techniques/#html