Rendre le site accessible

fougere commented

2026-01-24 13:56:54 +00:00

Owner

Contrastes
Prendre en compte le prefers-reduced-motion
Bien gérer la sémantique HTML (header, footer, nav, aside, a, button, etc.)
alt pour les images, aria-hidden pour les stickers
Remplacer les spans de la barre de progression par des éléments progress

- [ ] Contrastes - [ ] Prendre en compte le `prefers-reduced-motion` - [ ] Bien gérer la sémantique HTML (header, footer, nav, aside, a, button, etc.) - [x] `alt` pour les images, `aria-hidden` pour les stickers - [ ] Remplacer les `span`s de la barre de progression par des éléments `progress`

fougere added the

enhancement

label 2026-01-24 14:40:50 +00:00

lateralus23 commented

2026-01-25 12:27:40 +00:00

Owner

pour les contrastes on avait regardé récemment et le seul souci c'est quand les stickers se placent sous des titres (blancs) ou le "interhack" multicolore. je suppose qu'on peut mettre un fond similaire au texte (background-color: #000000b8;), vu que quand c'est sous le texte le contraste est correct (9,29) ?

pour le <progress> ça a l'air pas évident à styliser. est-ce qu'on peut pas profiter du fait que le sens de la barre (faite en CSS donc pas lue par les screen readers) est déjà contenu dans le texte donc gagnerait pas à être lu en plus ?
(au passage ça m'a surpris mais même les composants progress de librairies réputées pour leur accessibilité – genre Base UI – utilisent pas l'élément <progress> 😅)

pour les contrastes on avait regardé récemment et le seul souci c'est quand les stickers se placent sous des titres (blancs) ou le "interhack" multicolore. je suppose qu'on peut mettre un fond similaire au texte (`background-color: #000000b8;`), vu que quand c'est sous le texte le contraste est correct (9,29) ? pour le `<progress>` ça a l'air [pas évident](https://css-tricks.com/html5-progress-element/) à styliser. est-ce qu'on peut pas profiter du fait que le sens de la barre (faite en CSS donc pas lue par les screen readers) est déjà contenu dans le texte donc gagnerait pas à être lu en plus ? (au passage ça m'a surpris mais même les composants progress de librairies réputées pour leur accessibilité – genre [Base UI](https://base-ui.com/react/components/progress) – utilisent pas l'élément `<progress>` 😅)

lateralus23 commented

2026-01-25 12:57:03 +00:00

Owner

avec du background sur les <span> ça donne ça. c'est moins joli mais ça règle le souci de contraste.

j'en ai fait une MR pour qu'on décide si on prend ou pas : #29

avec du background sur les `<span>` ça donne ça. c'est moins joli mais ça règle le souci de contraste. j'en ai fait une MR pour qu'on décide si on prend ou pas : #29

Screenshot_20260125_135233.png

177 KiB

Nono commented

2026-01-26 13:14:38 +00:00

Owner

Ça me semble bien pour l'arrière plan des titres, j'ai approuvé la MR.

Pour les barres de progressions, étant donné que pour les lecteurs d'écran il faut avant tout que le texte soit descriptif, ça me semble bien comme c'est aujourd'hui.

Ça me semble bien pour l'arrière plan des titres, j'ai approuvé la MR. Pour les barres de progressions, étant donné que pour les lecteurs d'écran il faut avant tout que le texte soit descriptif, ça me semble bien comme c'est aujourd'hui. ![image](/attachments/2b2d6e2d-5868-4cd0-aea8-0f69f1e6beb6)

image.png

48 KiB

Nono commented

2026-01-26 13:18:51 +00:00

Owner

J'ai lancé un teste via un outil en ligne de l'accessibilité du site : https://freeaccessibilitychecker.skynettechnologies.com/?website=camp.interhacker.space

Nono commented

2026-01-26 13:20:43 +00:00

Owner

Ça serait aussi bien d'avoir des retours de personnes vis à vis de l'accessibilité du site ?

Rows
Columns

Rendre le site accessible #27