Rendre le site accessible

fougere commented

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

Owner

Contrastes
Prendre en compte le prefers-reduced-motion : #33
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` : https://git.interhacker.space/interhack/2026.camp.public.website/issues/33 - [ ] 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 ?

fougere commented

2026-01-27 21:01:54 +00:00

Author

Owner

Pour les stickers j'avais pensé à modifier le code de placement pour que leur position de départ ne soit pas sous le texte ou les titres. Vous en pensez quoi ?

Nono commented

2026-01-29 11:08:16 +00:00

Owner

@fougere ça me semble être une solution non triviale et ça ajoute potentiellement du code Javascript en plus. On risque de passer pas mal de temps dessus, et d'ajouter du code qui consomme de l'énergie en plus. J'ai l'impression que la solution d'utiliser des fonds noir pour augmenter le constrate amène à la même solution de manière plus simple ?

Nono referenced this issue

2026-01-29 11:09:38 +00:00

Empêcher le site de gigoter quand prefers-reduced-motion #33

lateralus23 commented

2026-01-29 14:42:49 +00:00

Owner

@fougere wrote in #27 (comment):

Pour les stickers j'avais pensé à modifier le code de placement pour que leur position de départ ne soit pas sous le texte ou les titres. Vous en pensez quoi ?

c'est une solution que @marne avait proposée aussi ! enfin, je crois. l'idée de @marne était de seulement éviter que ce soit sous les gros titres du haut (c'est ceux-là qui posent problème parce que les autres, les <h3>, sont sur le background semi-opaque). et c'est assez trivial en faisant un autre div qui soit <main> sans la partie du haut, et en ciblant ce div [ici]

const main = document.querySelector('main');

)

@fougere wrote in https://git.interhacker.space/interhack/2026.camp.public.website/issues/27#issuecomment-274: > Pour les stickers j'avais pensé à modifier le code de placement pour que leur position de départ ne soit pas sous le texte ou les titres. Vous en pensez quoi ? c'est une solution que @marne avait proposée aussi ! enfin, je crois. l'idée de @marne était de seulement éviter que ce soit sous les gros titres du haut (c'est ceux-là qui posent problème parce que les autres, les `<h3>`, sont sur le background semi-opaque). et c'est assez trivial en faisant un autre div qui soit `<main>` sans la partie du haut, et en ciblant ce div [ici]https://git.interhacker.space/interhack/2026.camp.public.website/src/commit/473a84cd3ea4c2e177065b8439d43451321c2870/js/drag.js#L2)

Rows
Columns

Rendre le site accessible #27