ДОСТУПНОСТЬ КАК ОСНОВА ИНКЛЮЗИВНОГО ВЕБ-ДИЗАЙНА (НА ПРИМЕРЕ ПРИМЕНЕНИЯ ПРИНЦИПОВ WCAG 2.2 В МОДАЛЬНЫХ ОКНАХ ОДНОСТРАНИЧНОГО ВЕБ-ПРИЛОЖЕНИЯ)
|
АННОТАЦИЯ 3
ПЕРЕЧЕНЬ УСЛОВНЫХ ОБОЗНАЧЕНИЙ 4
ВВЕДЕНИЕ 5
1. Модальные окна и их роль в обеспечении веб доступности 9
1.1. Веб-доступность как часть инклюзивного дизайна: история становления 9
1.1.1. Доступность как составляющая инклюзивного дизайна 9
1.1.2. История становления веб-доступности 12
1.2. Веб доступность сегодня: определение, принципы и вызовы 14
1.2.1. Понятие и принципы веб-доступности 14
1.2.2. Текущее состояние веб-доступности: вызовы для разработчиков 15
1.3. Оценка доступности веб-сайтов 18
1.3.1. Ручное тестирование 18
1.3.2. Автоматическое тестирование 19
1.4. Веб-доступность модальных окон 23
1.5. Анализ примеров реализации доступных модальных окон 27
1.5.1. Требования к доступности модальных окон, согласно стандарту WCAG
версии 2.2 27
1.5.2. Тестирование доступности существующих реализаций модальных окон на
популярных сайтах 29
1.5.3. Результаты анализа и выводы 32
2. Этапы разработки одностраничного приложения «OpenWCAG» 36
2.1. Концепция и структура одностраничного приложения «OpenWCAG» 36
2.1.1 Структура сайта. Главная страница 38
2.1.2 Структура сайта. Perceivable (Воспринимаемость) 39
2.1.3 Структура сайта.Operable (Управляемость) 40
2.1.4 Структура сайта. Understandable (Понятность) 41
2.1.5 Структура сайта. Robust (Надёжность) 42
2.1.6 Структура сайта. Доступность модальных окон 43
2.2. Визуальная концепция и UI Kit 44
2.2.1 Подбор цветовой палитры 44
2.2.2 Варианты кнопок и их состояний 48
2.2.3 Шапка сайта (Header) 46
2.2.4 Типографическая система 47
2.2.3 Футер 48
2.2.4 Модальное окно 51
2.2.5 Фундаментальные принципы концепции 52
2.2.6 Описание макета 52
2.3. Реализация веб доступности в одностраничном приложении (список
компонентов, их структура и реализация) 57
2.3.1 Структура проекта 58
2.3.2 Реализация общей доступности сайта 64
2.3.3 Реализация доступных модальных окон 69
2.4. Тестирование 75
2.4.1 Автоматическое тестирование 76
2.4.2 Ручное тестирование модальных окон 77
2.4.3 Итоги тестирования 78
2.5. Рекомендации по реализации доступных модальных окон в одностраничных
приложениях 79
ЗАКЛЮЧЕНИЕ 81
ЛИТЕРАТУРА 83
ПЕРЕЧЕНЬ УСЛОВНЫХ ОБОЗНАЧЕНИЙ 4
ВВЕДЕНИЕ 5
1. Модальные окна и их роль в обеспечении веб доступности 9
1.1. Веб-доступность как часть инклюзивного дизайна: история становления 9
1.1.1. Доступность как составляющая инклюзивного дизайна 9
1.1.2. История становления веб-доступности 12
1.2. Веб доступность сегодня: определение, принципы и вызовы 14
1.2.1. Понятие и принципы веб-доступности 14
1.2.2. Текущее состояние веб-доступности: вызовы для разработчиков 15
1.3. Оценка доступности веб-сайтов 18
1.3.1. Ручное тестирование 18
1.3.2. Автоматическое тестирование 19
1.4. Веб-доступность модальных окон 23
1.5. Анализ примеров реализации доступных модальных окон 27
1.5.1. Требования к доступности модальных окон, согласно стандарту WCAG
версии 2.2 27
1.5.2. Тестирование доступности существующих реализаций модальных окон на
популярных сайтах 29
1.5.3. Результаты анализа и выводы 32
2. Этапы разработки одностраничного приложения «OpenWCAG» 36
2.1. Концепция и структура одностраничного приложения «OpenWCAG» 36
2.1.1 Структура сайта. Главная страница 38
2.1.2 Структура сайта. Perceivable (Воспринимаемость) 39
2.1.3 Структура сайта.Operable (Управляемость) 40
2.1.4 Структура сайта. Understandable (Понятность) 41
2.1.5 Структура сайта. Robust (Надёжность) 42
2.1.6 Структура сайта. Доступность модальных окон 43
2.2. Визуальная концепция и UI Kit 44
2.2.1 Подбор цветовой палитры 44
2.2.2 Варианты кнопок и их состояний 48
2.2.3 Шапка сайта (Header) 46
2.2.4 Типографическая система 47
2.2.3 Футер 48
2.2.4 Модальное окно 51
2.2.5 Фундаментальные принципы концепции 52
2.2.6 Описание макета 52
2.3. Реализация веб доступности в одностраничном приложении (список
компонентов, их структура и реализация) 57
2.3.1 Структура проекта 58
2.3.2 Реализация общей доступности сайта 64
2.3.3 Реализация доступных модальных окон 69
2.4. Тестирование 75
2.4.1 Автоматическое тестирование 76
2.4.2 Ручное тестирование модальных окон 77
2.4.3 Итоги тестирования 78
2.5. Рекомендации по реализации доступных модальных окон в одностраничных
приложениях 79
ЗАКЛЮЧЕНИЕ 81
ЛИТЕРАТУРА 83
Актуальность. Современное общество переживает беспрецедентную цифровую трансформацию: по данным Statista, к февралю 2025 года число пользователей интернета достигло 5,56 миллиарда человек - это 67,9% населения Земли [1]. В России проникновение интернета достигло около 90% [2]. Интернет превратился в критически важный инструмент для образования, здравоохранения, бизнеса и социального взаимодействия. Однако стремительная цифровизация обострила проблему неравенства: миллионы людей, включая лиц с ограниченными возможностями здоровья, сталкиваются с барьерами при использовании онлайн-ресурсов. Например, по оценкам ВОЗ, более 1 миллиарда человек в мире имеют инвалидность, и для них недоступность веб-контента становится формой социальной изоляции [3].
Инклюзивный дизайн, направленный на создание продуктов, пригодных для максимально широкой аудитории, сегодня рассматривается как этический императив. Его ключевая составляющая - веб-доступность (web accessibility) - практика проектирования интерфейсов, которые могут быть полноценно использованы людьми с нарушениями зрения, слуха, моторики или с когнитивными особенностями [4]. Несмотря на признание доступности правом человека (Резолюция ООН A/HRC/17/27, 2011 [5]), 96,3% домашних страниц ведущих сайтов по-прежнему содержат нарушения стандартов WCAG 2.1 [6]. Это не только ограничивает возможности пользователей, но и создаёт юридические риски для компаний: в 2023 году в США было подано более 4000 исков по разделу 508 Закона о реабилитации [7], обязывающему обеспечивать доступность цифровых сервисов.
Игнорирование принципов доступности не только ограничивает права миллионов пользователей, но и создаёт долгосрочные риски для бизнеса, подрывая доверие аудитории и снижая конкурентные преимущества.
Особую сложность в контексте доступности представляют модальные окна - элементы интерфейса, которые временно блокируют взаимодействие с основным содержимым веб-сайта. Их некорректная реализация, приводит к критическим нарушениям:
- управление фокусом не ограничивается областью окна, что делает навигацию с клавиатуры невозможной для пользователей с моторными нарушениями [8];
- отсутствие семантической разметки дезориентирует пользователей программ экранного доступа [9];
- Низкий контраст между окном и фоном (менее 3:1) затрудняет восприятие для людей с нарушениями зрения [10].
Эти проблемы усугубляются распространением SPA (Single Page Applications) и библиотек графических компонентов, где динамические компоненты, такие как модальные окна, часто реализуются без учёта специфики вспомогательных технологий. При этом существующие исследования (WebAIM, 2024 [6]) констатируют: 56,8 ошибок доступности на страницу - на 13,6% больше, чем в 2023 году.
Все вышесказанное обуславливает актуальность настоящей работы, которая обусловлена противоречием между растущей зависимостью общества от цифровых сервисов и системным игнорированием принципов инклюзивного дизайна. Существующие материалы по веб-доступности часто фрагментарны или недоступны русскоязычным разработчикам, в то время как предлагаемая в работе разработка информационного сайта о веб-доступности с акцентом на модальные окна не только демонстрирует практическое применение стандартов WCAG 2.2, но и может служить моделью для обучения разработчиков, дизайнеров и менеджеров проектов.
Целью данной работы является разработка информационного сайта о вебдоступности с реализацией доступных модальных окон на React, соответствующих стандартам WCAG 2.2, для демонстрации практик инклюзивного дизайна.
Для достижения цели выпускной квалификационной работы необходимо последовательно решить следующие задачи:
1. Определить понятие и роль веб-доступности в инклюзивном дизайне.
2. Выявить ключевые проблемы доступности модальных окон на основе их анализа в существующих веб-сайтах.
3. Определить структуру и визуальный концепт информационного сайта о доступности.
4. Разработать информационный сайт с применением различных методов реализации модальных окон.
5. Провести тестирование реализованных решений.
6. Сформулировать рекомендации для разработчиков по реализации доступных модальных окон.
Объектом выпускной квалификационной работы являются принципы вебдоступности и инструменты их реализации.
Предметом выпускной квалификационной работы являются методы обеспечения доступности модальных окон в одностраничных приложениях.
Теоретическую базу и методологическую основу исследования составляют работы исследователей в области веб-доступности и инклюзивного дизайна, включая:
- труды Консорциума W3C, посвященные стандартам WCAG 2.1/2.2;
- исследования Рональда Мейса и его концепцию универсального дизайна;
- современные работы WebAIM и Nielsen Norman Group, анализирующие барьеры доступности в динамических интерфейсах.
Теоретическая значимость исследования заключается в систематизации проблем доступности модальных окон и их соотнесении с актуальными принципами WCAG 2.2. Работа расширяет представление о методах внедрения инклюзивного дизайна в одностраничные веб-приложения и предлагает авторскую критериальную матрицу для оценки уровня доступности модальных окон.
Практическая значимость исследования заключается в создании образовательного сайта о доступности, реализации шаблонов доступных модальных окон на React, а также в разработке практических рекомендаций для разработчиков. Созданные наработки могут быть интегрированы в реальные проекты, способствуя распространению инклюзивных практик.
В выпускной квалификационной работе применялись следующие методы:
- качественный анализ интерфейсов (ручное тестирование модальных окон на 3 сайтах);
- комбинированное тестирование (автоматическое с помощью Lighthouse и IBM Equal Access, ручное тестирование по критериям доступности).
Структура работы: магистерская диссертация состоит из введения, двух глав, заключения, списка литературы.
Во введении обоснована актуальность темы, определены цели и задачи, описаны объект и предмет исследования, раскрыта теоретическая и практическая значимость.
В первой главе проанализированы принципы, история развития и роль вебдоступности, выделены проблемы модальных окон, сформулирован набор критериев доступности на основе WCAG 2.2 и проведен аудит трех существующих реализаций (dzen.ru, Ozon и Duolingo).
Во второй главе описана разработка информационного сайта: структура, технологии, подходы к реализации модальных окон, результаты автоматического и ручного тестирования, обоснование выбранных решений.
В заключении изложены краткие результаты и сформулированы тезисы об ответственности разработчика относительно реализации веб-доступности на этапах создания продукта.
В качестве источников информации использовались научные статьи, документация W3C, отчеты WebAIM, кейсы профессиональных сообществ. Список литературы представлен 49 источниками, в том числе исследованиями за последние 5-10 лет.
В ходе работы над магистерской диссертацией был подготовлен доклад для конференции «Актуальные проблемы социальных наук 2025», и опубликованы тезисы на тему «Инклюзивность по умолчанию: новая норма в веб-разработке».
Результатом работы стали:
- разработка образовательного веб-ресурса;
- реализация двух подходов к созданию доступных модальных окон;
- формализация критериев доступности модальных окон;
- рекомендации по их внедрению в современную веб-разработку.
Инклюзивный дизайн, направленный на создание продуктов, пригодных для максимально широкой аудитории, сегодня рассматривается как этический императив. Его ключевая составляющая - веб-доступность (web accessibility) - практика проектирования интерфейсов, которые могут быть полноценно использованы людьми с нарушениями зрения, слуха, моторики или с когнитивными особенностями [4]. Несмотря на признание доступности правом человека (Резолюция ООН A/HRC/17/27, 2011 [5]), 96,3% домашних страниц ведущих сайтов по-прежнему содержат нарушения стандартов WCAG 2.1 [6]. Это не только ограничивает возможности пользователей, но и создаёт юридические риски для компаний: в 2023 году в США было подано более 4000 исков по разделу 508 Закона о реабилитации [7], обязывающему обеспечивать доступность цифровых сервисов.
Игнорирование принципов доступности не только ограничивает права миллионов пользователей, но и создаёт долгосрочные риски для бизнеса, подрывая доверие аудитории и снижая конкурентные преимущества.
Особую сложность в контексте доступности представляют модальные окна - элементы интерфейса, которые временно блокируют взаимодействие с основным содержимым веб-сайта. Их некорректная реализация, приводит к критическим нарушениям:
- управление фокусом не ограничивается областью окна, что делает навигацию с клавиатуры невозможной для пользователей с моторными нарушениями [8];
- отсутствие семантической разметки дезориентирует пользователей программ экранного доступа [9];
- Низкий контраст между окном и фоном (менее 3:1) затрудняет восприятие для людей с нарушениями зрения [10].
Эти проблемы усугубляются распространением SPA (Single Page Applications) и библиотек графических компонентов, где динамические компоненты, такие как модальные окна, часто реализуются без учёта специфики вспомогательных технологий. При этом существующие исследования (WebAIM, 2024 [6]) констатируют: 56,8 ошибок доступности на страницу - на 13,6% больше, чем в 2023 году.
Все вышесказанное обуславливает актуальность настоящей работы, которая обусловлена противоречием между растущей зависимостью общества от цифровых сервисов и системным игнорированием принципов инклюзивного дизайна. Существующие материалы по веб-доступности часто фрагментарны или недоступны русскоязычным разработчикам, в то время как предлагаемая в работе разработка информационного сайта о веб-доступности с акцентом на модальные окна не только демонстрирует практическое применение стандартов WCAG 2.2, но и может служить моделью для обучения разработчиков, дизайнеров и менеджеров проектов.
Целью данной работы является разработка информационного сайта о вебдоступности с реализацией доступных модальных окон на React, соответствующих стандартам WCAG 2.2, для демонстрации практик инклюзивного дизайна.
Для достижения цели выпускной квалификационной работы необходимо последовательно решить следующие задачи:
1. Определить понятие и роль веб-доступности в инклюзивном дизайне.
2. Выявить ключевые проблемы доступности модальных окон на основе их анализа в существующих веб-сайтах.
3. Определить структуру и визуальный концепт информационного сайта о доступности.
4. Разработать информационный сайт с применением различных методов реализации модальных окон.
5. Провести тестирование реализованных решений.
6. Сформулировать рекомендации для разработчиков по реализации доступных модальных окон.
Объектом выпускной квалификационной работы являются принципы вебдоступности и инструменты их реализации.
Предметом выпускной квалификационной работы являются методы обеспечения доступности модальных окон в одностраничных приложениях.
Теоретическую базу и методологическую основу исследования составляют работы исследователей в области веб-доступности и инклюзивного дизайна, включая:
- труды Консорциума W3C, посвященные стандартам WCAG 2.1/2.2;
- исследования Рональда Мейса и его концепцию универсального дизайна;
- современные работы WebAIM и Nielsen Norman Group, анализирующие барьеры доступности в динамических интерфейсах.
Теоретическая значимость исследования заключается в систематизации проблем доступности модальных окон и их соотнесении с актуальными принципами WCAG 2.2. Работа расширяет представление о методах внедрения инклюзивного дизайна в одностраничные веб-приложения и предлагает авторскую критериальную матрицу для оценки уровня доступности модальных окон.
Практическая значимость исследования заключается в создании образовательного сайта о доступности, реализации шаблонов доступных модальных окон на React, а также в разработке практических рекомендаций для разработчиков. Созданные наработки могут быть интегрированы в реальные проекты, способствуя распространению инклюзивных практик.
В выпускной квалификационной работе применялись следующие методы:
- качественный анализ интерфейсов (ручное тестирование модальных окон на 3 сайтах);
- комбинированное тестирование (автоматическое с помощью Lighthouse и IBM Equal Access, ручное тестирование по критериям доступности).
Структура работы: магистерская диссертация состоит из введения, двух глав, заключения, списка литературы.
Во введении обоснована актуальность темы, определены цели и задачи, описаны объект и предмет исследования, раскрыта теоретическая и практическая значимость.
В первой главе проанализированы принципы, история развития и роль вебдоступности, выделены проблемы модальных окон, сформулирован набор критериев доступности на основе WCAG 2.2 и проведен аудит трех существующих реализаций (dzen.ru, Ozon и Duolingo).
Во второй главе описана разработка информационного сайта: структура, технологии, подходы к реализации модальных окон, результаты автоматического и ручного тестирования, обоснование выбранных решений.
В заключении изложены краткие результаты и сформулированы тезисы об ответственности разработчика относительно реализации веб-доступности на этапах создания продукта.
В качестве источников информации использовались научные статьи, документация W3C, отчеты WebAIM, кейсы профессиональных сообществ. Список литературы представлен 49 источниками, в том числе исследованиями за последние 5-10 лет.
В ходе работы над магистерской диссертацией был подготовлен доклад для конференции «Актуальные проблемы социальных наук 2025», и опубликованы тезисы на тему «Инклюзивность по умолчанию: новая норма в веб-разработке».
Результатом работы стали:
- разработка образовательного веб-ресурса;
- реализация двух подходов к созданию доступных модальных окон;
- формализация критериев доступности модальных окон;
- рекомендации по их внедрению в современную веб-разработку.
В ходе работы были достигнуты следующие результаты.
1. В ходе анализа стандартов WCAG и оценки существующих реализаций модальных окон:
• Было выделено 7 критериев оценки доступности модальных окон.
• Проведён анализ модальных окон на трёх популярных веб-сайтах.
2. В ходе проектирования информационного веб-сайта:
• Разработано 17 элементов UI Kit.
• Реализован макет одной из страниц сайта.
3. В ходе реализации сайта в формате веб-приложения на React:
• Было реализовано 7 страниц сайта.
• 21 отдельных React-компонентов, в том числе два универсальных компонента модального окна, реализованные двумя разными способами - с использованием HTML элементов div и dialog.
4. В ходе тестирования:
• С помощью автоматических инструментов были проверены все 7 страниц сайта, средняя оценка Lighthouse составила 99/100.
• Методами ручного тестирования были проверены 24 модальных окна, использующих две разные реализации модальных окон.
Доступность веб-сайтов - это не только соответствие стандартам; речь идёт об инклюзивности, равенстве и обеспечении того, чтобы никто не остался позади в цифровую эпоху. Доступный дизайн приносит пользу обществу в целом, создавая более справедливое цифровое пространство, в котором каждый может участвовать в полной мере. Для предприятий он открывает новые рынки и повышает удовлетворённость клиентов. Для отдельных лиц он обеспечивает большую независимость и возможности для образования, трудоустройства и социального взаимодействия.
Более того, поскольку Интернет продолжает развиваться с достижениями в области искусственного интеллекта, Интернета вещей и технологии 5G, доступность должна оставаться центральным фактором. Эти инновации имеют потенциал для дальнейшей интеграции Интернета во все аспекты нашей жизни, но они также рискуют усугубить существующее неравенство, если доступность не будет приоритетной.
Следование стандартам - лишь минимальная планка. Настоящая профессиональная зрелость разработчика проявляется в осознанной социальной ответственности, выходящей за рамки законодательных требований. Ценности инклюзивности должны быть не внешним ограничением, а внутренней нормой - только тогда технологии станут по- настоящему универсальными.
Ответственность разработчика должна проявляться на всех этапах создания продукта:
- На этапе проектирования, когда пользовательские сценарии
рассматриваются с позиции разных групп пользователей.
- При выборе технических решений, когда осознанно отдаётся приоритет вариантам со встроенной поддержкой доступности, даже если они требуют дополнительных усилий в реализации. Например, использование семантического HTML- элемента
1. В ходе анализа стандартов WCAG и оценки существующих реализаций модальных окон:
• Было выделено 7 критериев оценки доступности модальных окон.
• Проведён анализ модальных окон на трёх популярных веб-сайтах.
2. В ходе проектирования информационного веб-сайта:
• Разработано 17 элементов UI Kit.
• Реализован макет одной из страниц сайта.
3. В ходе реализации сайта в формате веб-приложения на React:
• Было реализовано 7 страниц сайта.
• 21 отдельных React-компонентов, в том числе два универсальных компонента модального окна, реализованные двумя разными способами - с использованием HTML элементов div и dialog.
4. В ходе тестирования:
• С помощью автоматических инструментов были проверены все 7 страниц сайта, средняя оценка Lighthouse составила 99/100.
• Методами ручного тестирования были проверены 24 модальных окна, использующих две разные реализации модальных окон.
Доступность веб-сайтов - это не только соответствие стандартам; речь идёт об инклюзивности, равенстве и обеспечении того, чтобы никто не остался позади в цифровую эпоху. Доступный дизайн приносит пользу обществу в целом, создавая более справедливое цифровое пространство, в котором каждый может участвовать в полной мере. Для предприятий он открывает новые рынки и повышает удовлетворённость клиентов. Для отдельных лиц он обеспечивает большую независимость и возможности для образования, трудоустройства и социального взаимодействия.
Более того, поскольку Интернет продолжает развиваться с достижениями в области искусственного интеллекта, Интернета вещей и технологии 5G, доступность должна оставаться центральным фактором. Эти инновации имеют потенциал для дальнейшей интеграции Интернета во все аспекты нашей жизни, но они также рискуют усугубить существующее неравенство, если доступность не будет приоритетной.
Следование стандартам - лишь минимальная планка. Настоящая профессиональная зрелость разработчика проявляется в осознанной социальной ответственности, выходящей за рамки законодательных требований. Ценности инклюзивности должны быть не внешним ограничением, а внутренней нормой - только тогда технологии станут по- настоящему универсальными.
Ответственность разработчика должна проявляться на всех этапах создания продукта:
- На этапе проектирования, когда пользовательские сценарии
рассматриваются с позиции разных групп пользователей.
- При выборе технических решений, когда осознанно отдаётся приоритет вариантам со встроенной поддержкой доступности, даже если они требуют дополнительных усилий в реализации. Например, использование семантического HTML- элемента