Créer une classe CSS accessible pour les blocs de l’éditeur de site (FSE).

Masquer un élément en CSS est une tâche courante pour tout développeur ou concepteur web. Cependant, les techniques traditionnelles de masquage, bien qu’efficaces visuellement, peuvent involontairement cacher le contenu aux lecteurs d’écran, rendant les sites moins accessibles aux personnes malvoyantes. L’accessibilité web est cruciale, non seulement pour élargir notre audience mais aussi pour construire un internet plus inclusif. Dans le cadre de l’éditeur de site ou Full Site Editing (FSE), il est essentiel d’adopter des pratiques qui respectent l’accessibilité pour tous les utilisateurs, y compris ceux qui dépendent des lecteurs d’écran pour naviguer sur le web.

Ajout de Cette Classe dans le Thème

Pour concilier visibilité et accessibilité, introduisons une classe CSS spécifique. Cette classe permet de masquer visuellement le contenu tout en le gardant accessible aux technologies d’assistance. Voici un exemple de classe CSS que vous pouvez ajouter à votre thème basé sur des blocs (FSE):

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

Cette méthode garantit que le contenu reste accessible aux lecteurs d’écran sans perturber la mise en page visuelle du site.

Utilisation de Cette Classe dans l’Éditeur

L’intégration de cette classe dans votre site WordPress est simplifiée par l’éditeur de site FSE. Pour appliquer cette classe à un élément, sélectionnez le bloc concerné dans l’éditeur Gutenberg et ajoutez sr-only dans le champ des classes additionnelles des options avancées du bloc. Cette approche permet une mise en œuvre rapide et efficace sans compromettre l’accessibilité.

Démonstration en Direct avec Vidéo

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

Quelques liens

• Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
• La première formation intégrale sur le FSE (Editeur de site).
• Nos meetups mensuel WP Paris.
• Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.