Une des choses que j'espère vraiment que les étudiants vont faire est de valider leur code.
Vous pouvez le valider pour la syntaxe,
mais vous pouvez également le valider pour l'accessibilité.
Donc, aujourd'hui, je vais vous montrer comment j'utilise l'outil WAVE pour tester différents sites.
Je suis entré et je vérifie pour trouver certains des 10 meilleurs sites visités pour 2018,
et j'ai trouvé Google,
Wikipedia, Reddit, Yahoo et, Amazon.
Donc, faisons juste une petite enquête sur la
façon dont chacun de ces sites aborde l'accessibilité.
Il y a deux façons de tester.
L' un d'eux est d'aller sur le site Wave, qui est wave.webaim.org.
À partir de ce site, vous pouvez copier et coller l'adresse de n'importe quelle page que vous voulez tester,
et c'est un excellent moyen de le faire.
Personnellement, ce que j'ai fait, c'est que je suis allé de l'avant et j'ai ajouté l'extension de vague à ma page.
Donc, si vous regardez ici,
il est possible si vous possédez votre ordinateur de télécharger
une extension qui ressemble à ça ici,
ce petit W minuscule, et ça me rend la vie un peu plus facile,
car ça me permet de cliquer simplement sur ce bouton plutôt que d'aller sur le site Wave.
Alors, allons de l'avant et regardons certains de ces sites.
Je vais commencer par Google.
Je suis à Google, je vais cliquer sur le « Validateur Wave »,
et il va passer par et vérifier les erreurs qui pourraient voir,
et dans ce cas, nous avons deux erreurs.
Dans les deux cas, les erreurs sont que nous avons des liens vides.
Quelque part sur cette page,
il y a des liens qui ne font pas vraiment de lien vers quoi que ce soit.
Maintenant, j'essaie de les trouver et vous ne pouvez pas les voir ici,
mais c'est parce que Wave vérifie toutes les différentes variations de votre page.
Donc, bien qu'il puisse paraître bien sur le bureau,
il n'a pas toujours l'air bien sur disons,
votre téléphone ou une tablette mobile.
Google s'est plutôt bien passé.
Allons-y et regardons Wikipédia.
Ici, sur Wikipédia, je vais l'agiter.
Parfois, cela prend une seconde,
j'oublie toujours et j'ai besoin d'être vraiment patient,
parce que si vous cliquez dessus et puis vous cliquez dessus trop rapidement,
c'est ainsi que vous l'allumez et éteignez.
Donc, j'ai cliqué sur Wave,
je vais attendre quelques secondes de plus,
et vous pouvez voir qu'une fois de plus, Wikipédia,
comme Google, a fait un très bon travail pour aborder l'accessibilité.
Ils ont un bouton vide et ce qu'ils appellent des étiquettes de formulaire manquantes.
Ce que ça veut dire, c'est ici,
il y a un endroit où ils aimeraient que nous saisissions quelque chose.
Mais quelqu'un qui a une déficience visuelle pourrait
ne pas savoir exactement ce que vous voulez que je saisisse ?
Donc, ces deux petits boutons disent : « Tu sais quoi ?
Ce serait vraiment une bonne idée si vous ajoutiez une étiquette de formulaire,
afin que quelqu'un sache ce que c'est qu'il saisit. »
L' étiquette de formulaire ici peut être requête de recherche,
et l'étiquette de formulaire sur ce bouton bleu peut être frappé moi pour effectuer la recherche.
Pourtant, trois, c'est vraiment bon.
Alors, allons à Reddit.
Reddit est un site très populaire,
beaucoup de gens l'utilisent pour se sentir mieux sur eux-mêmes,
parce qu'ils pensent qui pourrait poser cette question,
et d'autres personnes vont ici pour de vraies raisons pour trouver une information.
C' est un site si populaire.
J' espère vraiment que ce sera accessible.
Mais selon Wave sur leur dernier rendu que Reddit avait, jetons un coup d'oeil.
D' accord, et d'ici nous pouvons voir que Reddit a 73 erreurs.
Sans surprise, car il y a tellement de contenu piloté par les utilisateurs.
Il y a beaucoup de gens qui téléchargent des photos ou tapent des choses,
et ils ne connaissent pas l'accessibilité.
Ils ne savent pas de choses comme, « Wow,
je devrais vraiment ajouter mon texte alt à ces différentes images. »
Sinon, il sera difficile pour les gens d'y accéder.
Ou tu peux regarder en bas.
En fait, c'est exactement ce que c'est.
Il manque un texte alternatif ici.
Oups, texte alternatif manquant ici et texte alternatif manquant.
Beaucoup et beaucoup de texte alternatif manquant.
L' autre chose que Wave essaie vraiment d'amener les gens à éviter
est d'avoir des liens vides.
Cette idée de liens que vous ne savez pas où ils vont,
et ils n'aiment pas vraiment les liens redondants.
Il est juste difficile pour les personnes qui utilisent l'ordinateur via le clavier
d'avoir à cliquer autant de fois pour obtenir la même information encore et encore.
Donc, malheureusement, Reddit pas grand pour l'accessibilité,
mais vraiment bon pour mon exemple ici dans cette vidéo sur la vérification de vos pages.
La prochaine que je vais faire est,
vient de dire Yahoo en général.
Alors, j'ai choisi un Yahoo Sports.
Nous pouvons jeter un coup d'oeil et voir comment va ce côté sport.
Maintenant, contrairement à Reddit, c'est un
système logiciel professionnel commercial
où ce sont les gens qui sont payés pour télécharger le contenu.
Donc, nous espérons qu'il y a un peu plus d'accessibilité ici.
Donc, ici sur Yahoo Sports,
vous pouvez voir que j'ai 44 erreurs.
Donc, c'est juste jeter un oeil à ce que les choses générales leur manquent.
Eh bien, c'est un texte alternatif,
ce qui est drôle si vous le regardez,
vous pouvez voir qu'ils disent, « Ooh,
beaucoup d'endroits vous manquent du texte alternatif,
et cela doit signifier ici que chacun de ces petits scores n'est pas du texte,
c'est en fait une image. »
Cela amène les gens à beaucoup d'ennuis.
Parfois, vous voulez mettre une image sur l'écran et ce n'est vraiment pas décoratif,
c'est raconter une histoire complète,
et dans ce cas, le texte alternatif est si important.
Sinon, les personnes ayant une déficience visuelle pourraient
ne pas être en mesure de voir quel est le score pour les différents jeux.
Très bien, la dernière que je vais faire est Amazon,
et je pense que je vais le faire directement à partir de l'outil WAVE.
Donc, je vais ici, j'ai tapé sur Amazon.com,
et Amazon ne fait pas trop mal.
Vous pouvez voir qu'ils ont les mêmes problèmes que la plupart des gens.
Il s'agit toujours de ce texte alternatif manquant, juste là.
Il y a quelques raisons à ça.
Sur certains sites, le public télécharge les images,
et il ne connaît pas les textes alternatifs,
donc nous devons les éduquer à ce sujet.
Parfois, c'est parce que nous avons écrit des programmes pour mettre à jour les sites,
et malheureusement, les ordinateurs ne
savent pas très bien quels textes alternatifs ils devraient ajouter aux images.
Malheureusement, c'est aussi parce que certaines personnes le savent et qu'elles ne s'en soucient pas vraiment,
pensent que c'est si important.
Donc, autant que possible,
je veux que vous ajoutiez des indices syntaxiques et sémantiques à tout votre code.
Assurez-vous que les gens qui la regardent ou l'
écoutent ont la plus grande expérience possible.