1134 sujets

Accessibilité du Web

Bonjour !

J'ai récemment simplifié un bout de code mais depuis dans la search console de google j'ai 3 erreurs d'ergonomie mobile.
-Texte illisible, car trop petit
-Éléments cliquables trop rapprochés
-Contenu plus large que l'écran

Mais quand je test en direct l'url, j'obtiens un joli "Page adaptée aux mobiles". Je comprends plus rien. Je perds des places dans les résultats tous les jours à cause de ça...

J'ai plusieurs pages concernées. En voici une pour exemple:
https://www.quelle-est-cette-chenille.com/fr/resultat-chenille-glabre-sans-scolus-verte.php
Coucou vinula, tu peux peut-être nous aider à t'aider (:
Montre nous le petit bout de code que tu as modifié.
Bonjour vzytoi,
effectivement ce sera mieux avec du code:
<div class="bloc-resultat">
  <div class="bloc-gallery">

    <div><a href="fiche-citron.php" ><img src="../chenilles/citron.jpg" alt="Chenille de citron" title="Cliquez ici pour voir la fiche d'identité"></a><span>Le citron<br>(Gonepteryx rhamni)</span></div>

    <div><a href="fiche-aurore.php" ><img src="../chenilles/aurore.jpg" alt="Chenille de aurore" title="Cliquez ici pour voir la fiche d'identité"></a><span>L'aurore<br>(Anthocharis cardamines)</span></div>

    <div><a href="fiche-armigere.php" ><img src="../chenilles/armigere verte.jpg" alt="Chenille d'armigere" title="Cliquez ici pour voir la fiche d'identité"></a><span>L'armigère<br>(Helicoverpa armigera)</span></div>

    <div><a href="fiche-trapeze.php" ><img src="../chenilles/trapeze.jpg" alt="Chenille de trapeze" title="Cliquez ici pour voir la fiche d'identité"></a><span>Le trapèze<br>(Cosmia trapezina)</span></div>

    <div><a href="https://utip.io/qecc" target=_blank rel="noopener, noreferrer"><img src="autre/don.svg" alt="Faire un don" title="Don utip"></a><span>Redirection vers utip.io</span></div>

  </div>
</div>
Bonjour,
En premier, dire que ton site est (à mon sens) très soigné et bien écrit !
Graphisme plaisant en prime.
Cependant tu as pris du retard, et c'est bien ton CSS responsive qui en souffre, la convention est que sur 90% du matériel actuel, est que le rapport de taille est de *2 .( je veux dire le « pixel-ratio ») un ordinateur full HD est disons 1920×1080 pixels dans un rectangle de prés de 43 cm (17 pouces). contrairement à ce qui est écrit trop souvent, les téléphones depuis longtemps donnent également 1920*1080 mais dans un rectangle de dans un rectangle de 12 cm de diagonales (5 pouces).

J'ai testé sur deux portables, tout tes textes sont trop petits,
ton CSS responsive est mal conçu,
Il te faut:
1) Déclarer ton HTML5 plus correctement: pour toi ce sera:

<!DOCTYPE html><html lang='fr'><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

Attention respectes ce viewport !
2) Si tu utilises GRID ou Flex (ou les deux le TOP)
Alors ton responsive est preque auromatique, et même nos majores ICI disent que nous pouvons presque nous passer de ce CSS...
au pire portes tout à width:100%


utiliser les valeurs en viewport pour les polices. Le viewport correspond à la résolution du périphérique que vous utilisez. Il est possible de paramétrer la taille de la police avec 2 unités liées au viewport : viewport-width, qui se base sur la largeur que peut afficher l'écran, et viewport-height, qui est liée à la hauteur. Pour ces 2 unités de mesure, le rapport est le même : 1 unité correspond à 1% de la largeur ou de la hauteur du viewport. Il existe aussi les unités vmin et vmax, qui prennent le plus petit ou le plus grand entre la largeur et la hauteur, ce qui permet de tenir compte des différentes orientations possibles pour un smartphone ou une tablette.

Pour terminer, notre Administrateur ici (Raphael) résume la situation actuelle ainsi:

Il est effectivement préconisé d'opter pour des tailles de polices, et donc des unités, fluides.

Les unités fluides à disposition sont :
- les % (qui fonctionnent très bien sur des polices mêmes si initialement pas vraiment prévues pour cela)
- les "em" (qui fonctionnent au final un peu comme les %, c'est à dire par rapport au parent)
- les "rem" (qui se rapportent à la taille de police de la racine <html>)
- les "vw" et "vh" (qui se rapportent à la largeur et hauteur de la fenêtre)

Ces derniers peuvent paraître très pratiques en responsive, mais demandent une très grande maîtrise pour ne pas devenir rapidement très petites (sur petit écran) et donc complètement inaccessibles. Ex. sur cette page :  http://www.kiwi.gg/vw
 

Au final, et depuis quelques années, l'unité la plus pratique est le "rem" car elle possède tous les avantages des "em" sans la complexité des calculs ni la cascade entre chaque maillon de la chaîne.

Modifié par Jean-Pierre-Bruneau (17 May 2020 - 15:52)