Skip to main content

Accessibility Updates

by Cam N. Coulter

Posted on October 21, 2020 at 7:26 AM PDT Graph Paper

a pen resting on a graph paper notebook
Image from Pixabay on Pexels

Over the summer, I’ve learned a lot more about web accessibility, and I realized that Graph Paper had some accessibility errors. So I conducted an accessibility audit on the project to the best of my abilities, logged the issues I found on GitHub, and then went about remediating those issues. Here are the issues I found and the changes I made.

I replaced a number of div elements with semantic sectioning elements, such as header, nav, main, section, and footer.

I updated the focus and hover styles for links so that they are more noticeable and more beautiful.

I added “skip to main content” links on each page.

I fixed several validation errors that I didn’t catch earlier.

I fixed heading levels on a number of pages. For example, there was one page with multiple h1 elements, and other pages where I skipped from an h2 element to an h4. I updated these so that there is only one h1 element per page, headings are used in a logical order, and Graph Paper doesn’t skip heading levels. For those places where I wanted an h2 element styled as an h4, I used Bootstrap’s h4 class to achieve that styling without confusing the semantic heading levels.

I also changed text colors so that the color contrast between text and it’s background is WCAG level AA conformant. By default, the color contrast between Bootstrap’s bg-light variable and Bootstrap’s primary variable (used for blue link text) is not WCAG AA conformant (a strange decision on Bootstrap’s part, methinks), so I updated the primary variable to a darker shade of blue that is conformant. Additionally, some of the colors used in our syntax highlighting stylesheet lacked sufficient contrast against the light gray background used for code blocks. While I can’t claim that I updated the entire syntax highlighting stylesheet to make it WCAG AA conformant, but I did update a few colors to darker shades so that all the syntax highlighting actually in use on this website has WCAG-conformant color contrast.

If you notice any accessibility issues with Graph Paper, please let me know! You can report accessibility issues via GitHub or send a pull request.

If you’re interested in learning more about web accessibility, here are a few resources that I recommend: