Google Chrome Developers770 тыс
Следующее
Опубликовано 18 августа 2017, 17:00
Chrome version 60 ships with an exciting new DevTools feature called Audits 2.0. This panel replaces the previous Audits panel with a new set of tests powered by Lighthouse. Lighthouse is a tool which checks for various performance and best practice metrics, including accessibility. Under the hood, these accessibility tests are powered by aXe, the open source accessibility engine from the folks at Deque.
Today on A11ycasts I'll show you how to get started with Audits 2.0 by checking a sample site for some common accessibility issues.
It's important to note that a tool like the new Audits panel can only really check for a subset of accessibility issues (basically anything that can be automated). There are still a number of areas that this tool can't test, so make sure you're manually checking your site as well. Here's a helpful guide if you're not quite sure how to manually check for accessibility issues: goo.gl/2xUPh2
Command palette in DevTools: You can open this with cmd-shift-P or ctrl-shift-P on Windows.
New Audits panel, powered by Lighthouse: goo.gl/Nsp7wB
Automated testing with aXe: goo.gl/QmBy9d
Note at around 3:23 I show a feature where you can click on a node in the Audits panel and inspect it in the Elements panel. This feature is still a little buggy. You can track the issue here: goo.gl/ugtVgu
Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf
Today on A11ycasts I'll show you how to get started with Audits 2.0 by checking a sample site for some common accessibility issues.
It's important to note that a tool like the new Audits panel can only really check for a subset of accessibility issues (basically anything that can be automated). There are still a number of areas that this tool can't test, so make sure you're manually checking your site as well. Here's a helpful guide if you're not quite sure how to manually check for accessibility issues: goo.gl/2xUPh2
Command palette in DevTools: You can open this with cmd-shift-P or ctrl-shift-P on Windows.
New Audits panel, powered by Lighthouse: goo.gl/Nsp7wB
Automated testing with aXe: goo.gl/QmBy9d
Note at around 3:23 I show a feature where you can click on a node in the Audits panel and inspect it in the Elements panel. This feature is still a little buggy. You can track the issue here: goo.gl/ugtVgu
Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf