Il est facile de trouver de bonnes pratiques pour n'importe quelle technologie, mais malheureusement ce n'est pas si facile de le faire en HTML. Sans réfléchir à deux fois, j'ai rédigé ma liste de 7 conseils et la partage avec Habr.
N'utilisez pas maximum-scale = 1 et user-scalable = no
Lorsque j'interagis avec l'interface, je dois souvent zoomer sur la page pour lire le texte ou cliquer sur un bouton trop petit. Mais parfois les développeurs m'interdisent de le faire. Ils ajoutent simplement maximum-scale = 1 et user-scalable = no. Et je souffre, en trouvant comment appuyer sur le putain de bouton.
Si vous voulez rendre vos utilisateurs heureux, ne désactivez pas le zoom natif du navigateur.
Ne faites pas cela
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
Tu peux le faire
<meta name="viewport" content="width=device-width, initial-scale=1">
Utiliser des liens sans attribut href au lieu de span
Parfois, il est nécessaire de rendre les liens inactifs. Une solution courante consiste à remplacer le lien par l'élément de texte span. En conséquence, nous obtenons un texte non interactif.
Mais il existe une solution plus concise. L'attribut href est facultatif, donc si vous ne l'ajoutez pas à l'élément a, il devient un lien booléen qui est inactif. Et lorsque vous souhaitez le réactiver, renvoyez simplement l'attribut href.
Par exemple, cette approche peut être utilisée pour indiquer la page actuelle dans le balisage de navigation.
Ne faites pas cela
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><span>About me</span></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Tu peux le faire
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a>About me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Utiliser le bouton au lieu d'un href = "#"
Lorsque les développeurs doivent baliser un élément interactif qui ressemble à un lien, ils utilisent l'élément a.
, href="#". JS, . , role="button", , .
button type="button" , .
<a href="#">Show my order</a>
<!-- -->
<a href="#" role="button">Show my order</a>
<button type="button">Show my order</button>
inputmode
. , , .
, inputmode. , email, . tel, .
<input type="text" placeholder="Your email">
<input type="text" placeholder="Your tel">
<input inputmode="email" placeholder="Your email">
<input inputmode="tel" placeholder="Your tel">
width height SVG
SVG HTML, , width height. , , .
, CSS, , CSS , . , . , width height .
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor" d="..."></path>
</svg>
svg {
width: 0.875rem;
height: 1rem;
}
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="0.875rem"
height="1rem">
<path fill="currentColor" d="..."></path>
</svg>
h1-h6 , , , , , .
, , , , .
, "iPhone 11 Just the right amount of everything." h2 h3, . : "iPhone 11, . Just the right amount of everything., ".
: "iPhone 11 Just the right amount of everything, ".
<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>
<h2>
<span>iPhone 11</span>
<span>Just the right amount of everything.</span>
</h2>
Ajouter plus de sens à alt
L'attribut alt est très utile car il permet aux utilisateurs de lecteurs d'écran de comprendre ce qui est montré dans l'image. Malheureusement, de nombreux développeurs l'utilisent de manière incorrecte. Soit ils dupliquent le texte autour de l'image, soit ils ne l'ajoutent pas du tout.
La meilleure solution est d'ajouter une courte description qui complète le texte qui l'entoure. Par exemple, si vous avez une fiche produit qui a une image et un titre, alors dans l'alt, décrivez à quoi ressemble le produit.
Ne faites pas cela
<header>
<img src="picture.jpg" alt="adidas Originals Superstar">
<h3>adidas Originals Superstar</h3>
</header>
Tu peux le faire
<header>
<img src="picture.jpg" alt=" adidas Originals Superstar ">
<h3>adidas Originals Superstar</h3>
</header>
PS Si vous avez des questions sur CSS/HTML, alors n'hésitez pas à m'écrire sur mon mail. Il est répertorié dans mon profil sur Habré.