За даними CDC, 26% дорослих США мають ту чи іншу форму інвалідності. В інших країнах ця цифра практична така сама – чверть населення мають якісь порушення. Нездатність зробити веб-сайт доступним для людей з порушеннями зору або когнітивних здібностей може призвести до втрати трафіку, низького рейтингу SEO і навіть до судових суперечок.
У наші дні майже кожен веб-сайт включає будь-яку форму – будь то форма замовлення продукту або щось простіше, наприклад, контактна форма. Форми часто є однією з найпроблемніших частин веб-сайту, тому вони заслуговують на особливу увагу!
Незалежно від того, як ви реалізуєте свою форму - за допомогою коду користувача або плагіна - необхідно дотримуватися певних рекомендацій і передових методів, щоб забезпечити повний доступ до форм людей з обмеженими можливостями.
У цьому пості ви дізнаєтеся, як створювати веб-доступні форми для WordPress, що допоможе охопити ширшу аудиторію, покращити досвід користувача веб-сайту і збільшити дохід.
Що таке доступність веб-сайту?
Такі інструменти, як WAVE Accessibility Checker, показують доступні елементи та можливості для покращення.
Ініціатива Web Accessibility запуску в World Wide Web Consortium пише, що:
«Доступність Інтернету означає, що веб-сайти, інструменти та технології спроектовані та розроблені таким чином, щоб люди з обмеженими можливостями могли ними користуватися. Зокрема, люди можуть – сприймати, розуміти, переміщатися та взаємодіяти з Інтернетом – робити свій внесок до Інтернету».
Навігація по веб-сайту, введення інформації та вибір правильного посилання або кнопки може бути складним завданням для користувачів із візуальними, фізичними чи когнітивними порушеннями. Доступність включає застосування набору передових методів, щоб зробити сайт зручним для використання людьми:
- з порушеннями зору, що використовують програми читання з екрану,
- з обмеженими фізичними можливостями, які переміщуються сайтами за допомогою клавіатури,
- з когнітивними порушеннями,
- з дальтонізмом,
- що покладаються на голосовий пошук,
- які не розмовляють англійською та користуються послугами перекладачів,
- з тимчасовими захворюваннями, наприклад, зі зламаною рукою, яким необхідно вводити інформацію за допомогою натискання клавіш.
Форми є однією з найбільших проблем доступності, оскільки в них може бути складно орієнтуватися і заплутатися при заповненні.
Важливість доступних веб-форм
Форми діють як міст між вами та клієнтами. Тому дуже важливо забезпечити доступність форм для людей з обмеженими можливостями. Ось деякі з найважливіших причин оптимізації веб-форм WordPress для загальної доступності.
Збільшіть свій прибуток
Доступність допоможе збільшити ваш прибуток. Наприклад, результати британського опитування Click-Away Pound 2019 року показали, що великий відсоток користувачів з обмеженими можливостями залишає веб-сайти через проблеми з доступністю, забираючи більше 17 мільярдів доларів потенційних витрат.
Поліпшення досвіду користувача
Дотримання передових практик в галузі спеціальних можливостей може спростити навігацію по веб-сайту та полегшити його читання. Зміни спеціальних можливостей допомагають покращити взаємодію користувача для всіх відвідувачів веб-сайту, а не тільки для людей з обмеженими можливостями.
Підвищіть свій SEO
Приділяючи пильну увагу структурі веб-сайту та полегшуючи навігацію, можна підвищити SEO, спростивши пошукові системи сканування. Крім того, додавання описового «альтернативного тексту» до зображень, званого тегами alt, має вирішальне значення як для людей з ослабленим зором, так і для пошукових систем, коли це стосується розуміння контенту.
Пошукові системи віддають перевагу контенту, який легко доступний кожному. Ось чому доступність завжди буде важливим фактором у SEO.
Залучити велику аудиторію
Згідно зі статистикою Європейської комісії, Організації Об'єднаних Націй та інших організацій можна з упевненістю припустити, що близько 20% населення світу має ту чи іншу форму інвалідності. З огляду на це, запровадження передових методів забезпечення доступності приверне більше клієнтів.
Рекомендації щодо створення доступних веб-форм
То як створити доступні форми для свого веб-сайту WordPress? Ось кілька рекомендацій.
Використовуйте плагін форми, створений для забезпечення доступності
Якщо хочете заощадити час та сили, слід використовувати плагін форм WordPress, який уже включає функції доступності. Коли справа доходить до доступних форм, одним з найкращих плагінів є гравітаційні форми[/link].
Gravity Forms розроблено для забезпечення доступності. Це відображено в останньому випуску, що включає безліч важливих функцій для створення доступні форми, які відповідають світовому стандарту WCAG 2.1 AA.
Gravity Forms 2.5 включав безліч поліпшень доступності, які підняли його значущість над іншими плагінами форм. Сюди входить докладний відгук програми читання з екрану для сліпих або слабозорих користувачів, а також попередження в області адміністратора про поля з проблемами доступності.
Але доступність – не єдина причина для використання Gravity Forms. Існує також безліч потужних надбудов, що розширюють Gravity Forms, що дозволяють створювати потужні веб-програми.
Інформуйте користувачів про те, чого очікувати
Ясність важлива спільної взаємодії з користувачем, а чи не лише доступності. Створюючи форми, переконайтеся, що їх легко сканувати і щоб у кожного поля були чіткі інструкції. Якщо користувачі визнають форми заплутаними, вони засмутяться і залишать сайт.
Якщо у вас є форма з кількома кроками, важливо повідомити користувачів, на якому етапі вони перебувають і скільки кроків залишилося. Переконайтеся, що користувачі можуть повернутися до попередніх кроків, щоб вони могли змінювати або оновлювати інформацію на свій розсуд.
Зрештою, дайте всім своїм кнопкам та посиланням описовий текст, щоб було зрозуміло, чого очікувати при натисканні на них. Замість використання «Клацніть тут» як текст посилання використовуйте щось, що описує посилання, наприклад, «Наш блог». Те саме і з кнопками. "Надіслати" є сухим і загальним, скоріше використовуйте щось, що описує дію, що робиться користувачем, наприклад "Підписатися" або "Надіслати повідомлення".
Ярлики та описи полів
При написанні ярликів переконайтеся, що вони мають сенс і ясно і коротко повідомляють користувачеві, що потрібно заповнити. Для найкращих налаштувань спеціальних можливостей розмістіть мітки над полями введення, де вони будуть добре видно і не включайте HTML або посилання, оскільки це може спантеличити програми читання з екрану.
Використовуючи плагін форми, ви зможете зробити опис полів. Це необов'язково, але їх можна використовувати, щоб надати додаткову інформацію про поле.
Кольоровий контраст
Кольори, що використовуються на вашому веб-сайті, важливим фактором доступності. Колірний контраст – це різниця у освітленні між шрифтом на передньому плані та кольором фону. Погано вибрані кольори для ваших форм можуть ускладнити їх читання людьми, особливо з порушеннями зору.
Коли справа доходить до WordPress, колір форм зазвичай визначається темою, але їх можна змінити, додавши власні стилі CSS. Крім того, пам'ятайте, що в інструкціях до форми не слід згадувати колір. Наприклад, не кажіть «натисніть зелену кнопку, щоб продовжити», оскільки це може викликати проблеми у користувачів із дальтонізмом.
Розмір та вага шрифту також важливі для забезпечення доступності. Переконайтеся, що шрифт форм є чітким і читається. Є кілька плагінів, таких як One Click Accessibility, які дозволяють користувачам переглядати сайт, використовуючи різні комбінації кольорів.
Умовна логіка
Якщо ваші форми містять умовну логіку, переконайтеся, що вона впливає доступність. Наприклад, ніколи не використовуйте умовну логіку, щоб приховати кнопку «Надіслати».
reCAPTCHA
Хоча CAPTCHA та reCAPTCHA можуть бути важливою частиною вашої стратегії боротьби зі спамом, вони стануть кошмаром, коли справа доходить до доступності. CAPTCHA часто вимагає від користувачів заповнення інформації або вибору певних зображень на екрані. Це не тільки погіршує користувальницький досвід, але й створює проблеми для людей з когнітивними та/або зоровими порушеннями.
Замість CAPTCHA використовуйте альтернативи, такі як поля приманки або плагіни спаму, орієнтовані на конфіденційність, які не впливають на взаємодію користувача. Найвідомішим фаворитом у цій галузі є Akismet.
Дивіться також:
Кращі плагіни CAPTCHA для WordPress сайту.
Повідомлення про помилки
Переконайтеся, що повідомлення про помилки є змістовними та чітко написаними. Повідомлення про помилки повинні містити зворотний зв'язок про помилки або упущення і пояснювати, як їх виправити. Наприклад, замість того, щоб сказати «відбулася помилка», ви можете сказати «Ваш пароль занадто короткий. Будь ласка, введіть пароль із 12 або більше символів».
Пам'ятайте, ваше завдання – допомогти користувачеві заповнити форми, і щоб це було швидким та приємним процесом. Повідомлення про помилки, в яких недостатньо інформації, можуть викликати занепокоєння та розчарування.
Клавіатура навігації
Багато користувачів з обмеженими можливостями не можуть використовувати мишу, тому переконайтеся, що у ваших формах можна переміщатися, використовуючи лише клавішу табуляції.
Надійна розмітка HTML
Якщо ви вважаєте за краще створювати форми з нуля, важливо використовувати правильний HTML-код, оскільки саме його використовують програми читання з екрана під час передачі інформації. Наприклад, мітки повинні використовувати тег , а не теги або .
Крім того, поля з кількома параметрами введення повинні використовувати тег, оскільки він повідомляє програм читання з екрана, які параметри якому полю належать.
Веб-доступність – це практика, яка дозволяє зробити ваш веб-сайт доступним для людей з фізичними та когнітивними порушеннями. Форми – один з найважливіших аспектів веб-сайту, оскільки вони є мостом між вами та вашими клієнтами. Однак форми також сумно відомі тим, що створюють проблеми з доступністю і тому потребують особливої уваги!
Чи готові ви створювати доступні форми для свого веб-сайту WordPress? Реалізація вищезгаданих стратегій дозволить перевершити більшість інших сайтів в Інтернеті, так що почніть сьогодні!
Джерело: www.wpexplorer.com
Коментарі до запису: 0