Возможно, вы слышали об атрибутах W3C или ARIA, но что они на самом деле означают?
Доступность определяется как процесс разработки продуктов, устройств и сред, которые могут использовать люди с различными видами инвалидности. В 1990 году Конгресс США санкционировал ADA (Американский закон об инвалидах), и с тех пор мы можем найти как в общественных, так и в частных местах инструменты для людей, лишенных зрения (брайль), или в физических аспектах (пандусы для инвалидных колясок). Регулирующим органом в области доступности Интернета является WCAG (https://www.w3.org/TR/WCAG21/), который отвечает за то, чтобы веб-сайты имели такие функции, как субтитры к видео, изображения с альтернативным текстом, метки, читаемые программы для чтения с экрана и т. д.
Элементы визуальной доступности:
- Контраст: процесс различения двух элементов, чтобы придать им важность и удобочитаемость для пользователей с ослабленным зрением или дальтонизмом, можно выполнить с помощью цветов, шрифтов и интервалов.
- Заголовки: Сеть работает быстро, поэтому контент должен быть разделен на несколько разделов. Эти заголовки имеют отношение h1 (уникальный на странице), h2 (заголовок раздела), h3 (подзаголовок раздела) и так далее.
- Дизайн для дальтоников: используйте противоположные цвета на цветовом круге, где это возможно, или же используйте несколько оттенков одного и того же цвета (это также помогает дальтоникам, которые видят только в оттенках серого). Цвет является мощным контрастным агентом, но никогда не должен быть единственным . Используйте текст, значки, изображения (например, если форма неверна, используйте красные рамки + поле, которое прямо говорит об этом)
Что такое Ария?
ARIA — это сокращение от Accessible Rich Internet Applications. Это набор атрибутов для обработки вспомогательных технологий для людей с ограниченными возможностями, с которыми не может справиться только HTML. Техническая спецификация называлась WAI-ARIA и была опубликована W3C первоначально в 2008 году и стала рекомендацией в 2014 году.
Основные компоненты ARIA:
- Роли: они используются для определения конкретного типа элемента интерфейса (role="role_name").
- Абстрактные роли: это краткие описания, используемые поисковыми системами для придания смысла ролям, которые не следует изменять.
- Роли структуры документа: они предоставляют описания для различных частей страницы (панель инструментов, изображение, заголовок). Хотя HTML 5 уже справляется с этим довольно хорошо, поскольку поддержка средств чтения с экрана для него все еще ограничена, рекомендуется использовать оба типа.
- Роли ориентира: они используются для обозначения начала и конца определенного раздела документа средствами чтения с экрана (баннер, форма, поиск).
- Роли виджетов: они дают семантическое значение, когда HTML этого не делает, они делятся на группы виджетов или виджетов пользовательского интерфейса (сетка, меню, список таблиц) и автономные виджеты или дочерние виджеты (флажок, ссылка).
Правила ARIA:
- Используйте собственный HTML, если только это абсолютно или почти невозможно.
- Не изменяйте семантические элементы в HTML без крайней необходимости.
- Все элементы управления ARIA должны быть доступны с клавиатуры, их можно добавить к навигации по вкладкам с помощью (tabindex=”0).
- Для всех фокусируемых элементов никогда не используйте (aria-hidden="true" или role="presentation"), так как это может ввести пользователя в замешательство при фокусировке на пустом элементе.
- Назначьте всем интерактивным элементам доступную метку с помощью (Поиск) или (‹input type="text" aria-label="" / aria-labelledBy=""), чтобы не показывать ее пользователям, не использующим программы чтения с экрана.
Правила атрибута Alt:
- Если изображение уже описано ниже, добавьте пустой атрибут.
- Если изображение является ссылкой, также добавьте страницу, на которую оно ведет.
- Alt не должен быть длиннее 150 символов.
- Alt должен четко и лаконично описывать изображение.
- Изображения, используемые в качестве украшения (например, декоративная рамка), должны иметь атрибут alt, даже если он пуст.
Атрибут Alt отличается от aria-label тем, что первый также будет отображаться, если источник элемента не найден или при медленном соединении, а последний предназначен только для программ чтения с экрана, однако предпочтительнее использовать alt для элементов, где они могут быть использовал.
