7 FREE accessibility tools to help you build better websites [Front end web dev tips]
In this video, I show you 7 FREE accessibility tools available in Chrome and Firefox dev tools to help you build better, more accessible websites.
As a front end developer, your mission is to build web applications and web pages that as many people as possible can use. Harness the power of free tools available such as Lighthouse, Axe Dev Tools, Firefox Colour Vision Simulation — and more — to help you understand accessibility and make your websites better and easier to use.
0:00 Intro and accessibility statistics
1:41 Lighthouse Dev Tools
2:20 Axe Dev Tools
2:42 Wave Evaluation Tool
3:31 Colour Contrast Checker
3:35 Firefox Colour Vision Simulation
4:19 Accessibility without a mouse
4:37 The Accessibility Tree in Chromium Dev Tools
5:18 Wrap up
This is by no means a complete list — the most important thing to remember is don’t make accessibility an afterthought.
Accessibility should be part of your workflow from the moment you write that first line of code on your new website. Become familiar with semantic HTML, browser dev tools, and how other people might use your website to create truly accessible and inclusive digital experiences.
Links referenced in the video:
My Twitch channel
/ whitep4nth3r
Scope Disability Facts and Figures
https://www.scope.org.uk/media/disabi...
Office for National Statistics Report (2019)
https://www.ons.gov.uk/businessindust...
Axe Dev Tools: https://chrome.google.com/webstore/de...
Wave Evaluation Tool:
https://chrome.google.com/webstore/de...
Colour Contrast Checker
https://chrome.google.com/webstore/de...
And remember, build stuff, learn things and love what you do.
#accessibility #webdev