How I do an accessibility check -- A11ycasts #11
Today on A11ycasts I want to give a brief look into the process I use when I'm checking a site for accessibility. This is by no means an exhaustive audit that I'm doing here, but instead a set of quick checks that you can use to highlight any big problem areas. I've found that most sites tend to have issues with at least a few of these checks, and it only takes a few minutes to do it so it's totally worth it for the improved user experience!
Some of the things I look for are:
- Does the tab order make sense and can I reach all controls on the page?
- Is there a clear focus indicator for interactive controls?
- Are there any offscreen elements which should not be focusable?
- Can I traverse the page with a screen reader without getting stuck?
- Is there appropriate alt text on images?
- Do custom controls work with a screen reader?
- Is the user alerted to new content added to the page?
- Are there appropriate headings?
- What about landmark elements?
- Is text high contrast enough to be legible?
And here are some of the tools I like to use:
- Chrome aXe extension: https://goo.gl/67Bm24
- Chrome accessibility devtools extension: https://goo.gl/DvAxi2
- aXe-core: https://github.com/dequelabs/axe-core
Sidenote: at 5:18, not sure why the video didn't announce the different sizes but I tried again later and it was working. Maybe a VoiceOver quirk.
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
Видео How I do an accessibility check -- A11ycasts #11 канала Google Chrome Developers
Some of the things I look for are:
- Does the tab order make sense and can I reach all controls on the page?
- Is there a clear focus indicator for interactive controls?
- Are there any offscreen elements which should not be focusable?
- Can I traverse the page with a screen reader without getting stuck?
- Is there appropriate alt text on images?
- Do custom controls work with a screen reader?
- Is the user alerted to new content added to the page?
- Are there appropriate headings?
- What about landmark elements?
- Is text high contrast enough to be legible?
And here are some of the tools I like to use:
- Chrome aXe extension: https://goo.gl/67Bm24
- Chrome accessibility devtools extension: https://goo.gl/DvAxi2
- aXe-core: https://github.com/dequelabs/axe-core
Sidenote: at 5:18, not sure why the video didn't announce the different sizes but I tried again later and it was working. Maybe a VoiceOver quirk.
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
Видео How I do an accessibility check -- A11ycasts #11 канала Google Chrome Developers
Показать
Комментарии отсутствуют
Информация о видео
14 января 2017 г. 3:03:35
00:12:17
Другие видео канала
The art of labeling -- A11ycasts #12Intro to ARIA -- A11ycasts #13Accessibility Fundamentals with Rob DodsonScreen Reader Basics: VoiceOver -- A11ycasts #07Practical hands-on accessibility testingWhat's new in web accessibility (Google I/O '18)Screen Reader Basics: NVDA -- A11ycasts #09Introduction to Web Accessibility and W3C StandardsHow to check for accessible colors -- A11ycasts #17Automated testing with aXe -- A11ycasts #15The new way to test accessibility with Chrome DevTools - A11ycasts #23Accessibility: What's the difference between WCAG Levels A and AA?Making Accessible Web Apps Using HTML5 and ChromeVoxWeb Accessibility Guidelines - How to make your code Web AccessibleAccessible Modal Dialogs -- A11ycasts #19What is Accessibility Testing? Explained with Tools like Jaws and Sort SiteAccessible Web Design: What Is It & How To Do ItFocus Ring! -- A11ycasts #16