HTML

La structure de base d'un document HTML doit comporter impérativement plusieurs balises sémantiques appelées aussi régions.

• HTML
• CSS

Extrait de code pour un créer une bordure de texte afin de le rendre lisible sur un fond de couleurs variées.

• HTML
• CSS

Le formulaire de recherche est un système de navigation qui permet à l'utilisateur d’accéder rapidement à un contenu du site en utilisant un mot clé ou une expression.

• HTML
• CSS

Un lien d'accès rapide permet d'accéder rapidement à une zone de contenu de la page ou de sauter une zone dans la page.

• HTML
• CSS

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

Chaque erreur doit être signalée et proposer des suggestions de correction tant lors de la saisie (cas vérification native au champ de formulaire) qu'après la soumission du formulaire.

• HTML
• CSS

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

• HTML
• CSS
• JS

Lorsque la soumission du formulaire s'est bien passée, une bonne pratique consiste à informer l'utilisateur du bon déroulement de la procédure.

• HTML
• CSS

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

Un fil d'ariane est un système de navigation qui fournit une aide visuelle pour indiquer à l'utilisateur où il se trouve dans la hiérarchie du site.

• HTML
• CSS

La pagination est un système de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

• HTML
• CSS

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 processus par étape affiche la progression d'une séquence en la divisant en plusieurs étapes logiques et numérotées comme lors d'un processus d'achat.

• HTML
• CSS

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 carte est une zone de contenu proposant généralement un titre, une phrase de résumé et un lien menant vers des informations complémentaires.

• HTML
• CSS

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 infobulle est une courte description qui apparaît lorsque l'utilisateur place le pointeur de la souris sur un élément de la page sans cliquer.

• HTML
• CSS

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

Extrait de code pour créer un tableau simple permettant d'avoir une vue sans ascenseur horizontal lors d'un affichage en 320px de large.

• HTML
• CSS