💡 Would you like more free lessons? Please subscribe on YouTube to show your support.
To explore three a11y debugging features part of DevTools on real world websites.
DevTools has a number of useful accessibility related debugging tools built into it. This lesson explores 3 of those.
On the colour spectrum, the contrast line shows regions where color does and does not meet a minimum contrast ratio. The line is drawn on the threshold between low contrast and an acceptable contrast.
The contrast line takes in account the foreground text colour, and the background colour. It can also take into account background images if you use the colour picker tool to pick a colour from the image.
The a11y pane is present in the Elements Panel. It displays the full a11y tree (similar to a DOM tree) and presents to you related a11y properties (like ARIA attributes) within the pane.
The a11y audit can be run from the Audits panel.
After running an a11y audit on your page, you can see which audit rules you have passed and failed. A11y audit rules include those such as:
This lesson gave an overview of: