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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ