Web Accessibility Academy · レッスン

2.2の追加項目：フォーカスの外観とターゲットサイズ

最新版で追加された達成基準を適用します。

「2.2の追加項目：フォーカスの外観とターゲットサイズ」はCoddyKit上の無料Web Accessibility Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What 2.2 Brought

WCAG 2.2 added nine new success criteria in 2023. Two of the most practical for everyday UI are Focus Appearance and Target Size.

Focus Not Obscured

New rule 2.4.11 (Focus Not Obscured) at AA says the focused element must not be fully hidden behind sticky headers or cookie bars.

Why Hidden Focus Hurts

If a sticky banner covers the focused control, keyboard users lose track of where they are. They must see the item they just tabbed to.

Focus Appearance at AAA

Criterion 2.4.13 (Focus Appearance) is AAA. It specifies a minimum indicator area and 3:1 contrast so the focus ring is unmistakable.

Target Size (Minimum)

The AA rule 2.5.8 (Target Size Minimum) asks that tap targets be at least 24 by 24 CSS pixels, or have enough spacing around them.

Why 24 Pixels

Small targets are hard for people with tremors or large fingers. A 24px floor cuts mis-taps without forcing a chunky design everywhere.

The Spacing Exception

A target under 24px can still pass if a 24px circle around its center does not overlap a neighbor. Spacing buys back the size.

Sizing a Target in CSS

Give small buttons a real minimum size so they comfortably clear the 24px floor.

button {
  min-width: 24px;
  min-height: 24px;
}

Inline Links Are Exempt

Links inside a sentence are exempt from 2.5.8, since shrinking text just to enlarge them would harm the reading experience.

Consistent Help: 3.2.6

Another 2.2 add, 3.2.6 (Consistent Help) at A, keeps help links and contact info in the same relative spot across pages.

Redundant Entry: 3.3.7

Criterion 3.3.7 (Redundant Entry) at A says do not make users re-type info they already gave, unless it is essential like a password.

Quick Check

Recall the minimum touch target size from WCAG 2.2.

Recap: The 2.2 Additions

2.2 added focus and target rules: keep focus visible, make targets 24px or well spaced, and stop redundant entry. Next: dragging and authentication. 🎯

よくある質問

「2.2の追加項目：フォーカスの外観とターゲットサイズ」レッスンは無料ですか？

はい。「2.2の追加項目：フォーカスの外観とターゲットサイズ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「2.2の追加項目：フォーカスの外観とターゲットサイズ」で何を学びますか？

最新版で追加された達成基準を適用します。ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「2.2の追加項目：フォーカスの外観とターゲットサイズ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Web Accessibility Academyに戻る