10

Доступность - A11y

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

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

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

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

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

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

    • Правильный язык для страницы (lang в html-теге);
    • Правильная структура заголовков;
    • Структура сайта с использованием landmarks;
    • alt для изображений: для декоративных изображений alt пустой, подробное описание, если изображение раскрывает важную идею;
    • для ссылок и кнопок, где есть только изображение, добавляете span с классом .sr-only и в нем указываете действие.
    • Проверить контраст текста относительно фона и при необходимости повысить. В инструментах разработчика смотрите вкладку css overview;
    • Изменяемый размер текста. Убедитесь что font-size везде в rem;
    • Предсказуемый tab order. Используя tab и shift+tab, проверить что все интерактивные элементы выделяются;
    • Заметное выделение элементов в состоянии фокуса;
    • Связанные label с полями формы;
    • Адекватное отображение страницы при увеличении масштаба до 300%;
    • Добавить skip link. В источниках есть описание, как его реализовать;
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

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

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

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

Требования к html и css:

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

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

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

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

Источники

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

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