Никита

1.

Областное автономное профессиональное учереждение
«Валдайский аграрный техникум»
Разработка доступного вебсайта для людей с
ограниченными
возможностями здоровья
Выполнил: студент 4 курса
Мардасов Никита Дмитриевич

2.

1
Цель работы
Разработка и практическая реализация доступного веб-сайта
для благотворительного фонда «Доброе сердце»,
соответствующего международным стандартам WCAG 2.1
уровня AA
2
Ключевые задачи
Исследовать теоретические основы инклюзивного дизайна
Определить целевую аудиторию и потребности
пользователей
Изучить международные стандарты веб-доступности
Реализовать семантическую верстку и адаптивный
интерфейс

3.

Методы исследования и
теоретические основы
Веб-доступность (Web
Accessibility)
Инклюзивный дизайн
(Inclusive Design)
Практическая дисциплина и набор
Философия проектирования,
технических стандартов,
рассматривающая разнообразие
фокусирующихся на устранении
пользователей как ценность с самого
барьеров для людей с инвалидностью
начала процесса создания продукта
при взаимодействии с веб-контентом
Ключевые принципы:
Принцип: «Решать для одного,
расширять для многих»
воспринимаемость, полезность,
понятность, надежность
Инклюзивный дизайн задает стратегическое направление, а веб-доступность
предоставляет тактические инструменты для его реализации

4.

Целевые группы пользователей с ОВЗ
Нарушения зрения
Нарушения слуха
Полная потеря зрения,
Полная или частичная потеря
слабовидение, цветовая
слуха. Нуждаются в субтитрах
слепота. Используют
для видео, транскриптах для
Ограниченная моторика,
информации, концентрацией.
скринридеры, увеличительные
аудио, визуальных
невозможность использования
Нуждаются в простом языке,
программы, навигацию с
уведомлениях
мыши. Требуют полной
предсказуемой навигации,
доступности с клавиатуры и
отсутствии отвлекающих
альтернативных устройств
элементов
клавиатуры
Нарушения опорнодвигательного аппарата
Когнитивные нарушения
Трудности с обработкой
ввода

5.

Анализ лучших практик
Семантический HTML
Прогрессивное улучшение
Использование нативных
элементов (<button>, <nav>,
Сайт полностью функционален
<main>) обеспечивает
без CSS. При отключении
встроенную доступность без
стилей сохраняется читаемая
дополнительного JavaScript
структура
WCAG 2.1 Level AA
Соответствие международным стандартам: контрастность 4.5:1,
навигация с клавиатуры, альтернативный текст
Основа доступности закладывается на уровне семантической
разметки и продуманного CSS, а не сложного JavaScript

6.

Разработка сайта: технический стек
01
02
03
HTML5
CSS3
WAI-ARIA
Семантическая разметка с использованием <header>, <nav>, <main>,
Адаптивные стили с Flexbox и Grid Layout, медиа-запросы для
Ограниченное использование ARIA-атрибутов только там, где
<section>, <article>, <footer> для логической структуры
responsive design, высококонтрастные цветовые схемы
нативного HTML недостаточно для описания элементов

7.

Итоговый продукт
100%
Клавиатурная доступность
Все функции доступны через Tab и Enter
4.5:1
Контрастность
Соответствие стандартам WCAG 2.1 AA

8.

Выводы исследования
Техническая реализуемость
Социальная значимость
Доступный веб-сайт успешно создан с
Расширение аудитории на более чем 10%
использованием только HTML5 и CSS3,
населения России с инвалидностью,
что доказывает возможность
обеспечение равного доступа к
обеспечения инклюзивности без сложных
информации
технологий
Правовое соответствие
Выполнение требований ФЗ №181 «О социальной защите инвалидов» и международных
стандартов WCAG 2.1
Инклюзивный дизайн делает продукты лучше для всех пользователей, а не только для
людей с инвалидностью

9.

Экономическое обоснование и БЖД
Экономическая эффективность
252k
Трудовые затраты
168 часов разработки
18.6k
Годовые расходы
Хостинг и сопровождение
Безопасность жизнедеятельности:
Правильная организация рабочего места
Регламентированные перерывы каждые 45-90 минут
Соблюдение норм освещения и эргономики
Экологически ответственная утилизация оборудования

10.

Спасибо за внимание!