HTML CSS JS

Un bon site n'est pas seulement beau et fonctionnel — il est accessible à tous, trouvable sur Google, et rapide à charger. Ces trois piliers font la différence entre un site amateur et un site professionnel.

Accessibilité (a11y)

L'accessibilité signifie que TOUT LE MONDE peut utiliser votre site, y compris les personnes malvoyantes (qui utilisent des lecteurs d'écran), les personnes à mobilité réduite (qui naviguent au clavier), et les personnes avec des troubles cognitifs.

Règles essentielles :

Images — TOUTES les images ont un attribut alt descriptif. Pas "image1" mais "Capture d'écran du tableau de bord de l'application météo". Si l'image est purement décorative, utilisez alt="" (vide mais présent).

Contraste — Le texte doit avoir un ratio de contraste de 4.5:1 minimum avec le fond. Testez sur webaim.org/resources/contrastchecker. Le gris clair sur fond blanc est souvent insuffisant.

Navigation au clavier — TOUT le site doit être navigable au clavier. Tab pour avancer, Shift+Tab pour reculer, Enter pour activer. Testez en naviguant sans souris pendant 2 minutes.

Labels — Chaque <input> a un <label> associé via l'attribut for. Sans label, un lecteur d'écran ne peut pas dire à l'utilisateur ce que le champ attend.

Sémantique — Utilisez les bonnes balises : <nav> pour la navigation, <main> pour le contenu principal, <button> au lieu de <div onclick>. Les lecteurs d'écran utilisent ces balises pour naviguer.

Focus visible — Ne supprimez JAMAIS outline sur les éléments focusables sans le remplacer par un autre indicateur visuel. Les utilisateurs au clavier en ont besoin pour savoir où ils sont.

Aria — aria-label pour les boutons sans texte (le hamburger, le toggle sombre), aria-hidden="true" pour les éléments purement décoratifs.

SEO (Search Engine Optimization)

Le SEO détermine si Google trouve et affiche votre site dans les résultats de recherche.

Règles essentielles :

• Un seul <h1> par page contenant votre mot-clé principal
• Balise <title> unique et descriptive (50-60 caractères max)
• Balise <meta name="description"> (150-160 caractères) — c'est le texte qui apparaît sous le titre dans Google
• Balises Open Graph (og:title, og:description, og:image) pour les partages sur les réseaux sociaux (Facebook, LinkedIn, WhatsApp)
• URLs propres et descriptives
• Site rapide et responsive (facteurs de ranking Google)

Performance

Chaque seconde de chargement supplémentaire réduit les conversions et augmente le taux de rebond. En Afrique de l'Ouest, où les connexions sont souvent lentes, la performance est encore plus critique.

Optimisations essentielles :

• Images : format WebP (30-50% plus léger que JPEG), redimensionnées à la bonne taille, loading="lazy" pour charger uniquement quand visible
• Dimensions explicites : width et height sur les <img> pour éviter les "sauts" de page pendant le chargement
• CSS/JS : charger le JS en defer ou avant </body>
• Polices : limiter à 2 polices Google Fonts, utiliser font-display: swap

Lighthouse — votre outil d'audit

Chrome DevTools intègre Lighthouse, un outil qui note votre site sur 4 critères (Performance, Accessibilité, Bonnes pratiques, SEO) avec un score de 0 à 100 et des recommandations concrètes.

Comment l'utiliser : F12 > onglet Lighthouse > sélectionner "Mobile" > Generate report.

> Objectif : visez un score de 90+ dans les 4 catégories. C'est atteignable pour un site statique bien construit.