haiku-atelier-2024/TODO.md
gcch ac0efab9b2 2024-12-10
corvée(db) exporte la BDD de production
2024-12-10 17:09:17 +01:00

2.6 KiB

  • Page Panier
    • [-] Bouton « Réinitialiser » pour les Articles
    • [-] Bouton « Réinitialiser » pour les Adresses
  • Menu Mobile
    • Reprendre pour suivre la maquette initiale
  • PayPal à faire
  • Styles pour les focus à faire
    • Boutons
    • Champs
  • Utiliser un polyfill pour BroadcastChannel
  • PAGE SHOP
    • Faire apparaître le menu des catégories de Produits quand on scroll vers le haut
  • MÉTHODES DE LIVRAISON
    • Proposer la livraison à domicile en Belgique et en France pour le coût unique de 12 euros, quel que soit le montant de la commande

Bouton « Retour en haut »

Un bouton « Retour en haut » permet pour un Utilisateur de rapidement revenir au sommet d'une page fournie en contenu.

Ne pas proposer ce bouton pour des pages faibles en contenus. Hoa Loranger recommende ainsi d'utiliser le seuil de plus de quatre pages de contenu (une page correspond à ce qui traversé avec l'appui sur la touche Espace dans le navigateur).

Apparence et contenu

  • Un lien <a> vers une ancre située en haut de la page (par exemple #en-tete) OU un bouton utilisant JavaScript pour revenir en haut.
  • Cet élément doit en envelopper deux autres :
    • une icône sous forme de balises <img> ou <svg> avec un attribut aria-hidden="true" ;
    • un texte « Retour en haut » qui peut être visuellement caché mais toujours accessible par les lecteurs d'écrans via une classe .visuellement-cache.
  • Le bouton apparaît au sommet du reste du contenu.
  • On peut idéalement ajouter une impression de profondeur avec l'utilisation d'ombres.

Comportement

  • Le bouton apparaît en bas à droite de l'écran une fois que l'Utilisateur a défilé plus d'une page.

  • Il disparaît en-deça de ce seuil.

    • Le bouton reçoit alors l'attribut aria-hidden="true" et tabindex="-1" pour éviter que l'Utilisateur tab dessus par erreur.
  • Quand il reçoit le focus, cela doit être visuellement indiqué.

  • Il est idéalement le dernier élément dans la tabbing sequence.

  • Le clic sur le bouton renvoie l'Utilisateur au sommet de la page, avec ou sans défilement doux.

  • Considérations pour les Utilisateurs avec lecteurs d'écran :

    • Le renvoie au sommet de la page doit s'accompagner à un focus sur le premier élément pour le recevoir (par exemple un bouton).

Liens