1174 sujets

Accessibilité du Web

Bonjour,

j'ai un formulaire qui donne un texte de confirmation d'envoi d'un message. En mode desktop, tout va bien, mais en mode mobile, le message est ridiculement petit, du genre .2em.
Ce message est dans le php, on y a pas accès avec le css. Comment l'agrandir seulement en mode mobile ? Je peux mettre un span ou un style, mais ils vont agir aussi sur le mode desktop puisqu'il n'y a pas de php avec les @media.
Merci pour l'astuce.
Modifié par Bongota (26 Oct 2023 - 18:59)
Modérateur
Bonjour,

1) Sans le code, on ne peut pas savoir d'où vient le problème.

2) "Ce message est dans le php, on y a pas accès avec le css."

Ha bon ?

3) "Comment l'agrandir seulement en mode mobile ?"

Y-a-t-il bien dans le html une ligne du genre :
<meta name="viewport" content="width=device-width,initial-scale=1.0">


Amicalement,
Salut,
2) "Ce message est dans le php"
Ben oui, avec echo.
echo "OK, le message a été envoyé";

Bien sûr que la balise <meta name="viewport" est présente, avec exactement les même données. Alors il y aurait un problème avec le mobile ? Pourtant, sur toutes les autres partie du site le media query sont efficaces.
Et je parle bien du texte de confirmation d'envoi.
Modifié par Bongota (27 Oct 2023 - 11:49)
Modérateur
Bonjour,

1) Je ne fais jamais rien de spécial pour Mobile mise à part mettre dans le html la balise <meta> que j'ai signalé plus haut. D'ailleurs, je ne sais pas (volontairement Smiley lol ) ce que c'est que le mode "desktop" et "mobile". Par contre, je teste beaucoup mes sites en fenêtre étroite sur tout type de machine.

2) Je conseille dans le cas général de faire le moins possible de media queries. Cela ne veut pas dire qu'il n'en faut pas, mais qu'il en faut peu. Et il est peu probable que dans ton cas, une solution propre soit de passer par une media query.

3) Ce n'est pas parce que le message est dans un script php qu'on ne peut pas appliquer de css dessus. La formulation de ta remarque concernant l'accès au css dans un script php était bizarre.

4) Si la balise <meta> concernant le viewport est bien présente, alors c'est surement dans le css qu'on peut régler le problème (plus exactement en cherchant où tu as pu faire une erreur).

5) Y a des millions de sites qui marchent très bien en ayant des "messages" affichés via du php. Encore une fois, sans exemple de code, on ne peut pas savoir où tu fais une erreur.

Amicalement,
Salut,

1) mode mode "desktop" et "mobile", je croyais que ces termes étaient utilisés massivement dans le monde du développement, ce qui n'est pas forcément un gage de pertinence. Exemple le "responsive web design".

2) Je n'ai qu'un seul media query dans mon code, le séparation entre grands écrans des ordinateurs de bureau et ceux des téléphones portables (ça va la terminologie Smiley lol )

3) Oui, j'ai lu beaucoup de solutions à ce sujet mais elles n'ont pas fonctionné pour le moment chez moi. J'ai voulu dire que pour avoir accès au style de "echo" par css, il faudrait peut-être créer soit un span soit une class au milieu de "echo").

La balise meta est bien présente et l'ensemble du site fonctionne normalement (aux détails près mais qui ne concernent pas le formatage de "echo").

Ben oui, il y en a de millions de sites dont les formulaires fonctionnent très bien. Le mien en fait partie en ce qui concerne les grands écrans, avec la bonne taille de fonte. C'est juste pour les mobiles que ça devient tout petit, et seulement pour le texte affiché avec cette balise "echo".

Mais il peut y avoir quelque chose de caché que je n'avais pas vu, je cherche. En tous cas, la partie du code qui concerne mon problème :

        ........
	........
	//traite le formulaire envoyé
if(isset($_POST['message'])){
    
    //si un mot interdit est trouvé dans le message
    $mot_interdit = mot_interdit($_POST['message']);
    
    if($mot_interdit){
        echo "<p>Le mot <b style='color:red'>$mot_interdit</b> est interdit, veuillez ne pas utiliser ce mot</p> 
        <p>Votre message n'a pas été envoyé</p>";
    
    //sinon non trouvé, on valide le formulaire
    }else{
        
        echo "OK, le formulaire ne contient pas de mots interdits";
           
        /*continuer le traitement du formulaire ici*/


Il y a un "style" au milieu pour la couleur du mot interdit, mais si j'ajoute font-size: 4em; ça devient énorme pour les grands écrans.
Et merci de te pencher dessus.
Modifié par Bongota (27 Oct 2023 - 17:02)
J'ai résolu partiellement le problème, mais le texte est toujours un peu grand sur les écrans de bureau. C'est mieux pour le moment, l'important étant les mobiles, où on était à .1em.
  echo "<h1>Le mot <b style='color:red'>$mot_interdit</b> est interdit, veuillez le retirer du texte</h1>";
      echo "<h1>Votre message n'a pas été expédié</h1";
    
    //si non trouvé, on valide le formulaire
    }else{
                echo "<h1>Le message a été expédié</h1>"; 
 /*continuer le traitement du formulaire ici*/

Mais où se cache le formatages de la police de caractère de echo ?
Je crois qu'il y a ici une grande confusion : côté front le PHP n'entre pas en concurrence avec le HTML, le PHP génère du HTML dans la page web lorsqu'il l'a construit à l'appel d'un utilisateur, pour qu'ainsi le code soit interprétable par un navigateur. Et c'est ce même HTML qui est mis en forme par CSS.

De cette incompréhension vient le mal.

Mais comme on le voit dans ton deuxième post, Bongota, le fameux "echo" ne générait qu'une série de caractères. Avant ta correction ces derniers étaient injectés tels quels dans la page web, sans tags HTML pour les baliser, donc impossible à styler (du moins cette chaîne de caractères hérite des propriétés de ses balises HTML parentes).
Modifié par Olivier C (28 Oct 2023 - 08:23)
Salut Olivier,
... on en apprend tous les jours Smiley smile
Je vais tenter d'améliorer encore, je souhaiterais une page d'avertissement bien lisible, centrée et en couleur. Quand on met en place un formulaire avec des mots interdit, il faut absolument avertir d'une façon sans équivoque le visiteur qu'il est dans l'erreur.

Mon filtre de mots interdits fonctionne enfin très bien, mais je n'en suis pas totalement satisfait. Ce que je voudrais, c'est un avertissement de l'utilisation d'un mot interdit dans le formulaire lui-même, au moment de la rédaction, avant la soumission. Un peu comme pour les adresses mail mal formées. Envoyer un visiteur sur une autre page, l'obliger à revenir au formulaire et à tout réécrire n'est pas le top.
Bonne journée.
Bonjour,
ce que j'ai obtenu est acceptable, voici :
echo "<h1 style=text-align:center;margin-top:2em;>Le mot <b style='color:red'>$mot_interdit</b> est interdit, veuillez le retirer</h1>";
      echo "<h1 style=text-align:center;margin-top:2em;>Votre message n'a pas été expédié</h1";
    //sinon non trouvé, on valide le formulaire
    }else{
          echo "<h1 style=text-align:center;margin-top:2em;>Le message a été expédié</h1>";
         /*continuer le traitement du formulaire ici*/

upload/1698492727-67790-mot-interdit.png
Sur les écrans de tél portables, c'est aussi devenu lisible.
Je mets en résolu, même si je n'ai pas entièrement compris le fonctionnement de echo.
Merci de votre aide.
Modifié par Bongota (28 Oct 2023 - 13:36)