JavaScript : rendre le Web interactif (école d'ingénieur) · Chapitre 12 · Application directe du cours
Un parcours au clavier
Projet : la Librairie interactive · niveau 1 (application)
Énoncé
Décrire, touche par touche, comment un client qui n'utilise pas de souris ajoute deux « Petit Prince » depuis le catalogue, puis commande avec livraison sur le campus. À chaque étape, dire ce qu'annonce un lecteur d'écran, et quel élément du code le permet.
Corrigé
- Tab jusqu'au lien « Catalogue » du menu, Entrée. Le lecteur annonce la page et le titre « Catalogue ».
- Tab jusqu'au bouton « Ajouter au panier : Le Petit Prince » (le texte caché du
<span class="visuellement-cache">complète son nom), Entrée deux fois. Après chaque appui, la zonerole="status"annonce « « Le Petit Prince » ajouté. Votre panier : 2 articles. » ; l'en-tête affiche « Panier (2) ». - Maj+Tab jusqu'au lien « Panier (2) », Entrée. Le chargement est annoncé (« Chargement du panier… »), puis le tableau, dont la légende nomme le cadre focalisable.
- Tab jusqu'au nom, saisie ; Tab, adresse ; Tab jusqu'aux boutons radio, flèche bas pour « Livraison sur le campus » : le total, recalculé, est un
<output>. - Tab jusqu'à « Envoyer la commande », Entrée : « Envoi de la commande… » est annoncé, puis la confirmation, qui reçoit le focus (
confirmation.focus(), possible grâce àtabindex="-1") et dont le lecteur lit le titre et le message.
Ce parcours a été rejoué dans Chromium, au clavier seulement : l'ordre de tabulation de la page Panier est celui de la méthode « avant la mise en ligne », et la flèche haut dans un champ de quantité, suivie de Tab, fait passer le sous-total et le total (pour deux « Petit Prince », de 17,00 € à 25,50 € avec trois exemplaires).
100 % gratuit
La suite du chapitre est sur Adloun
- 9 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.