Добро пожаловать в «Изучите доступность»!

Цифровая доступность, обычно сокращенно a11y, подразумевает проектирование и создание веб-сайтов и веб-приложений, с которыми люди с ограниченными возможностями могут взаимодействовать осмысленным и равноценным образом.

Этот курс создан для начинающих и продвинутых веб-разработчиков. Вы можете просмотреть серию от начала до конца, чтобы получить общее представление о методах обеспечения доступности и тестировании, или использовать ее в качестве справочного материала по конкретным предметам. Если вы прочитали незнакомый термин, обратитесь к нашему глоссарию . Для тех, кто плохо знаком с веб-разработкой, ознакомьтесь с курсами «Изучение HTML» для изучения основ разметки и курсами «Изучение CSS» для изучения основ стилизации.

Это не полная ссылка . Каждый раздел представляет тему раздела, предоставляет контекст и примеры. Будут ссылки на ссылки на темы, такие как спецификации MDN и WCAG , а также на другие статьи web.dev . В каждом разделе будет короткая оценка, которая поможет людям подтвердить свое понимание.

Некоторые рекомендации по обеспечению доступности различаются в зависимости от инвалидности, которую вы решаете. Важно понимать своих пользователей и прислушиваться к людям с ограниченными возможностями, когда они говорят вам, что им нужно.

Мы открыты для ваших отзывов! Откройте проблему на GitHub и предоставьте как можно больше информации, чтобы мы могли ее решить.

Вот что вы узнаете:

Что такое цифровая доступность и почему это важно?

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

АРИЯ и HTML

Когда использовать ARIA, а не HTML.

Структура контента

Используйте семантический HTML, ориентиры и таблицы для доступного контента.

Документ

Дополнительные элементы HTML, которые следует учитывать при создании доступных веб-сайтов и веб-приложений.

Фокус клавиатуры

Понимайте и улучшайте порядок и стиль навигации с помощью клавиатуры.

JavaScript

Создавайте доступные триггерные события, заголовки страниц, динамический контент и многое другое.

Изображений

Создавайте доступные изображения.

Цвет и контраст

Создавайте доступные цветовые палитры с соответствующим контрастом.

Анимация и движение

Поддерживайте людей со всеми типами расстройств, вызванных движением.

Типография

Выберите правильные шрифты и размеры шрифтов и структурируйте свой текст с помощью доступного макета.

Видео и аудио

Альтернативные типы мультимедиа, которые делают ваше видео и аудио доступными.

Формы

Создавайте доступные формы.

Дизайн и пользовательский опыт

Создавайте доступные дизайны и оценивайте пользовательский опыт.

Автоматизированное тестирование доступности

Как выполнить автоматическое тестирование доступности.

Ручное тестирование доступности

Как вручную проверить доступность.

Тестирование вспомогательных технологий

Как проводить тестирование с помощью вспомогательных технологий (AT).

Выводы и дальнейшие шаги

Дополнительные ресурсы, которые помогут вам сделать следующие шаги.

Глоссарий

Изучите общие термины и концепции доступности.

Итак, вы готовы изучить доступность? Давайте начнем .