PhpBB Lab Académie

Repérer les débordements sur les vrais contenus du site, adapter les champs de texte sans étirer les radios et conserver les relations sémantiques à petite largeur.

Ne pas s’arrêter au menu et aux notes

Une page peut posséder une grille adaptable et quand même déborder à cause d’une image, d’un tableau ou d’un champ. Nous allons contrôler les trois pages et régler les éléments qui en ont besoin.

Le reflow est la réorganisation du contenu lorsque l’espace se réduit. Pour notre lecture verticale, nous cherchons à garder les informations disponibles sans imposer un déplacement horizontal de toute la page. Un tableau de données complexe peut nécessiter un traitement local particulier ; notre petit tableau doit d’abord être testé avec ses vraies cellules.

1. Permettre une coupure de secours dans les textes

Ajoutez overflow-wrap: anywhere; dans body. Cette propriété autorise une coupure lorsque, par exemple, un long mot ou un nom de fichier risquerait de dépasser sa ligne. Elle se transmet au texte concerné et ne change pas la donnée écrite dans le HTML.

Dans table, ajoutez width: 100%;. Gardez border-collapse et tous les en-têtes. Dans .note-progression, ajoutez min-width: 0; : cette limite autorise la boîte à rétrécir sans conserver un minimum automatique lié à son contenu. Ces réglages doivent être accompagnés d’un contrôle du texte, pas d’un masquage du débordement.

2. Distinguer les champs de texte des choix

Dans contact.html, ajoutez class="formulaire-contact" à form. Ajoutez class="champ-texte" uniquement à l’input nom, à l’input email, à l’input telephone et au textarea message.

Ajoutez class="libelle-champ" aux quatre labels associés. Ne mettez aucune de ces deux classes sur les boutons radio contact-email et contact-telephone, ni sur la case copie et leurs labels. Les liens for/id, les name, les types, required et autocomplete restent strictement inchangés.

L’exemple montre les quatre p concernés ; gardez le fieldset à sa place entre le téléphone et le message, puis la copie et le bouton après le message.

3. Placer le label au-dessus de son champ

.libelle-champ {
    display: block;
    margin-bottom: 0.5rem;
}

La valeur block de display fait occuper au label sa propre ligne dans le flux. La marge le sépare du champ suivant. Il reste un label associé, pas un paragraphe de remplacement.

Sur .formulaire-contact, définissez width: 100%; et max-width: 40rem;. Sur .champ-texte, définissez width: 100%; et max-width: 100%;. Le box-sizing global inclut déjà bordures et padding dans leurs dimensions. Les radios et la case ne reçoivent pas cette largeur : ils gardent leur contrôle natif compact.

4. Laisser le groupe de choix rétrécir

Ajoutez fieldset { min-width: 0; }. Un fieldset peut sinon conserver une largeur minimale liée à son contenu. Sa longue legend doit pouvoir revenir à la ligne.

Ne remplacez pas legend par un texte invisible et ne raccourcissez pas arbitrairement la question du cours HTML. La présentation doit s’adapter à ce libellé, pas l’inverse.

5. Exécuter une passe de tests concrète

Testez l’accueil à une largeur de 320 pixels CSS : l’image doit tenir dans son espace, le tableau doit conserver ses trois colonnes de données et les notes peuvent s’empiler. Puis testez Contact : les quatre saisies de texte doivent tenir dans leur formulaire, les choix doivent rester reconnaissables et tous les labels doivent être présents.

Sur ordinateur, vérifiez aussi le zoom à 200% puis à 400%. Un viewport de départ de 1280 pixels CSS affiché à 400% donne un repère équivalent à 320 pixels CSS ; les configurations réelles peuvent varier. Vérifiez également le texte agrandi à 200% sans vous limiter au zoom global.

Ces contrôles ciblés ne prouvent pas seuls une conformité WCAG complète. N’utilisez pas overflow-x: hidden pour faire disparaître le problème : un texte coupé n’est pas un contenu réparé.

Référence technique, pour approfondir

W3C — Reflow
W3C — Redimensionnement du texte

Ajoutez les classes à ces quatre couples, à leurs emplacements existants dans le formulaire :

<p>
    <label for="nom" class="libelle-champ">Votre nom (obligatoire)</label>
    <input type="text" id="nom" name="nom" autocomplete="name" required class="champ-texte">
</p>

<p>
    <label for="email" class="libelle-champ">Votre adresse e-mail (obligatoire)</label>
    <input type="email" id="email" name="email" autocomplete="email" required class="champ-texte">
</p>

<p>
    <label for="telephone" class="libelle-champ">Votre numéro de téléphone (facultatif)</label>
    <input type="tel" id="telephone" name="telephone" autocomplete="tel" class="champ-texte">
</p>

<p>
    <label for="message" class="libelle-champ">Votre message (obligatoire)</label>
    <textarea id="message" name="message" required class="champ-texte"></textarea>
</p>

Ne regroupez pas ces quatre extraits en supprimant le fieldset placé entre téléphone et message. Le formulaire et tous ses choix sont conservés.

Étape 1

Ajoutez overflow-wrap: anywhere; à body, width: 100%; à table et min-width: 0; aux notes.

Étape 2

Dans contact.html, ajoutez la classe du form et les classes aux quatre champs de texte et à leurs labels. Conservez les attributs et l’ordre du formulaire.

Étape 3

Ajoutez les règles .formulaire-contact, .libelle-champ et .champ-texte présentées dans la leçon.

Étape 4

Ajoutez fieldset { min-width: 0; }. Vérifiez que la légende reste visible et peut prendre plusieurs lignes.

Étape 5

Testez les trois pages à petite largeur et avec l’agrandissement. Vérifiez spécialement que les radios et la case ne mesurent pas 100% de largeur.

Le responsive doit être vérifié sur chaque contenu réel. Les quatre champs de texte reçoivent une largeur souple ; les radios et la case conservent leur taille native. Les textes, en-têtes de tableau et labels ne sont pas supprimés pour faire tenir la page.