Як створити доступні веб-форми

Sep 13, 2025

Як

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

Хоча це правда, що створення форм може бути складним завданням, роблячи їх помірно доступними, не настільки складно, як ви думаєте (добре Веб-будівельник зробить це супер-простим). Часто викидаються відкидаються навколо, як "у нас немає часу, щоб турбуватися про доступність" або "Ми зробимо його доступним пізніше". Ці виправдання часто (якщо не завжди) недійсними, і ви можете допомогти вашій команді змінити це мислення.

Шукаєте більше порад? Ми отримали вас, покриті повідомленнями про теми веб хостинг до хмара зберігання .

13 найкращих частин програмного забезпечення для тестування користувачів

Ось деякі питання, які ви повинні розглянути, коли формують форми:

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

Як зробити основну форму передплати

Я дав вам деякий кодекс стартера, щоб допомогти вам попереду. Добре починати з цього і зрештою дістатися до цього .

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

Почнемо з підключення & lt; input & gt; елементи до їх відповідного & lt; label & gt; s. Ми робимо це, даючи & lt; input & gt; Ідентифікатор і використання цього як для атрибуту для & lt; label & gt; . Для них ми можемо використовувати "Name" та "Електронна пошта", і ми вже зробили дві речі:

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

Тепер, коли наші входи та етикетки ведуть, ми можемо визначити типи введення HTML. Вони дійсно корисні, а дуже простий спосіб дати чудовий досвід користувачів. Додавання тип Атрибут допоможе користувачеві автоматично заповнити вашу форму та також забезпечить більш підходящу клавіатуру для мобільних користувачів. Для нашого випадку ми можемо зробити Тип = "Текст" Для введення назви і Тип = "Електронна пошта" для введення електронної пошти.

Ми також хочемо, щоб наші користувачі мали гарну ідею того, який тип даних (та його форматування) ми очікуємо від них. Тут це досить очевидно, але це не завжди так. Це, як правило, хороша практика, щоб забезпечити етикетку, яка завжди доступна, і заповнювач, який повідомляє очікуваний внесок. Це означає, що не використовує заповнювач Атрибут як візуальна етикетка для входів, де мітка не доступна, коли користувач починає друкувати. Це була популярна практика для багатьох розробників, і насправді потрібно покласти спати один раз і назавжди. Ми можемо дати заповнювач "Ex. Jane Doe" для назви та "ex. [email protected]" для електронної пошти.

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

14 Легких способів зробити ваш веб-сайт більш доступним

Додайте стилі фокусу до селектора введення

Нарешті, нам потрібно додати деякі стилі фокусу навколо елемента кнопки. Це часто забуває, але дійсно може допомогти клавіатурі, лише користувачі знають, де вони є. Ми повинні додати це & amp; :: Moz-Focus-Innner Біт, щоб позбутися деякого стилю за умовчанням у Firefox (можливо, ви захочете зберегти цей фрагмент для подальшого використання).

Так само, у нас є основна форма підписки, яку ви можете пишатися і вдосконалюватися. Оскільки ми використовували хорошу семантику, форма доступна лише за допомогою клавіатури (спробуйте скористатися вкладкою та клавіатурою). Кольори, що використовуються для кнопки, - це коефіцієнт кольорів 11.51, що відповідає стандартам AAA для WCAG (рекомендації щодо доступності веб-вмісту). Ми надавали етикетки як для візуальних користувачів, так і для користувачів екрана-читача, а також стилізованих фокус-станів для нашої клавіатури друзів. Нарешті, зверніть увагу, що шрифт встановлено 18px в тілі. Це робить нашу форму набагато читабельною (ви повинні спробувати залишитися вище 14px).

Проектування та будівництво з доступністю на увазі займає практику, але ви будете кращим розробником для нього і допомагає зробити веб кращим місцем.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Генерація, нагорода конференції для веб-дизайнерів, повертається до NYC 24-25 квітня! Натисніть на зображення, щоб забронювати квиток

Ця стаття була опублікована у випуску 316 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити проблему 316 тут або Підписатися тут .

Пов'язані статті:

Виправлення доступності не вдається за допомогою цього безкоштовного інструменту
50 чудових нових інструментів для розробників у 2019 році
Як доступні ваші конструкції?

Як створити доступні веб-форми

Як зробити основну форму передплати

Додайте стилі фокусу до селектора введення

Як - Найпопулярніші статті

Як реалізувати світло або темні режими в CSS

Дизайнер афінності: Як використовувати Pixel Persona

Три кроки до блискучого нічного неба в акварелі

Як створити світяться кольори з масляними фарбами

Як спроектувати ізометричну типографіку

13 Поради щодо створення VR Gaming World

Як побудувати світи для кіно

Як створити яскраву фею королеву

Категорії