Browsers these days provide incredible built-in tools for developers. In this section, we’ll use Chrome, Firefox, and Safari's devtools to improve color contrast and semantics of our markup.
Things to uncover with devtools:
- Color Contrast
- Image text alternatives
- Semantics in lists, other markup
Using the files in this directory as a reference, improve keyboard access on these pages:
index.html
URL to view "fixed" files locally:
http://localhost:1234/exercise2-devtools
URL to view a deployed version for this exercise:
https://workshop-manual-a11y-testing.testingaccessibility.com/exercise2-devtools
Files you'll touch to make these improvements include:
- Color contrast:
scss/_header.scss - Image alt text:
_includes/header.html - Image alt text and semantic markup:
index.html - Styling of lists and other markup:
scss/pages/_home.scssscss/_layouts.scssscss/pages/_about.scss
You'll also find colors available to choose from in the main variables CSS file:
scss/_variables.scss