Цифровая доступность, обычно сокращенно a11y, подразумевает проектирование и создание веб-сайтов и веб-приложений, с которыми люди с ограниченными возможностями могут взаимодействовать осмысленным и равноценным образом.
Этот курс создан для начинающих и продвинутых веб-разработчиков. Вы можете просмотреть серию от начала до конца, чтобы получить общее представление о методах обеспечения доступности и тестировании, или использовать ее в качестве справочного материала по конкретным предметам. Если вы прочитали незнакомый термин, обратитесь к нашему глоссарию . Для тех, кто плохо знаком с веб-разработкой, ознакомьтесь с курсами «Изучение HTML» для изучения основ разметки и курсами «Изучение CSS» для изучения основ стилизации.
Это не полная ссылка . Каждый раздел представляет тему раздела, предоставляет контекст и примеры. Будут ссылки на ссылки на темы, такие как спецификации MDN и WCAG , а также на другие статьи web.dev . В каждом разделе будет короткая оценка, которая поможет людям подтвердить свое понимание.
Некоторые рекомендации по обеспечению доступности различаются в зависимости от инвалидности, которую вы решаете. Важно понимать своих пользователей и прислушиваться к людям с ограниченными возможностями, когда они говорят вам, что им нужно.
Мы открыты для ваших отзывов! Откройте проблему на GitHub и предоставьте как можно больше информации, чтобы мы могли ее решить.
Вот что вы узнаете:
Что такое цифровая доступность и почему это важно?
Проектируйте и создавайте веб-сайты и веб-приложения, с которыми люди с ограниченными возможностями могут взаимодействовать осмысленным и равноценным образом. Прочтите о деловых и юридических последствиях такого выбора.
АРИЯ и HTML
Когда использовать ARIA, а не HTML.
Структура контента
Используйте семантический HTML, ориентиры и таблицы для доступного контента.
Документ
Дополнительные элементы HTML, которые следует учитывать при создании доступных веб-сайтов и веб-приложений.
Фокус клавиатуры
Понимайте и улучшайте порядок и стиль навигации с помощью клавиатуры.
JavaScript
Создавайте доступные триггерные события, заголовки страниц, динамический контент и многое другое.
Изображений
Создавайте доступные изображения.
Цвет и контраст
Создавайте доступные цветовые палитры с соответствующим контрастом.
Анимация и движение
Поддерживайте людей со всеми типами расстройств, вызванных движением.
Типография
Выберите правильные шрифты и размеры шрифтов и структурируйте свой текст с помощью доступного макета.
Видео и аудио
Альтернативные типы мультимедиа, которые делают ваше видео и аудио доступными.
Формы
Создавайте доступные формы.
Дизайн и пользовательский опыт
Создавайте доступные дизайны и оценивайте пользовательский опыт.
Автоматизированное тестирование доступности
Как выполнить автоматическое тестирование доступности.
Ручное тестирование доступности
Как вручную проверить доступность.
Тестирование вспомогательных технологий
Как проводить тестирование с помощью вспомогательных технологий (AT).
Выводы и дальнейшие шаги
Дополнительные ресурсы, которые помогут вам сделать следующие шаги.
Глоссарий
Изучите общие термины и концепции доступности.
Итак, вы готовы изучить доступность? Давайте начнем .