feat: 達成基準2.5.8の内容を達成基準2.5.5にまとめる

src/2/5/5.md

@@ -13,32 +13,66 @@ permalink: "{{ number | scNumberToPath }}/"
 
 ## 概要
 
-タップやクリック可能な領域が小さいと、誤タップや押しづらさにつながる。  
+タップやクリック可能な領域が小さいと、誤タップや押しづらさにつながる。
 そのため、タップやクリック可能な領域を44px × 44px以上を担保する。
+タップ領域のサイズが小さい場合はタップ領域と余白を含めて44px × 44px以上でも構わない。
 
 ただし、以下のような場合は例外とする。
 
 - 段落や文章の中のテキストリンク
-- ボタンのサイズが小さい場合はタップ領域と余白を含めて44pxでも構わない
+
+なお、この項目はWCAG 2.1の達成基準2.5.5およびWCAG 2.2の達成基準2.5.8をまとめたものである。両者は以下のような違いがある。
+- [達成基準 2.5.5 ターゲットのサイズ (高度、レベルAAA)](https://waic.jp/docs/WCAG21/Understanding/target-size.html): より良い（BESTな）改善。**ターゲットサイズ単体**で44px × 44px以上を担保する。
+- [達成基準 2.5.8 ターゲットのサイズ (最低限、レベルAA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html): 良い（BETTERな）改善。**ターゲットサイズと余白も含めて**44px × 44px以上を担保する。なお、WCAG 2.2では24px × 24px以上と定義されているが、タッチデバイスでの表示を考慮して44px × 44px以上を最低基準とする。
 
 ## 具体例
+
+### ターゲットのサイズ （高度、レベルAAA）
+
+<ul class="Figurelist">
+<li>
+<figure>
+<img src="/img/2/5/5/2.5.5_1_ng.jpg" alt="「Amebaを始めよう！無料で登録」というタイトルとともに、高さ32pxの「新規登録」「ログイン」ボタンが配置されている。" />
+<figcaption>
+{% label "bad" %}
+ボタンのタップ領域（高さ）が44px × 44pxを満たしていない。
+{% endlabel %}
+</figcaption>
+</figure>
+</li>
+<li>
+<figure>
+<img src="/img/2/5/5/2.5.5_1_ok.jpg" alt="「Amebaを始めよう！無料で登録」というタイトルとともに、高さ48pxの「新規登録」「ログイン」ボタンが配置されている。" />
+<figcaption>
+{% label "good" %}
+ボタンのタップ領域（高さ）が44px × 44pxを満たしている。
+{% endlabel %}
+</figcaption>
+</figure>
+</li>
+</ul>
+
+### ターゲットのサイズ （最低限、レベルAA）
+
+ここでのターゲットはテキストリンクであるため、タップ領域（高さ）を44px以上にすることが難しい。そこで、余白も含めて44px以上を基準とする。
+
 <ul class="Figurelist">
 <li>
 <figure>
-<img src="/img/2/5/5/2.5.5_ng.jpg" alt="メールアドレスの入力が必要なAmebaの会員登録フォーム。高さ40pxの「認証コードを送る」ボタンが配置されている。" />
+<img src="/img/2/5/5/2.5.5_2_ng.jpg" alt="テキストリンクが一覧で表示されており、テキストリンク間の余白が小さくなっている。" />
 <figcaption>
 {% label "bad" %}
-「送信」ボタンのタップ領域（高さ）が44px × 44pxを満たしていない。
+テキストリンクのタップ領域（高さ）が余白を含めても44px × 44pxを満たしていない。
 {% endlabel %}
 </figcaption>
 </figure>
 </li>
 <li>
 <figure>
-<img src="/img/2/5/5/2.5.5_ok.jpg" alt="メールアドレスの入力が必要なAmebaの会員登録フォーム。高さ48pxの「認証コードを送る」ボタンが配置されている。" />
+<img src="/img/2/5/5/2.5.5_2_ok.jpg" alt="テキストリンクが一覧で表示されており、テキストリンク間の余白が大きくなっている。" />
 <figcaption>
 {% label "good" %}
-「送信」ボタンのタップ領域が44px × 44pxを満たしている。
+テキストリンクのタップ領域（高さ）が余白を含めて44px × 44pxを満たしている。
 {% endlabel %}
 </figcaption>
 </figure>
@@ -51,3 +85,4 @@ permalink: "{{ number | scNumberToPath }}/"
 
 ## 参考文献
 - [達成基準 2.5.5: ターゲットのサイズを理解する](https://waic.jp/docs/WCAG21/Understanding/target-size.html)
+- [Understanding Success Criterion 2.5.8: Target Size (Minimum) | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)