HTML Доступність
HTML Доступність
Пишіть HTML код з урахуванням доступности. Надайте користувачу хороший спосіб навігації та взаємодії з вашим сайтом. Зробіть ваш HTML код якомога більш семантичним, щоб його було легко зрозуміти як відвідувачам, так і зчитувачам екрану (скрінрідерам).
Семантичний HTML
Семантичний HTML означає максимально можливе використання правильних елементів HTML для їх правильного призначення. Семантичні елементи є елементами зі значенням; якщо вам необхідна кнопка, використовуйте елемент <button> (а не <div>).
Семантичний HTML дає контекст для скрінрідерів, які читають зміст веб-сторінки вслух.
З прикладом кнопки введення:
- За замовчуванням кнопки мають більш відповідний стиль
- Скрінрідер ідентифікує її як кнопку
- Фокусовані
- Клікабельні
Кнопка також доступна для людей, які користуються навігацією за допомогою клавіатури; на неї можна натискати як мишкою, так і клавішами на клавіатурі, а також можна вводити вкладки між ними (за допомогою клавіші TAB на клавіатурі).
Приклади не семантичних елементів: <div> та <span> - нічого не розповідають про свій зміст.
Приклади семантичних елементів: <form> (форма), <table> (таблиця) та <article> (стаття) - чітко вказують свій зміст.
Заголовки важливі
Заголовки визначаються за допомогою тегів від <h1> до <h6>:
Приклад
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Спробуйте самі »
Пошукові системи використовують заголовки для індексування структури та змісту веб-сторінок.
Користувачі переглядають сторінки за заголовками. Важливо використовувати заголовки, щоб показати структуру документів і зв’язок між різними розділами.
<h1> заголовки слід використовувати для основних заголовків, після чого слід використовувати <h2> заголовки, далі менш важливі <h3> і так далі.
Примітка: Використовуйте заголовки HTML лише для заголовків. Не використовуйте заголовки просто для створення тексту БІЛЬШОГО розміру або жирного Для форматування (стилізації) тексту використовуйте CSS.
Альтернативний текст
Атрибут alt надає альтернативний текст для зображення, якщо користувач з якоїсь причини не може його переглянути (із-за повільного Інтернету, помилки в атрибуті src або якщо користувач використовує скрінрідер).
Значення атрибута alt має описувати зображення:
Якщо браузер не може знайти зображення, він відобразить значення атрибуту alt:
Оголошення мови
Оголошення мови є важливим для скрінрідерів і пошукових систем, і оголошується атрибутом lang. Використовуйте ниведений нижче код для відображення веб-сторінки українською мовою (lang="uk"):
<!DOCTYPE html>
<html lang="uk">
<body>
...
</body>
</html>
Використовуйте "чисту" мову
Використовуйте "чисту мову", яку легко зрозуміти, і намагайтесь уникати символів, які неможливо прочитати чітко за допомогою програми для зчитування з екрана (скрінрідером). Наприклад:
- Зробіть речення якомога коротшими;
- Уникайте тире там, де можливо. Замість того, щоб писати 1-3, запишіть так: від 1 до 3;
- Уникайте скорочень там, де можливо. Замість того, щоб писати Feb, пишіть February;
- Уникайте сленгових слів та матюків (якщо це можливо 🤓).
Пишіть хороші посилання
Посилання мають чітко пояснювати, яку інформацію читач отримає, натиснувши на це посилання.
Приклади хороших і поганих посилань:
Добре
Дізнатись більше про мову HTML
Дізнатись більше про те, як правильно вивчати HTML
Спробуйте самі »
Назви посилань
Атрибут title визначає додаткову інформацію про елемент. Ця інформація найбільш часто відображається як текст підказки, коли мишка знаходиться над елементом.
Приклад
<a href="https://w3schoolsua.github.io/html/index.html" title="Перейти на W3SchoolsUA HTML розділ">Відвідайте HTML Підручник</a> на нашому сайті W3Schools українською.
Спробуйте самі »
