Правильная доступность веб сайтов (accessibility)
Создание доступного веб-контента важно для обеспечения удобства использования сайтов всеми пользователями, включая тех, кто использует вспомогательные технологии, такие как скринридеры.
Использование Семантических Тегов
Семантические теги обеспечивают лучшую структуру и понимание контента для скринридеров.
Тэг <main>
- Назначение: Этот тег обозначает основное содержание веб-страницы.
- Доступность: Скринридеры используют этот тег, чтобы быстро найти главное содержание страницы. Это особенно полезно для пользователей с ограничениями зрения, поскольку они могут пропустить навигационные и другие неосновные элементы, чтобы сразу перейти к основному контенту.
<main>
<h1>Заголовок статьи</h1>
<p>Текст статьи...</p>
</main>
Этот тэг должен быть самым большим на странице.
Тэг <nav>
- Назначение: Обозначает раздел навигации на сайте.
- Доступность: Этот тег позволяет скринридерам и другим вспомогательным технологиям легко идентифицировать навигационные элементы, такие как меню. Пользователи могут быстро найти и использовать навигационные ссылки, не просматривая весь контент страницы.
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
Атрибут tabindex
- Что это такое: tabindex определяет, в каком порядке элементы получают фокус при навигации с помощью клавиши Tab.
- Как это работает:
- tabindex=’0′ делает элемент навигационным с клавиатурой, вставляя его в последовательность навигации по умолчанию.
- tabindex=’-1′ позволяет элементу получать программный фокус (например, через JavaScript), но исключает его из клавиатурной навигации.
- Положительное значение tabindex например, tabindex=’1′ включает элемент в последовательность клавиатурной навигации, но это может нарушить естественный порядок и сделать навигацию менее интуитивно понятной.
- Применение в навигации:
- Часто используется для улучшения доступности интерактивных элементов, таких как ссылки внутри <nav>.
- Важно использовать tabindex осторожно, чтобы не создать запутанную или непоследовательную навигацию.
<nav>
<ul>
<li><a href="#home" tabindex="0">Главная</a></li>
<li><a href="#about" tabindex="0">О нас</a></li>
<li><a href="#services" tabindex="0">Услуги</a></li>
</ul>
</nav>
Если значения tabindex будут установлены в порядке возрастания (например, 1, 2, 3), то пользователь будет перемещаться между элементами в том порядке, который определен этими значениями, а не в соответствии с их расположением в HTML-структуре документа.
То есть, при нажатии на клавишу Tab фокус сначала переместится на элемент с tabindex=’1‘, затем на элемент с tabindex=’2‘, и так далее, независимо от того, где эти элементы находятся на странице.
<input type="text" tabindex="3">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
Это может сделать навигацию менее интуитивно понятной и затруднить понимание структуры страницы, особенно для пользователей вспомогательных технологий.
Тэги заголовков
Тэги <h1> — <h6> играют критически важную роль в веб-доступности.
Заголовки дают пользователям, возможность быстро оценить содержание страницы и переходить к интересующим их разделам.
Корректное их использование улучшает доступность, позволяя людям с ограниченными возможностями легче навигировать по контенту.
Например, скринридеры часто предоставляют возможность переходить между заголовками, что упрощает ориентацию на странице.
Важно сохранять правильную последовательность заголовков, не пропуская уровни. Начинать следует с <h1> для основного заголовка страницы, затем <h2> для подразделов и так далее.
Заголовки должны использоваться исключительно для структурирования и организации контента, а не для достижения визуальных эффектов.
Тэг <section>
Тег <section> используется в HTML для обозначения отдельного раздела на странице, который группирует тематически связанный контент. Чтобы улучшить доступность таких разделов для пользователей вспомогательных технологий, важно использовать его в сочетании с атрибутом aria-labelledby.
<section aria-labelledby="section-heading">
<h2 id="section-heading">Заголовок Раздела</h2>
<p>Контент раздела...</p>
</section>
Аттрибут aria-labelledby
Этот атрибут устанавливает связь между разделом и его заголовком. Он ссылается на ID элемента, который служит заголовком для раздела, помогая скринридерам понять, какой контент объединяется в рамках этой секции.
Тэг <form>
Для улучшения доступности формы, рекомендуется использовать атрибут aria-label.
- <form>: Определяет область на странице, которая содержит интерактивные элементы для отправки информации пользователем, например, поля ввода, кнопки, флажки.
- aria-label: Этот атрибут позволяет предоставить текстовое описание формы, которое помогает пользователям вспомогательных технологий понять назначение формы и её контекст.
<form aria-label="Форма обратной связи">
<input type="text" name="name" placeholder="Ваше имя">
<input type="email" name="email" placeholder="Ваш email">
<button type="submit">Отправить</button>
</form>
Атрибут alt
Использовать alt на картинках, это важно по нескольким причинам:
- Доступность: Пользователи скринридеров не могут видеть изображения, поэтому alt текст помогает им понять, что изображено.
- В случае ошибок загрузки: Если изображение не загрузится, текст alt будет отображаться вместо него.
- Поисковая оптимизация (SEO): Alt текст помогает поисковым системам понять содержание изображения.
Текст должен точно описывать изображение. Например, alt=’Собака играет с мячом‘ лучше, чем просто alt=’Собака’. Не нужно включать фразы типа ‘изображение из’ или ‘фотография’. Просто опишите содержание.
Не дублируйте текст, который уже есть на странице.
Если изображение является чисто декоративным и не несет дополнительной информации, можно использовать пустой alt атрибут, чтобы скринридеры его пропускали.
Атрибут autofocus
С точки зрения доступности, этот атрибут имеет как положительные, так и потенциально отрицательные стороны:
- Положительный Аспект:
- Улучшает взаимодействие для пользователей, которые ожидают начать ввод данных сразу после загрузки страницы, как на страницах входа или поиска. Это экономит время, уменьшая количество необходимых действий для фокусировки на поле ввода.
- Потенциальные Проблемы:
- Может вызвать проблемы для пользователей скринридеров, поскольку автоматическая фокусировка на элементе может пропустить другой важный контент страницы.
- В некоторых случаях может вызвать путаницу, если пользователь не ожидает автоматической фокусировки на определенном элементе.
Пример использования:
<form>
<input type="text" placeholder="Имя" autofocus>
<input type="password" placeholder="Пароль">
<button type="submit">Войти</button>
</form>
В этом примере, когда пользователь открывает страницу, курсор будет автоматически помещен в поле ввода для имени, позволяя сразу начать ввод без дополнительных действий.
Анимация
Для управления анимациями рекомендуется использовать медиа-запрос prefers-reduced-motion.
Этот медиа-запрос позволяет определить, предпочитает ли пользователь уменьшить количество анимаций или движений на веб-странице, что особенно важно для людей с чувствительностью к движению.
Вот как вы можете использовать его в CSS:
@media (prefers-reduced-motion: reduce) {
/* Стили для уменьшения или отключения анимаций */
.animated-element {
animation: none;
transition: none;
}
}
В этом примере, если пользователь выбрал уменьшенное движение в настройках своего устройства или браузера, анимации или переходы для элементов с классом .animated-element будут отключены или уменьшены.
Кнопка «Наверх»
Кнопка ‘Наверх’, обычно используемая на веб-страницах, должна располагаться внизу страницы.
Размещение кнопки в верхней части DOM-документа может вызвать проблемы для пользователей скринридеров.
Они читают содержимое веб-страницы в том порядке, в котором оно расположено в DOM. Если кнопка ‘Наверх’ находится в начале, она будет одним из первых элементов, которые услышит пользователь. Это может вызвать путаницу, так как ожидается, что кнопка будет использоваться после просмотра содержимого страницы.
Списки и сброс маркеров
Использование CSS свойства list-style: none для сброса маркеров у списка <ul> или <ol> может вызвать проблемы с доступностью, особенно для пользователей скринридеров.
Когда маркеры списка сброшены, пользователи не смогут распознать структуру списка и выйти из него если им не нужно считывать все пункты.
Решение с помощью role:
Для сохранения доступности списка, даже если визуально маркеры убраны, можно использовать ARIA атрибут role для явного указания его роли.
Например, применение role=’list‘ к <ul> или <ol>, и role=’listitem‘ к каждому <li> помогает скринридерам правильно интерпретировать структуру списка.
<ul role="list" style="list-style: none;">
<li role="listitem">Пункт 1</li>
<li role="listitem">Пункт 2</li>
</ul>
Стратегия skip-link
Стратегия ‘skip-link‘ (или ‘пропустить ссылку’) используется для улучшения доступности веб-страниц. Эта стратегия позволяет пользователям быстро переходить к основному содержанию страницы, минуя повторяющиеся элементы навигации.
На веб-странице размещается невидимая ссылка, которая становится видимой, когда пользователь навигирует с помощью клавиши Tab. Эта ссылка ведет непосредственно к основному контенту, обходя другие элементы, такие как меню и заголовки.
<a href="#maincontent" class="skip-link">Перейти к основному контенту</a>
<!-- Остальная часть страницы -->
<main id="maincontent">
<!-- Основной контент -->
</main>
Здесь класс skip-link обычно скрыт, но становится видимым при фокусировке.
Псевдоэлементы на кнопках
Путем расширения кликабельной области кнопки с помощью псевдоэлементов ::before или ::after, можно сделать процесс взаимодействия с кнопкой более удобным.
.button {
position: relative;
z-index: 1;
}
.button::before {
content: "";
position: absolute;
top: -10px; right: -10px; bottom: -10px; left: -10px;
z-index: -1;
}
В этом примере создается псевдоэлемент ::before, который расширяет кликабельную область вокруг кнопки, делая её более доступной для пользователей с ограниченными двигательными навыками.
Текст и контрастность
Контрастность
Важно обеспечить высокий контраст между текстом и фоном для улучшения читаемости, особенно для пользователей с нарушениями зрения.
Фоновое Изображение
Если текст размещается непосредственно на изображении, могут возникнуть ситуации, когда текст становится трудночитаемым из-за сложного фона.
Решение:
Использовать полупрозрачный слой (например, темный или светлый) между текстом и изображением для повышения контраста.
Ограничить области с текстом, где фон более однороден и не мешает восприятию.
Рекомендуется избегать важного текста, встроенного непосредственно в изображение, так как он не будет доступен для скринридеров. Вместо этого лучше использовать текстовые элементы HTML поверх изображения с помощью CSS.