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

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

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

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

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

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

   • Правильный язык для страницы;
   • Правильная структура заголовков;
   • Структура сайта с использованием landmarks;
   • alt для изображений;
   • Контраст текста относительно фона;
   • Изменяемый размер текста;
   • Предсказуемый tab order;
   • Заметное выделение элементов в состоянии фокуса;
   • Связанные label с полями формы;
   • Адекватное отображение страницы при увеличении масштаба до 300%;
   • Использование skip link;
   • Подписи у кнопок, ссылок или элементов форм с иконками.

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

4. Проверить код с помощью Lighthouse и wave.webaim.org.

5. Добавить в репозиторий файл README.md, в котором описать, что вы проверяли на вашей странице, как, какими инструментами, что было исправлено, чтобы удовлетворить критериям.

6. Разместить страницу на сервере факультета fit.mospolytech.ru, и создать запрос на слияние на github.com

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

Результаты работы проверены наставником.

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

Источники

• Доступность - 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. Аттрибуты используемые для доступности.
3. Что следует соблюдать при стилизации кнопок и ссылок?
4. Четыре основных принципа доступности описанных в WCAG.
5. Единицы измерения для работы с размером текста для сохранения доступности.
6. Как тестировать на доступность?
7. Контраст цветов.
8. Пример идеальной формы с точки зрения доступности.