Skip to content

Commit

Permalink
fix: text
Browse files Browse the repository at this point in the history
  • Loading branch information
syasuda90 committed Oct 31, 2024
1 parent 15712fa commit 58e5c85
Showing 1 changed file with 19 additions and 16 deletions.
35 changes: 19 additions & 16 deletions src/2/5/5.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,64 +15,67 @@ permalink: "{{ number | scNumberToPath }}/"

タップやクリック可能な領域が小さいと、誤タップや押しづらさにつながる。
そのため、タップやクリック可能な領域を44px × 44px以上を担保する。
タップ領域のサイズが小さい場合はタップ領域と余白を含めて44px × 44px以上でも構わない
既存のタップ領域のサイズを十分に確保できない場合、タップ領域と余白を含めて44px × 44px以上でも許容する

ただし、以下のような場合は例外とする。
以下のような場合は例外とする。

- 段落や文章の中のテキストリンク

なお、この項目はWCAG 2.1の達成基準2.5.5およびWCAG 2.2の達成基準2.5.8をまとめたものである。両者は以下のような違いがある。
### 改善方法の優先度について

この項目は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以上を最低基準とする。
- [達成基準 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の「新規登録」「ログイン」ボタンが配置されている" />
<img src="/img/2/5/5/2.5.5_1_ng.jpg" alt="「Amebaを始めよう!無料で登録」というタイトルとともに、高さ32pxの「新規登録」「ログイン」ボタンが縦に配置されている" />
<figcaption>
{% label "bad" %}
ボタンのタップ領域(高さ)が44px × 44pxを満たしていない
ボタンのタップ領域の高さが44px未満
{% endlabel %}
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="/img/2/5/5/2.5.5_1_ok.jpg" alt="「Amebaを始めよう!無料で登録」というタイトルとともに、高さ48pxの「新規登録」「ログイン」ボタンが配置されている" />
<img src="/img/2/5/5/2.5.5_1_ok.jpg" alt="「Amebaを始めよう!無料で登録」というタイトルとともに、高さ48pxの「新規登録」「ログイン」ボタンが縦に配置されている" />
<figcaption>
{% label "good" %}
ボタンのタップ領域(高さ)が44px × 44pxを満たしている
ボタンのタップ領域の高さが44px以上
{% endlabel %}
</figcaption>
</figure>
</li>
</ul>

### ターゲットのサイズ (最低限、レベルAA
### 良い改善例(最低限の基準

ここでのターゲットはテキストリンクであるため、タップ領域(高さ)を44px以上にすることが難しい。そこで、余白も含めて44px以上を基準とする
ここでのターゲットはテキストリンクであるため、タップ領域の高さを44px以上にすることが難しい。「より良い改善例」は満たせないが、周囲の余白も含めて44px以上とすることで「良い改善例」を満たすように改善できる

<ul class="Figurelist">
<li>
<figure>
<img src="/img/2/5/5/2.5.5_2_ng.jpg" alt="テキストリンクが一覧で表示されており、テキストリンク間の余白が小さくなっている。" />
<img src="/img/2/5/5/2.5.5_2_ng.jpg" alt="テキストリンクが縦並びに表示されており、テキストリンク間の余白が小さくなっている。" />
<figcaption>
{% label "bad" %}
テキストリンクのタップ領域(高さ)が余白を含めても44px × 44pxを満たしていない
テキストリンクのタップ領域の高さが余白を含めても44px未満
{% endlabel %}
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="/img/2/5/5/2.5.5_2_ok.jpg" alt="テキストリンクが一覧で表示されており、テキストリンク間の余白が大きくなっている。" />
<img src="/img/2/5/5/2.5.5_2_ok.jpg" alt="テキストリンクが縦並びに表示されており、テキストリンク間の余白が大きくなっている。" />
<figcaption>
{% label "good" %}
テキストリンクのタップ領域(高さ)が余白を含めて44px × 44pxを満たしている
テキストリンクのタップ領域の高さが余白を含めて44px以上
{% endlabel %}
</figcaption>
</figure>
Expand All @@ -85,4 +88,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)
- [達成基準 2.5.8 ターゲットのサイズ (最低限)](https://waic.jp/translations/WCAG22/#target-size-minimum)

0 comments on commit 58e5c85

Please sign in to comment.