Enhance/accessibility - Increase lighthouse accessibility score to 99%

[Samuelfaure]

Avant

Après

Reste à faire: check manuel des rendus

closes API-6742, API-6743, API-6951, API-6952, API-6953, API-6954, API-6955, API-6956, API-6957, API-6958

[skelz0r]

@Samuelfaure y'a déjà plusieurs PRs d'ouvertes sur l'a11y, tu peux checker si ça se recoupe, et si oui, review/merge et/ou intégrer dans ta PR en mentionnant les issues linear ?

[Samuelfaure]

@skelz0r Les issues linear ont comme sujet de faire un audit, ici c'est pas vraiment un audit 🤔

Je vais recouper avec les autres PRs oui 👍

[skelz0r]

Isa a fait l'audit déjà :D

[linear]

API-6742

API-6743

API-6951

API-6952

API-6953

API-6954

API-6955

API-6956

API-6957

API-6958

[Samuelfaure]

slight increase 👍

[Isalafont]

J'ai fait un Pré-audit assistée par IA (20% du RGAA environ), il restera encore toute la partie audit "humaine" à faire mais c'est top cela va me permettre d'aller plus vite sur les pages. 👍🏻

[Isalafont]

Super travail !!
Cela couvre une bonne partie des problèmes détectés et cela va grandement me faciliter l'audit "humaine" page par page restante à faire 🚀

J'ai ajouté des petits commentaires et des suggestions. N'hésites pas si tu veux que l'on en discute car tu connais le site bien mieux que moi et tu saura mieux m'orienter vers la bonne solution à te conseiller.

Je ne sais plus si dans les tickets que tu as mergé, il y avait celui du plan du site inclus ?

Ce que je peux te suggérer, mais c'est à toi de me dire, vu que la PR est déjà volumineuse, on peut très bien se dire que pour les premiers commentaires suggéré, on créé des tickets dédiés pour n'avoir à traiter que ces points séparément dans une autre PR.
Si tu préfères cela, on pourra merger celle ci. A toi de me dire !

[Isalafont]

Suggestion: je changerais le titre en Mes habilitations qui me semble plus pertinent.
Le H1 de cette page est Habilitation API Particulier et la différence entre les 2 titres pourraient perturber certains utilisateurs.

[Isalafont]

Il me semble que ce titre n'est jamais atteint.

Cela correspond bien à cette page ?
Sur API Particulier, une fois connecté, la page show d’une habilitation n’affiche jamais le titre attendu Mon habilitation. Le <title> reste par exemple sur Mairie de Bordeaux, alors que l’utilisateur consulte bien le détail d’une habilitation.

Titre de page dynamique ignoré

Cela vient probablement du fait que la vue définit un bloc content_for :title, mais que le helper full_page_title ne lit que :page_title. Le titre dynamique défini par la vue n’est donc jamais pris en compte.

Suggestion : faire lire :title par full_page_title, ou harmoniser les vues pour utiliser uniquement content_for :page_title.

Exemple robuste côté helper :

def full_page_title
  page_title =
    if content_for?(:page_title)
      content_for(:page_title)
    elsif content_for?(:title)
      content_for(:title)
    else
      t('.page_title')
    end

  [page_title, current_app_name].compact.join(' | ')
end

Cela permettrait aux pages comme la show d’une habilitation d’exposer correctement leur titre dynamique
dans <title>.

[Isalafont]

Le bloc passé à auto_link semble destiné à ajouter l’indication accessible (nouvelle fenêtre) aux URLs détectées automatiquement :

auto_link(properties['description'], target: '_blank', rel: 'noopener noreferrer') do |url|
  "#{url}<span class=\"fr-sr-only\">(nouvelle fenêtre)</span>".html_safe
end

Mais dans le rendu actuel, ces URLs ne semblent pas ouvrir de nouvelle fenêtre / nouvel onglet. Dans ce cas, l’indication (nouvelle fenêtre) ne doit pas être ajoutée.

Il faudrait donc clarifier l’intention :

• soit ces liens doivent s’ouvrir dans le même onglet : supprimer le bloc et éviter target: '_blank' ;
• soit ces liens doivent s’ouvrir dans un nouvel onglet : s’assurer que target="_blank" est bien rendu et que le wrapper auto_link transmet le bloc.

Aujourd’hui, le bloc est trompeur car il suggère un comportement “nouvelle fenêtre” qui ne correspond pas au rendu observé.

Si je ne me trompe pas ça doit correspondre en test a une url se trouvant par exemple dans cette page
http://particulier.api.localtest.me:3000/catalogue/mesri/statut_etudiant

et pour tester :
dans :
commons/endpoints/_swagger_shared/mesri.yml:123

Et cette description est rendue par :

site/app/views/shared/endpoints/_property.html.erb:26

1. Ouvrir http://particulier.api.localtest.me:3000/catalogue/mesri/statut_etudiant
2. Aller dans la section des données.
3. Chercher la propriété Établissement d'études.
4. Inspecter le lien https://annuaire-education.fr.
5. Vérifier si le HTML généré contient ou non le contenu attendu dans le lien.

Je suis preneuse d'en discuter avec toi 👍🏻

[Samuelfaure]

@Isalafont La PR plan du site est ici #204 ça ne chevauchait pas sur celle ci donc j'ai pas touché

Je vais faire les quick-wins dans ta review et si y'a de gros morceaux on corrigera après 👍 comme ça on ship