Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.
| Vous devriez au préalable savoir comment créer un document HTML simple. |
| Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible. |
JavaScript est un langage de programmation principalement utilisé côté client pour rendre les pages web interactives. Vous pouvez créer des pages web étonnantes sans JavaScript, mais JavaScript ouvre un tout nouveau niveau de possibilités.
Note : Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.
Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément <script>. Il y a deux méthodes pour utiliser script, une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.
Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier .js dans la page web, il suffira d'utiliser <script> avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :
Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.
Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :
Note : Pour les scripts en ligne et pour les scripts externes sans les attributs defer ou async, le script est exécuté immédiatement lorsque le navigateur rencontre l'élément <script> lors de l'analyse du HTML. Cela signifie que le script ne peut pas accéder aux éléments HTML qui apparaissent plus loin dans le document. Pour accéder à ces éléments, envisagez de déplacer le script à la fin du corps du document (juste avant la balise fermante </body>), ou utilisez l'attribut defer sur les scripts externes.
L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :
Tout le contenu d'un document doit être disponible sous forme de texte (structuré). HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en listes non ordonnées de liens.
Toutes les fonctionnalités doivent être accessibles depuis le clavier.
N'utilisez pas de limites de temps arbitraires. Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un·e utilisateur·ice ou pour que le navigateur accomplisse une tâche donnée.
Les animations doivent être courtes et légères, sans clignotement. Les clignotements peuvent agacer, ou pire, entraîner des crises d'épilepsie (angl.). Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.
Laissez les utilisateur·ice·s initier les interactions. Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.
Ayez un plan de secours pour les utilisateur·ice·s qui n'ont pas JavaScript activé. Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit.
Cette page a été modifiée le 10 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.