Тестируем фронтенд на доступность в DevTools — Lighthouse, AOM Tree. Скрытая панель Rendering.
Александр Ламков — Friendly Frontend
✏️ Разбираем инструменты для тестирования веб-приложений на соответствие критериям цифровой доступности. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:12 | Тестирование на цифровую доступность через DevTools Lighthouse ▶ 01:23 | Lighthouse Accessibility, категория Names and labels, проблемы имён и ассоциативных подписей ▶ 01:53 | Lighthouse Accessibility, категория Navigation, проблемы навигации ▶ 02:21 | Lighthouse Accessibility, категория Aria ▶ 04:31 | Lighthouse Accessibility, категория Tables and lists, проблемы валидности разметки ▶ 04:45 | Lighthouse Accessibility, категория Additional items to manually check, дополнительные проверки вручную ▶ 05:48 | Lighthouse Accessibility, категория Passed audits, пройденные проверки ▶ 06:08 | Lighthouse Accessibility, категория Not applicable, незапущенные проверки ▶ 06:52 | Chrome DevTools, панель Accessibility, AOM Tree ▶ 08:07 | AOM Tree, проблемная ссылка ▶ 08:42 | Chrome DevTools, панель Accessibility, ARIA Attributes ▶ 08:51 | Chrome DevTools, панель Accessibility, Computed Properties ▶ 09:22 | Chrome DevTools, панель Accessibility, Source Order Viewer ▶ 10:11 | Chrome DevTools, панель Rendering, эмулирование проблемного зрения ▶ 10:37 | Эмуляция prefers-color-scheme ▶ 11:20 | Эмуляция prefers-contrast ▶ 11:43 | Эмуляция prefers-reduced-motion ▶ 12:33 | Эмуляция prefers-reduced-transparency ▶ 13:04 | Эмуляция проблемного зрения (emulate vision deficiencies) ▶ 13:57 | Заключение 💬 Чат в телеграмме (помощь...
6:43
