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)

• Google Lighthouse (outils tests)
• Web Accessibility Checker (outils tests)
• A community-driven effort to make web accessibility easier
• A11Y Style Guide
• Wuhcag WCAG 2.0 checklists
• Medium.com tag