Si vous vous posez encore la question quant à l'opportunité de réaliser la migration de votre site vers Joomla4, vous pouvez consulter notre synthèse des bénéfices d'une migration Joomla4.
La migration de Joomla3 vers Joomla4 nécessite une démarche rigoureuse et ordonnée.
Rigoureuse car toutes les extensions (composants, modules, plugins, template) doivent être passées en revue pour identifier la compatibilité avec Joomla4.
Ordonnée car il faut suivre un plan de marche pas à pas avec des sauvegardes aux étapes clés.

0-Préalables à toute migration Joomla 3 vers 4

• Mettre le site en Joomla 3.10.12
• Vérifier que le structure de la base de données est à jour en Extensions / Gérer / Base de données.
• Vérifier que la version de PHP est 7.4 au minimum => Joomla3 et Joomla4 fonctionnent avec cette version de PHP.

1- Effectuer une sauvegarde

2- Évaluer chaque extension que vous connaissez

1- Inventaire des extensions (composant, modules, plugins, templates)
2- Désinstallez des extensions inutiles, et si possible, vérifiez la suppression de leurs fichiers sous FTP, et de leurs tables au sein de la bdd sous PHPMyadmin

Si une extension essentielle n'est pas compatible :
. soit vous reportez votre migration dans l'attente de la version compatible avec Joomla4 fournie par l'éditeur
. soit vous recherchez une extension alternative et compatible Joomla4, lorsque c'est possible, avec analyse des impacts

Le template est une extension à part entière qu'il faut analyser avec soin :
. soit il est récent et il est peut-être déjà compatible Joomla4
. soit votre version de template n'est pas compatible mais une version récente l'est, il vous faudra l'acheter. Dans ce cas une simple installation rendra le template compatible Joomla4.
. soit votre template n'existe pas sous une version compatible Joomla4; dans ce cas il vous faudra acheter un nouveau template. 

Dans le cas où vous n'avez pas de développements spécifiques d'écrans, un changement de template nécessite un travail certain mais on ne refait pas le site : par exemple revoir les positions des modules, en général rechercher et mettre en place des fonctionnalités associées à l'ancien template et qu'il faut remplacer.
Un changement de template va permettre, d'apporter une plus grande modernité au site. On se retrouve là dans un contexte de refonte qui peut être l'occasion de revoir l'ergonomie du site ainsi que certains aspects fonctionnels.
A noter que pour un changement de template, il faut obligatoirement un site de test (cela prend un certain temps).

N'hésitez pas à   me contacter pour toute question relative à un changement de template.

Pour toute prestation de migration avec changement de template, un template professionnel compatible Joomla4 est inclus,
et la formation pour le maintenir.

Note : pour savoir si une extension est compatible Joomla4, il faut consulter le site de l'éditeur et surtout visualiser la "changelog" afin de vérifier si la version dont on dispose est compatible Joomla4.

Cas particulier d'Akeeba Backup : la version Joomla 3 de ce composant ne sera pas bloquante pour la migration. Après migration ce composant vous proposera une interface pour installer la version Joomla 4 et supprimer la version Joomla 3, par simple click.

3- Alléger la base de données

1- Suppression des articles + éléments de menu + modules obsolètes et vidage de toutes les corbeilles
2- Vider les tables "finder_" sous PHPMyadmin liées aux recherches sur le site, dont le détail est inutile
3- Optimiser les tables si nécessaire (sélectionner toutes les tables sous PHPMyadmin et sélectionner l'action "Optimiser")
4- Supprimer les backups Akeeba anciens

4- Effectuer une sauvegarde

5- Créer un environnement de test

La création d'un environnement de test vous permettra de tester la migration sans impacter le site de production. Pour des sites statiques, cette précaution est moins importante que pour un site dynamique de type boutique en ligne. Mais, par expérience, surtout lorsque le site est ancien, il arrive souvent d'oublier une extension cachée qui va perturber la migration. Planter le site de test n'est pas un souci, planter le site de production, même en ayant plusieurs sauvegardes, reste un stress, qu'il vaut mieux éviter.

Je conseille vivement de créer un environnement de test sur votre serveur. En effet, vous pouvez le créer en local sur votre PC avec un outil tel que WAMPP, mais cela ne sera pas aussi fiable que sur votre serveur avec les paramètres de votre hébergeur.

Démarche de création d'un environnement de test:

• Créer un sous-domaine et son dossier, rattacher le sous-domaine au dossier
• Créer la bdd associée à ce sous-domaine
• Copier les fichiers du site de production vers le dossier du sous-domaine
• Exportez la bdd de production pour l'importer dans la bdd du site de test
• Modifier le fichier "configuration.php" du site de test avec les paramètres d'accès à la nouvelle bdd : $host, $user, $password où $host est fourni par l'hébergeur et $user et $password ont été créés par vous lors de la création de la bdd du site de test.
• Après avoir vérifié le site de test dans un navigateur (vérifiez que le site de test pointe bien vers sa propre bdd et ses propres fichiers), faites une sauvegarde du site de test.

6- Lancer le test de migration

Actions préalables avant de lancer la migration

Supprimer le cache avant de lancer le traitement de migration.
Mettre le template "Beez" comme template par défaut ou votre template compatible, au moment de lancer la migration. 

Puis en Composants / Mise à jour Joomla, allez en "paramètres" en haut à droite, puis sélectionnez "Le prochain Joomla" pour "Canal de mise à jour" et Enregistrez.

Onglet "Vérification avant mise à jour"

Automatiquement Joomla effectue un inventaire des extensions et les place dans 3 catégories, qui ne sont malheureusement pas totalement fiables.
 : comme son nom l'indique, toutes les extensions listées ici peuvent constituer un blocage dans la migration. Il faut vérifier une par une leur compatibilité.
 : certaines extensions listées ici peuvent être tout de même compatibles, il faut bien vérifier la compatibilité de votre version.
 : là normalement on va se fier à cette liste.

Une fois qu'on s'est assuré d'avoir vérifié et résolu la compatibilité de toutes les extensions avec Joomla4, on passe à l'onglet suivant "Mise à jour en direct"

Onglet "Mise à jour en direct"

Cet onglet présente les plugins systèmes qui peuvent présenter un blocage lors de la migration.

Il faut vérifier qu'on n'a pas oublié d'en supprimer certains et les autres il faut impérativement les désactiver.

AVANT DE LANCER LE TRAITEMENT, EFFECTUEZ UNE SAUVEGARDE.

Pour lancer la migration il faut cocher la case "J'accepte les avertissements ..." puis cliquer sur le bouton "Mettre à jour".

7- Après migration

Si toutes les étapes ci-dessus ont été suivies avec un inventaire exhaustif des extensions, la migration devrait bien se passer.

Si le site n'est pas accessible dans le navigateur, essayez de supprimer ou renommer le fichier "administrator/cache/autoload_psr4.php".
Egalement, si le site présente un message d'erreur, le copier et effectuer une recherche sur internet. Certaines situations sont réparables, d'autres indiquent qu'une extension a bloqué le processus de migration, il faut restaurer la sauvegarde avant migration, et traiter cette extension, puis relancer la migration.
Si aucun message n'apparaît, il faut activer le "debug" en affichage "maximum", dans la configuration.
Si aucun message n'est explicite, il faut restaurer la sauvegarde avant migration et rechercher à nouveau l'extension problématique. Vous pouvez aussi me solliciter pour une assistance concernant votre migration Joomla à ce moment là.

Dans la nouvelle interface d'administration, a aller en Composant / Akeeba et effectuer la manipulation proposée pour mettre à jour ce composant spécifique.

Vérifier les extensions et mettez à jour en priorité le fichier de langues, sa non conformité peut être source d'erreur ou de conflits.

Que faire de la migration de votre site de test

Suite à la réussite de la migration de votre site de test, vous avez 2 solutions.

1- si votre site est statique, copier les fichiers et la bdd du site de test vers le site de production
2- si votre site est dynamique, et que vous avez rigoureusement noté toutes les nettoyages d'extensions que vous avez effectué sur le site de test, vous pouvez lancer le traitement de migration en production, en mettant le site Hors-ligne en Configuration. Je conseille 2 sauvegardes préalables, 1 avec Akeeba, 1 avec transfert des fichiers par FTP et export de la bdd par PHPMyadmin => 2 précautions valent mieux qu'une).

Informations officielles de Joomla concernant la migration Joomla4

https://docs.joomla.org/Planning_for_Mini-Migration_-_Joomla_3.10.x_to_4.x/fr
https://docs.joomla.org/Joomla_3.x_to_4.x_Step_by_Step_Migration/fr

Joomla4 regorge de nouveautés parfois cachées et souvent bien utiles pour la gestion des articles.

Visualisation de l'article à partir de l'administration

Lorsqu'on rédige un article, il arrive parfois qu'on ressente le besoin de le visualiser, soit parce qu'on effectue une structure des données un peu inhabituelle (des colonnes par exemple), soit tout simplement pour vérifier la cohérence des titres, des sauts de lignes, etc..
Joomla 4 apporte un nouveau bouton "Aperçu" dans l'administration des articles, qui permet de visualiser l'article au sein de la page avec tout le contexte des modules. Sous Joomla3 on ne pouvait visualiser que l'article proprement dit.

Lire la suite : Nouveautés Joomla4 pour les articles

En un mot, l'accessibilité signifie rendre le site utilisable par tous les utilisateurs, indépendamment de leurs capacités ou handicap.

Rendre le site accessible est :

• un devoir moral (démontrer l'inclusion au centre de vos préoccupations),
• une chance de gains en trafic et conversion,
• une meilleure appréciation du site par Google (en tant que site accessible),
• un gage de qualité pour Google (car le vérificateur d'accessibilité de Joomla est un vrai outil SEO),
• une obligation pour tous les sites d'organismes publics.

Voici les nouveautés apportées par Joomla4 en termes d'accessibilité. A noter que les fonctionnalités d'accessibilité ne résolvent pas toutes les difficultés visuelles et que la condition de base de "conception propre" du site en termes de HTML et de css doit être remplie.

Affichage des icones d'accessibilité

Les icônes d'accessibilité s'activent via le plugin "Système - Fonctionnalités d'Accessibilité supplémentaires", qui présente 2 paramètres.

1- On peut activer la barre d'accessibilité dans l'administration, sur le site ou les deux
2- On peut choisir le design des icônes soit en Emojis, soit en Google Material Font.

Lorsque le plugin est activé, l'icône apparaît en bas à gauche de l'écran en fixe (position modifiable en css). Pour faire apparaître le menu des icônes d'accessibilité on peut :
<> cliquer sur cette icône avec la souris
<> utiliser le raccourci CTRL + ALT + A sur PC, ou CTRL + OPTION + A sur Mac.

Je vous invite à expérimenter sur ce site les effets visuels de chacune de ces icônes.

Certains effets visuels sont accessibles par des raccourcis clavier visibles dans des infos-bulles, comme celui-ci:

Activation de certains paramètres d'accessibilité par défaut par utilisateur

Une autre nouveauté de Joomla4 offre la possibilité de paramétrer par défaut, donc une fois pour toutes, des effets visuels par utilisateur.

Il suffit d'aller en Utilisateurs/Gestion, de sélectionner l'utilisateur, puis d'aller dans l'onglet "Paramètres d'accessibilité".

Ces paramètres sont aussi accessibles directement via le "Menu Utilisateur" en haut à droite de l'administration.

Vérifier l'accessibilité des contenus

Comment savoir si les contenus sont bien présentés dans une optique d'accessibilité et comment les améliorer ?
Joomla dispose d'un plugin, le Joomla Accessibility Checker. Ce vérificateur met visuellement en évidence les problèmes généraux d'accessibilité et de convivialité. Le plugin vérifie la présence d'erreurs ou d'avertissements en une cinquantaine de points et guide l'administrateur du site Web pour les corriger.
Ce système automatique présente des pistes d'amélioration obligatoires (en rouge) et non obligatoires en jaune (parfois très pointues). Il faut garder à l'esprit que le bon sens doit toujours prévaloir et le fait de ne pas appliquer certaines améliorations proposées (complexité, manque de temps), ne va pas mettre en danger le site.

Attention : Cette vérification est à réaliser lors de la mise en place du site pour valider la structure des contenus, elle doit être désactivée en production car elle dégrade les performances de rapidité d'affichage des pages.

Il faut activer le plugin "Système - Vérificateur d'accessibilité de Joomla", et appliquer les paramètres ci-dessous), l'affichage de l'aide en ligne permettra de mieux comprendre comment alimenter les champs):

• activer "Toujours afficher"
• champs "Accessibilité du contenu" et "Lisibilité du contenu" : la différence entre ces 2 champs n'est pas très claire, mais il est fondamental de définir ici l'identifiant du conteneur sur lequel on souhaite effectuer la vérification, le plus simple est de remplacer "main" par "body" (cela peut être "g-main-container" sur un template Gantry, si on souhaite circonscrire l'analyse au corps du site, hors entête et pied de page).

A la suite de cette activation, le bouton "Vérification d'accessibilité" apparaît en haut de la page de l'article. On peut vérifier l'affichage de l'accessibilité via ce bouton, ou en se connectant en front-end sur le site en tant qu'administrateur.

En cliquant sur l'icône  en bas à droite de l'écran, on accède à l'analyse de l'affichage d'un article. Les erreurs/avertissements interprétées par le vérificateur (au nombre de 37 dans l'exemple), sont affichées au survol des erreurs (rouges) ou avertissements (? en jaune), dans des info-bulles (entourées en vert par nos soins).

Les erreurs/avertissements dans l'exemple ci-dessous sont de plusieurs types :

Erreur : le premier titre sur la page doit être de type 1 (ou 2), l'utilisateur doit pouvoir identifier facilement une hiérarchie entre les titres. Indirectement, on bénéficie ici d'une analyse SEO très précieuse.
Erreur : l'image du lien est décorative, il n'y a pas de balise Alt, l'utilisateur doit pouvoir bénéficier d'une description de l'image, c'est un marqueur très ancien d'accessibilité. C'est là aussi, indirectement, une information très utile pour améliorer la qualité su site et son SEO.
Erreur : contraste insuffisant sur plusieurs éléments textuels
Avertissement : le contenu de la balise Alt étant "Joomla4 images lazyload", il est indiqué que le mot "images" est inutile puisque l'utilisateur (et le code HTML) savent déjà qu'il s'agit d'un sujet relatif aux images.

Les points de contrôle du plugin de vérification, se déclinent en plusieurs thématiques décrites ci-après:

1. lisibilité du texte
2. titres et rubriques
3. textes
4. contrastes
5. images
6. liens
7. contenus intégrés
8. formulaires
9. tableaux

1- Lisibilité du texte

Le score de lisibilité est basé sur le nombre total de mots dans le texte, le nombre moyen de mots par phrase. Et le pourcentage avec des mots complexes. Un bon score de lisibilité indique que votre texte est compréhensible et facile à traiter.

Le score de lisibilité est exprimé en bon, assez difficile, difficile, très difficile. Ce score est basé sur un calcul reconnu et scientifique.

Il faut cliquer sur le bouton "Afficher/Cacher le plan" pour faire apparaître le panneau ci-dessous.

Conseils pour améliorer la lisibilité du texte :

• Rédiger les phrases autour de 15 mots en moyenne,
• Éviter les phrases de plus de 25 mots,
• Ne pas hésiter à utiliser des listes,
• Éviter les mots complexes ou les mots comportant de nombreuses syllabes.

2- Titres et rubriques

Pour que la page soit compréhensible humainement, il est important de bien structurer les titres et leur placement sur vos pages. Par ailleurs, les robots des navigateurs Web  peuvent les utiliser pour fournir une navigation dans la page.

Balise Titre vide

Il peut arriver d'insérer accidentellement une balise titre vide dans un article, par exemple <h2></h2>. Il faut simplement transformer en Paragraphe pour résoudre cette anomalie.

Intitulé manquant 1

Les normes de Google, mais aussi la logique d'un article quel que soit son support, impliquent que chaque page commence par un titre h1. Le h1 doit être le début du corps principal du contenu et décrire l'objectif général de la page.

Utilisation de balise titre non séquentielles

Les titres doivent respecter une hiérarchie rigoureuse et ne jamais passer un niveau.
Hiérarchie OK : h1, h2, h3, h3, h2
Hiérarchie pas OK : h1, h3, h2
Le plugin affiche leur niveau pour tous les titres trouvés  , c'est très pratique.
L'info-bulle d'alerte mentionne même un lien vers le site externe officiel W3C relatif à cette norme.

Le titre est trop long

Les titres doivent être utilisés pour organiser le contenu et transmettre la structure. Ils doivent être courts (moins de 160 caractères) et informatifs.

3- Textes

Paragraphe complet en texte gras et italique
Les balises en gras et en italique ont une signification sémantique et ne doivent pas être utilisées pour marquer des paragraphes entiers. Les caractères gras doivent être utilisés pour mettre en évidence les mots et les phrases.
L'italique doit être utilisé pour mettre en évidence les noms propres (c'est-à-dire les titres de livres et d'articles), les mots étrangers et les citations.
Les citations longues doivent être formatées en guillemets.

Une ligne de texte en gras est utilisée comme titre
Une ligne de texte en gras peut ressembler à un titre, mais une personne utilisant un lecteur d'écran ne peut pas déterminer si ce texte est important ou s'il s'agit d'un titre un peu long. Un paragraphe entier en gras est donc à éviter..

Veillez à utiliser des listes sémantiques avec des puces ou des chiffres
Lorsqu'elles utilisent une liste sémantique, les technologies d'assistance peuvent transmettre des informations telles que le nombre total d'éléments et la position relative de chaque élément dans la liste

4- Contrastes

Ce plugin analyse les problèmes de contraste des couleurs d'une page selon les directives WCAG 2.1. Le contraste des couleurs fait référence à la façon dont les couleurs claires ou foncées contrastent entre elles sur les écrans, plus particulièrement en ce qui concerne la luminosité relative, en échelle de gris, telle que perçue par l'œil humain.
Le contraste entre le texte et son arrière-plan est une préoccupation pour les daltoniens et autres malvoyants.

Pour afficher les anomalies de contraste, il faut cliquer sur le bouton "Afficher/masquer les paramètres" pour afficher le panneau ci-dessous:

Ce texte ne présente pas un contraste suffisant avec l'arrière-plan

Le rapport de contraste doit être d'au moins 4,5:1 pour un texte normal et 3:1 pour un texte de grande taille.

Egalement, le plugin vérifie le contraste des overlays (background d'un texte), pour signaler en avertissement : "Le contraste de ce texte est inconnu et doit être revu manuellement. Assurez-vous que le texte et l'arrière-plan ont des couleurs fortement contrastées."

5- Images

Les images doivent avoir des textes Alt qui décrivent l'information ou la fonction que l'image représente. Cela garantit que les images peuvent être utilisées par des personnes souffrant de différents handicaps. C'est un critère de qualité d'un site pour Google.

Texte Alternatif manquant

Si l'image transmet une histoire, une ambiance ou une information importante, veillez à la décrire.

L'image est utilisée comme lien mais il manque le texte Alt

Assurez-vous que le texte Alt décrit l'endroit où le lien vous mènera.
Si vous ne souhaitez pas fournir de texte alt, vous pouvez également marquer l'image comme une image décorative. L'image sera ignorée par les technologies d'assistance.

La description du texte Alt d'une image liée est trop longue

Comme pour les titres h1, h2 h3..., il n'est pas judicieux d'utiliser des textes trop longs. Pensez à utiliser le titre de la page vers laquelle le lien renvoie comme texte alternatif.

6- Liens

Le texte du lien n'est pas assez descriptif

Le texte du lien doit toujours être clair, unique et significatif. Évitez les mots courants comme "cliquez ici" ou "plus d'informations". C'est également une recommandation très classique de Google.

Liens vides (absence de lien url)

Si vous avez (par erreur) placé un lien sans texte, cela sera également remarqué.

Liens vers les fichiers PDF

Les PDF sont considérés comme du contenu web et doivent également être rendus accessibles. Les PDF présentent souvent des problèmes pour les personnes utilisant des lecteurs d'écran (balises structurelles ou étiquettes de champ manquantes) et pour les personnes souffrant de déficience visuelle (le texte ne rétrécit pas lorsqu'il est agrandi). 
Dans la mesure du possible, il serait très utile de transformer le PDF en en page web.

Lien vers un fichier sans avertissement

Liens vers un fichier PDF ou un fichier téléchargeable (par exemple, MP3, Zip, Word Doc) sans avertissement. Indiquez le type de fichier dans le texte du lien. Si le fichier est volumineux, pensez à inclure la taille du fichier.

Le lien s'ouvre dans une nouvelle fenêtre/un nouvel onglet sans avertissement

Cela peut être déstabilisant, en particulier pour les personnes qui ont des difficultés à percevoir le contenu visuel. En outre, il n'est pas toujours bon de contrôler l'expérience d'une personne ou de prendre des décisions à sa place. Autant que possible, indiquer que le lien s'ouvre dans une nouvelle fenêtre dans le texte du lien (cf site externe officiel W3C).

Le lien a un texte identique à celui d'un autre lien, mais il pointe vers une page différente

Des liens multiples avec le même texte peuvent être source de confusion pour les personnes utilisant des lecteurs d'écran. Il faut rendre chaque texte d'ancre distinctif du texte des autres liens.

Avertissement courant : L'utilisation du souligné peut créer une confusion avec les liens, eux-mêmes soulignés.

7- Contenus intégrés

Le contenu incorporé nécessite un nom accessible qui décrit le contenu

Comme pour les images et les liens, fournissez un titre unique ou un attribut aria-label à l'élément iframe qui décrit l'objet.

Veillez à ce que toutes les vidéos soient sous-titrées et fournissez une transcription pour les podcasts

Sujet complexe, il faudrait idéalement des sous-titres pour tous les contenus audio et vidéo. Les sous-titres aident les personnes sourdes ou malentendantes.

8- Formulaires

Aucun label n'est associée à cette entrée

Ajouter un id à cette entrée, et ajouter un attribut "for" correspondant au label.

Ne jamais utiliser un bouton de réinitialisation

Le plus gros problème avec un bouton de réinitialisation dans un formulaire est qu'il est cliqué accidentellement et que le visiteur perd alors toutes les informations qu'il a saisies et doit tout recommencer.
La présence de deux boutons au bas d'un formulaire encombre l'interface et empêche les utilisateurs de voir clairement leur prochaine étape. On perd un peu de temps à chercher le bouton inutile et à décider lequel des deux boutons est le bon.

9- Tableaux

L'utilisation de tableaux est déconseillée car peu adaptée aux mobiles, mais parfois on ne peut pas pas éviter de les utiliser. Veillez à utiliser correctement les éléments <th>, afin de faire apparaître clairement les informations contenues dans le tableau.

En-tête de tableau vide trouvé

Les en-têtes de tableau ne doivent jamais être vides. Il est important d'indiquer les titres des lignes et/ou des colonnes afin de faire ressortir leur relation. Ces informations fournissent un contexte pour les personnes utilisant des technologies d'assistance.

Les titres tels que h2 ou h3 ne peuvent pas être utilisés dans les tableaux HTML

Indiquez plutôt les titres des tableaux en utilisant l'élément th.

Conclusion

Finalement on peut appréhender les outils d'accessibilité de Joomla comme des moyens de contrôle d'un site bien conçu, non seulement pour des personnes souffrant d'un handicap, mais aussi aux yeux des moteurs de recherche.

Ressources

Les paragraphes très détaillés, sur les thématiques du vérificateur, sont inspirés de :

• l'article "Vérifier l'accessibilité avec le plugin Jooa11y" de Yann Gomiero,
• cet article lui-même traduit de l'article "jooa11y - De Joomla Toegankelijkheidscontroleur plugin" de Jeroen Moolenschot,
  MERCI A EUX !

Ressource complémentaire : naviguer vers l'accessibilité décrite en anglais au sein du projet Joomla