alshedivat/al-folio

Implement `axe` accessibility suggestions

Open

#2,087 opened on Jan 16, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)HTML (12,991 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (15,603 stars)
PR merge metrics
 (Avg merge 9h 11m) (2 merged PRs in 30d)

Description

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

Contributor guide