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...

1. Open the class webpage in Chrome (this page is fine, as long as you are in Chrome)
2. Use the either F12 or the key command Control+Shift+I to open Chrome's developer tools
3. 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).
4. 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:
• 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).
5. 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.
6. 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 website's h1s!

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 that element.