Implement axe accessibility suggestions

[george-gca]

Is your feature request related to a problem? Please describe.

I implemented support for axe accessibility tests in #2080. I decided by default to let this be run only manually, since fixing some of the issues is not straightforward. I ran it once on the main page (about page) of the template and also in the blog main page, and here are the issues.

For the about page:

  Violation of "landmark-banner-is-top-level" with 1 occurrences!
    Ensures the banner landmark is at top level. Correct invalid elements at:
     - .post-header
    For details, see: https://dequeuniversity.com/rules/axe/4.8/landmark-banner-is-top-level

1 Accessibility issues detected.
Testing complete of 1 pages

For the blog main page:

  Violation of "color-contrast" with 36 occurrences!
    Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. Correct invalid elements at:
     - .post-meta > a[href$="distill/"]
     - a[href="/blog/2021"]
     - .post-meta > a[href$="code/"]
     - a[href="/blog/2015"]
     - li:nth-child(1) > .post-meta
     - li:nth-child(1) > .post-tags
     - li:nth-child(1) > .post-tags > a[href="/blog/2023"]
     - li:nth-child(1) > .post-tags > a[href$="formatting"]
     - a[href$="diagrams"]
     - li:nth-child(1) > .post-tags > a[href$="sample-posts"]
     - li:nth-child(2) > .post-meta
     - li:nth-child(2) > .post-tags
     - li:nth-child(2) > .post-tags > a[href="/blog/2023"]
     - li:nth-child(2) > .post-tags > a[href$="formatting"]
     - a[href$="bib"]
     - li:nth-child(2) > .post-tags > a[href$="sample-posts"]
     - li:nth-child(3) > .post-meta
     - li:nth-child(3) > .post-tags
     - li:nth-child(3) > .post-tags > a[href="/blog/2023"]
     - li:nth-child(3) > .post-tags > a[href$="formatting"]
     - a[href$="jupyter"]
     - li:nth-child(3) > .post-tags > a[href$="sample-posts"]
     - li:nth-child(4) > .post-meta
     - li:nth-child(4) > .post-tags
     - li:nth-child(4) > .post-tags > a[href="/blog/2023"]
     - li:nth-child(4) > .post-tags > a[href$="formatting"]
     - .post-tags > a[href$="blockquotes"]
     - li:nth-child(4) > .post-tags > a[href$="sample-posts"]
     - li:nth-child(5) > .post-meta
     - li:nth-child(5) > .post-tags
     - li:nth-child(5) > .post-tags > a[href="/blog/2023"]
     - li:nth-child(5) > .post-tags > a[href$="formatting"]
     - a[href$="toc"]
     - a[href$="sidebar"]
     - li:nth-child(5) > .post-tags > a[href$="sample-posts"]
     - a[href=""]
    For details, see: https://dequeuniversity.com/rules/axe/4.8/color-contrast

  Violation of "link-name" with 8 occurrences!
    Ensures links have discernible text. Correct invalid elements at:
     - .card-item.col:nth-child(1) > a[href$="distill/"]
     - .card.hoverable > a[href$="distill/"]
     - .g-0.row > a[href$="distill/"]
     - .col-md-12 > a[href$="distill/"]
     - .card-item.col:nth-child(2) > a[href$="code/"]
     - .card.hoverable > a[href$="code/"]
     - .g-0.row > a[href$="code/"]
     - .col-md-12 > a[href$="code/"]
    For details, see: https://dequeuniversity.com/rules/axe/4.8/link-name

  Violation of "list" with 1 occurrences!
    Ensures that lists are structured correctly. Correct invalid elements at:
     - .p-0
    For details, see: https://dequeuniversity.com/rules/axe/4.8/list

45 Accessibility issues detected.
Testing complete of 1 pages

[brielle5810]

Hi! Could I try and take this on?

[george-gca]

Sure. To help you implement this, I'd recommend installing axe and running it locally. You can do the same steps we do in the axe workflow.