Améliorer l’accessibilité

aeris commented

2025-07-23 15:14:23 +00:00

Owner

Un utilisateur nous a fait des retours pour améliorer l’accessibilité du site

J'ai une liste de recommandations qui peuvent être ajoutées si elles 
sont pertinentes avec la structure et l'évolution prévue du site :

- améliorer la structure de la page, ajout <main> et des attributs role 
sur les balises structurantes | Référence RGAA : 9.2/12.6
  - la balise footer est obligatoire, à voir pour avoir un contenu adapté.
- revoir la structure des H1, un seul par page + ordre | Référence RGAA 
: 9.2
- ajouter un title="" sur le lien du logo pour informer du retour à 
l'accueil + ajouter le lien de retour.
- navigation :
   - ajouter un lien d'évitement pour éviter les menus | Référence RGAA 
: 12.7
    - avec une balise nav <nav role="navigation" aria-label="Accès rapide">
   - englober les deux menus dans des balises nav | Référence RGAA : 9.2
     - <nav role="navigation" aria-label="Sommaire de la page">
     - <nav role="navigation" aria-label="Menu principa">
     - il serait mieux d'avoir le menu principal en premier puis le 
sommaire en début du main, c'est à discuter avec un lecteur d'écran le 
sommaire pour une page courte n'est peut-etre pas nécessaire.
   - la navigation pose problème avec  zoom à 200% | Références RGAA : 
10.11/10.4
- title : inverser le contenu pour les pages hors la home : contenu de 
la page | Nom association.
- liens | Référence RGAA : 10.2
   - signaler l'ouverture dans une nouvelle fenêtre dans le texte du 
lien (il peut être masqué avec css)
   - signaler l'ouverture d'un PDF (le PDF n'est pas forcément accessible).
- ajouter un plan du site | Référence RGAA : 12.1/12.3
  - il est possible de mettre une barre de recherche aussi, mais le plan 
du site est probablement plus adapté.
- structure page actualités, section autour de la balise article qui 
englobe les articles | Référence RGAA : 9.2/12.6
- accessibilité des emojis à tester plus en détail (NVDA conforme, mais 
une annonce emoji + description est plus sûr) | Référence RGAA 13.6

J'ai remarqué que le CSS utilise un framework, si c'est possible, on 
pourrait le réécrire pour rendre le site plus simple à charger. C'est un 
détail, il n'est pas particulièrement lourd, mais c'est une amélioration 
intéressante pour les mauvaises connexions et appareils anciens.

Un utilisateur nous a fait des retours pour améliorer l’accessibilité du site ``` J'ai une liste de recommandations qui peuvent être ajoutées si elles sont pertinentes avec la structure et l'évolution prévue du site : - améliorer la structure de la page, ajout <main> et des attributs role sur les balises structurantes | Référence RGAA : 9.2/12.6 - la balise footer est obligatoire, à voir pour avoir un contenu adapté. - revoir la structure des H1, un seul par page + ordre | Référence RGAA : 9.2 - ajouter un title="" sur le lien du logo pour informer du retour à l'accueil + ajouter le lien de retour. - navigation : - ajouter un lien d'évitement pour éviter les menus | Référence RGAA : 12.7 - avec une balise nav <nav role="navigation" aria-label="Accès rapide"> - englober les deux menus dans des balises nav | Référence RGAA : 9.2 - <nav role="navigation" aria-label="Sommaire de la page"> - <nav role="navigation" aria-label="Menu principa"> - il serait mieux d'avoir le menu principal en premier puis le sommaire en début du main, c'est à discuter avec un lecteur d'écran le sommaire pour une page courte n'est peut-etre pas nécessaire. - la navigation pose problème avec zoom à 200% | Références RGAA : 10.11/10.4 - title : inverser le contenu pour les pages hors la home : contenu de la page | Nom association. - liens | Référence RGAA : 10.2 - signaler l'ouverture dans une nouvelle fenêtre dans le texte du lien (il peut être masqué avec css) - signaler l'ouverture d'un PDF (le PDF n'est pas forcément accessible). - ajouter un plan du site | Référence RGAA : 12.1/12.3 - il est possible de mettre une barre de recherche aussi, mais le plan du site est probablement plus adapté. - structure page actualités, section autour de la balise article qui englobe les articles | Référence RGAA : 9.2/12.6 - accessibilité des emojis à tester plus en détail (NVDA conforme, mais une annonce emoji + description est plus sûr) | Référence RGAA 13.6 J'ai remarqué que le CSS utilise un framework, si c'est possible, on pourrait le réécrire pour rendre le site plus simple à charger. C'est un détail, il n'est pas particulièrement lourd, mais c'est une amélioration intéressante pour les mauvaises connexions et appareils anciens. ```

bc1bb commented

2025-07-24 12:53:32 +00:00

Contributor

Par rapport au <footer>, il faudrait trouver quoi mettre dedans, des liens ? car actuellement aucun footer sur les pages, on pourrait faire un fichier tel que header.html avec des liens ou des informations, ma proposition #2 :

J'ai constaté aussi qu'il y avait un article manquant sur le git par rapport au site en prod,

Pour les annonces de liens externes et PDF je pensais mettre une icone style font-awesome en SVG juste à côté du lien avec un aria-label pour faire comprendre que c'est un lien externe ou vers un document, je ne sais pas si c'est la bonne démarche.
Pour les emoji on peut surement les passer en aria-hidden pour éviter tout probleme d'accessibilité sur lecteur d'écran

Par rapport au framework, il y a surement du boulot à faire, au moins sur une optimisation, car le gros du transfert tient sur le css, pour une vraie optimisation de chargement il faudrait viser 14.6 KB (10 segments de 1460 bytes, le minimum possible), on en est loin.

Par rapport au `<footer>`, il faudrait trouver quoi mettre dedans, des liens ? car actuellement aucun footer sur les pages, on pourrait faire un fichier tel que header.html avec des liens ou des informations, ma proposition #2 : ![image](/attachments/147f51f2-ea08-4f28-abeb-b5ff1eef621b) J'ai constaté aussi qu'il y avait un article manquant sur le git par rapport au site en prod, Pour les annonces de liens externes et PDF je pensais mettre une icone style font-awesome en SVG juste à côté du lien avec un aria-label pour faire comprendre que c'est un lien externe ou vers un document, je ne sais pas si c'est la bonne démarche. Pour les emoji on peut surement les passer en aria-hidden pour éviter tout probleme d'accessibilité sur lecteur d'écran Par rapport au framework, il y a surement du boulot à faire, au moins sur une optimisation, car le gros du transfert tient sur le css, pour une vraie optimisation de chargement il faudrait viser 14.6 KB (10 segments de 1460 bytes, le minimum possible), on en est loin. ![image](/attachments/74ad2a0f-58d1-44dc-8b13-32747fcb1ffd)

image.png

115 KiB

image.png

35 KiB