alshedivat / alshedivat/al-folio

Implement `axe` accessibility suggestions

Offen
#2,087 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement help wanted
Vorherrschende Sprache
HTML
Sterne
16.1k
Forks
13.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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

I implemented support for [axe accessibility tests](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli) 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](https://github.com/alshedivat/al-folio/actions/runs/7545927376/job/20542599488) (about page) of the template and also in the [blog main page](https://github.com/alshedivat/al-folio/actions/runs/7545956596/job/20542689121), 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
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.