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 (15,603 stars) (12,991 forks)batch import
enhancementhelp wanted

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

Tech stack
htmlcss
Domain
accessibilityfrontend
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
HTMLCSSbasic accessibility knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Start by reviewing the existing axe test setup introduced in PR #2080 to understand how tests are run. Then, address each violation in the relevant source files: for 'landmark banner is top level', modify the post header class in layout files; for 'color contrast', adjust colors in CSS to meet WCAG AA; for 'link name', add aria labels or visible text to links; for 'list', ensure the list structure is correct. Consult the axe documentation for each rule for guidance.