Liste de vérifications pour le développeur frontend.
1. Fondations du Web (non négociables)
- HTML5 sémantique : utilisation rigoureuse de
<header>,<nav>,<main>,<article>,<aside>,<footer> - Langue déclarée :
<html lang="fr">(ou autre, selon le contenu) - Encodage UTF-8 :
<meta charset="utf-8">en première position dans<head> - Viewport responsive :
<meta name="viewport" content="width=device-width, initial-scale=1"> - Titre pertinent :
<title>≤ 55 caractères, unique par page - Description méta :
<meta name="description">≤ 150 caractères, rédigée pour l’humain - Pas de JS obligatoire : fonctionnalités de base (navigation, lecture) sans JavaScript
2. Accessibilité (a11y) – Priorité éthique
- Contrastes WCAG AA (AAA pour mobile) → outil : WebAIM Contrast Checker
- Navigation clavier complète : focus visible, ordre logique, pas de pièges
- Alternatives textuelles :
altdescriptif pour chaque image informative - Formulaires associés :
<label for="id">ouaria-labelsi masqué - ARIA minimaliste : uniquement quand HTML sémantique ne suffit pas
- Test avec lecteur d’écran (NVDA, VoiceOver) ou simulateur (axe, WAVE)
3. Performance & Éco-conception
- Budget carbone défini : ex. < 1 Mo total, < 200 Ko JS, < 100 Ko CSS
- Images optimisées :
- Format moderne (WebP, AVIF) via
<picture>+srcset - Dimensions explicites (
width/height) → protège CLS - Lazy loading natif :
loading="lazy" - SVG nettoyés (SVGO) + compressés (Brotli)
- Format moderne (WebP, AVIF) via
- CSS critique inlined, reste chargé de façon non bloquante
- JS différé :
deferouasync, jamais en haut du<head> - Pas de bibliothèques lourdes pour une fonctionnalité simple (ex. : éviter jQuery, Bootstrap si inutile)
4. Sémantique et découvrabilité
- Structured Data en JSON-LD : entités Schema.org (
Article,CreativeWork,Organization, etc.) - Liens vers identifiants persistants : Wikidata QID, HAL, ARK, ISNI (quand pertinent)
- URLs propres et stables
- Métadonnées sociales : Open Graph + Twitter Cards (avec image ≥ 1200×630 px)
- hreflang si multilingue :
<link rel="alternate" hreflang="cat" href="..."> - Canonical :
<link rel="canonical" href="...">pour éviter le duplicate content
5. Sécurité et respect de la vie privée
- Pas de trackers publicitaires : remplacer Google Analytics par Plausible ou Matomo auto-hébergé
- Consentement explicite pour cookies non essentiels (RGPD)
- CSP (Content Security Policy) configurée en production
- Rel= »noopener » sur tous les liens externes avec
target="_blank" - Pas de scripts tiers non auditables (ex. : widgets sociaux → remplacer par liens statiques)
6. Outils et workflow (maîtrise, pas dépendance)
- Build minimal : Vite, esbuild, ou rien du tout (sites statiques)
- Linting : ESLint + Stylelint
- Formatage : Prettier
- Versioning : Git avec commits clairs, historique lisible
- Déploiement : sites statiques sur IPFS, NGINX local, ou hébergeur souverain (O2Switch, etc.)
Frameworks (React, Vue, etc.) :
- Utilisés seulement si justifiés (app interactive, dashboard, outil pédagogique)
- Préférer Astro, Svelte, ou HTML pur pour sites content-first
- Si WordPress : thème enfant personnalisé et pas de page builder
7. Tests et qualité
- Audit Lighthouse : ≥ 90 accessibilité, ≥ 85 performance
- W3C Validator : HTML valide
- Test multi-navigateurs : Firefox, Chrome, Safari, mobile
- Test hors ligne : au moins contenu principal lisible sans réseau
- Coverage JS/CSS : suppression du code mort (Chrome DevTools, PurgeCSS)
8. Résilience et durabilité
- Mode sombre respectueux : détecte la préférence système
- Fallback police système : pas de dépendance à Google Fonts sans alternative locale
- Favicon en PNG/SVG (pas .ico seul)
- Manifeste PWA léger si utile (hors ligne, installation)
- Service Worker optionnel : caching stratégique, pas gadget
9. Éthique et transmission
- Pas d’animations superflues : elles distraient, consomment CPU, excluent
- Clarté > beauté : la lisibilité prime sur l’effet visuel
- Documentation intégrée : README, commentaires, schémas Mermaid dans le repo
- Interopérabilité : données exportables (JSON, CSV, RDF), APIs ouvertes
Ressources
Github.com/thedaviddias/Front-End-Checklist
Explorer les thématiques : Développement & technologies