BIENVENUE

Bienvenue sur la plateforme en ligne MTM. Même en zone rouge, nous vous conseillons de limiter vos déplacements et de commander en ligne. La livraison est possible le jeudi et le vendredi. Pour une livraison le vendredi, veuillez le noter dans l'espace ''NOTES''

BIENVENUE

Bienvenue sur la plateforme en ligne MTM. Même en zone rouge, nous vous conseillons de limiter vos déplacements et de commander en ligne. La livraison est possible le jeudi et le vendredi. Pour une livraison le vendredi, veuillez le noter dans l'espace ''NOTES''

Accessibilité (base)

3 highly effective ways to audit a web page for Accessibility

Aria-label

Sur les boutons et les liens (autre exemple sur le point suivant). Avoir un texte explicatif et ne pas utiliser simplement des "bouton" et "lien" comme texte. Ne pas oublier la pagination d'un blogue (liens).

                            
                                <button type="button" aria-label="Panneau de recherche"></button>
                                

<a href="#scroll-to" data-scroll-to data-scroll-offset="-60" aria-label="Défiler jusqu'au contenu"></a>

Rel

Sur les liens avec un target blank seulement (ce que wordpress fait dans le wysiwyg). Prendre note du détail du aria-label.

                            
                                <a href="https://inclusive-components.design/" target="_blank" rel="noreferrer noopener" aria-label="Inclusive Components (s'ouvre dans un nouvel onglet)">Inclusive Components</a>
                            
                        

Principes de base

  • Seulement un H1
  • Order logique des headings
  • ALT sur les images (ne pas laisser vide sauf si ce n'est que pour du visuel (ex : parallax))
  • Aucun input seul, toujours avoir un label avec celui-ci (voir _mixins.scss pour des styles pour cacher le label, mais le garder accessible pour les screen readers)
  • Avoir un attribut "for" pour le label et "id" pour l'input; inscrire une valeur identique aux deux (select et textarea également)
  • Évitez les attributes vides (ex: "class", "cols" ou "maxlength" n'ayant aucune valeur sur un textarea par exemple)
  • Dans le meilleur des mondes, garder le même HTML (dans le sens qu'il arrive qu'on cache et affiche des sections en desktop ou mobile)

Ressources (pour les spécifications plus strictes)

Titre

Lorem ipsum dolor sit amet, consectetur adipisicing elit...