Using Chrome Developer Tools to Validate CSS
Note: These instructions are for accessing the
Chrome Developer Tools using JAWS. For instructions on how to use
them with VoiceOver, please check out Google's documentation
Google's Guide to Navigating Chrome DevTools With
Assistive Technology (Element and styles tab sections).
If you are an NVDA user and want to validate your CSS work, please
check out the
NVDA developer toolkit add-on
You can use if you use insert+f on an element, JAWS will speak out the name of the font being used
along with other formatting info about the character. However, if you want additional information about the CSS of an element, Chrome Developer Tools can be quite useful.
I should start by saying that the google Chrome Developer Tools are
not well designed or implemented for use with AT. As one screen
reader user noted, "the UI/UX of this interface is atrocious,
truly terrible and devoid of meaningful clues or some basic a11y
love." However, for our purposes, we are going to forego bad UX
to get vital information about whether our CSS has impacted the
style of our webpages.
As a test example, let's imagine that you're interested in
getting the style of the h1 element on the class website...
Open the class webpage in Chrome (this page is fine, as long as
you are in Chrome)
Use the either F12 or the key command Control+Shift+I to open Chrome's
From here, you can use forms mode to navigate to the
'Elements'tab, then tab to the 'page DOM'
tree view. The page DOM tree view, is your HTML as it is
rendered in the browser and should be navigable by using the
up/down arrow keys ('Page DOM'
table for VO users).
Once you locate your h1 in the page DOM tree using the arrow
keys, press the plus key on your number pad right to get out of
forms mode. Then either:
Once on this tree view, press Enter, to activate forms mode,
then press Control home and then press down arrow until you hear
H1 CSS selector.
Press enter here and press tab to move through CSS declarations
(properties and values). Your screen reader may instruct you to
use the arrow keys, but we have had better luck using tab. If
you try this on the class website, you should get the following:
h1, font-family: myFontBold, font-size: 3.5em, text-align:
center. Those are the css properties added to the class
Arrow down and listen for the margin (that seems to be an
anchor/marker for what we're doing). If you find
yourself at "margin clickable", arrow up to get to
the tree view just above.
Or use control+end to take you to the bottom, and then I hit
shift+C to move back to the last tree view (tree views can
be navigated to like combo boxes).
Note: If you keep goin, you can actually directly
edit styles in this styles pain, but that might be a good indicator
that you've gotten to the bottom of all of the computed styles for