Correctifs RGAA

Cette page ne doit être appliquée que si le script de migration assistée vous demande de passer la migration manuelle skin.20260522.INTRANETCARDS.rgaa

Plusieurs modifications ont été apportées afin de corriger les problèmes d’accessibilité de cette charte.
Les modifications touchent à la structure HTML des pages, menus, ... les scripts.

Une vérification méticuleuse est nécessaire sur l'ensemble des pages.

Toute surcharge doit être vérifiée afin de ne pas "annuler" les correctifs RGAA de la charte noyau.

Voici ci-dessous la liste des correctifs appliquées et leur issue associée.
Parcourez chacun des points et les vérifier sur votre charte.

  1. Structure des pages
    1. Général
    2. Éléments de navigation
    3. Structuration de l'information
    4. Widget météo
  2. Configuration des applications métiers
  3. Recherche
  4. Carrousel des actualités
  5. Kiosque
  6. Plan du site
  7. Contenus
    1. FAQ
    2. Multimedia
    3. Galerie photo
    4. Formulaires

Structure des pages

Général

  • Landmarks aria et liens d'évitement (SKINCARDS-325)
  • Reprise du pied de page (SKINCARDS-327)
  • Suppression des variables CSS dépréciées (SKINCARDS-329):
    $g-color-brick => $secondary,
    $g-color-brown => $g-color-main-text,
    $g-color-brown-400 => $g-color-main-text,
    $g-color-brown-50 => $g-filter-bg-color
    $g-grayish-pink  => $g-color-secondary-text

    Le renommage des variables dépréciées dans vos CSS est assurée par une migration assistée automatique.

    ⚠️ En revanche dans votre fichier _theme-variables.scss vous devez le faire manuellement pour s'assurer que les variables $secondary, $g-color-main-text, $g-filter-bg-color et $g-color-secondary-text sont bien redéfinies. Leur couleur doit correspondre au code couleur des anciennes variables.
  • Ajout du role="search" et aria-label sur le formulaire de recherche dans l'entête (SKINCARDS-330)
  • Correction des contrastes : SKINCARDS-341

Éléments de navigation

  • Refonte des liens de notifications, alertes et menu utilisateur (SKINCARDS-333)
    La structure des liens de notifications, des alertes, abonnements et menu utilisateur a été modifié pour permettre une navigation au clavier.
    ⚠️ Soyez très attentif à toute surcharge concernant ces liens !
    Toute surcharge des templates XSL suivants devra être reprise (reportez les modifications):
    "header-right" , "alerts", "user-menu", "display-alerts", "my-subscriptions", et/ou "link[@urlType='PAGE' and @url != '' and @isHidden = 'false']" mode="top-menu", link[@url != '' and @isHidden = 'false']" mode="top-menu"
  • Accessibilité du bouton pour plier/déplier le menu latéral (sidebar) (SKINCARDS-340)
  • Accessibilité de l'input de recherche et du menu action en mode mobile (entête) (SKINCARDS-368)

Structuration de l'information

Ticket SKINCARDS-365

Pour répondre au critères RGAA l’information doit être structurée par une utilisation appropriée des titres. Notamment que la hiérarchie entre les titres doit être pertinente.

Vous devez être attentifs notamment aux modifications suivantes:

  • Pour le gabarit "index" la zone principale "default" passe au niveau 2 afin d'avoir un seul titre <h1> dans la page : <zone name="default" level="2"/>
    Vérifier que le template "main-zone" n'est pas surchargé dans votre gabarit index et si c'est le cas, passer le niveau à 2 pour la zone default.
  • Reportez dans vos surcharges éventuelles de "header-logo" et ""header-logo-img" les modifications apportées par la charte noyau.
    Deux modifications importantes:
    • Le logo de l'entête est entourée d'un <h1> uniquement sur la page d'accueil. Sur les autres pages, le <h1> c'est le titre du contenu ou service de la page. Pour cela le template "header-logo" est spécifiquement surchargé dans le gabarit "index"
    • Pour le logo de la page d'accueil le texte alternative est "[Titre du site] - Accueil", sur les autres pages "[Titre du site] - Retour à l'accueil". Le "alt" est important car il permet de donner un libellé au titre de niveau 1 pour la page d'accueil.
  • L'élément <footer> a été déplacé en dehors de l'élément <main>. En effet une structure correcte de la page est :
    <header role="banner">...</header>
    <main role="main">...</main>
    <footer role="contentinfo">....</footer>
    Si vous avez surchargé le template "template" de main.xsl, vous devez reporter cette modification.

Widget météo

Ticket SKINCARDS-355

Le widget météo a été repris pour répondre aux critères RGAA (propriété de l'iframe, étiquettes de champ, navigation au clavier).
Les templates XSL ont également été mieux découpés pour pouvoir plus facilement surcharger la ville et la liste des villes accessibles.

Inspecter les modifications effectuées dans le commit associé au ticket et reporter les modifications dans vos surcharges. Normalement votre surcharge doit être simplifiée.

Configuration des applications métiers

Ticket SKINCARDS-335

Voir les modifications effectuées dans le commit associé au ticket, et reporter les modifications dans vos surcharges éventuelles des vues Vignette, Mes outils (format carré), et/ou Mes outils (format liste) pour le service Annuaire de liens.

Vérifier le rendu de ces vues. La navigation dans les applications et la configuration des liens (ajout/suppression) doivent être accessible entièrement au clavier (hormis le drag&drop).

Recherche

Plusieurs modifications ont été faites concernant le service de recherche impactant:

  • les critères de recherche (nouveau composant graphique pour les critères énumérés)
  • Étiquettes sur les critères de recherche (title, label sr-only)
  • les facettes (gestion de la navigation au clavier, visibilité du focus)
  • la pagination (ajout des attributs ARIA sur les éléments de navigation)
  • les résultats (utilisation de ul/li)

⚠️Dans skins/[SKIN]/services/web/pages/services/search, toute surcharge des templates XSL modifiés par le commit du ticket SKINCARDS-342 doit être vérifiée et comparée avec la version noyau.

 

Carrousel des actualités

Pour le carrousel des actualités, la librairie javascript HSCarousel est remplacée par accessible-slick

Soyez très attentif si vous avez surchargé la XSL services\web\pages\services\search\search-carousel.xsl, notamment si les templates "common-service-head-css", "common-service-head-js" et/ou "common-service-body-nonempty-content-content" ont été surchargés.

Vous devrez alors reportés les modifications nécessaires dues au changement de librairie.

Par ailleurs, 3 nouvelles variables XSL permettent de configurer le comportement du carrousel et peuvent être surchargées selon les besoins du projet:

  • autoPlay: pour autoriser ou non le défilement automatique des slides (par défaut à true). Attention si égal à "true", un bouton "pause" sera visible pour permettre l'arrêt du défilement automatique (exigence RGAA)
  • infiniteLoop : pour autoriser ou non le défilement infini (par défaut à true)
  • autoPlaySpeed: délai en milliseconds entre chaque slide lorsque le défilement automatique est activé

De plus quelques petites modifications graphiques ont été faites :

  • le lien "Tous les actualités" passe par défaut en bas à droite au lieu de en haut à gauche
  • le "layer" transparent est plus foncé pour assurer un contraste suffisant du texte lorsque l'illustration de l'actualité est une image sur fond clair.

Voir les ticket JIRA SKINCARDS-353 et SKINCARDS-370

Kiosque

Pour le carrousel du kiosque, la librairie javascript HSCarousel est remplacée par accessible-slick

Soyez très attentif si vous avez surchargé la XSL services\web\pages\services\search\search-kiosque.xsl, notamment si les templates "common-service-head-css", "common-service-head-js" et/ou "common-service-body-nonempty-content-content" ont été surchargés.

Vous devrez alors reportés les modifications nécessaires dues au changement de librairie.

La pagination a été rajoutée pour permettre une navigation autrement que par "swipe" (exigence RGAA).
Vérifiez le rendu dans votre déclinaison.

Voir le ticket JIRA SKINCARD-354

Plan du site

La XSL pour le service plan du site a été réécrite. On utilise plus jquery.treeview.js mais les éléments natifs HTML <details><summary> pour le plier/déplier des sous-pages.

Si vous avez surchargé la XSL services/web/pages/services/sitemap/sitemap_3.3.xsl il faut certainement ré-écrire la surcharge.

Vérifier le rendu du plan du site dans votre déclinaison. La modification de la structure du HTML a nécessairement modifier la CSS, vos éventuelles surcharges CSS ne seront plus appliquées.

Contenus

FAQ

Le rendu du type de contenu FAQ a été repris (il n'était pas possible de naviguer dans les questions et plier/déplier les réponses au clavier)

Vérifier les éventuelles surcharges CSS des FAQ (zones/faq/sccc/main.scss), en prenant en compte des modifications de structure du HTML pour les questions/réponses (la question devient un <button>)
Vérifier le rendu et le bon fonctionnement des FAQ (notamment à la navigation clavier)

Voir le ticket JIRA SKINCARDS-352

Multimedia

La librairie Fancybox, utilisée pour la lecture des vidéos dans une popup ou encore les images zoomable, a été mise à jour vers la dernière version v6.1.14.

Tous les appels du type :

$j(selector).fancybox({...});

doivent être remplacés par:

Fancybox.bind(selector, {...});

Recherchez "fancybox" dans vos fichier XSL/JS. Si vous trouvez des occurrences, vous devrez migrer le code vers la nouvelle syntaxe fancybox v6.

Par ailleurs, assurez-vous que les service de recherche sur les documents multimédia avec la vue "Vidéos à la Une" ou "Multimédia" fonctionnent correctement.
Ces derniers ont été revus migrés vers la version 6 de fancybox et corrigés de leur défauts d'accessibilité.
Toute surcharge de search-multimedia.xsl, search-video.xsl, audio-multimedia.xsl, video-multimedia.xsl ou photo-multimedia.xsl doivent être vérifiées.

Voir le ticket JIRA SKINCARDS-349

Galerie photo

Pour toutes les galeries photos, la librairie "simple-lightbox" a été remplacé par Fancybox v6.
Elle permet de configurer plus facilement la galerie de manière accessible, de traduire les libellés des boutons (suivant, précédent, zoom, plein écran, ...) et a une meilleur gestion du clavier (focus, fermeture par ECHAP, ....)

Vérifier le rendu de:

  • du type de contenu Galerie photo
  • des services Contenu d'un répertoire et Pièces Jointe avec la vue "Galerie photo"
  • Galerie d'images des petites annonces

Si la galerie ne se lance pas au clic sur une image c'est peut-être qu'il y a une surcharge du rendu des images et qu'elles n'ont pas les bons attributs (data-fancybox)

Le librairie "simple-lightbox" a été supprimée des ressources, vérifier qu'elle n'est pas utilisée.

Voir le ticket JIRA SKINCARDS-364

Formulaires

Les champs des formulaires ont été retravaillés pour être accessibles:

  • corrections des contrastes
  • champ fichiers accessibles au clavier

Par ailleurs, pour faciliter les déclinaisons, plusieurs variables css ont été rajoutées pour personnaliser les formulaires

/* FORMS */
$form-label-color: $g-color-gray !default;
$form-label-font-family: $g-font-primary !default;
$form-label-font-size: 12px !default;
$form-label-text-transform: uppercase !default;
$form-field-font-family: $g-font-primary !default;
$form-field-font-size: 1rem !default;
$form-field-box-shadow: 0 0 4px 0 rgba(50, 83, 141, .5) !default;
$form-field-border: 1px solid $g-color-gray-dark-v2 !default;
$form-field-border-radius: 2px !default;
$form-field-bgcolor: $white !default;
$form-field-color: $g-color-main-text !default;
$form-field-padding: 26px 15px 10px !default ;
$form-field-placeholder-color: rgba($form-field-color, .5) !default;
$form-field-error-box-shadow: 0 0 4px 0 $g-color-red !default;
$form-field-error-border: 1px solid $g-color-red !default;
$form-field-checkbox-border-color: $secondary !default;
$form-field-checkbox-border-width: 2px !default;
$form-field-checkbox-fill-color: $primary !default;

Il est fortement conseillé de reprendre les éventuelles surcharges graphiques concernant les formulaires en supprimant toutes les surcharges css qui peuvent être migrées en surchargeant simplement ces variables. Ces variables assurent que les styles soient appliqués à n'importe quel type de champs.

S'assurer du rendu des formulaires tous les formulaires de la charte (formulaire v2, modification d'une entrée depuis les tableaux de bord, formulaire de connexion, publication d'une annonce, postuler à une offre d'emploi, ...)

Voir ticket JIRA SKINCARDS-361

 

 

Retour en haut