Utilisez PHP et CSS pour modifier la taille du texte des pages Web - Lors de la conception de votre site Web, gardez une chose à l'esprit : tous les visiteurs ne sont pas des jeunes brillants et ils ne connaissent pas nécessairement parfaitement les différentes méthodes d'utilisation des navigateurs Web.
Lorsque vous concevez un site Web, gardez une chose à l’esprit : tous les visiteurs ne sont pas des jeunes brillants et ils ne connaissent pas nécessairement parfaitement les différentes manières d’utiliser un navigateur Web. Les concepteurs intelligents le comprennent et intègrent souvent diverses fonctionnalités d'accessibilité spéciales dans la conception des sites Web afin que même les personnes âgées ou handicapées puissent utiliser le site Web facilement et confortablement sans avoir à déployer d'efforts supplémentaires.
Le dimensionneur de texte est l'une des fonctionnalités d'accessibilité les plus efficaces dont tout site Web peut avoir besoin. En bref, il s'agit d'un outil utilisé pour modifier la taille du texte d'une page Web. Il est généralement utilisé pour agrandir le texte afin qu'il soit plus facile à lire. De nombreux navigateurs sont déjà dotés de cette fonctionnalité, mais les débutants en navigateurs Web ne savent pas comment l'utiliser. Par conséquent, les concepteurs de sites Web implémentent souvent cette fonctionnalité en plaçant des boutons plus faciles à utiliser sur chaque page Web.
Ce guide vous montrera comment ajouter ce dimensionneur de texte fonctionnel à vos pages Web en utilisant PHP et CSS, alors allez-y et ajoutez cette accessibilité à votre site Web et tirez le meilleur parti des utilisateurs qui ont plus de 50 points de félicitations, continuez à lire et vous le ferez. apprendre à l'utiliser.
REMARQUE : Ce guide suppose que vous avez déjà installé Apache et PHP.
Comment ça marche ?
Avant d'écrire du code, il est utile de prendre le temps de comprendre le fonctionnement du dimensionneur de texte. Chaque page du site contient une série de contrôles qui permettent à l'utilisateur de sélectionner la taille du texte de la page : Petite, Moyenne et Grande. Chaque taille de police correspond à une feuille de style CSS qui enregistre le texte utilisé pour la page. Règles de rendu Web. tailles de texte de page.
Lorsque l'utilisateur effectue une sélection, PHP stocke la taille de police sélectionnée par l'utilisateur dans une variable de session, puis recharge la page Web. La page lira la taille de police sélectionnée à partir de la variable de session et appellera dynamiquement la feuille de style correspondante pour la mettre à jour. . Rendu la page avec une taille de police plus petite ou une taille de police plus grande.
La première étape duprocessus
: La création d'une page Web
commence par la création d'un document HTML. Tout d'abord, complétez le contenu de l'espace réservé. La liste A est un exemple :
Liste A :
Taille du texte : petit | href="resize.php?s=medium">moyen | grand
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, quisnostrud exercice ullamcolaboris nisi utaliquip ex ea
commodoconséquat.
Duisauteirure douleur dans la répréhension dans
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.
Portez une attention particulière aux hyperliens texte en haut de la page. Chaque hyperlien pointe vers un fichier de script appelé resize.php et lui transmet la taille de police sélectionnée via la méthode URL GET.
Enregistrez ce document dans le répertoire de votre serveur Web avec une extension .php, par exemple index.php.
Étape 2 : Créer des feuilles de style
Ensuite, créez des fichiers de feuilles de style pour chaque taille de texte : small.css, medium.css et large.css. Voici le contenu du fichier small.css :
body {.
police : 10px
}
De même, vous pouvez créer medium.css et large.css, en utilisant respectivement 17px et 25px, et enregistrer ces fichiers de feuille de style dans le même répertoire que la page Web créée à l'étape précédente.
Étape 3 : Créer un mécanisme de changement de taille du texte
Comme indiqué ci-dessus, la page Web peut « savoir » quel fichier de feuille de style charger en recherchant les variables de session prédéfinies. Les variables de session sont contrôlées via le fichier de script resize.php (voir Listing B). ), ce fichier est activé lorsque l'utilisateur clique sur le bouton pour modifier la taille du texte en haut de la page web. Voici le contenu de resize.php :
Liste B
// démarrer la session.
// importe la taille sélectionnée dans la session
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Emplacement : " . $_SERVER['HTTP_REFERER']);
?>
C'est très simple. Lorsque l'utilisateur sélectionne une nouvelle taille de texte, resize.php obtient la valeur de la taille de police via la méthode GET et la stocke dans la variable de session $_SESSION['textsize'], puis réinitialise le navigateur Direct. à la page initialement ouverte.
Bien sûr, il manque encore un composant ici : la page Web est suffisamment intelligente pour détecter automatiquement la taille du texte actuellement sélectionnée par l'utilisateur et charger la feuille de style correspondante. Pour ajouter cette fonction, ouvrez le fichier index.php de votre page Web et ajoutez-la. l'instruction suivante au début du fichier (voir Listing C) :
Listing C
// démarrer la session
//importer des variables
session_start();
// définit la taille du texte par défaut pour cette page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'moyen';
}
?>
Vous devez également ajouter un lien de feuille de style entre les éléments ..., comme suit :
type="texte/css">
Il s'agit du Listing D. Le fichier index.php complet devrait ressembler à ceci :
Listing D :
// démarrer la session
//importer des variables
session_start();
// définit la taille du texte par défaut pour cette page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'moyen';
}
?>
type="text/css">
Taille du texte : petit | href="resize.php?s=medium">moyen grand |
Loremipsum dolor assis amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, quisnostrud exercice ullamcolaboris nisi utaliquip ex ea
commodoconséquat.
Duisauteirure douleur dans la répréhension dans
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.
Il devrait être très simple de comprendre comment cela fonctionne. Lorsqu'une page Web est chargée, elle reprend la session en cours et vérifie si la variable $_SESSION['textsize'] correspond à la taille de police actuellement sélectionnée, puis charge dynamiquement la feuille de style correspondante. via l'élément , ce qui entraînera le rendu automatique de la page Web à la bonne taille. L'utilisation combinée de PHP et CSS est légèrement différente de la méthode traditionnelle, qui utilise JavaScript pour modifier dynamiquement la feuille de style CSS. Par rapport à la méthode JavaScript, l'avantage de la méthode PHP est que vous n'avez pas besoin de compter sur le support du client. pour JavaScript. Inquiétez-vous de créer un travail spécifiquement pour un certain navigateur, vous constaterez peut-être que cette approche fonctionne bien la prochaine fois que vous vous asseoirez pour concevoir un site Web, bon codage !