Доступный дизайн веб-приложения является ключевым компонентом обеспечения положительного пользовательского опыта и общей удовлетворенности пользователей приложения. Доступное веб-приложение обеспечивает равный доступ для людей с разными способностями и для людей из разных географических мест. Люди с ограничениями, связанными со слуховыми, когнитивными, речевыми или зрительными способностями, а также временными ограничениями, связанными с кратковременной инвалидностью, медленным подключением к Интернету или даже ярким солнечным светом, должны иметь доступ к вашему веб-приложению. При создании внешнего интерфейса вашего веб-приложения используйте решения для обеспечения специальных возможностей с самого начала, чтобы предотвратить проблемы с доступностью и необходимость повторять любую работу позже в процессе сборки. Убедитесь, что содержимое вашего приложения может просматриваться веб-сканерами и программами чтения с экрана, а также обеспечивает положительный пользовательский опыт для пользователей.
Доступность является юридическим обязательством во многих странах и отраслях; вы должны понять эти рекомендации и включить решения по обеспечению специальных возможностей в свой дизайн интерфейса. Различные бизнес-кейсы также подчеркивают важность доступности веб-контента.
Такие ресурсы, как MDN и WCAG, предоставляют важные рекомендации и предложения по повышению доступности вашего веб-приложения. Вы также можете пройти курс «Изучите специальные возможности» на сайте web.dev.
Взаимозависимость между различными компонентами является важным аспектом обеспечения доступности веб-приложения для различных пользователей.
Цвет и контраст
Использование цвета является основным фактором при оценке доступности веб-приложения. Пользователи внешнего интерфейса должны иметь возможность воспринимать контент на странице, а цвет и контраст существенно влияют на восприятие контента пользователями. Условия просмотра и ограничения, связанные со зрением, могут быть временными, ситуативными или постоянными, но их следует учитывать при создании внешнего интерфейса вашего веб-приложения. Создание правильного контраста или разницы в яркости между цветами, используемыми в пользовательском интерфейсе, может сделать ваше веб-приложение более доступным для разных пользователей. Коэффициент контрастности обеспечивает разницу в яркости между фоном и текстом.
Для измерения контрастности вы можете использовать формулу коэффициента контрастности , чтобы убедиться, что существует минимальный контраст для текста или значков на фоне. Существует множество форм нарушений цветовосприятия, которые следует учитывать, но новые цветовые модели могут гарантировать правильное восприятие контента, даже если он просматривается в оттенках серого.
Часто рекомендуется использовать темную тему для поддержки цвета и контраста в целях доступности. Темные темы часто предпочтительнее для визуального ввода из-за белого света и трудностей с чтением. Поскольку приложения, ориентированные на контент, включают в себя большое количество текста и изображений, крайне важно разумно использовать цвет и коэффициент контрастности, чтобы удовлетворить разнообразные потребности ваших пользователей.
Узнайте больше о цвете и контрасте на сайте web.dev .
Типография
Типографика подразумевает выбор и расположение текста таким образом, чтобы он был читабельным и разборчивым для разных пользователей. Одной из наиболее измененных настроек специальных возможностей является размер шрифта по умолчанию на устройствах. Некоторым пользователям может потребоваться разместить на экране больше текста с меньшим размером шрифта или сделать текст как можно большим. Поэтому очень важно сделать размер типографики гибким и разборчивым. Отдельные символы текста также должны быть различимы для читателя, а весь текст должен быть разборчивым для чтения. При разработке внешнего интерфейса вашего приложения обязательно выбирайте шрифты, которые обеспечивают удобочитаемость и читабельность.
Гарнитура
Гарнитура или семейство шрифтов, которое вы выбираете для своего веб-приложения, должно быть визуально доступно широкому кругу читателей. Гарнитура — это визуальное оформление букв, используемых в тексте вашего приложения. Многие исследования описывают важность шрифта при оценке доступности веб-контента. Нахождение баланса между брендом, целями дизайна вашего пользовательского интерфейса и простотой чтения делает ваше приложение более приятным для более широкого круга пользователей. При создании внешнего интерфейса подумайте, как параметры шрифта, а также параметры шрифта в них влияют на доступность и общий дизайн вашего приложения.
Размер шрифта
Рассмотрите возможность увеличения масштаба браузера, чтобы помочь пользователям с плохим зрением или слепотой в восприятии цвета. Шрифт текста вашего веб-приложения должен быть виден различным читателям. Изменение размера шрифта может быть достигнуто путем переключения с px на rem . Единицы Rem позволяют использовать размер шрифта относительно корневого элемента веб-приложения. Это универсальный вариант, который повысит общую доступность вашего веб-приложения.
Структура и планировка
Различные свойства структуры и макета влияют на доступность вашего интерфейса. Особенности макета, которые следует учитывать, включают расстояние и выравнивание текстовых блоков, а также пространство между текстовыми строками и даже отдельными буквами. Используйте сетки и визуализируйте компоненты, которые вы хотели бы включить в свой дизайн. Макет и структура контента должны быть привлекательными и приятными для пользователей. Сложные макеты или загруженный фон с несколькими текстовыми блоками могут быть трудными для использования некоторыми пользователями, например, людьми с СДВГ . Обязательно уделите приоритетное внимание инклюзивности в процессе проектирования внешнего интерфейса.
АРИЯ и HTML
Доступные полнофункциональные интернет-приложения (ARIA) включают набор рекомендаций и атрибутов, которые помогут сделать веб-приложения более доступными для пользователей. ARIA дополняет HTML и обеспечивает, среди прочего, доступные виджеты JavaScript, обновления контента в режиме реального времени и сообщения об ошибках. Правильное использование ARIA необходимо для того, чтобы сделать ваше веб-приложение более доступным. Неправильное использование ARIA может привести к ошибкам и фактически сделать ваше приложение менее доступным для пользователей.
По возможности используйте метки ARIA , чтобы представить альтернативные форматы, совместимые со шрифтом Брайля и преобразованием текста в речь (TTS). Роли и метки ARIA позволяют изменять дерево доступности, если оно отличается от дерева dom. Эти метки также важны при использовании нестандартных тегов, таких как элемент div , используемый в качестве кнопки, на которую можно нажимать. ARIA требуется, когда элемент HTML не имеет поддержки специальных возможностей. При разработке приложения, управляемого контентом, убедитесь, что программы чтения с экрана и другие вспомогательные устройства хорошо поддерживаются, чтобы помочь вашему приложению охватить как можно больше пользователей.
Узнайте больше об ARIA и HTML на сайте web.dev .
Интернационализация
Интернационализация означает разработку веб-приложения, которое будет доступно пользователям из разных языков и культур. Ваше веб-приложение должно быть адаптировано к различным языкам, географическим регионам и культурным предпочтениям без существенных изменений кода. Ключевые компоненты интернационализации включают, среди прочего, многоязычную поддержку, локализацию, разделение контента, форматирование даты и времени, направление текста и согласование языка.
Интернационализируя свое веб-приложение, вы можете создать инклюзивный и удобный интерфейс для широкой глобальной аудитории. Интернационализация необходима для любого веб-приложения с разнообразной пользовательской базой или целью международного расширения.
Логические свойства
При создании стилей в CSS обязательно используйте start / end вместо таких свойств, как top / down / left / right . Это гарантирует, что меню и макеты сайтов будут соответствующим образом изменены для языков с письмом справа налево.
Альтернативный контент
Включите атрибут lang в тег HTML со ссылками на альтернативные документы в заголовке, чтобы обеспечить собственную разметку для вашего контента. Это позволяет браузеру выбрать правильную страницу, если определенный язык отличается от языка браузера по умолчанию. Это может помочь веб-браузерам и поисковым системам понять язык страницы, что важно для правильного отображения контента и эффективного SEO.
Международный
Объект Intl в JavaScript — важный инструмент для создания многоязычных и учитывающих культурные особенности веб-приложений. Он обеспечивает возможности интернационализации и локализации в веб-приложениях, а также гарантирует, что ваш интерфейс и контент будут понятны и культурно приемлемы для пользователей по всему миру. Функции, предоставляемые объектом Intl, включают форматирование даты и времени, форматирование чисел и сопоставление строк.
Узнайте больше об интернационализации на сайте web.dev .
Формы
HTML-формы являются важной частью веб-приложений, управляемых контентом. Они обеспечивают взаимодействие с пользователем и предоставляют структурированный метод сбора пользовательской информации. Если HTML-формы недоступны широкой аудитории, они могут привести к разочарованию и неудовлетворенности пользователей.
Чтобы сделать HTML-формы доступными, используйте семантические элементы HTML для всех полей формы. Это помогает вспомогательным технологиям понять назначение каждого поля и облегчить пользователям их заполнение. Кроме того, не забудьте четко обозначить все поля формы. Это помогает пользователям предоставлять точную и полезную информацию. Также важно проверить доступность ваших HTML-форм; это можно сделать с помощью вспомогательных технологий для имитации действий пользователя, которому требуются такие технологии для потребления содержимого вашего приложения.