Що дозволить зробити ваш сайт більш веб-доступним?

Основна мета створення веб-сайту — це поділитися своїм контентом з усім світом. Ви хочете, щоб якомога більше людей могли отримати доступ до вашого сайту та взаємодіяти з ним. Тобто, потрібно досягти максимальної доступності вашого веб-сайту для людей з самими різними можливостями, — щоб вони могли не лише отримати доступ до вашого контенту, але й взаємодіяти з ним. Проектування сайтів з урахуванням веб-доступності гарантує, що Інтернет буде інклюзивним простором, де кожен матиме можливість отримувати доступ до інформації, спілкуватися та брати участь у житті суспільства.

Що мається на увазі під вебдоступністю (Web accessibility, або eAccessibility)?

Для багатьох людей наявність лише доступу до Інтернету та Всесвітньої павутини (WWW) не означає, що вони можуть скористатися всіма його перевагами та/або отримати повний доступ до контенту. Люди з певними обмеженими можливостями (наприклад, із порушеннями зору) хоча й спроможні відвідувати веб-сайти, але можуть стикнутись із деякими проблемами при обробці інформації. І часто в таких випадках їм можуть допомогти лише додаткові інструменти (як от програми зчитування з екрана).

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

Сучасні інструменти, що підвищують рівень веб-доступності сайту

Дуже важливо ще на етапі розробки свого сайту закласти можливість використання програмних та апаратних засобів та служб, які люди з обмеженими можливостями зможуть використовувати для кращої взаємодії з Інтернетом та Всесвітньою павутиною. Нижче ви знайдете деякі приклади інструментів вебдоступності, що використовуються сьогодні:

• Програми зчитування з екрана: програмні додатки, які зчитують текст, що відображається на екрані (тобто, екранні диктори). Вони використовуються переважно незрячими або слабозорими людьми (з порушеннями зору), що дозволяє їм «слухати» текст з екрану девайсів.
• Перетворення тексту в мовлення (TTS, Text to Speech): це програмне забезпечення перетворює цифровий текст на розмовні слова, подібно до програм зчитування з екрана. Синтез мовлення використовується не лише людьми з порушеннями зору, але й людьми з труднощами (розладами) у навчанні (наприклад, такими як дислексія).
• Програмне забезпечення для розпізнавання мовлення (Voice to Text): воно дозволяє користувачам промовляти команди комп’ютеру або диктувати текст. Таке ПЗ може бути корисним для людей з обмеженими можливостями пересування або спритності.
• ПЗ для збільшення екрана: дозволяє збільшувати текст і графіку на екрані комп’ютера (чи іншого девайсу), допомагаючи користувачам з порушеннями зору.
• Дисплей Брайля: цей пристрій здатен перетворювати текст на екрані на символи Брайля, які можна читати на дотик.
• Субтитри та субтитрування: ці технології надають текстову версію аудіо/відео, допомагаючи людям з порушеннями слуху.
• Служби перекладу жестової мови: перекладачі ЖМ дозволяють перекладати розмовну та письмову мову на жестову мову.
• Служби транскрипції: дані сервіси можуть перетворювати розмовну мову (з аудіо/відео) на письмовий текст (або текстовий документ), що може бути корисним для людей з порушеннями слуху.
• Аналізатори колірного контрасту: з допомогою цих інструментів простіше визначити, чи достатній контраст між текстом і фоном. Дозволяють вимірювати та оцінити контрастність кольорів, що може бути корисним для користувачів з порушеннями кольорового зору (дальтонізм, колірна сліпота).
• Голосові браузери (Voice Browsers): з допомогою цих застосунків люди, які цього потребують, можуть переміщатися по Інтернету з допомогою голосових команд замість клавіатури чи миші.
• Налаштовувані інтерфейси: ці кастомізовані інтерфейси можуть бути розміщені на веб-сайтах та/або застосунках, які хочуть допомогти користувачам реалізувати потребу в налаштуванні розміру шрифту, кольорів та інших властивостей відображення відповідно до їхніх потреб.

Зауважте, що цей перелік інструментів не є кінцевим, адже постійно з’являється нове забезпечення, що допомагає людям у доступі до Інтернету та Всесвітньої павутини. Ці інструменти є важливими для забезпечення того, щоб Інтернет залишався інклюзивним простором. Більшість сучасних ОС (операційних систем) і веб-браузерів вже мають вбудовані функції доступності, які можна ввімкнути або налаштувати відповідно до індивідуальних потреб.

Як з допомогою програмного коду можна підвищити веб-доступність?

Важливо знати про інструменти вебдоступності. Також, коли ви створюєте (проектуєте) сайт, важливо врахувати та створити доступний веб-інтерфейс для людей з візуальними або інформаційними відмінностями. У випадку програмного коду — це означає продумане використання елементів HTML.

Давайте розглянемо деякі приклади HTML коду, елементи та атрибути, що можуть покращити веб-доступність:

1. Заголовки: продумане використання тегів заголовків (<h1> — <h6>) створює ієрархію контенту, яка допомагає програмам зчитування з екрана краще орієнтуватися в контенті вашої веб-сторінки.
2. Тег <strong> вказує на те, що текст всередині цього тегу має високу важливість. Використання тегу strong вказує програмі зчитування з екрана виділити цей текст та зробити на ньому акцент. Натомість тег <b> лише візуально форматує текст.
3. Тег <em> вказує на те, що текст всередині цього тегу слід виділити з більшою експресивністю. Використання тегу <em> вказує програмі зчитування з екрана виділити цей текст з більшою емоційністю (з емфатичним наголосом). Натомість тег <i> лише візуально форматує даний текст.
4. Елементи списку: продумане використання тегів упорядкованого (нумерованого) списку (<ol>) та невпорядкованого (маркованого, ненумерованого) списку (<ul>) для структурованого представлення інформації про певний перелік чогось, а також тегів списку опису (<dl>, <dt> та <dd>) для термінів та описів допомагає програмам зчитування з екрана в навігації по контенту вашої веб-сторінки.
5. Атрибут title в HTML використовується для надання додаткової інформації про елемент, яка відображається як спливаюча підказка, коли миша наводиться на цей елемент.
6. Атрибут lang використовується в тезі <html> для позначення основної мови веб-сторінки. Його також можна використовувати в інших тегах для позначення місць сайту, де використовується інша мова (наприклад, параграф іноземною мовою).
7. Атрибут alt для зображень (тег <img>) надає альтернативний текст, який можуть читати програми зчитування з екрана, а також який буде відображатися на сторінці, коли зображення буде недоступне (не завантажиться).

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

А на сьогодні я дякую вам за увагу!