update(CSS): web/css/_colon_required (#3303)

files/uk/web/css/_colon_required/index.md

@@ -13,7 +13,8 @@ browser-compat: css.selectors.required
 
 Цей псевдоклас корисний для виділення полів, які повинні містити дійсні дані, перш ніж форма може бути подана.
 
-> **Примітка:** Псевдоклас {{cssxref(":optional")}} вибирає _необов'язкові_ поля форм.
+> [!NOTE]
+> Псевдоклас {{cssxref(":optional")}} вибирає _необов'язкові_ поля форм.
 
 ## Синтаксис
 
@@ -23,6 +24,15 @@ browser-compat: css.selectors.required
 }
 ```
 
+## Доступність
+
+До обов'язкових полів {{htmlelement("input")}} повинен бути застосований атрибут [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.
+
+Якщо форма також містить [необов'язкові](/uk/docs/Web/CSS/:optional) поля, то обов'язкові поля повинні бути візуально позначені, у спосіб, який не покладається лише на колір для передачі змісту. Зазвичай використовують описовий текст чи піктограму.
+
+- [MDN Розуміння WCAG, пояснення Настанови 3.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes)
+- [Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)
+
 ## Приклади
 
 ### Обов'язкове поле має червону межу
@@ -71,15 +81,6 @@ input:required:invalid {
 
 {{EmbedLiveSample('pryklady', 600, 120)}}
 
-## Занепокоєння щодо доступності
-
-До обов'язкових полів {{htmlelement("input")}} повинен бути застосований атрибут [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.
-
-Якщо форма також містить [необов'язкові](/uk/docs/Web/CSS/:optional) поля, то обов'язкові поля повинні бути візуально позначені, у спосіб, який не покладається лише на колір для передачі змісту. Зазвичай використовують описовий текст чи піктограму.
-
-- [MDN Розуміння WCAG, пояснення Настанови 3.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes)
-- [Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)
-
 ## Специфікації
 
 {{Specifications}}