De nos jours, un site web accessible est devenu une nécessité plutôt qu'une simple fonctionnalité. Malgré les nombreux outils mis à disposition par WordPress pour favoriser la création de contenu accessible, certaines lacunes persistent, notamment en ce qui concerne le contrôle précis offert aux créateurs de contenu.

Les développeurs ont souvent recours à des solutions alternatives ou à du code sur mesure pour assurer l'accessibilité du contenu. Ne serait-il pas plus pratique si les éditeurs avaient des boutons de barre d'outils faciles à utiliser pour gérer des tâches courantes liées à l'accessibilité ?

C'est exactement ce que nous avons fait ! Nous avons développé un module complémentaire qui intègre deux boutons dédiés à l'accessibilité directement dans la barre d'outils de l'éditeur WordPress. Ces boutons offrent aux rédacteurs un plus grand contrôle sur le comportement de leur texte pour les technologies d'assistance, tout en évitant la nécessité d'écrire une seule ligne de code.

Aperçu du plugin

L'extension enrichit l'éditeur WordPress en intégrant deux choix de mise en forme :

ARIA Hidden

Cette fonction cache le texte déterminé aux lecteurs d'écran tout en le maintenant visible sur la page. Il pourrait s'agir de textes ornementaux, d'images ou même de contenu qui n'a pas besoin d'être lu à haute voix.

Exemple : Dissimuler des icônes décoratives ou du texte qui apportent un aspect visuel mais ne véhiculent pas d'information pertinente.

Texte uniquement pour lecteur d'écran

Cette fonctionnalité rend le texte choisi accessible pour les lecteurs d'écran tout en le dissimulant aux utilisateurs qui voient. C'est parfait pour offrir un contexte qui augmente l'accessibilité.

Exemple : Inclure une description cachée telle que « s'ouvre dans un nouvel onglet » pour orienter les utilisateurs de lecteurs d'écran sur la fonction d'un lien.
 

Zoom technique : comment ça fonctionne

Pour ajouter ces outils, vous devez les enregistrer en utilisant la fonction registerFormatType() dans votre fichier JavaScript. Cela inclut le titre, une balise (tel que span), une classe facultative et des attributs.  Une fois que vous les avez enregistrés, vous pouvez les utiliser en sélectionnant du texte de la même manière que pour le soulignement, l'italique, et ainsi de suite.

ARIA Hidden

Cette option de formatage enveloppe le texte sélectionné dans une balise avec l'attribut aria-hidden="true", ce qui cache le texte aux lecteurs d'écran tout en restant visible dans les navigateurs.

Exemple de code :

registerFormatType('custom/aria-hidden', {
    title: __('ARIA Hidden', 'text-domain'),
    tagName: 'span',
    className: 'has-aria-hidden',
    edit({ isActive, value, onChange }) {
        return (
            <RichTextToolbarButton
                icon="hidden"
                title={__('ARIA Hidden', 'text-domain')}
                onClick={() => {
                    onChange(
                        toggleFormat(value, {
                            type: 'custom/aria-hidden',
                            attributes: { 'aria-hidden': 'true' },
                        })
                    );
                }}
                isActive={isActive}
            />
        );
    },
});

Texte réservé aux lecteurs d'écran

Texte réservé aux lecteurs d'écran
Cette fonction de mise en forme entoure le texte sélectionné d'une balise et attribue une classe  .screen-reader-only.

La classe rend le texte invisible pour les utilisateurs voyant, tout en étant parfaitement accessible pour les lecteurs d'écran. C'est essentiellement pour fournir du contexte ou du texte spécifique aux utilisateurs de lecteurs d'écran.

Exemple de code :

registerFormatType('custom/screen-reader-text', {
    title: __('Screen Reader Text', 'text-domain'),
    tagName: 'span',
    className: 'screen-reader-only',
    edit({ isActive, value, onChange }) {
        return (
            <RichTextToolbarButton
                icon="visibility"
                title={__('Screen Reader Text', 'text-domain')}
                onClick={() => {
                    onChange(
                        toggleFormat(value, {
                            type: 'custom/screen-reader-text',
                        })
                    );
                }}
                isActive={isActive}
            />
        );
    },
});

Comme vous pouvez le voir, la className est ajoutée dans ce format, donc nous devons ajouter du CSS qui la cachera visuellement.

Conseil : Il est conseillé de ne pas appliquer ces styles dans la vue éditeur, afin que le texte reste visible pour une gestion de contenu et une édition plus aisées.

CSS recommandé :

/* Text only for screen readers (excluding in editor). */
body:not(.wp-admin) .screen-reader-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

Dernières réflexions

L'accessibilité ne se limite pas à la création de sites internet inclusifs. Il est également question de garantir l'accessibilité continue des mises à jour de contenu en cours. Ces instruments de mise en forme autorisent les créateurs de contenu à réaliser cela sans nécessiter une connaissance du HTML ou des spécifications ARIA.

En incorporant l'accessibilité dans l'expérience d'édition de WordPress, nous contribuons à réduire le fossé entre les producteurs de contenu et le design inclusif.

À Evolving Web, nous accompagnons les organisations pour intégrer l'accessibilité au cœur de leur stratégie digitale. Que vous souhaitiez un module complémentaire WordPress sur mesure, un audit d'accessibilité à l'échelle du site, ou de l'aide pour créer des éléments inclusifs, notre équipe spécialisée est prête à vous soutenir. Si vous souhaitez optimiser l'accessibilité de votre site internet ou relever un challenge particulier, n'hésitez pas à nous joindre. Nous sommes présents pour vous apporter de l'aide.