Раніше ми писали, що The Washington Post найняла свого першого в історії інженера зі спеціальних можливостей, чиє головне завдання — постійне та організоване просування доступності. Зокрема, увага до людей з різними типами інвалідності та їхньої взаємодії з контентом.
Холден Форман, інженер з доступності у WP, ділиться рішеннями щодо доступності у своїх соцмережах й інженерному блозі WP. Проте нещодавно видання опублікувало систематизовані рекомендації щодо доступності для інших видавців. Рекомендації мають відкритий вихідний код, а отже — є загальнодоступними та можуть вільно використовуватися будь-яким видавцем поза межами The Post.
До керівних принципів доступності також додали навчальні відеоуроки. Зокрема, п’ятихвилинний посібник, де можна швидко перевірити контент на відповідність до кольору, розміру, клавіатури та доступності для зчитування з екрана. Коротко описуємо головні правила доступності.
Екранний зчитувач та керування клавіатурою
- Надайте можливість навігації контентом за допомогою клавіатури.
- Переконайтеся, що весь видимий текст читається вголос з правильною вимовою та в розумному порядку в програмі для зчитування з екрана.
- Переконайтеся, що всі покликання, кнопки та інші елементи мають відповідні назви. Користувач має розуміти, що робить кожне покликання без іншого контексту на сторінці.
- Переконайтеся, що порядок заголовків правильний.
- Перевірте наявність та правильність контенту на сторінці, зокрема, чи присутні основні елементи сторінки (головна, навігація, верхній і нижній колонтитули).
Мультимедіа
Якщо відео містить аудіо, до нього потрібно додати субтитри. Вони мають включати вимовлені слова та будь-які інші важливі звуки з аудіо (наприклад, текстові позначки зітхання чи сміху під час розмови, або рубання ножем під час приготування їжі).
Бажано, щоби субтитри були закритими, аби користувачі могли вмикати чи вимикати їх відповідно до своїх уподобань.
Переконайтеся, що субтитри мають відповідний колірний контраст із відео (часто субтитри відображаються як білий текст на темно-сірому тлі), а також дотримуйтеся порядку слів у реченнях.
А також:
- Переконайтеся, що всі зображення мають альтернативний текст.
- Увімкніть режим зменшення руху та переконайтеся, що вся несуттєва анімація та інший рухомий контент зникає при оновленні сторінки.
- Приховайте непотрібний контент від зчитувачів з екрана.
- Уникайте автоматичного відтворення аудіо та відео.
- Видаліть контент, що швидко миготить.
- Завжди перевіряйте точність розшифровки, якщо використовуєте автоматичні транскриптори.
Текст, мітки та налаштування масштабування
Насамперед переконайтеся, що текст читабельний і написаний простою мовою. Зокрема, The Washington Post наполегливо рекомендує:
- бути лаконічним;
- використовувати короткі речення та чітку структуру;
- використовувати знайомі, загальнозрозумілі слова;
- пояснювати будь-які незвичайні слова чи поняття;
- уникати жаргону, ідіом і метафор;
- уникати зайвих слів і знаків пунктуації;
- використовувати найпростіший можливий час;
- використовувати списки та таблиці для спрощення складного матеріалу.
Також переконайтеся, що:
- Текст розміром не менше 12 кеглів.
- Уникаєте емодзі чи символів, якщо вони не є центральними у змісті. Вони можуть мати різне значення в різних поколінь і культур. Вони також дратують незрячих і слабозорих користувачів програм зчитування з екрана.
- Контент іншою мовою окремо позначений.
- Текст масштабується правильно та залишається читабельним.
Альтернативний текст
Альтернативний текст — це не те саме, що підпис.додає контекст до зображення, тоді як альтернативний текст описує цей контекст для тих, хто його не бачить.
Альтернативний текст користувачам зачитується вголос програмами зчитування з екрана. Такий текст також може показуватися замість зображення, яке не може завантажитися.
- Він не має описувати кожну крихітну деталь зображення, а лише релевантні частини для загального уявлення про що йдеться. Типовий альтернативний текст містить не більше кількох речень.
- Не використовуйте загальні фрази на кшталт «Зображення», оскільки користувачі програми зчитування з екрана вже знають, коли вони чують альтернативний текст до зображення.
- Завжди описуйте расу, стать зображених людей тощо.
- Уникайте власних суджень в альтернативному тексті до зображень.
Колір
Низький колірний контраст може ускладнити видимість тексту та інших елементів сторінки. Ось що радить WP:
- Переконайтеся, що білий текст ніколи не перебуває на чисто чорному фоні.
- Переконайтеся, що усі комбінації кольорів, особливо для тексту та інтерактивних елементів, повинні відповідати щонайменше стандарту контрастності AA (бажано AAA) за допомогою інструменту WebAIM або Adobe Color Contrast Checker.
- Перевірте контрастність для поширених форм дальтонізму.
- Перегляньте сторінку в темному та світлому режимах сайту.
Водночас навіть якщо ви повністю врахували контрастність, дальтонізм і сумісність з різними налаштуваннями користувача, ніколи не варто покладатися лише на кольорове кодування для донесення інформації. Користувачам зчитувачів з екрана завжди потрібні текстові пояснення до контенту. З повним списком правил доступності можна ознайомитися тут.