haiku-atelier-2024/TODO.md
2024-12-04 13:34:37 +01:00

2.5 KiB

  • Page Panier
    • [-] Bouton « Réinitialiser » pour les Articles
    • [-] Bouton « Réinitialiser » pour les Adresses
  • Emails
  • Gestion des erreurs sur le Panier
  • Menu Mobile
    • Reprendre pour suivre la maquette initiale
  • PayPal à faire
  • Styles pour les focus à faire
    • Boutons
    • Champs
  • Reporter toutes les erreurs
  • Utiliser un polyfill pour BroadcastChannel
  • PAGE SHOP Faire apparaître le menu des catégories de Produits quand on scroll vers le haut
  • Comprendre pourquoi les codes promos ont disparus

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