alshedivat / alshedivat/al-folio

Implement `axe` accessibility suggestions

Abierto
#2,087 2 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement help wanted
Lenguaje dominante
HTML
Estrellas
16.1k
Forks
13.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

**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
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.