10 façons de concevoir votre site pour l'accessibilité

Je suis frustré par la conception Web moderne. Et je suis certainement frustré par la plupart des concepteurs de thèmes et de modèles qui vendent leur travail sans vérifier l'accessibilité mondiale.

De nombreux concepteurs prennent en fait de bons CMS accessibles, puis créent des conceptions avec de gros problèmes d'accessibilité.

Je suis avocat, concepteur de sites Web et consultant en accessibilité/diversité en Australie. Ayant conseillé les secteurs de l'entreprise, du gouvernement et de l'éducation, je trouve que beaucoup de sites ne sont pas accessibles et offrent à de nombreux utilisateurs une mauvaise expérience.

Pourquoi l'accessibilité est-elle importante ?

En 2010, 10 % des habitants des pays développés avaient des difficultés à lire les imprimés. Ce chiffre était de 15 % dans les pays non développés.

En Australie, l'accessibilité est considérée comme suffisamment importante pour que je puisse vous traduire en justice si votre site n'est pas accessible. Choqué?

Non, je ne recommanderais jamais à un client de privilégier les "sites pour aveugles", mais des sites accessibles à tous. Cela inclut les personnes incapables de lire les imprimés, physiques, auditives - même les générations plus âgées. En bref, un grand pourcentage de l'ensemble de votre public ne peut tout simplement pas accéder à votre site comme vous le faites.

Coûteux? Non, en fait ça revient aux normes de conception, parce que c'est vraiment basique.

Voici dix étapes que vous pouvez suivre pour vous assurer que votre site est accessible.

#1. Rendez votre site facile à utiliser

Je n'ai pas besoin de vous dire comment concevoir. Mais ces trois principes clés aideront les utilisateurs handicapés :

1. Rendre les sites faciles à lire et à comprendre
2. Rendre les sites faciles à naviguer
3. Rendre les sites faciles à utiliser sur les appareils mobiles

Cela vous rapprochera de l'accessibilité et aidera également les moteurs de recherche à aimer votre site !

Les lecteurs d'écran avec lesquels je teste mes sites sont comme les robots de Google (sauf que la technologie aveugle était la première).

#2. Tester avec un logiciel d'accessibilité

Saviez-vous que les PC disposent d'un logiciel d'accessibilité pour faciliter la navigation et la lecture de l'écran ? Vous l'avez probablement fait, mais saviez-vous également que les appareils mobiles intègrent un logiciel d'accessibilité au cœur ? Ce logiciel peut lire aux personnes, y compris les malvoyantes :

• Apple (iOS) utilise VoiceOver ;
• Android utilise Talkback ;
• Windows utilise Narrateur.

Presque tous les concepteurs de sites Web incluent un menu dans le modèle, mais 95 % ne peuvent être lus avec aucune des technologies ci-dessus ! La plupart de ces services d'accessibilité ne peuvent pas reconnaître l'existence d'un menu, car il est codé de manière incorrecte. Le plus souvent, le problème est que le menu est mal codé ou pas clairement étiqueté.

Cela vaut la peine de charger certains sites sur votre téléphone et d'activer les fonctionnalités d'accessibilité. Vérifiez si le menu de votre site fonctionne ou non.

#3. Ne pas tout écrire en majuscule

Il s'agit probablement du changement le plus fondamental que l'on puisse apporter à son site : n'écrivez pas en majuscules.

Ceci est scientifiquement testé et prouvé PARCE QUE TOUTES LES MAJUSCULES EST DIFFICILE À LIRE POUR TOUT LE MONDE !

Les majuscules les plus utilisées se trouvent dans les éléments de menu et les boutons. Vous aidez à faire passer votre message si vous écrivez normalement avec des majuscules régulières, à moins que vous n'ayez un objectif de conception spécifique - comme une marque ou un logo.

#4. Expliquez clairement vos liens

Les boutons "En savoir plus" ou "Cliquer ici" n'indiquent pas à Google (ou à ceux qui utilisent des lecteurs d'écran) ce qui se cache derrière le lien. Sortez simplement votre lien de son contexte pour voir s'il a du sens. "En savoir plus" au milieu d'une page a-t-il un sens pour vous ? En savoir plus quoi ?

#5. Utilisez de bons styles contrastés

Cela ne veut pas dire tuer votre contenu - cela signifie le rendre facile pour les malvoyants. Voici une astuce... allumez l'écran de votre mobile à mi-puissance et essayez de lire un site. À quoi ressemble-t-il dans la lumière et dans l'obscurité?

#6. Utilisez les liens "passer au contenu"

Imaginez hocher la tête 30 fois avant de lire le contenu principal ! Les personnes incapables de lire les imprimés doivent le faire si vous ne leur permettez pas de sauter le menu. En fait, c'est la même chose pour l'utilisation des balises d'en-tête, H1 à H4 aident les moteurs de recherche et les personnes incapables de lire les imprimés à naviguer sur votre site.

Oh, et ne cachez pas le lien hors écran ! Les personnes malvoyantes utilisent souvent des loupes et recherchent ces liens manuellement (et non via le clavier).

#sept. Arrêtez d'utiliser les popups

Au moins, arrêtez d'utiliser ceux dont nous ne pouvons pas appuyer sur 'esc' pour nous en débarrasser. Saviez-vous que notre logiciel ne peut pas accéder à ces fenêtres contextuelles ? Et généralement, nous finissons par lire ce qu'il y a derrière la boîte - cela vous semble grisé, mais pas pour nous.

Si vous envisagez d'utiliser des pop-up :

• Faites en sorte qu'ils puissent être rejetés avec le bouton 'esc'.
• Faites en sorte que notre logiciel puisse lire la boîte, pas le texte derrière.
• Donnez des détails sur une autre façon de trouver le contenu ou remplissez le formulaire - "ou rendez-vous sur notre page xxxx pour plus de détails".

#8. Les redimensionneurs de texte peuvent être utiles dans certaines situations

Personnellement, les redimensionneurs de texte sont beaucoup moins importants que les liens de saut de contenu. En effet, une personne incapable de lire les imprimés (y compris l'ancienne génération) utilisera soit une loupe Windows, soit un produit spécialisé - comme le texte zoom, les yeux magiques ou d'autres logiciels gratuits. D'après mon texte d'expérience, les resizers détruisent généralement le contenu mobile - et sont encore moins réactifs que le pincement ou l'utilisation des principales fonctionnalités d'accessibilité mobile.

De plus, grâce à la technologie adaptative qui redimensionne le texte, l'utilisateur peut l'éteindre et l'allumer pour se retrouver à l'écran (certains zooment pour ne voir que 1/8 de l'écran à la fois). Cela dit, les redimensionneurs de texte peuvent toujours être pertinents et mériter d'être mis en place pour les sites gouvernementaux - mais pas une priorité absolue pour moi.

#9. Utilisez des icônes de police plutôt que des icônes d'image

Ceux qui utilisent le grossissement peuvent ne voir qu'environ 1/8 d'un site à la fois, et ceux qui utilisent des téléphones portables chargeront généralement les versions sans image - en appuyant sur le bouton "lecteur". Je pourrais écrire un article sur le fait que la plupart des "icônes d'image" se pixellisent à l'extrême au zoom maximum, mais pas les icônes de police (enfin, pas autant de toute façon).

#dix. Ajouter des transcriptions vidéo

Il ne sert à rien de mettre une vidéo YouTube sur un site Web s'il est totalement silencieux, ni d'en mettre une qui n'a pas de transcription ou de moyen pour les malentendants de la suivre. Ce serait comme avoir un public ou une clientèle mondiale, mais ne fournir des informations qu'en japonais.

Juste pour le plaisir, obtenez une vidéo YouTube technique sans discours, puis fermez les yeux. Remarque - fermer les yeux ne reproduit pas la cécité car vous pouvez simplement les rouvrir, mais c'est un exercice amusant.

Ressources d'accessibilité

Ces sites fournissent des directives et des outils pour vérifier votre site :

• Vérificateur d'accessibilité Web Aim
• Directives d'accessibilité au contenu Web du gouvernement australien
• Validateur W3C. Notez que le validateur W3C renvoie beaucoup d'erreurs inutiles. Vous devez juger si chaque erreur en vaut la peine ou non.

Ces sites fournissent des lecteurs d'écran que vous pouvez utiliser pour tester votre site de bureau avec :

• Accès aux tâches avec reconnaissance vocale (JAWS)
• Ai squared offre des versions d'essai gratuites
• Window Eyes - Lecteur d'écran
• NV Access propose un lecteur d'écran Non Visual Desktop Aid (NVDA) totalement gratuit

Remarque : Je ne recommande pas Sitecues : ce n'est pas ce que j'appellerais facile à installer ou efficace pour ceux qui ont des difficultés à lire les imprimés.

Conclusion

Comme toute chose, il y a un équilibre entre le respect fonctionnel et strict des règles. Aucun des sites de mes clients n'est accessible à 100% / conforme au W3C. Ils sont accessibles - et compatibles avec les moteurs de recherche. Ils sont logiques et bien contrastés, mais ont aussi du style et des caractéristiques pour avoir de l'impact.

Combien de millions de personnes ont une incapacité à lire les imprimés dans le monde ? Combien de clients potentiels ?

Que vous construisiez des sites en Joomla, Drupal, WordPress, HTML pur ou toute autre plate-forme, j'espère vous avoir convaincu que ce problème mérite d'être pris au sérieux, pour votre entreprise et vos clients.