Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter un redimensionnement de police dans WordPress pour l’accessibilité

Vous avez du mal à rendre votre site WordPress réellement accessible à tous les utilisateurs/utilisatrices ? Vous avez probablement entendu parler des redimensionneurs de polices, mais la mise en œuvre d’un redimensionneur qui fonctionne réellement sans casser la mise en page de votre site peut être un véritable défi.

De nombreux propriétaires de sites WordPress supposent que les fonctions de zoom du navigateur sont suffisantes, mais elles déforment souvent les éléments de la page et créent une mauvaise expérience utilisateur. Ce dont vous avez besoin, c’est d’un redimensionneur de polices qui donne à vos internautes le pouvoir d’ajuster la taille du texte facilement, sans affecter les autres composants de la page.

Après des années de fonctionnement de WPBeginner, nous avons vu de première main que sans les fonctionnalités d’accessibilité appropriées, vous risquez d’aliéner une partie importante de votre public. C’est pourquoi nous avons trouvé deux façons infaillibles d’ajouter un redimensionneur de police à votre site WordPress.

How to add resizeable text for site visitors in WordPress

Pourquoi ajouter du texte redimmensionnable à votre site ?

Trouver la bonne police de caractères pour votre site WordPress est important car elle joue un rôle massif dans l’attractivité de votre site et aide les internautes à lire votre contenu.

Cependant, il peut arriver que cela ne suffise pas à sélectionner la meilleure police de caractères pour votre site. Si la taille de la police est trop petite, les internautes auront du mal à lire vos articles et finiront par abandonner votre site.

Un moyen plus facile d’améliorer la lisibilité est d’offrir aux internautes l’option de redimmensionner le texte principal de votre site. Cela permet aux utilisateurs/utilisatrices d’ajuster la taille du texte à leur convenance et de passer plus de temps sur votre site.

Même si vous pouvez utiliser la fonctionnalité de zoom intégrée au navigateur en appuyant sur les touches « CTRL et + », celle-ci augmente la taille de tous les éléments de la page, et pas seulement celle du texte. Cela risque de perturber la mise en page du site et de ne pas offrir un bon compte à l’utilisateur/utilisatrice.

Cela dit, voyons comment vous pouvez facilement ajouter du texte redimmensionnable pour vos internautes dans WordPress.

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez des instructions écrites, continuez à lire. Vous pouvez utiliser les liens rapides ci-dessous pour passer à une méthode spécifique :

Méthode 1 : Ajouter un texte redimmensionnable dans WordPress (thèmes WordPress classiques uniquement)

Le moyen le plus simple de permettre aux utilisateurs/utilisatrices de redimmensionner le texte sur votre site est d’utiliser une extension WordPress telle que Accessibility Widget.

C’est une extension WordPress gratuite qui vous permet d’ajouter une option à la colonne latérale de votre site pour modifier la taille du texte. L’extension est légère et très facile à utiliser.

Cela dit, notez que l’extension Accessibility Widget n’est pas compatible avec l’édition complète du site et les thèmes blocs, elle fonctionnera donc uniquement si vous utilisez un thème classique. Vous saurez que vous utilisez un thème sur blocs si le personnalisateur de thème est absent de votre administration WordPress.

La première chose à faire est d’installer et d’activer l’extension Accessibility Widget sur votre site. Si vous avez besoin d’aide, veuillez consulter notre guide sur l’installation d’une extension WordPress.

Une fois activé, il suffit de se rendre dans Apparence  » Widget depuis le panneau d’administration de WordPress. Ensuite, vous pouvez cliquer sur le bouton  » +  » et ajouter le bloc  » Accessibility Widget  » à votre colonne latérale.

Add an accessibility widget block

Ensuite, vous pouvez saisir un titre pour le widget, comme « Modifier la taille du texte » ou « Redimmensionner le texte ».

Ensuite, vous devez sélectionner les éléments HTML ou les classes CSS qui seront affectés par le widget. Les options par défaut sont body, paragraph, list items et table cells. Ces options devraient convenir à la plupart des sites.

Change accessibility widget settings

Le widget vous permet de bénéficier de quatre options de redimmensionnement. Les options par défaut sont 90%, 100%, 110% et 120%. Vous pouvez augmenter ou réduire la taille des polices en saisissant les chiffres dans le champ « Définir à ces tailles ».

Le dernier réglage du widget est le texte du contrôleur, c’est-à-dire le texte que les utilisateurs/utilisatrices verront. Vous pouvez conserver les pourcentages par défaut pour la taille du texte ou utiliser une lettre pour afficher différentes tailles de police.

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » pour stocker les réglages de votre widget.

Vous pouvez maintenant visiter votre site pour voir le widget en action. Voici comment le widget devrait apparaître dans la colonne latérale de votre site :

Change text size preview

Si vous estimez que le texte du contrôleur n’est pas perceptible, vous pouvez le modifier à l’aide de CSS.

Pour ce faire, il vous suffit de vous rendre dans l’administration de WordPress et de sélectionner Apparence «  Personnaliser.

Opening the WordPress theme customizer for classic themes

Vous devriez maintenant voir quelques options pour personnaliser votre thème classique.

Sélectionnez « Additional CSS ».

Opening the Additional CSS tab in Theme Customizer

Vous pouvez maintenant ajouter du code CSS pour styliser le widget. Voici ce que nous avons ajouté :

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

Ce CSS ajoutera une bordure autour du texte du contrôleur, le mettra en gras et ajoutera un peu de marge interne. Une fois que vous êtes satisfait de l’apparence du widget, cliquez sur « Publier ».

Pour plus de détails, veuillez consulter notre guide sur la façon d’ajouter des CSS personnalisés dans WordPress.

Adding additional CSS to a classic theme to style the accessibility widget

Méthode 2 : Ajouter un texte redimmensionnable dans WordPress (Tous les thèmes WordPress)

Un autre moyen facile de permettre aux utilisateurs/utilisatrices de redimmensionner le texte sur votre site est d’utiliser WP Accessibility. Cette extension vous permet d’ajouter une barre d’outils à votre site pour modifier la taille du texte, quel que soit le thème que vous utilisez.

La première chose à faire est d’installer et d’activer l’extension WP Accessibility sur votre site. Vous pouvez consulter notre guide sur l ‘installation d’une extension WordPress si vous avez besoin d’aide.

Une fois activée, il suffit de se rendre sur la page WP Accessibility à partir du panneau d’administration de WordPress.

WP Accessibility Settings

Dans la section « Barre d’outils d’accessibilité », cliquez sur l’option « Activer la barre d’outils d’accessibilité » et sélectionnez « Taille de police ». Cela ajoutera un redimensionneur de police à la barre d’outils.

Si nécessaire, vous pouvez également activer les options Contraste et Niveaux de gris.

En outre, vous pouvez modifier la taille de la police du contenu lorsque vous cliquez sur la barre d’outils. Vous pouvez également sélectionner « Taille par défaut » dans le menu déroulant si vous n’êtes pas sûr de votre choix.

Par ailleurs, nous vous recommandons d’activer l’option « Utiliser une autre feuille de style pour redimensionner les polices ». Lorsque cette option est activée, les utilisateurs/utilisatrices peuvent facilement basculer entre les tailles de police par défaut et une version plus grande et plus lisible du texte.

N’hésitez pas à activer d’autres réglages dans l’extension.

Une fois cela fait, cliquez sur le bouton « Mettre à jour les réglages de la barre d’outils ».

WP Accessibility toolbar settings

C’est tout !

Voici à quoi ressemble notre barre d’outils de redimmensionnement des polices sur l’interface publique :

Gif of how the WP Accessibility plugin works

En savoir plus, vous pouvez consulter notre guide sur l ‘amélioration de l’accessibilité de votre site WordPress.

Facilitez l’utilisation de votre site WordPress grâce à ces astuces

Vous voulez rendre votre site plus facile à utiliser et plus esthétique ? Consultez ces guides utiles :

Nous espérons que cet article vous a aidé à ajouter du texte redimmensionnable à votre site WordPress. Vous pouvez également consulter nos choix d’experts des meilleurs constructeurs de pages WordPress en drag-and-drop et notre guide ultime sur la façon de mettre à jour votre thème WordPress sans perdre la personnalisation.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

8 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Shushanna

    Hi, thanks for the amazing post. I wonder if your site does not have a sidebar, is it possible to to put the widget somewhere else, for example above the navigation.

    • WPBeginner Support

      You can place it in your theme’s widget areas if your theme has widget areas available!

      Administrateur

  3. Jasper

    I have installed the widget but don’t have the Set Controller Text box so on the website it shows the %s.
    Any sugestions? Thanks

  4. Ivo

    Hi, I followed the instructions as on the video but noting happens. Please help.
    I actually wont it to make my girlfriend site to be zoom-able when open in mobile devices. Please suggest…
    Regards,
    Ivo

  5. Eric Paquette

    is it possible to make the A A A bigger ?

  6. Wrenling

    This widget is AMAZING, thank you so much!!

    I’m curious, I added it to my blog and it is EXACTLY what I wanted, but it only affects the main page of the blog – if you click on an individual post, the widget disappears. Can you tell me how to fix this?

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.