60 lines
3 KiB
Markdown
Executable file
60 lines
3 KiB
Markdown
Executable file
- PAGE PANIER
|
|
- [-] Bouton « Réinitialiser » pour les Articles
|
|
- [-] Bouton « Réinitialiser » pour les Adresses
|
|
- [ ] Sauvegarder la dernière adresse validée dans le LocalStorage
|
|
- VITE
|
|
- Récupérer les liens des fichiers JS depuis le manifeste dans les fichiers PHP
|
|
- 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
|
|
- PAGE PANIER
|
|
- Erreur lorsque l'on ajoute deux variations d'un même produit et que l'on essaie d'en supprimer une.
|
|
- Il semblerait que supprimer une variation supprime toutes les entrées du même produit.
|
|
- MÉTHODES DE LIVRAISON
|
|
- [ ] Proposer la livraison à domicile en Belgique et en France pour le coût unique de 8 euros, quel que soit le montant de la commande
|
|
- PAGE PRODUIT
|
|
- PIED DE PAGE
|
|
- Réduire la hauteur.
|
|
- TOUTES LES PAGES
|
|
- Trouver la source des bordures superflues.
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
- [Creating an accessible 'back to top' button](https://jhartshorne.co.uk/posts/back-to-top/).
|
|
- [Back-to-Top Button Design Guidelines](https://www.nngroup.com/articles/back-to-top/).
|
|
- [Back to Top](https://designsystem.utah.gov/library/components/navigationLinks/backToTop).
|