Сканирование с помощью axe DevTools и Lighthouse
Быстро проводите аудит прямо в браузере.
«Сканирование с помощью axe DevTools и Lighthouse» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Two Tools in Your Browser
You do not need a special setup to start auditing. Both axe DevTools and Lighthouse run right inside Chrome, scanning the page you are already looking at.
Meet axe DevTools
The axe DevTools extension adds a tab to your browser developer tools. One click runs the axe-core engine and lists accessibility issues on the page.
Reading an axe Result
Each finding names the broken rule, shows the exact element, rates the impact, and links to a guide explaining how to fix it. No guessing required.
Highlight the Offending Element
axe DevTools can highlight the failing element right on the page. That makes it obvious which button or image triggered the warning.
Impact Levels Guide Priority
axe tags each issue with an impact level: minor, moderate, serious, or critical. Start with critical and serious to fix the biggest blockers first.
Meet Lighthouse
Lighthouse is built into Chrome DevTools. Its accessibility category also runs axe-core under the hood and gives you a single score out of one hundred.
Running a Lighthouse Audit
Open the Lighthouse panel, tick Accessibility, and click Analyze page load. In seconds you get a score plus a grouped list of failing audits.
The Score Is Not the Goal
A Lighthouse score of one hundred is encouraging, but it only reflects the checks it can automate. Treat it as a floor, never proof of full accessibility.
Lighthouse From the Command Line
You can run Lighthouse outside the browser too. Install it with npm and point it at any URL to generate a shareable report.
npx lighthouse https://example.com --only-categories=accessibilityaxe vs Lighthouse
axe DevTools gives deeper detail and best-practice rules; Lighthouse gives a quick score across many categories. Both share the axe-core engine, so they agree often.
Scan Early and Often
Run a quick scan while you build, not just before release. Catching a missing label now is far cheaper than tracing it back later.
Quick Check
Recall what these two browser tools share.
Recap: One Click to Insight
axe DevTools gives detailed, fixable findings while Lighthouse gives a fast score. Both live in your browser and run axe-core, so scanning early is effortless. 🔍
Часто задаваемые вопросы
Урок «Сканирование с помощью axe DevTools и Lighthouse» бесплатный?
Да — полный текст урока «Сканирование с помощью axe DevTools и Lighthouse» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сканирование с помощью axe DevTools и Lighthouse»?
Быстро проводите аудит прямо в браузере. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Сканирование с помощью axe DevTools и Lighthouse»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что автоматизация может обнаружить, а что — нет
- Сканирование с помощью axe DevTools и Lighthouse
- Подключение axe-core к тестам Playwright
- Статический анализ и контрольные этапы CI для доступности