10 рекомендацій для покращення веб-доступності вашого сайту

14 хв. читання

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

Керівник W3C і винахідник Всесвітньої мережі Інтернет Тім Бернерс-Лі, сказав:

Сила вебу в його універсальності

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

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

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

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

Але насамперед:

Що ж таке веб-доступність?

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

На цю тему в Інтернеті ви знайдете багато матеріалів, а також можете поцікавитися Ініціативою поліпшення веб-доступності (WAI).

З огляду на це, ось наші рекомендації:

1. Не обмежуйтеся кольором (~ 45 хвилин)

Колір – потужний інструмент, який ми часто використовуємо для вираження емоцій та обміну повідомленнями в Інтернеті. Але ми не зобов'язані покладати надію тільки на кольори, щоб передати зміст та інформацію нашим користувачам.

Чому? Наприклад, всім відомо, що зелений колір означає «правильно», а червоний – «неправильно». Але що трапиться, якщо ми будемо використовувати колір як єдиний спосіб взаємодії з користувачем?

10 рекомендацій для покращення веб-доступності вашого сайту
Кольорова сліпота (дальтонізм) є одним з найпоширеніших недоліків зору. Вона є у близько 4,5% населення всього світу (це більше, ніж користувачів IE11).

Якщо ми показуємо важливі повідомлення, використовуючи лише колір для передачі інформації, ми забуваємо про 4,5% населення.

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

10 рекомендацій для покращення веб-доступності вашого сайту

Дуже цікаве рішення реалізоване на сайті caniuse.com в якості альтернативної кольорової палітри для відображення вмісту таблиць.

10 рекомендацій для покращення веб-доступності вашого сайту

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

2. Не блокуйте масштабування (~ 5 хвилин)

В епоху адаптивного дизайну ми могли б зробити декілька безвідповідальних помилок.

Однією з них є використання maximum-scale=1.0, що забороняє масштабування веб-сторінок в мобільних пристроях.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

Від астигматизму страждає від 30 до 60% дорослих у Європі та Азії, але поганий зір може бути у людей різного віку та різних національностей.

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

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

3. Перегляньте атрибут alt (~ 45 хвилин)

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

  1. Атрибут alt є обов'язковим для кожного тегу img, але порожній атрибут alt є абсолютно валідним. Якщо зображення на сайті виконує декоративну функцію або з його допомогою не потрібно передати зміст сторінки, ви можете просто написати alt = ""
  2. Скрінрідери повідомляють користувачеві, що тег <img> є зображенням, тому немає сенсу починати alt атрибут зі слова «Зображення»; просто напишіть те, що дійсно є на зображенні.
  3. Функція зображення настільки ж важлива, як і його значення: якщо ваш логотип посилається на домашню сторінку вашого сайту, то alt-текст має бути щось на кшталт «Домашня сторінка», а не «Логотип».
  4. Альтернативний текст – не просто доступність. Іноді користувачі, у яких повільний Інтернет, вимикають зображення для швидшого завантаження сторінки сайту. Майте на увазі цих користувачів, коли ви пишете значення alt атрибутів!

Але ж не всі зображення на вашому веб-сайті – теги <img>, вірно? У вас також можуть бути один, два або ціла система SVG іконок.

Як ми можемо зробити SVG доступним для всіх? На щастя, у стандарту SVG (Scalable Vector Graphics) є така можливість! Для опису векторних зображень є теги <title> та <desc> для коротких і довгих описів відповідно.

<symbol id="langIcon">
   <title>Language Icon</title>
   <desc>Longer description</desc>
   <path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z"/>
</symbol>

4. Додайте субтитри та підписи до відео (4+ години)

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

  • Візьмемо, наприклад, YouTube. Після завантаження відео ви можете активувати субтитри. Вони генеруються автоматично та можуть виявитися неточними в залежності від мови, фонового шуму або акценту оратора. Незважаючи на це, вони дуже прості в реалізації і можуть бути застосовані на більшості англомовних відео.
  • Якщо вам потрібна 100% точність субтитрів, не варто довіряти YouTube. Тому потрібно самостійно написати субтитри або підключити для цього третю сторону. YouTube підтримує найпоширеніші формати субтитрів (.srt, .sub і .sbv), а також дозволяє нам вставляти власні субтитри, що може бути дуже зручним, якщо у нас немає програмного забезпечення для створення субтитрів. Також можна долучити спільноту допомогти перекласти контент без надання адміністративних прав до нашого облікового запису.
10 рекомендацій для покращення веб-доступності вашого сайту
  • Можливо, ви не захочете використовувати YouTube в якості відеоплатформи. Можливо, ви захочете використати HTML5-відео, розміщене на вашому сервері. У вас є така можливість! В HTML5 є тег <track>, за допомогою якого можна легко прикріпити стільки файлів з субтитрами, скільки забажаєте, використовуючи формат WebVTT.
<video controls>
   <source src="movie.mp4" type="video/mp4">
    <track label="English Captions" kind="captions" srclang="eN" src="captions.vtt" default>
  	<track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>

5. Семантика = доступність (~45 хвилин)

Тег <font>, пам'ятаєте? Я сподіваюся, що ні, це були темні часи.

Незважаючи на різні думки, семантика з'явилася набагато раніше HTML5. Вона була з нами з часів першої сторінки HTML і з того часу значно покращилася. Стандарт HTML5 подарував нам нові семантичні теги, які ми успішно використовуємо кожен день.

10 рекомендацій для покращення веб-доступності вашого сайту

Гаразд, хіба семантика важлива не тільки для SEO?

Не обов'язково. Коли ви свідомо вибираєте тег <h1> замість <p> або <span>, ви навмисне змінюєте значення елемента, забезпечуєте ієрархію та створюєте структуру дерева інформації своєї сторінки.

Скрінрідери знають про цю особливість. Фактично, семантика – один з найкорисніших інструментів.

Пам'ятайте, що за великою силою іде велика відповідальність, тому обов'язково використовуйте правильний семантичний тег для кожного елементу.

6. Використовуйте правильну розмітку (~30 хвилин)

Time і Datetime

Елемент <time> відображає багато типів форматів дати, часових поясів і тривалості, використовуючи стандарт ISO 8601 для позначення дати та часу.

Datetime - це додатковий атрибут, який допомагає відображати вміст <time>. Ось деякі приклади:

<time>14:54</time> Hours and minutes
<time>2018-06</time> Year and month
<time>-03:00</time> Time zones
<time>2h 32m</time> Harry Potter 2 Duration
<p>CSSConf Argentina took place on <time datetime="2016-08-07">August 7th</time></p>

Del та Ins

Веб постійно змінюється, і ці зміни не повинні залишатися непоміченими. Форматування документу за допомогою тегів ins і del можна поєднувати з атрибутом datetime.

Елемент <ins> являє собою доповнення до документа:

<ul>
   <li><ins datetime="2017-08-02">Icecream</ins></li>
    <li>Candy</li>
    <li>Pasta</li>
</ul>

Елемент <del> представляє видалений контент:

<ul>
   <li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>
    <li><del datetime="2017-06-05">Cry because ____ dies.</del></li>
    <li><del datetime="2017-06-06">Write article</del></li>
    <li>Order room</li>
</ul>

Теги <button> і <a>

В яких випадках ми повинні використовувати кожен із них? Подивимось:

<a> теги призначені для посилання на файл, а також відкриття сторінки в новій або в поточній вкладці. Однак цей тег не є ідеальним, наприклад, для реалізації гамбургер-меню або галереї зображень. Елемент <button> в такій ситуації буде кращим рішенням, і зазвичай це досягається з допомогою JavaScript.

Крім того, тег <button> можна сплутати з <input type="button">, але різниця полягає в тому, що перший може вмістити в собі більше контенту (текст, зображення + текст або лише зображення).

При використанні тегу <button> слід враховувати дві причини:

По-перше, якщо вміст кнопки недостатньо явний (наприклад, натисніть кнопку «X» для закриття елементу), ми повинні додати атрибут aria-label, щоб описати функціонал кнопки.

<button aria-label="Close">X</button>

По-друге, якщо є сенс додати атрибут href (компонент пошуку або галерея «lightbox»), ми можемо використати тег <a> і перевизначити поведінку посилань за допомогою JavaScript. Галерея зображень, яка використовує теги a з href, буде нормально працювати, якщо JavaScript не ввімкнено.

Але ...

7. При необхідності використовуйте ролі (~ 1 година)

Щоб повідомити користувачам, які користуються скрінрідерами, що посилання це не звичайний тег <a>, ми повинні додати атрибут role зі значенням «button».

Але будьте обережні!

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

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
  Button
</a>
 
function handleBtnClick(event) {		
   // Щось робимо
}
 
function handleBtnKeyPress(event) {
   // Перевіряємо, чи натиснута клавіша «Пробіл» або «Enter»
   if (event.keyCode === 32 || event.keyCode === 13) {
      // Блокуємо дію або скрол, якщо клавіша натиснута
      event.preventDefault();
		
		// Щось робимо
	}
}

Дізнайтеся більше про це на MDN.

Пам'ятайте, що aria ролі зазвичай не потрібні, якщо ви дотримуєтесь правил, як у вищенаведеному прикладі. Семантичні елементи HTML вже мають роль за замовчуванням: «navigation» для тегу <nav>, «link» для тегу <a>, і т.д. Це означає, що атрибут role необхідний лише тоді, коли ми захочемо змінити значення за замовчуванням.

8. Про приховані елементи (~ 1 година)

Існує декілька способів приховати контент за допомогою HTML та CSS. Ця таблиця допоможе вам вибрати найкращий варіант для певної ситуації:

Метод Дія під час перегляду Поведінка скрінрідерів Сумісність з браузерами
CSS: visibility: hidden; Елемент стає невидимим або правильніше сказати, повністю прозорим, оскільки він продовжує брати участь у форматуванні сторінки (дуже схоже на opacity: 0;) Недоступний для читання Працює у всіх браузерах
CSS: display: none; Тимчасово видаляє елемент з документа. Займане ним місце не резервується і веб-сторінка формується так, немов елемента і не було. Недоступний для читання Працює у всіх браузерах
HTML5: атрибут hidden Те ж саме, що і display: none; Недоступний для читання IE 11+
aria-hidden = "true" Вміст відображається в браузері, але не передається користувачеві через допоміжні технології Недоступний для читання IE 11+
CSS: клас .visually-hidden Приховує елемент від перегляду та видаляє його з робочої області Доступний для читання Працює у всіх браузерах

Якщо ви хочете приховати елементи від перегляду, але хочете дозволити зчитувати його скрінрідерами, то останній варіант є найкращим.

Цей клас дуже корисно використовувати в мітках форм або в skip-to-content посиланнях. Клас visually-hidden – один із тих кодів CSS, який можна сміливо додавати в закладки і використовувати у своїх проектах. Звичайно, ви можете змінити ім'я класу, як вам подобається.

.visually-hidden { 
   position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

9. Дотримуйтесь стандартів веб-доступності (~ 30 хвилин щотижня)

Підтримувати веб-доступність сайту нелегко, але у цьому вам допоможуть наші рекомендації.

У попередніх пунктах цієї статті ми розповідали: як працює <button>? В якій ситуації ми повинні використовувати цей тег? Яка різниця між display: none; і атрибутом «hidden»?

На перший погляд вони можуть здатися нудними, але стандарти W3C та WCAG є не тільки вивіреними, а й інформативними. Важко оцінити ту кількість інформації, яку вони надають. Я запевняю вас, що ви знайдете такі рішення, про існування яких ви й не здогадувались!

10. Аудит та огляд (~ 3 години)

Після того, як ви застосуєте всі ці знання на практиці, пора провести тестування. Ось перелік найкращих засобів для перевірки доступності веб-сайту:

  • ChromeVox: скрінрідер, представлений у виді розширення Chrome, яке ви можете використовувати для перевірки свого веб-сайту.
  • Accessibility Developer Tools для Chrome: ще одне чудове розширення для цього браузера, яке надає можливість аудиту веб-доступності у повсякденній розробці сайтів.
  • Color Filter: Протестуйте ваш веб-сайт на різні види кольорової сліпоти з допомогою цього онлайн-інструменту.
  • W3C Validator: офіційний інструмент W3C, за допомогою якого ви можете перевірити, чи відповідає HTML-розмітка правилам веб-доступності.
  • A11Y Compliance Platform: Бюро доступності Інтернету (BOIA) пропонує градуйований звіт з описом поведінки сайту під час тестування контрольних точок WCAG A/AA.
  • WAVE: інструмент оцінки веб-доступності, розроблений WebAIM.

І під кінець...

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

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

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація