The new way to test accessibility with Chrome DevTools - A11ycasts #23
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: https://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: https://goo.gl/Nsp7wB
Automated testing with aXe: https://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: https://goo.gl/ugtVgu
Watch all A11ycasts episodes: https://goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Видео The new way to test accessibility with Chrome DevTools - A11ycasts #23 канала Chrome for Developers
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: https://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: https://goo.gl/Nsp7wB
Automated testing with aXe: https://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: https://goo.gl/ugtVgu
Watch all A11ycasts episodes: https://goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Видео The new way to test accessibility with Chrome DevTools - A11ycasts #23 канала Chrome for Developers
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
From nothin’ to gzip - HTTP 203Fit to Page (The Standard, Ep. 2)The big back button quiz - HTTP 203New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!Online and Offline - (The Standard, Ep. 12)Building user-adaptive interfaces with preference media queries | WorkshopVertical rhythm - GUI SnippetsUX Research and Usability Testing - Designer vs. Developer #21Best web features of 2018: Part 2/4 - HTTP203Gyroscope (The Standard, Ep. 10)How to create personalized web experiencesRandom paint effects - HTTP 203What's new in web animationsBuilding for billions on the web - Google I/O 2016A love letter to DOMPoint and DOMMatrix | HTTP 203V8, modern JavaScript, and beyond - Google I/O 2016Chrome Dev Summit 2016 HighlightsIntro & Setup - Progressive Web App TrainingDithering - HTTP 203Polymer Developer Summit 2016 - Live Stream Day 2CSS background-attachment #Shorts