From 2e30f2427fd41f97916c66021e9a0416e1f39437 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 13 Aug 2024 17:23:36 +0300 Subject: [PATCH] update(CSS): web/css/_colon_valid --- files/uk/web/css/_colon_valid/index.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/files/uk/web/css/_colon_valid/index.md b/files/uk/web/css/_colon_valid/index.md index 04a5db6abc..34456e5040 100644 --- a/files/uk/web/css/_colon_valid/index.md +++ b/files/uk/web/css/_colon_valid/index.md @@ -21,6 +21,13 @@ browser-compat: css.selectors.valid } ``` +## Доступність + +Зелений колір заведено використовувати для позначення дійсних полів. Люди, що мають якогось роду колірну сліпоту, не зможуть з'ясувати стан поля, якщо вкупі з кольором не використовується додатковий індикатор, що не покладається на колір для донесення сповіщення. Зазвичай використовується описовий текст чи піктограма. + +- [MDN Розуміння WCAG, Пояснення Настанови 1.4](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Розуміння критерію успіху 1.4.1 | W3C Розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) + ## Приклади ### Позначення дійсних і недійсних полів форми @@ -65,7 +72,8 @@ input:valid + span::before { Елементам `` задається `position: relative`, щоб можна було розташувати відносно них згенерований вміст. Потім абсолютно розташовується різний згенерований вміст, залежний від того, чи є дані форми дійсними, чи недійсними: зелена галочка чи червоний хрест, відповідно. Щоб додати трохи терміновості до недійсних даних, іще полям додано грубу червону межу, коли вони недійсні. -> **Примітка:** Щоб додати ці підписи, вжито `::before`, оскільки `::after` вже використовується для підписів "required". +> [!NOTE] +> Щоб додати ці підписи, вжито `::before`, оскільки `::after` вже використовується для підписів "required". Приклад можна спробувати нижче: @@ -73,13 +81,6 @@ input:valid + span::before { Зверніть увагу на те, що обов'язкові текстові поля є недійсними, поки порожні, але дійсними, коли в них щось уведено. Поле електронної пошти, з іншого боку, є дійсним, коли порожнє, оскільки не є обов'язковим, але недійсним, коли містить щось, що не є коректною адресою електронної пошти. -## Занепокоєння щодо доступності - -Зелений колір заведено використовувати для позначення дійсних полів. Люди, що мають якогось роду колірну сліпоту, не зможуть з'ясувати стан поля, якщо вкупі з кольором не використовується додатковий індикатор, що не покладається на колір для донесення сповіщення. Зазвичай використовується описовий текст чи піктограма. - -- [MDN Розуміння WCAG, Пояснення Настанови 1.4](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [Розуміння критерію успіху 1.4.1 | W3C Розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) - ## Специфікації {{Specifications}}