Доступність (Accessibility) є найважливішим компонентом створення інклюзивного та зручного для слабозорого користувача цифрового середовища. Забезпечення такої функціональності веб-сайтів, які ви створюєте, — це не просто моральний і етичний імператив, але часто і юридична і ділова необхідність.
У цій статті ми обговорюємо, чому важлива доступність для людей з вадами зору і людей з обмеженими можливостями. І деякі ключові функції, на які слід звернути увагу при виборі рішення щодо її забезпечення. Крім того, розглянемо деякі плагіни, які допоможуть переконатися, що створювані вебсайти готові обслуговувати людей з вадами зору та інші категорії відвідувачів.
Чому доступність для людей з вадами зору має значення
Доступність у веб-дизайні — це не просто моральний чи етичний імператив, а й критично важливий аспект створення інклюзивного та зручного для користувача цифрового середовища. Залежно від вашої юрисдикції можуть бути юридичні міркування. Позитивний момент у тому, що забезпечення доступності веб-сайту, як правило, покращує загальний досвід для всіх.
Переваги для бізнесу
Адаптований для людей з вадами зору вебсайт підвищує репутацію компанії, демонструючи прихильність інклюзивності та соціальної відповідальності. Такий підхід може виділити бренд, залучити ширшу аудиторію та підвищити лояльність клієнтів. Доступні сайти також, як правило, показують найкращі результати в рейтингах пошукових систем, оскільки пошукові системи віддають перевагу сайтам, які обслуговують ширшу аудиторію, і мають добре структурований семантичний контент.
Покращений досвід користувача
Доступність не обмежується користувачами з вадами зору, а також з іншими обмеженими можливостями; вона покращує загальний досвід для всіх. Принципи доступного дизайну, такі як зрозуміла навігація, достатній контраст кольору і можливість налаштування розміру тексту, роблять веб-сторінки зручнішим для всіх. Такі функції, як субтитри для відео, корисні в тихій або тихій обстановці. А навігація за допомогою клавіатури може бути корисною, коли миша не працює.
Більш широке охоплення та зручність використання
Розробляючи сайт з урахуванням доступності для людей з вадами зору, ви можете розширити охоплення для більш широкої аудиторії. Наприклад, сайт, який доступний на різних пристроях та в різних умовах освітлення, може бути зручнішим для використання ширшим колом людей.
Основні принципи адаптивного для людей з вадами зору і в цілому доступного дизайну
В основі доступного веб-дизайну лежать чотири ключові принципи: сприйнятливість, зручність використання, зрозумілість та надійність.
- Сприйнятливість: гарантує, що веб-контент представлений таким чином, що може бути сприйнятий усіма користувачами. Це включає надання альтернатив для нетекстового контенту, забезпечення достатнього колірного розмаїття та надання візитера можливості налаштовувати подання контенту.
- Зручність використання: фокусується на тому, щоб зробити веб-інтерфейси зручними для навігації та експлуатації для всіх користувачів.
- Зрозумілість: забезпечує ясність та простоту розуміння контенту. Це передбачає використання ясної та послідовної навігації, надання чітких повідомлень зворотного зв'язку та структурування контенту в логічній та простій для розуміння формі.
- Надійність: гарантує, що контент може бути інтерпретований широким спектром користувачів агентів, включаючи допоміжні технології. Це передбачає використання семантичного HTML та забезпечення того, що сайт залишається доступним на різних пристроях та браузерах.
Ключові особливості
Коли справа доходить до вибору плагіна доступності для WordPress, є кілька ключових функцій, які слід враховувати. Ми повинні відзначити, що плагін, який не має однієї чи кількох з цих функцій, все одно може бути найкращим вибором для конкретної ситуації. Ретельно зважте всі «за» та «проти» кожного плагіна та виберіть той, який найкраще відповідає потребам вашого проекту.
Панелі інструментів спеціальних можливостей та параметри налаштування
Панель інструментів доступності може стати вирішальним фактором для користувачів. Шукайте плагіни, які пропонують панелі інструментів з такими функціями, як регулювання розміру шрифту, режими високої контрастності та зміна колірної схеми. Ці інструменти дозволяють відвідувачам налаштовувати зовнішній вигляд сайту відповідно до своїх потреб, роблячи контент більш читабельним та доступним.
Навігація за допомогою клавіатури
Забезпечення навігації за допомогою клавіатури має вирішальне значення для користувачів з руховими порушеннями або тих, хто просто воліє використовувати клавіатуру. Функції, які покращують навігацію за допомогою клавіатури, такі як додавання контурів до стану фокусу клавіатури та видалення непотрібних атрибутів індексу вкладок, можуть значно покращити досвід користувача.
Оптимізація для програми читання з екрану
Для користувачів з вадами зору та/або тих, хто використовує програми читання з екрана, важливо, щоб ваш вебсайт надавав необхідні підказки та описи. Такі функції, як автоматична генерація альтернативного тексту, атрибути ARIA та коригування поведінки можуть допомогти програмам читання з екрана правильно інтерпретувати сайт. Це включає підтримку таких елементів, як списки, форми і спливаючі вікна.
Пропуски посилань та навігаційні засоби
Пропустити посилання дозволяють відвідувачам обходити навігаційні меню та переходити безпосередньо до основного змісту сторінки. Це особливо корисно для користувачів програм читання з екрана та тих, хто використовує навігацію за допомогою клавіатури.
alt-текст для зображення
Зображення без тексту alt стають серйозною перешкодою для користувачів з порушеннями зору. Переконайтеся, що вибраний плагін може застосовувати атрибути alt для зображень, визначати зображення без тексту alt і надавати довгі описи для зображень за потреби.
Форми та посилання
Адаптивні форми і посилання для людей з вадами зору життєво важливі для правильного розуміння і заповнення. Функції, які додають мітки до стандартних полів форм, видаляють надлишкові атрибути заголовків і забезпечують правильне форматування посилань, можуть мати велике значення. Підбирайте плагіни, які не дозволяють посиланням відкриватись у нових вікнах без попередження, що може дезорієнтувати деяких користувачів.
Короткий зміст та читабельність
Надання резюме контенту у верхній частині постів та сторінок може допомогти користувачам екранних рідерів вирішити, чи читати всю статтю. Крім того, функції, що спрощують структуру контенту та покращують читаність, можуть принести користь усім.
Дивіться також:
Як оптимізувати сайт WordPress для голосового пошуку.
Плагіни
Нижче наведено деякі з найпопулярніших плагінів доступності WordPress. Це не та область, де дійсно існує рішення "один розмір підходить всім". Вам доведеться ретельно вибирати плагін, який найкраще підходить для ваших потреб та потреб конкретного проекту. Як завжди в таких статтях, включення плагіна до цього розділу не є офіційним схваленням. Не забудьте провести своє дослідження, перш ніж брати на себе будь-які зобов'язання.
WP Accessibility
WP Accessibility — це плагін, призначений для вирішення найпоширеніших проблем доступності в темах та ядрі WordPress, хоча він не призначений для того, щоб зробити ваш сайт повністю відповідним рекомендаціям щодо доступності.
WP Accessibility допомагає з різними проблемами, пов'язаними з темою, такими як додавання посилань пропуску з настроюваними цілями та зовнішнім виглядом, а також додавання атрибутів мови та направлення тексту в HTML, якщо вони відсутні. Він також додає контур до стану фокусу клавіатури для елементів, що фокусуються, що особливо корисно для користувачів, які покладаються на навігацію за допомогою клавіатури.
Плагін покращує відображення зображень для людей з вадами зору, примусово застосовуючи атрибути alt для зображень у редакторі Classic і визначаючи зображення без атрибутів alt в бібліотеці мультимедіа. Він додає довгі описи до зображень, використовуючи поле «Опис» зображення та мітки до стандартних полів форми WordPress, таких як пошук та коментарі. Крім того, він додає заголовки постів до посилань «читати далі» і видаляє tabindex з фокусованих елементів.
WP Accessibility також виправляє деякі проблеми доступності ядра WordPress, такі як примусове виникнення помилки сторінки пошуку під час пошуку з порожнім текстовим рядком, видалення надлишкових атрибутів заголовка з хмар тегів та відключення включення повноекранного редактора блоків за промовчанням.
Плагін включає корисні інструменти, такі як тестер контрастності кольору, діагностичний CSS для відображення проблем, що виявляються CSS, і функцію пошуку полів альтернативного тексту в бібліотеці мультимедіа. Усі функції можуть бути відключені відповідно до потреб теми, а просунуті користувачі можуть налаштовувати модифікації таблиць стилів за допомогою власних стилів.
Equalize Digital Accessibility Checker
плагін Equalize Digital Accessibility Checker забезпечує повідомлення про помилки та попередження доступності в режимі реального часу на екранах редагування постів та сторінок. Щоразу, коли ви зберігаєте чернетку або публікуєте контент, плагін автоматично сканує його за більш ніж 40 різними перевірками доступності, що відповідають критеріям успіху Web Content Accessibility Guidelines (WCAG) 2.1. Це дає вам візуальний огляд того, як складається контент, і допомагає швидко виявляти та усувати проблеми.
Для кожної зазначеної помилки чи попередження плагін перераховує конкретний код, що викликав проблему, класифікуючи їх як помилки чи попередження залежно від рівня серйозності. Це дозволяє ефективно визначити пріоритетність виправлень.
Однією з ключових переваг Accessibility Checker є його здатність забезпечувати постійну відповідність ADA, розділ 508, AODA та рекомендації WCAG. Вона допомагає контент-менеджерам та авторам підтвердити, що їхній контент введений доступним чином, без необхідності бути експертом з доступності. Плагін включає аналіз читання та автоматичну вставку спрощених резюме, які відповідають критерію успіху WCAG 3.1.5 для рівня читання.
Pro-версія плагіна пропонує додаткові функції, такі як масове сканування всіх постів і сторінок, сканування типів користувача постів і можливість швидко переглянути статус доступності постів і сторінок в адмінпанелі Вона також включає централізований список всіх відкритих проблем, журнал ігнорування для відстеження проігнорованих помилок і попереджень і обмежень попередження.
AccessibleWP – Accessibility Toolbar
Плагін AccessibleWP - Панель інструментів доступності дозволяє додати на вебсайт панель інструментів спеціальних можливостей, що спрощує навігацію та взаємодію з контентом для людей з вадами зору та інших користувачів.
Панель інструментів містить декілька ключових опцій. Вона дозволяє користувачам переміщатися сайтом за допомогою клавіатури, що корисно для тих, хто не може використовувати мишу. А також для тих, хто просто віддає перевагу навігації за допомогою клавіатури. Відвідувачі можуть відключити анімацію CSS3, яка може відволікати. Панель інструментів пропонує режим темного контрасту, що дозволяє користувачам змінювати кольори сайту на кольори з темним контрастом, і ви можете налаштувати ці кольори на власний розсуд.
Крім того, панель інструментів дозволяє збільшувати або зменшувати розмір шрифту, що робить контент більш читабельним. Також можна змінювати сімейство шрифтів на більш читальний шрифт з можливістю вибору конкретного шрифту. Плагін виділяє заголовки на сторінці, що полегшує користувачам розуміння структури контенту. І зазначає всі посилання, допомагаючи користувачам розрізняти посилання та звичайний текст.
Важливо, що AccessibleWP –Accessibility Toolbar не охоплює всі рекомендації, потрібні Web Content Accessibility Guidelines (WCAG). Плагін призначений для того, щоб допомогти досягти кращої доступності, але не гарантує повної відповідності.
Доступність від UserWay
Доступність від UserWay покликаний спростити і поліпшити адаптивність сайту WordPress для людей з вадами зору. І користувачів з фізичними обмеженнями, зробивши його більш відповідним різним стандартам та нормам доступності.
Плагін вносить зміни до елементів сайту, які ідентифіковані як не відповідні, гарантуючи, що веб-сайт відповідає навігації лише за допомогою клавіатури та правил ADA. Він особливо ефективний для зміцнення будь-яких областей, які можуть порушувати правила ADA та WCAG 2.1, допомагаючи наблизитись до повної відповідності.
Користувачі можуть перемикатися між різними рівнями контрастності, покращуючи видимість і роблячи текст та елементи більш помітними. Плагін також включає екранний диктор, який забезпечує звуковий зворотний зв'язок для вмісту на екрані, читає вголос текст і описи. А також навігаційні елементи, допомагаючи гарантувати, що всі користувачі, що слабовидять, можуть взаємодіяти з контентом і розуміти його.
Крім того, плагін дозволяє користувачам налаштовувати розмір шрифту, вибирати з різних типів шрифтів. Крім того, можна налаштовувати висоту рядка та інтервал між літерами для кращого читання. Він також пропонує навігацію за допомогою клавіатури, функції перетворення тексту на мову та можливість виділяти ключові області веб-сторінки, такі як посилання та заголовки, для покращення фокусування користувача та простоти навігації.
WP Всього11г
WP Tota11y - плагін WordPress, розроблений Khan Academy, допомагає виявляти та усунути проблеми доступності.
WP Tota11y інтегрує набір інструментів візуалізації доступності Tota11y безпосередньо до сайту WordPress, надаючи зворотний зв'язок у режимі реального часу з проблем доступності. Невеликий значок окулярів, доданий до нижнього лівого кута сторінки, при натисканні відкриває сім варіантів тестування, включаючи одну експериментальну функцію.
Він пропонує візуальні засоби, які допомагають визначити різні бар'єри для людей з вадами зору, такі як неправильні рівні заголовків, проблеми з колірним контрастом, поганий текст посилань, відсутні мітки в елементах форм і відсутній alt-текст у зображеннях. Він також включає експериментальну паличку для читання з екрану, яка переглядає елементи так, як це робить читання з екрану, даючи чітке уявлення про те, як сайт взаємодіє з допоміжними технологіями.
WP Tota11y можна увімкнути на бекенді, що дозволить протестувати доступність параметрів плагінів і тим, що особливо корисно для розробників тем і плагінів.
Плагін також виділяє відповідний код та пропонує способи виправлення виявлених проблем, що полегшує завдання підвищення загальної доступності сайту WordPress.
Адаптація сайту WordPress для людей з вадами зору покращує також загальний користувальницький досвід для всіх.
Джерело: deliciousbrains.com
Коментарі до запису: 1
Нещодавно моя команда зробила новий віджет, який є безкоштовним (з платними опціями за бажанням)
https://wordpress.org/plugins/wideaccess-accessibility-widget/