Démo accessibilité web : titres, liens et lecteur d’écran
Dans cette démo, je montre comment un lecteur d’écran peut utiliser les titres et les liens comme de vrais raccourcis de navigation.
Sur la version non accessible :
– les titres sont incohérents ;
– plusieurs niveaux sont mal utilisés ;
– la hiérarchie devient confuse ;
– les liens restent vagues, avec des intitulés comme « En savoir plus » ou « Cliquez ici ».
Sur la version corrigée :
– les titres sont structurés ;
– les niveaux sont logiques ;
– l’utilisateur peut passer de titre en titre ;
– les liens restent compréhensibles même lorsqu’ils sont lus seuls.
Un lecteur d’écran peut lister les titres ou les liens d’une page. Si les titres ne décrivent pas le contenu, ou si les liens sont vagues, l’utilisateur perd sa carte de navigation.
Cette vidéo fait partie d’une série de démonstrations autour de l’accessibilité web et du RGAA.
Transcription de la vidéo « Démo accessibilité web : titres, liens et lecteur d’écran »
Alors, je vais vous faire une petite démo de Voice Over qui est un lecteur inclus dans MacOS pour lire les pages web.
Donc ça va être les bases. Je ne maîtrise pas vraiment… complètement.
Donc en fait euh je crois que ça se lance comme ça.
Bienvenue dans Voice Over voiceover…..
Voilà.
Niveau d’entête 2 numéros offre. Vous êtes actuellement la page expose une hiérarchie niveau d’entête 1. Structure de titre.
Alors en fait, je vous explique euh donc en fait il peut lire la page entière comme ça. On peut passer d’un titre à un autre. Je crois que c’est H.
Donc en fait euh on dit tout le temps qu’il faut absolument bien euh structurer les pages avec des H1, des H2, des H3 qui sont dans les H2 et en fait ça aide
l’accessibilité. C’est un des critères de RGAA.
Et en fait quand vous lisez avec un lecteur donc euh il peut aller de titre à titre,
ça peut faciliter le fait enfin la lecture plus facile, on va dire par les déficients visuels.
Par exemple, je vous montre euh je crois que c’est comme ça.
Là, on est dans la liste lecteur des écrans
on est dans la liste des hn de la page.
Donc c’est pour ça qu’on dit toujours qu’il faut vraiment organiser ça.
Vous voyez en fait si c’est bien structuré là
c’est dans le H2 et la personne déficiente va comprendre la structure que en fait ce qu’il y a dans les H3 parle de la même chose que du titre supérieur.
Vous voyez, c’est pour ça qu’il faut organiser ses contenus de de la bonne façon et même il peut se balader normalement de titre en titre comme ça.
et après il peut déclencher la lecture de seulement ce paragraphe qui l’intéresse.
Je crois que c’est comme ça ou comme ça.
Voyez donc en fait le fait d’organiser ses contenus en HN euh ça fait un menu en fait pour les déficients
et même ils ont même un menu des liens les fameux liens qui doivent être explicites je crois que c’est comme ça.
Lien menu.
Donc en fait, si vous mettez « aller voir » ou c’était quoi « visiter » ou « en savoir plus » ça ne va pas servir,
vous voyez dans cette suite de lien
c’est l’une des raisons pour lesquelles on on on le critère RGAA dit qu’il faut que les liens soient explicites avec rien autour.
C’est fait pour faciliter la lecture en fait accélérée par les déficients visuels.
Ils ont accès à tous les liens d’un coup.
Donc non non non contextualisé, c’est un peu compliqué pour eux, vous voyez.
Et du coup, ils peuvent se balader normalement et ils peuvent accéder directement rapidement.
En fait, si c’est un site qui connaissent en fait, il peut très bien très bien accéder rapidement.
Et donc ça s’appelle je crois que le rotator
On repère dans le menu les grandes parties de l’écran : « pied de page »
Donc la structure en HN, voyez, elle est là.
C’est un il y en a il y a deux H1 donc ça va pas
