Дополнения версии 2.2: видимость фокуса и размер цели
Применяйте критерии, появившиеся в последней версии.
«Дополнения версии 2.2: видимость фокуса и размер цели» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Дополнения версии 2.2: видимость фокуса и размер цели»?
Применяйте критерии, появившиеся в последней версии. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Дополнения версии 2.2: видимость фокуса и размер цели»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- A, AA, AAA: выбор правильной цели
- Дополнения версии 2.2: видимость фокуса и размер цели
- Перетаскивание и доступная аутентификация
- Составление обоснованного заявления о соответствии