Adloun

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 zone role="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

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →