Привіт усім чудовим розробникам! У цій публікації я розповім вам про те, як створити просту контактну форму за допомогою семантичного 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/
- : має
- :є
- : ні
- :де
- $UP
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 31
- 362
- 7
- 8
- 9
- 91
- 98
- a
- Здатний
- МЕНЮ
- вище
- доступність
- доступною
- За
- через
- додавати
- Перевага
- ВСІ
- дозволяє
- Також
- завжди
- am
- дивовижний
- послів
- an
- та
- Інший
- Відповіді
- будь-який
- будь
- застосування
- ЕСТЬ
- область
- навколо
- стаття
- AS
- допомога
- At
- доступний
- назад
- фон
- BE
- перед тим
- буття
- нижче
- Краще
- Black
- Блокувати
- рада
- сміливий
- брендинг
- браузер
- бізнес
- але
- by
- CAN
- полотно
- випадок
- проблеми
- зміна
- заміна
- заряд
- перевірка
- перевірено
- Вибирати
- клас
- класів
- код
- колеги
- color
- приходить
- компонент
- висновок
- розгляду
- контакт
- Контейнери
- містить
- зміст
- продовжувати
- контрастність
- контроль
- Core
- Курс
- створювати
- створений
- створення
- вирішальне значення
- CSS
- виготовлений на замовлення
- глибокий
- глибоке занурення
- дефолт
- безумовно
- Розробник
- розробників
- DID
- різний
- цифровий
- цифровий доступ
- дисплей
- занурення
- do
- робить
- Ні
- справи
- елемент
- елементи
- підкреслити
- Співробітник
- Нескінченний
- все
- скрізь
- точно
- приклад
- Приклади
- досвід
- зовнішній
- зовні
- Face
- факт
- остаточний
- кінець
- Перший
- Сфокусувати
- увагу
- для
- форма
- форми
- Вперед
- від
- Гамут
- дорогоцінні камені
- в цілому
- отримати
- GIF
- Давати
- йде
- буде
- добре
- великий
- керівні вказівки
- рука
- Відбувається
- Мати
- має
- почутий
- тут
- прихований
- Високий
- виділивши
- Як
- How To
- HTML
- HTTPS
- i
- if
- in
- В інших
- includes
- Включно
- індикатор
- вхід
- встановлений
- екземпляр
- взаємодіючих
- інтерактивний
- внутрішній
- внутрішньо
- інтернет
- в
- IT
- ЙОГО
- сам
- стрибати
- просто
- тільки один
- зберігання
- збережений
- ключ
- Знати
- відомий
- етикетка
- етикетки
- великий
- більше
- останній
- пізніше
- Керівництво
- здавати
- як
- Ймовірно
- Місце проживання
- подивитися
- ВИГЛЯДИ
- серія
- низький
- підтримує
- зробити
- Робить
- багато
- матч
- відповідає
- сірники
- значити
- засоби
- повідомлення
- mind
- більше
- найбільш
- переїхав
- переміщення
- Mozilla
- ім'я
- Необхідність
- потреби
- мережу
- ніколи
- ніхто
- зараз
- номер
- of
- on
- ONE
- or
- помаранчевий
- Інше
- інші
- наші
- з
- план
- над
- сторінка
- парний
- частина
- Люди
- периферійні пристрої
- телефон
- фізичний
- місце
- платформа
- plato
- Інформація про дані Платона
- PlatoData
- можливостей
- пошта
- друк
- пріоритет
- Product
- правильний
- питання
- Пандуси
- читач
- насправді
- отримано
- червоний
- що стосується
- видаляти
- видаляє
- представляє
- ресурс
- Багаті
- кільце
- Екран
- бачив
- вибрати
- смисловий
- старший
- вищого керівництва
- комплект
- тінь
- Доставка
- Повинен
- показ
- простий
- Розмір
- So
- Софтвер
- деякі
- що в сім'ї щось
- пробіли
- Стоп
- стиль
- такі
- підтримка
- Переконайтеся
- Приймати
- Мітчики
- технології
- Технологія
- Такі
- сказати
- термін
- текст
- Що
- Команда
- Їх
- потім
- Там.
- вони
- речі
- це
- через
- times
- до
- топ
- трек
- Дерева
- спрацьовує
- правда
- Поворот
- ui
- використання
- використання випадку
- використовуваний
- користувач
- User Experience
- користувачі
- використання
- видимий
- бачення
- візуальний
- W3
- хотіти
- шлях..
- способи
- we
- Web
- веб-сайт
- ДОБРЕ
- Що
- Що таке
- Колесо
- коли
- всі
- волі
- бажання
- з
- в
- чудовий
- слова
- світ
- б
- письмовий
- Ти
- вашу
- зефірнет