Привіт усім чудовим розробникам! У цій публікації я розповім вам про те, як створити просту контактну форму за допомогою семантичного HTML і неймовірного псевдокласу CSS, відомого як :focus-within, :focus-within клас дає змогу чудово контролювати фокус і повідомляти користувачеві, що саме там вони знаходяться. Перш ніж приступити до цього, давайте розберемося, що таке веб-доступність.

Доступність форми?

Швидше за все, ви всюди чули термін «доступність» або нумеронім a11y. Що це означає? Це чудове запитання з такою кількістю відповідей. Коли ми дивимося на фізичний світ, доступність означає такі речі, як наявність контейнерів для гострих предметів у ванних кімнатах на вашому підприємстві, забезпечення наявності пандусів для людей, які керують колесами, і наявність під рукою периферійних пристроїв, таких як клавіатури з великим шрифтом, для тих, хто цього потребує.

На цьому спектр доступності не закінчується, у нас є цифрова доступність, про яку ми також повинні знати, не лише для зовнішніх користувачів, але й для внутрішніх колег. Кольоровий контраст - низько звисаючий плід що ми повинні мати можливість придушити в зародку. На наших робочих місцях ми гарантуємо, що якщо комусь із співробітників знадобляться допоміжні технології, як-от зчитувач екрана, ми встановимо їх і доступні. Є багато речей, які потрібно мати на увазі. У цій статті мова піде про веб-доступність шляхом збереження WCAG (інструкції щодо доступності веб-вмісту) на увазі.

Цей псевдоклас дійсно чудовий, коли ви хочете підкреслити, що користувач насправді взаємодіє з елементом. Ви можете, наприклад, змінити колір фону всієї форми. Або, якщо фокус переміщено на вхід, ви можете зробити мітку елемента введення жирним і більшим, коли фокус переміщено на цей вхід. Те, що відбувається нижче у фрагментах коду та прикладах, робить форму доступною. :focus-within це лише один із способів використання CSS на нашу користь.

Як зосередитися

Фокус, що стосується доступності та взаємодії з Інтернетом, є візуальним індикатором того, що з чимось взаємодіють на сторінці, в інтерфейсі користувача чи в компоненті. CSS може визначити, коли інтерактивний елемент знаходиться в фокусі.

Завжди переконайтеся, що індикатор фокусування або кільце навколо фокусувальних елементів підтримує належний колірний контраст під час роботи.

Focus пишеться так і може бути стилізовано відповідно до вашого бренду, якщо ви вирішите його стилізувати.

:focus {
  * / INSERT STYLES HERE /*
}

Що б ви не робили, ніколи не встановлюйте контур 0 or none. Це призведе до видалення видимого індикатора фокусу для всіх протягом усього процесу. Якщо вам потрібно видалити фокус, ви можете, але обов’язково додайте його пізніше. Коли ви видаляєте фокус зі свого CSS або встановлюєте структуру на 0 or none, це видаляє кільце фокусування для всіх ваших користувачів. Це часто спостерігається під час використання скидання CSS. Скидання CSS призведе до скидання стилів на порожнє полотно. Таким чином ви керуєте порожнім полотном, щоб стилізувати його за вашим бажанням. Якщо ви бажаєте використати скидання CSS, перевірте Перезавантаження Джоша Комо.

*НЕ РОБІТЬ того, що написано нижче!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Подивіться всередину!

Ця стаття присвячена одному з найкрутіших способів стилізувати фокус за допомогою CSS. Якщо ви не перевірили :focus-within псевдоклас, обов'язково подивіться! Існує багато прихованих перлин, коли справа доходить до використання семантичної розмітки та CSS, і це одна з них. Багато речей, які не помічаються, доступні за замовчуванням, наприклад, семантична розмітка доступна за замовчуванням і має завжди використовуватися замість div.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/uk/">Home</a></li>
      <li><a href="/uk/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

Команда header, nav, main, section, aside та footer це всі семантичні елементи. The h1 та ul також семантичні та доступні.

Якщо немає спеціального компонента, який потрібно створити, тоді a div добре використовувати в парі з ARIA (Доступні розширені Інтернет-програми). Ми можемо глибоко зануритися в ARIA в наступній публікації. Наразі давайте зосередимося...подивимося, що я там зробив...на цьому псевдокласі CSS.

Команда :focus-within псевдоклас дозволяє вибрати елемент, коли будь-який нащадковий елемент, який він містить, має фокус.

:focus-within в дії!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

Наведений вище приклад коду додасть помаранчевий фоновий колір, додасть відступи та змінить колір міток на чорний.

Кінцевий продукт виглядає приблизно так, як показано нижче. Звичайно, є безмежні можливості змінити стиль, але це допоможе вам зробити Інтернет доступнішим для всіх!

Ще один варіант використання :focus-within було б виділяти мітки жирним шрифтом, іншим кольором або збільшувати їх для користувачів із слабким зором. Приклад коду для цього виглядатиме приблизно так, як показано нижче.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within також має чудову підтримку браузерів у всіх напрямках відповідно до Чи можна використовувати.

Висновок

Створення дивовижного, доступного досвіду користувача завжди має бути головним пріоритетом під час доставки програмного забезпечення, не лише зовнішнього, а й внутрішнього. Ми, як розробники, аж до вищого керівництва, маємо знати про виклики, з якими стикаються інші, і про те, як ми можемо бути послами веб-платформи, щоб зробити її кращою.

Використання таких технологій, як семантична розмітка та CSS, для створення інклюзивних просторів є важливою складовою для того, щоб зробити Інтернет кращим місцем. Давайте продовжувати рухатися вперед і змінювати життя.

Перегляньте ще один чудовий ресурс тут на CSS-Tricks on за допомогою :focus-within.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• PlatoData.Network Vertical Generative Ai. Додайте собі сили. Доступ тут.
• PlatoAiStream. Web3 Intelligence. Розширення знань. Доступ тут.
• ПлатонЕСГ. вуглець, CleanTech, Енергія, Навколишнє середовище, Сонячна, Поводження з відходами. Доступ тут.
• PlatoHealth. Розвідка про біотехнології та клінічні випробування. Доступ тут.
• джерело: https://css-tricks.com/accessible-forms-with-pseudo-classes/