/* * T-26 — cibles tactiles de la page d'accueil (WCAG 2.5.8, Target Size Minimum). * * POURQUOI UN FICHIER A LA MAIN, ET PAS DES CLASSES TAILWIND * ---------------------------------------------------------- * La feuille de l'accueil, assets/new/css/home/output.css, est un BUILD Tailwind * v4 (son en-tete le dit). Y ecrire a la main serait efface au prochain * `npx tailwindcss`. Les regles ci-dessous vivent donc dans un fichier separe, * charge APRES le build par index.php — et par lui seul : T-26 ne porte que sur * l'accueil, alors que footer.php et site-header.php sont partages par tout le * site. Le jour ou la meme correction est voulue partout, il suffit de charger * ce fichier ailleurs. * * CE QUI EST MESURE (page reelle, Chrome, 4 largeurs, avant correction) * -------------------------------------------------------------------- * largeur elements < 24x24 < 44x44 * 360 242 104 185 * 375 242 108 186 * 390 242 108 186 * 430 242 116 186 * * Les echecs ne sont pas repartis : ils tiennent en trois familles. * 39 puces de pagination Swiper .............. 8x8 (3 carrousels x 13) * 24 liens « Voir l'annonce » / « Voir le post » ~250x20 * 41 a 53 liens du pied de page ............... ~16 a 20 de haut * L'en-tete, la recherche et le formulaire newsletter ne comptent AUCUN echec : * ils sont deja au-dessus de 24px. On ne les touche pas. * * DEUX PRINCIPES * -------------- * 1. On agrandit la ZONE, pas le dessin. Aucune icone, aucun point de * pagination ne change de taille : c'est du remplissage et des * pseudo-elements transparents. * 2. On ne cree pas de chevauchement. Agrandir une cible sans ecarter ses * voisines deplace le probleme : deux cibles de 24px espacees de 20px se * recouvrent. Chaque regle ci-dessous verifie son pas (« pitch ») autant que * sa taille. * * PORTEE : sous 1024px seulement. « Maintenir l'apparence desktop » est une * exigence de T-26, et les quatre largeurs a tester sont toutes mobiles. Le * bureau reste donc tel quel — voir la note en fin de fichier. */ @media (max-width: 1023.98px) { /* --------------------------------------------------------------------- * 1. Puces de pagination Swiper — 8x8, la plus petite cible de la page. * * Le point reste a 8px : c'est le dessin de la maquette. La zone tactile * est portee a 24x24 par un pseudo-element transparent centre, qui recoit * les evenements a la place du point (l'evenement est rapporte sur la puce * elle-meme, le gestionnaire de Swiper la reconnait donc normalement). * * La marge passe de 6px a 8px de chaque cote. C'est la moitie qui compte : * le pas etait de 8 + 12 = 20px, donc DEUX cibles de 24px se seraient * recouvertes de 4px. A 8px de marge le pas vaut 8 + 16 = 24px : les zones * se touchent sans jamais se croiser. * * Verification de debordement, la contrainte qui interdit d'aller a 44px : * 13 puces x 24px = 312px, pour un conteneur de 328px a 360px de large. * Un pas de 44px demanderait 572px et ferait deborder la page. * * `span.` est deliberé : sur cette page le CONTENEUR .swiper-pagination * porte lui aussi la classe .swiper-pagination-bullet, et il ne doit pas * heriter de ces regles. * ------------------------------------------------------------------ */ span.swiper-pagination-bullet { /* La boite passe a 24x24 SANS toucher a la couleur ni a l'opacite du point : le contenu reste 8x8, le remplissage de 8px l'entoure, et `background-clip: content-box` confine la peinture au contenu. Le point garde donc exactement l'aspect que Swiper lui donne, etat actif compris. `content-box` est explicite parce que le preflight Tailwind met tout en `border-box`. Le rayon reste circulaire : 50% d'une boite de 24px vaut 12px, moins les 8px de remplissage il reste 4px pour un contenu de 8px, soit encore un cercle. */ box-sizing: content-box; width: 8px; height: 8px; padding: 8px; background-clip: content-box; margin: 0 !important; } /* La marge doit tomber a zero, et `!important` seul n'y suffit pas : * index.php porte * #discoverSwiper .swiper-pagination-bullets .swiper-pagination-bullet * soit une specificite de (1,2,0) que `span.swiper-pagination-bullet` (0,1,1) * ne bat pas — les deux regles etant `!important`, c'est la specificite qui * tranche. Mesure de l'erreur : le pas restait a 36px et les 13 puces * passaient sur DEUX lignes (13 x 36 = 468px pour 328px disponibles). * Rien n'etait rogne, mais la pagination changeait d'aspect. * * Avec ces selecteurs en (1,2,1) le pas revient a 24px : 13 x 24 = 312px, * une seule ligne dans les 328px de la plus petite largeur testee. Les * cibles se touchent sans se chevaucher, ce que 2.5.8 autorise. Le blanc * entre deux points passe de 12 a 16px : les points eux-memes ne bougent * pas. */ #discoverSwiper .swiper-pagination-bullets span.swiper-pagination-bullet, #rentalsSwiper .swiper-pagination-bullets span.swiper-pagination-bullet, #postsSwiper .swiper-pagination-bullets span.swiper-pagination-bullet { margin: 0 !important; } /* --------------------------------------------------------------------- * 2. Appels a l'action des cartes — « Voir l'annonce », « Voir le post ». * * Mesures a 20,2px de haut. Ce sont des actions principales de carte et la * place ne manque pas : on vise 44, pas le minimum de 24. * * Le remplissage est vertical uniquement. Un remplissage horizontal * elargirait la zone jusqu'au bord de la carte et la ferait toucher les * autres liens de la meme carte. * ------------------------------------------------------------------ */ /* `.offer-card__cta` est volontairement ABSENT de cette liste. Il mesure * deja 40px de haut : il ne fait pas partie des echecs de 2.5.8. Le porter * a 44 l'enfoncait de 4px de plus dans la pagination absolue qui recouvre * le bas de sa carte — le nombre de paires interactives qui se chevauchent * passait de 13 a 14 a 360px et 375px. Quatre pixels sans valeur d'usage * contre un chevauchement de plus : on s'abstient. */ .rental-card__cta, .post-card__cta { min-height: 44px; /* deja en inline-flex + align-items:center dans la feuille de l'accueil ; repete ici pour que la hauteur soit reellement occupee si l'ordre de chargement change. */ display: inline-flex; align-items: center; } /* --------------------------------------------------------------------- * 3. Listes de navigation du pied de page. * * `ul.space-y-2 > li > a` : Categories, Explorer, btobjob, et la grille des * 60 metiers. Hauteur mesuree 16 a 19px. * * 24px et non 44px, et c'est un choix, pas un renoncement : ces listes * comptent 60 liens metiers sur quatre colonnes. A 44px de haut le pied de * page gagnerait plus de 1 000px sur mobile — on aurait echange un defaut * d'accessibilite contre une page interminable. A 24px, avec l'ecart de 8px * que `space-y-2` pose deja, le pas vaut 32px : aucune cible n'en touche * une autre. * * inline-flex et non block : le lien ne doit pas s'etendre sur toute la * largeur de la colonne, sinon deux colonnes voisines se touchent. * ------------------------------------------------------------------ */ footer ul.space-y-2 > li > a { display: inline-flex; align-items: center; min-height: 24px; } /* --------------------------------------------------------------------- * 4. Icones sociales du bas de page — 20x19, et rien que des icones. * * Cas type de la cible « icone seule » : 44x44, l'icone ne bouge pas. * La liste est deja en `flex-wrap` avec un ecart de 16px, donc a 360px les * huit icones passent a la ligne au lieu de deborder : * 5 x 44 + 4 x 16 = 284px, sous les 328px disponibles. * ------------------------------------------------------------------ */ footer ul.flex.flex-wrap.items-center.justify-center > li > a[aria-label] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* --------------------------------------------------------------------- * 5. Ligne legale — Mentions legales, CGU/CGV, Confidentialite, Cookies. * * Mesures a 20px de haut. Ils sont peu nombreux et separes par des « · » * litteraux : la place permet 44px. * * Le remplissage horizontal reste a 6px. Les separateurs « · » occupent * environ 8px entre deux liens ; 6 + 6 + 8 = 20px d'ecart entre deux zones, * elles ne se rejoignent pas. * ------------------------------------------------------------------ */ footer .hp-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 6px; padding-right: 6px; } /* --------------------------------------------------------------------- * 6. Le focus clavier n'est pas touche. * * Aucune regle ci-dessus ne pose `outline: none`. Cette regle ne fait * qu'empecher un anneau de focus d'etre rogne par les nouvelles zones : * `outline-offset` negatif le ramene a l'interieur de la cible agrandie. * ------------------------------------------------------------------ */ span.swiper-pagination-bullet:focus-visible { outline-offset: 2px; } } /* * UN CHEVAUCHEMENT PREEXISTANT QUE CETTE CORRECTION AMPLIFIE — MESURE, NON RESOLU * ------------------------------------------------------------------------------- * Dans les carrousels #discoverSwiper / #rentalsSwiper / #postsSwiper, le * contenu de la carte DEBORDE de sa `.swiper-slide` vers le bas et retombe sur * la pagination, qui est en `position: static` juste apres le `.swiper-wrapper`. * Le lien « Voir l'offre » (.offer-card__cta) et les puces se recouvrent donc * deja aujourd'hui. * * Mesure a 375px : 11 paires avant, sur une zone de 8x6px chacune ; 12 paires * apres, sur une zone allant jusqu'a 24x15px — les puces sont plus grandes, * elles mordent donc davantage. Les puces sont au-dessus (z-index 10) : c'est * la puce qui recoit le geste dans cette bande. Le lien reste large de 250px * et haut de 40px, dont environ 25px restent degages. * * DEUX CORRECTIONS ONT ETE ESSAYEES ET REJETEES, mesures a l'appui : * - `padding-bottom` sur le conteneur du carrousel : aucun effet, la * pagination n'est pas positionnee en absolu (14 paires, inchange) ; * - `margin-top: 18px` sur la pagination : la section grandit, les cartes * etant etirees en hauteur suivent, et le compte passe de 14 a 25 paires * avec une zone de 17px. Pire que le mal. * * La cause est la hauteur des cartes de ces carrousels, pas la taille des * cibles. La corriger depasse T-26 et demande de reprendre la mise en page des * cartes : a traiter separement. * * CE QUI N'EST VOLONTAIREMENT PAS CORRIGE * --------------------------------------- * Les liens en pleine phrase du bloc SEO du pied de page (« plombier », * « electricien », « deposer des demandes de travaux »...) restent a leur * hauteur de ligne. WCAG 2.5.8 les exempte explicitement — exception * « Inline » : une cible dans une phrase, dont la taille est contrainte par * l'interligne du texte qui l'entoure. Leur donner 24px de haut couperait les * lignes du paragraphe ou ferait se chevaucher deux lignes successives, ce qui * serait un defaut plus grave que celui qu'on croirait corriger. * * LE BUREAU RESTE NON CORRIGE * --------------------------- * Tout est sous `max-width: 1023.98px`, parce que T-26 demande de maintenir * l'apparence desktop. Au-dessus de 1024px les memes elements restent donc * sous 24px. WCAG 2.5.8 ne distingue pas le pointeur : c'est une decision de * produit a prendre, pas un oubli. */