Créer un site internet facilement accessible

Rendez votre site internet plus accessible à une large gamme de visiteurs, notamment ceux qui utilisent des lecteurs d’écrans, des loupes, etc.

L’Éditeur est optimisé pour aider les utilisateurs de technologies d’assistance à avoir la meilleure expérience de navigation possible. C’est le cas grâce à trois fonctionnalités spécifiques:

1. L’ajout des balises ARIA (Applications Internet Riches et Accessibles) dans le code du site internet qui aide les utilisateurs déficients visuellement à donner du sens aux éléments qui n’ont pas de balises texte sur eux.
2. Une fonction Aller au contenuqui permet aux lecteurs d’écrans de passer la navigation principale du site internet pour qu’elle ne se répète pas à chaque fois que l’utilisateur ouvre une nouvelle page sur le site internet.
3. Un surlignage Indication de focus qui aide à indiquer clairement aux utilisateurs de technologies d’assistance quel élément est actuellement actif sur le site internet.

 

Trouvez le menu Accessibilité dans l’Éditeur en cliquant sur les trois points dans le coin supérieur droit de l’interface et sélectionnez Paramètres.

 

Sélectionnez Paramètres d’accessibilitédans le menu de gauche.

 

Activer les balises ARIA

Les balises ARIA ont déjà été ajoutées à tous les éléments pertinents de votre site internet, mais elles ne seront pas activées et accessibles aux lecteurs d’écrans jusqu’à ce que vous cochiez la case Activer l’ARIA.

Dans le code du site internet, l’attribut aria-labelest utilisé pour définir un morceau qui balise un élément particulier sur le site internet. Il est appliqué au code du site internet dans les cas où une balise texte n’est pas visible sur l’élément en question, par exemple une icône, une carte ou un bouton. Les balises ARIA ne sont pas visuellement présentes sur le site internet, mais sont récupérées par les lecteurs d’écran et sont lues à haute voix.

Exemple 1 : Carte

Avec le Module carte de l’Éditeur, il est facile pour les entreprises d’afficher leur emplacement aux visiteurs. Toutefois, l’emplacement est indiqué visuellement par une épingle sur la carte. En d’autres termes, il n’y a pas d’indication texte réelle jusqu’à ce que vous cliquiez sur l’épingle. Cela veut dire que même si les lecteurs d’écran sont capables de reconnaître l’élément comme étant une carte, ils ne liront pas l’emplacement épinglé dessus. Toutefois, si l’ARIA est activé sur le site internet, les lecteurs d’écran seront amenés à lire un texte alternatif qui est créé pour fournir l’adresse exacte épinglée sur la carte. Cela ressemble à ça quand le lecteur d’écran est actif sur l’élément carte:

 

Si l’ARIA n’était pas activé, le lecteur d’écran retournerait une réponse beaucoup moins explicite:

 

Example 2 : Icônes de réseaux sociaux

Vous pouvez ajouter des icônes à plusieurs endroits de votre site internet, par exemple dans le Module liens de réseaux sociaux où vous pouvez faire un lien vers vos pages Facebook, Twitter, etc. Les liens sont affichés sous forme d’icônes sans balise texte. En activant l’ARIA, les lecteurs d’écran liront un texte qui décrit la fonction de l’icône:

Si l’ARIA n’est pas activé, les lecteurs d’écran ne pourront pas décrire l’objet de l’icône:

 

Exemple 3 : Module carte de visite numérique

Dans cet exemple, nous avons ajouté un Module carte de visite numérique sur un site internet. Le module ajoute automatiquement des icônes pour classifier l’information sur la carte de visite, par exemple une épingle pour indiquer l’adresse, une enveloppe pour indiquer l’e-mail, etc. Étant donné qu’il n’y a pas de texte sur ces icônes pouvant être lu à haute voix, l’attribut aria-labelest utilisé pour fournir du texte aux technologies d’assistance. Dans cet exemple, la balise dans le code est “Address” afin que ce soit le mot que le lecteur d’écran lira quand il est actif sur l’élément.

 

Si la case Activer l’ARIA est décochée dans l’Éditeur, le lecteur d’écran ne retournera aucune réponse quand il sera actif sur l’élément:

 

La même logique s’applique à tous les autres éléments sans balises texte, par exemple l’icône de fermeture X sur les dialogues, qui a reçu la balise aria-label “Close”.

 

Activer Aller au contenu

Quand les utilisateurs qui ne se servent que du clavier interagissent sur votre site internet, ils utilisent la touche TAB pour passer d’élément en élément. Cela veut également dire qu’à chaque fois qu’ils ouvrent une nouvelle page sur votre site internet, ils doivent parcourir tous les liens de votre menu de navigation principal (en-tête) pour accéder au contenu principal de la page. Activer Aller au contenudans Paramètres > Paramètres d’accessibilité leur permet de sauter cela facilement et de rendre leur expérience de navigation moins répétitive.

 

Techniquement, les options d’aller au contenu sont rendues possibles en ayant une propriété tabindex -1dans le code de navigation du site internet qui indique aux technologies d’assistance de ne pas tenir compte de cet élément particulier. Encore une fois, cela n’affectera pas la façon dont le site internet apparaît visuellement aux autres visiteurs.

 

À quoi ressemble l’expérience utilisateur ?

Quand un utilisateur de lecteur d’écran ouvre une nouvelle page sur le site internet, un élément “Passer la Navigation” apparaît automatiquement dans le coin supérieur gauche de la fenêtre du navigateur. C’est le premier élément actionnable que le lecteur d’écran va lire. Si un utilisateur clique sur sa barre d’espace quand il est sur l’élément, la navigation sera passée et le prochain élément de focus sera au début du contenu du corps de texte du site internet.

 

 

Activer l’Indication de focus

L’indication de focus est surlignée en couleur et indique quel élément est actuellement en focus sur le site internet. Cela permet d’indiquer clairement aux utilisateurs où ils se trouvent actuellement sur le site internet.