egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Разрабатывайте доступные веб-приложения с React
Develop Accessible Web Apps with React
★5 (всего оценок - 11)
Продолжительность
1 ч 28 мин
Категория
React.jsКоличество уроков
28 Видео
Дата добавления
22 дек. 2019 г., 18:23
Язык
Английский
Дата обновления
29 апр. 2026 г., 06:11
Доступность — это не просто дополнительная функция, а ключевой аспект разработки, который обеспечивает равные возможности взаимодействия для всех пользователей. Этот курс поможет вам уверенно внедрять практики доступности в ваши React‑приложения и делать веб действительно инклюзивным.
Почему доступность критически важна
Недоступные интерфейсы ограничивают миллионы людей с различными видами нарушений. Понимание того, как они взаимодействуют с вебом, помогает разработчикам создавать более качественные, универсальные и удобные продукты.
- Проблемы, с которыми сталкиваются пользователи с нарушениями зрения, слуха, моторики и когнитивными особенностями
- Практические примеры влияния ошибок доступности на пользовательский опыт
- Роль разработчика в создании комфортной цифровой среды
Что вы узнаете на курсе
Курс Эрин Дойл дает прикладной, пошаговый процесс создания доступных React‑приложений — от анализа текущих проблем до внедрения улучшений.
Работа с инструментами и тестированием
Вы научитесь использовать современные инструменты для выявления и устранения проблем доступности.
- Тестирование с помощью скринридеров и режимов доступности
- Автоматизированные проверки и полезные расширения браузера
- Техники ручного тестирования, которые разработчики часто упускают
Создание доступных интерфейсов
Курс учит применять лучшие практики при разработке собственных UI‑компонентов и поведений.
- Правильное использование ARIA‑атрибутов
- Создание доступных виджетов и интерактивных элементов
- Проектирование интерфейсов, учитывающее разные типы взаимодействия
Итеративный рефакторинг
Вы освоите методику улучшения существующего кода без риска нарушить UX или функциональность.
- Пошаговый аудит проблем
- Приоритеты исправления ошибок
- Проверка улучшений на каждом этапе
Практические ресурсы
Материалы курса включают примеры кода, чеклисты и рекомендации, которые помогут внедрить полученные знания в ваши реальные проекты.
Исходные материалы и примеры на GitHub
Кому подойдет этот курс
Курс будет особенно полезен:
- React‑разработчикам, желающим прокачать навыки доступности
- Frontend‑инженерам, которые хотят писать более качественный и универсальный код
- Командам, стремящимся улучшить UX и снизить техническую задолженность
Результат
После прохождения курса вы сможете уверенно проводить аудит доступности, корректировать существующие компоненты и создавать новые — полностью соответствующие требованиям доступности и ориентированные на реальные потребности пользователей.
- Урок 1.00:03:40Set up ESLint to Audit Accessibility Issues in React
- Урок 2.00:05:13Use react-axe to Audit Accessibility Issues at Runtime during Development
- Урок 3.00:01:45Use the axe Browser Extension to Audit a Web Page for Accessibility Issues
- Урок 4.00:06:13Use tota11y to Visualize Accessibility Issues
- Урок 5.00:01:25Use a High Contrast Browser Extension to Find Color Contrast Accessibility Issues
- Урок 6.00:01:36Change Display Preferences on Mac to Find Color Contrast Accessibility Issues
- Урок 7.00:01:30Enable High Contrast Mode on Windows
- Урок 8.00:03:02Access and Customize VoiceOver Settings on MacOS
- Урок 9.00:03:17Navigate a Webpage with VoiceOver in Safari
- Урок 10.00:01:08Test for Landmark Region Accessibility Issues in React
- Урок 11.00:03:01Define Landmark Regions of a web page using ARIA roles
- Урок 12.00:02:01Define Landmark Regions of a web page using HTML5 sectioning elements
- Урок 13.00:01:36Test for Heading Level Accessibility Issues
- Урок 14.00:03:50Correctly Define Heading Levels of a Web Page
- Урок 15.00:01:08Test for Form Control Label Accessibility Issues
- Урок 16.00:02:34Ensure Form Controls have Accessible Labels
- Урок 17.00:03:32Add Accessible Labels to Elements Whose Labels are Not Clear Enough
- Урок 18.00:02:00Add Accessible Labels to Provide Elements with More Context
- Урок 19.00:02:32Add an Accessible Label to an Element from the Text of Other Elements
- Урок 20.00:05:16Add Accessible Descriptions to Elements
- Урок 21.00:01:42Test for Image Alternative Text Accessibility Issues
- Урок 22.00:03:18Define Images with Appropriate Text Alternatives
- Урок 23.00:03:36Test for Insufficient Color Contrast Accessibility Issues
- Урок 24.00:03:42Use Sufficient Color Contrast in Web Page Design
- Урок 25.00:02:22Use More than Color Alone to Convey Information in a Web Page
- Урок 26.00:06:23Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies
- Урок 27.00:09:41Appropriately Set the Focus on Each Page Load of a Web Application
- Урок 28.00:01:44WTF are Accessible Design Patterns?
Автор - egghead
Комментарии