JS

L'attribut placeholder représente un texte de substitution pour un élément de formulaire. Supprimer l'étiquette du champ (label) et la remplacer par un placeholder n'est pas une bonne pratique d'accessibilité.

• HTML
• CSS
• JS

Une bannière collante dynamique. Au défilement de la page vers le bas, la bannière du haut disparaît ; elle réapparaît lors du défilement de la page vers le haut.

• HTML
• CSS
• JS

Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».

• HTML
• CSS
• JS

La suggestion de remplissage d'un champ se fait avec l'attribut autocomplete. L'utilisation de cet attribut permet d'afficher des suggestions qui correspondent à une chaîne de caractères saisis en temps réel.

• HTML
• CSS
• JS

Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».

• HTML
• CSS
• JS

Extrait de code pour un menu déroulant horizontal utilisant les rôles aria 'menubar', 'menu' et 'menuitem'.

• HTML
• CSS
• JS

Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible.

• HTML
• CSS
• JS

Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible. Le menu sous sa forme résuite présente des icônes et leur signification dans une info-bulle.

• HTML
• CSS
• JS

Lorsque la page est longue, une bonne pratique consiste à proposer un lien de retour en haut de page. Celui-ci apparaîtra au défilement de la page.

• HTML
• CSS
• JS

Un accordéon permet l'affichage d'une liste d'éléments empilés dont le contenu est révélé par un système de plier / déplier.

• HTML
• CSS
• JS

Un carrousel est un diaporama permettant de présenter du contenu par un système de rotation ou de glissement des diapositives.

• HTML
• CSS
• JS

Une fenêtre modale est une fenêtre qui apparaît par-dessus la fenêtre en cours du navigateur et qui prend le contrôle total du clavier et de l'écran.

• HTML
• CSS
• JS

Une alerte est déclenchée par un événement, tel qu'une erreur, une condition d'avertissement ou l'arrivée d'informations importantes.

• HTML
• CSS
• JS

Un message statut ou de notification fournit une information ou un avertissement non critique (contrairement au message d'alerte).

• HTML
• CSS
• JS

Les onglets sont des affichages dynamiques de contenu dans une même zone de la page via un système d'étiquettes cliquables.

• HTML
• CSS
• JS

Le panneau dépliant permet d'afficher ou de masquer du contenu supplémentaire via un clic sur un bouton. Contrairement à l'accordéon, le panneau dépliant ne fait pas partie d'une liste d'éléments identiques.

• HTML
• CSS
• JS

La table des matières est une liste de liens permettant d'accéder directement à un emplacement dans la page visualisée.

• HTML
• CSS
• JS