Основы разработки доступных веб-страниц

Цель: изучение принципов создания доступных веб-приложений и веб-контента; приобретения навыков разработки доступных веб-страниц, содержащих семантическую информацию, которая может быть прочитана с помощью специальных возможностей (assistive technologies).

Порядок выполнения лабораторной работы:

1. Подготовка к выполнению лабораторной работы – изучение принципов и основ создания доступных веб-страниц, в том числе:

   • доступность сайтов (Accessibility)
   • основы стандарта WCAG;
   • роли для описания типа элемента управления;
   • роли для описания структуры веб-страницы;
   • свойства для описания состояний элементов управления;
   • возможность навигации по сайту при помощи клавиатуры;

2. На базе верстки, сделать страницу доступной:

   • Правильный язык для страницы (lang в html-теге);
   • Правильная структура заголовков;
   • Структура сайта с использованием landmarks;
   • alt для изображений: для декоративных изображений alt пустой, подробное описание, если изображение раскрывает важную идею;
   • для ссылок и кнопок, где есть только изображение, добавляете span с классом .sr-only и в нем указываете действие или alt-текст в ссылке с лого;
   • Проверить контраст текста относительно фона и при необходимости повысить, невзирая на значения в макете. В инструментах разработчика смотрите вкладку css overview;
   • Изменяемый размер текста. Убедитесь что font-size везде в rem;
   • Предсказуемый tab order. Используя tab и shift+tab, проверить что все интерактивные элементы выделяются;
   • Заметное выделение элементов в состоянии фокуса;
   • Связанные label с полями формы;
   • Адекватное отображение страницы при увеличении масштаба до 300%;
   • Добавить skip link. В источниках есть описание, как его реализовать;

3. Проверить валидность HTML и CSS кода страницы, исправить все ошибки.

4. Проверить код с помощью Lighthouse и wave.webaim.org, исправить ошибки, если они были обнаружены.

5. Провести ручное тестирование на предсказуемость поведения страницы и понятность текстовых описаний.

6. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.

7. Загрузить проект на хостинг.

Требования к коду

• Страница удовлетворяет требованиям доступности.
• Отсутствие ошибок на валидаторе для html и css.
• Код отформатирован.
• Корректное использование тегов.
• Страница должна соответствовать принципам адаптивной верстки.

Результаты выполнения лабораторной работы

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

• Доступность - doka.guide
• skip-link - doka.guide
• Learn Accessibility от Google
• Как помочь слепым на вашем сайте
• Что такое доступность?
• Пишем CSS, не забывая о доступности
• Введение в ARIA-атрибуты
• Программа для проверки доступности сайта
• Демо страница для инструментов тестирования
• Палитры цветов с учетом доступности
• px vs rem
• Checklist
• A Complete Guide To Accessible Front-End Components
• Innovation Studio LogoWeb Accessibility Guidelines v1.0

Вопросы для защиты

1. Семантические теги и доступность.
2. Аттрибуты ARIA используемые для доступности.
3. Что следует соблюдать при стилизации кнопок и ссылок?
4. Четыре основных принципа доступности описанных в WCAG.
5. Единицы измерения для работы с размером текста для сохранения доступности.
6. Проверка проекта на доступность: способы, инструменты.
7. Контраст цветов, минимальный коэффициент, зависимость от размера текста.
8. Пример структуры идеальной формы с точки зрения доступности.
9. skip link: назначение, создание.