update(CSS): web/css/_colon_optional (#3301)

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

@@ -13,7 +13,8 @@ browser-compat: css.selectors.optional
 
 Цей псевдоклас корисний для виділення полів, які необов'язкові для подавання форми.
 
-> **Примітка:** Псевдоклас {{cssxref(":required")}} вибирає _обов'язкові_ поля форм.
+> [!NOTE]
+> Псевдоклас {{cssxref(":required")}} вибирає _обов'язкові_ поля форм.
 
 ## Синтаксис
 
@@ -23,6 +24,15 @@ browser-compat: css.selectors.optional
 }
 ```
 
+## Доступність
+
+Коли [форма](/uk/docs/Web/HTML/Element/form) містить необов'язкові {{htmlelement("input", "поля")}}, обов'язкові поля повинні бути виділені за допомогою атрибута [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.
+
+Обов'язкові поля також повинні бути виділені візуально, за допомогою способу, який не покладається для передачі змісту лише на колір. Зазвичай використовують описовий текст чи піктограму.
+
+- [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)
+
 ## Приклади
 
 ### Необов'язкове поле має фіолетову межу
@@ -67,15 +77,6 @@ input:optional {
 
 {{EmbedLiveSample('pryklady', 600, 120)}}
 
-## Занепокоєння щодо доступності
-
-Коли [форма](/uk/docs/Web/HTML/Element/form) містить необов'язкові {{htmlelement("input", "поля")}}, обов'язкові поля повинні бути виділені за допомогою атрибута [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.
-
-Обов'язкові поля також повинні бути виділені візуально, за допомогою способу, який не покладається для передачі змісту лише на колір. Зазвичай використовують описовий текст чи піктограму.
-
-- [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}}