10.1 Accessibility
Доступність (accessibility) веб-контенту є важливою частиною сучасного веб-дизайну. Вона спрямована на забезпечення того, щоб усі користувачі, включаючи людей з обмеженими можливостями, могли легко взаємодіяти з веб-сторінками.
Одним з ключових інструментів для досягнення цієї мети є ARIA-атрибути (Accessible Rich Internet Applications), які покращують доступність веб-контенту, роблячи його більш зрозумілим і доступним для допоміжних технологій, таких як програми екранного читання.
Що таке ARIA?
ARIA (Accessible Rich Internet Applications) — це набір спеціальних атрибутів, які можна додавати до HTML-елементів, щоб покращити їх доступність. Ці атрибути надають додаткову інформацію про структуру та поведінку елементів, що допомагає допоміжним технологіям краще інтерпретувати і взаємодіяти з веб-контентом.
Основні ARIA-атрибути для покращення читабельності тексту:
Атрибут aria-label
Атрибут aria-label використовується для надання текстової мітки елементу, яка буде прочитана екранною читалкою. Цей атрибут корисний, коли елемент не має видимої мітки або коли потрібен більш детальний опис.
Приклад використання:
<button aria-label="Закрити діалогове вікно">X</button>
Атрибут aria-labelledby
Атрибут aria-labelledby пов'язує елемент з іншою міткою на сторінці, використовуючи id мітки. Це корисно, коли необхідно пов'язати елемент з існуючою міткою, надаючи контекст та опис.
Приклад використання:
<h2 id="section-title">Заголовок розділу</h2>
<p aria-labelledby="section-title">Це абзац тексту, що відноситься до заголовку розділу.</p>
Атрибут aria-describedby
Атрибут aria-describedby пов'язує елемент з одним або кількома елементами, що містять опис, використовуючи їх id. Цей атрибут корисний для надання додаткової інформації або контексту елементу.
Приклад використання:
<input type="text" aria-describedby="input-description">
<p id="input-description">Введіть ваше ім'я.</p>
10.2 Role
Атрибут role
Атрибут role визначає роль елементу, вказуючи допоміжним технологіям, як слід інтерпретувати цей елемент. Є багато ролей, таких як button, navigation, main, article і багато інших.
Приклад використання:
<nav role="navigation">
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
Атрибут aria-live
Атрибут aria-live використовується для динамічно оновлюваного контенту. Він повідомляє екранній читалці, що контент всередині елементу змінився і його потрібно озвучити. Значення включають off, polite і assertive.
Приклад використання:
<div aria-live="polite">
<p>Тут буде відображена важлива інформація.</p>
</div>
Атрибут aria-hidden
Атрибут aria-hidden вказує допоміжним технологіям, чи повинен елемент бути доступним для користувачів. Значення true приховує елемент від допоміжних технологій, в той час як значення false робить його доступним.
Приклад використання:
<div aria-hidden="true">
<p>Цей текст буде прихований від екранних читалок.</p>
</div>
Атрибут aria-expanded
Атрибут aria-expanded вказує, чи є елемент розгорнутим або згорнутим. Він часто використовується в елементах керування, таких як "акордеони" і випадаючі меню.
Приклад використання:
<button aria-expanded="false" aria-controls="menu">Меню</button>
<ul id="menu" hidden>
<li><a href="#item1">Елемент 1</a></li>
<li><a href="#item2">Елемент 2</a></li>
<li><a href="#item3">Елемент 3</a></li>
</ul>
Атрибут aria-controls
Атрибут aria-controls вказує, який елемент керується поточним елементом. Він використовується разом з атрибутами, такими як aria-expanded, для створення інтерактивних елементів керування.
Приклад використання:
<button aria-controls="content" aria-expanded="false">Показати/Приховати</button>
<div id="content" hidden>
<p>Прихований контент.</p>
</div>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ