Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 50 из 53 · 13 мин
Контраст, видимый фокус, forced-colors, скрытый для глаз текст sr-only и размер целей.
Пришло письмо: «Не вижу, где я на странице, когда жму Tab. А серый текст на бежевом не читается».
Это не мелочи — это люди, которые не могут сделать заказ. Чиним контраст, фокус и скрытые подписи.
<style>
.bad { color: #c9b8a6; } .good { color: #5a3a22; } p { background: #fffaf3; margin: 2px 0; padding: 4px; }
</style>
<p class="bad">Плохо: бледно</p><p class="good">Хорошо: читается</p>forced-colors@media (forced-colors: active) — система сама задаёт цвета. Проверь, что рамки и иконки не пропадают.sr-onlyposition: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;.Убрал outline — поставь свой видимый фокус. Всегда.
Дай ссылкам на a:focus-visible outline: 3px solid #c8763a и outline-offset: 2px.
Сделай класс .sr-only: position: absolute, width: 1px, height: 1px, overflow: hidden.
Выберите один ответ.
Что не так с :focus { outline: none; } без замены?
Выберите один ответ.
Как спрятать подпись от глаз, но оставить её скринридеру?
Введите короткий ответ без лишних пробелов.
Какой минимальный контраст нужен обычному тексту по WCAG AA? Введи как 4.5:1.
Проверяем состояние обучения…