Доступність

Доступність (скорочено: a11y) — це мистецтво зробити ваш веб-сайт якомога зручнішим для якомога більшої кількості людей.

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

Згідно з даними ВООЗ, близько 15% населення світу має якісь обмеження. Ваш час краще інвестувати в покращення доступності вашого сайту, ніж в його оптимізацію для IE (який має лише 2% світового використання). У деяких країнах це є юридичною вимогою.

Як Esl допомагає вирішувати проблеми доступності

Esl надає інструменти для генерації максимально семантичного HTML і підходу до вимог доступності та найкращих практик без необхідності кодувати.

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

Об’єкти ARIA

Esl за замовчуванням створює три різні області об’єктів: Заголовок, Основний вміст та Нижній колонтитул.

Esl елементи використовують найбільш семантичні теги, коли це можливо. Наприклад, елемент Форма та елемент Навігаційне меню використовують правильні HTML теги: form і nav відповідно. Якщо вам потрібно додати більше об’єктів на вашу сторінку або будь-який інший семантичний тег, ви можете це зробити, використовуючи елемент Контейнер, вибираючи необхідний HTML тег. Ви також можете вказати власний HTML тег.

Esl 1.3 також вводить Користувацькі атрибути. Вони дозволяють вам додавати інші атрибути до будь-якого елемента Esl.

Загальний приклад: Якщо ви хочете призначити атрибут role для контейнера, перейдіть у “Стиль > Атрибути”, додайте новий атрибут, натиснувши на іконку “+”, і встановіть “Ім’я” на “role” і “Значення” на відповідне значення:

Зображення

Зображення в Esl відображаються з використанням альтернативного тексту, наданого в медіа-атрибутах зображення (WordPress Media). Атрибут alt – це місце, де власники сайтів повинні надати опис зображення для людей, які не можуть його побачити. Esl також дозволить вам надавати власний атрибут alt, якщо ви використовуєте елемент Зображення всередині движка.

Для фонових зображень, коли це необхідно, Esl зазвичай додає role="img" aria-label="{опис альтернативного зображення}" до div, який відображає зображення на фоні. Опис зображення – це зміст, отриманий з атрибута alt, визначеного в медіа WordPress.

Посилання

Встановіть атрибути aria-label (та title) для посилань, використовуючи движок, якщо опис посилання порожній або недостатньо зрозумілий. Ці атрибути покращать те, як допоміжні технології, такі як екранні читачі, інтерпретують ваш вебсайт, і слід їх використовувати для надання кращого контексту до посилання в разі, якщо вміст посилання недостатньо семантичний.

Також важливо згадати, що хорошою практикою є уникати використання посилань з термінами на кшталт “Дізнатися більше” або “Натисніть тут”, оскільки ці ярлики не надають жодного контексту для відвідувачів. Якщо ви все ж хочете використовувати ці терміни, переконайтеся, що ваше посилання містить атрибут aria-label, щоб надати контекст для навігації.

Форми

Елемент Форми дозволяє вам додавати або видаляти ярлики полів. Ярлики полів важливі для дотримання рекомендацій з доступності, оскільки вони надають опис того, що потрібно ввести в кожне поле. Якщо ви не хочете показувати ярлики полів, Esl зазвичай додає атрибут aria-label до поля вводу, використовуючи ярлик, визначений для кожного поля в движку.

Навігація з клавіатури

Один з головних вимог доступності (a11y) полягає в тому, щоб гарантовано, що ваш вебсайт можна експлуатувати/навігувати, використовуючи тільки клавіатуру. Забезпечення гарної навігації з клавіатури дозволить не тільки людям, які не можуть використовувати мишу, переміщуватися по вашому вебсайту, але й людям, які використовують інші допоміжні технології.

Один з ключових аспектів навігації з клавіатури – це мати візуальний натяк на те, де знаходиться фокус. Esl 1.3 вводить стандартний CSS для стилізації властивості :focus.

Ви можете встановити свій власний стиль фокуса в розділі “Налаштування > Теми Стилі > Типографіка > Окантовка Фокусу”. Хоча це не рекомендується, якщо ви хочете видалити цю стандартну окантовку фокусу, просто встановіть її на “none”.

Пропустити навігацію посилань

При використанні навігації з клавіатури може бути неприємно переходити через всі меню, перш ніж дістатися до основного вмісту сторінки. Щоб подолати це, одна з найкращих практик, разом з семантичними ARIA-ландмарками (як описано вище), – вставити посилання на верхній частині сторінки, щоб обійти навігацію.

Esl 1.3 за замовчуванням вводить два посилання для пропуску: одне для переходу до контенту і інше для переходу до нижнього колонтитулу (якщо нижній колонтитул існує). Ці посилання для пропуску додаються автоматично до вашого веб-сайту і з’являться лише якщо ви натиснете клавішу TAB на клавіатурі.

Один з найбільш використовуваних елементів на веб-сайтах – це навігаційне меню. Цей елемент робить контент веб-сайту більш доступним для всіх і, отже, заслуговує на особливу увагу, щоб люди без миші також могли навігувати та відкривати посилання всередині меню.

Esl також покриває цю потребу. Всі меню, згенеровані Esl, поміщені всередину тега <nav> і повністю доступні за допомогою клавіатури відповідно до звичайної поведінки клавіш, коли фокус знаходиться всередині елемента меню:

TAB: Вибирає наступний пункт меню
SHIFT TAB: Вибирає попередній пункт меню
ENTER: Відкриває посилання (аналогічно натисканню)
SPACE: Відкриває підменю (якщо існує)

Esl реалізує навігацію по меню за допомогою підходу випадного меню.

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