Eines der Dinge, die ich wirklich hoffe, dass Studenten tun werden, ist, ihren Code zu validieren.
Sie können es auf die Syntax validieren,
aber Sie können es auch auf Barrierefreiheit validieren.
Also, heute werde ich Ihnen zeigen, wie ich das WAVE Tool verwenden, um verschiedene Websites zu testen.
Ich ging hinein und ich überprüfe, um einige der Top 10 besuchten Websites für 2018 zu finden,
und ich fand Google,
Wikipedia, Reddit, Yahoo und Amazon.
Also, lassen Sie uns einfach ein wenig untersuchen,
wie gut jede dieser Seiten Barrierefreiheit adressiert.
Es gibt zwei Möglichkeiten, um zu testen.
Man ist, tatsächlich auf die Wave-Website zu gehen, die wave.webaim.org ist.
Von dieser Website können Sie tatsächlich kopieren und fügen Sie die Adresse jeder Seite, die Sie testen möchten,
und dies ist eine gute Möglichkeit, dies zu tun.
Persönlich, was ich getan habe, ist, dass ich vorangegangen bin und die Wave-Erweiterung zu meiner Seite hinzugefügt habe.
Also, wenn Sie hier schauen,
ist es möglich, wenn Sie Ihren Computer besitzen, um
eine Erweiterung herunterzuladen, die genau so aussieht hier drüben,
dieses kleine winzige W, und es macht mein Leben ein bisschen einfacher,
weil es mir erlaubt, einfach auf diesen Button zu klicken, anstatt auf die Wave-Website zu gehen.
Also, lassen Sie uns voran und schauen Sie sich einige dieser Seiten an.
Ich fange mit Google an.
Ich bin bei Google, ich klicke auf den „Wave-Validator“,
und es wird durchlaufen und auf Fehler überprüfen, die sehen könnten,
und in diesem Fall haben wir zwei Fehler.
In beiden Fällen sind die Fehler, dass wir leere Links haben.
Irgendwo auf dieser Seite
gibt es Links, die nicht wirklich zu irgendetwas verlinken.
Jetzt versuche ich, sie zu finden und Sie können sie hier nicht sehen,
aber das liegt daran, dass Wave nach all den verschiedenen Variationen Ihrer Seite sucht.
Also, während es auf dem Desktop gut aussehen könnte,
sieht es nicht immer gut aus, sagen
Sie, Ihr Telefon oder ein mobiles Tablet.
Google hat es ziemlich gut gemacht.
Gehen wir weiter und schauen Sie uns Wikipedia an.
Hier auf Wikipedia, ich werde es winken.
Manchmal dauert es eine Sekunde,
ich vergesse es immer und ich muss wirklich geduldig sein,
denn wenn man darauf klickt und dann wieder zu schnell
darauf klickt, schaltet man es ein und aus.
Also, ich klickte auf Welle,
ich werde für die paar Sekunden warten,
und Sie können sehen, dass wieder, Wikipedia,
wie Google, hat eine ziemlich gute Arbeit gemacht, um Barrierefreiheit zu adressieren.
Sie haben eine leere Schaltfläche und was sie als fehlende Formularbeschriftungen bezeichnen.
Was das bedeutet, ist hier unten,
es gibt einen Ort, an dem wir etwas eingeben möchten.
Aber jemand, der sehbehindert ist,
weiß vielleicht nicht genau, was du willst, dass ich eintippe?
Also, beide Knöpfe hier sagen: „Weißt du was?
Es wäre eine wirklich gute Idee, wenn Sie eine Formularbeschriftung hinzufügen würden,
damit jemand weiß, was er eingibt.“
Die Formularbezeichnung hier könnte eine Suchabfrage sein,
und die Formularbeschriftung auf dieser blauen Schaltfläche könnte mich getroffen werden, um die Suche durchzuführen.
Trotzdem, drei sind wirklich gut.
Also, gehen wir zu Reddit.
Reddit ist eine sehr beliebte Seite,
viele Leute benutzen es, um sich besser über sich selbst zu fühlen,
weil sie denken, wer diese Frage stellen würde,
und andere Leute gehen hier aus echten Gründen, um eine Information herauszufinden.
Es ist so ein beliebter Ort.
Ich hoffe wirklich, dass es zugänglich ist.
Aber laut Wave auf ihrer letzten Wiedergabe hatte Reddit, lasst uns einen Blick werfen.
Alles klar, und von hier aus können wir sehen, dass Reddit 73 Fehler hat. Es ist
nicht überraschend, denn es gibt so viele benutzergesteuerte Inhalte.
Es gibt viele Leute, die Bilder hochladen oder Dinge eingeben,
und sie wissen nichts über Barrierefreiheit.
Sie wissen nichts über Dinge wie: „Wow,
ich sollte wirklich meinen Alt-Text zu diesen verschiedenen Bildern hinzufügen.“
Sonst wird es schwierig für die Menschen, auf sie zuzugreifen.
Oder Sie können hier runter schauen.
In der Tat ist es genau das, was es ist.
Es fehlt hier Alternativtext.
Hoppla, fehlender alternativer Text hier und fehlender alternativer Text.
Viele und viele fehlende Alternativtext.
Die andere Sache, die Wave wirklich versucht, Leute zu vermeiden,
ist, leere Links zu haben.
Diese Idee von Links, die Sie nicht wissen, wohin sie gehen,
und sie mögen auch wirklich keine redundanten Links.
Es macht es nur schwer für Menschen, die den Computer über die Tastatur verwenden,
so oft klicken zu müssen, um nur auf die gleichen Informationen immer und immer wieder zu bekommen.
Also, leider Reddit nicht großartig für Barrierefreiheit,
aber wirklich gut für mein Beispiel hier in diesem Video zum Überprüfen Ihrer Seiten.
Die nächste, die ich tun werde, ist,
sagte gerade Yahoo im Allgemeinen.
Also habe ich einen Yahoo Sports ausgesucht.
Wir können einen Blick werfen und sehen, wie diese Sportseite läuft.
Nun, im Gegensatz zu Reddit, ist dies
professionell kommerzielle Software-System
, wo es Leute, die bezahlt werden, um den Inhalt hochzuladen.
Wir hoffen, dass es hier ein bisschen mehr Zugänglichkeit gibt.
Also, hier auf Yahoo Sports,
können Sie sehen, dass ich 44 Fehler habe.
Also, das ist nur ein Blick auf die allgemeinen Dinge, die sie vermissen.
Nun, es ist alternativer Text
, der lustig ist, wenn man es anschaut,
man sieht, dass sie sagen: „Ooh,
viele Orte, an denen man Alternativtext fehlt,
und das muss genau hier bedeuten, jede dieser kleinen Partituren ist kein Text,
es ist eigentlich ein Bild.“
Das bringt Menschen in eine Menge Ärger.
Manchmal möchten Sie ein Bild auf den Bildschirm stellen und es ist wirklich nicht dekorativ,
es erzählt eine komplette Geschichte,
und in diesem Fall ist alternativer Text so wichtig.
Andernfalls können Menschen mit Sehbehinderung
möglicherweise nicht sehen, was die Punktzahl für die verschiedenen Spiele ist.
Alles klar, das Letzte, was ich tun werde, ist Amazon,
und ich denke, ich mache das direkt aus dem WAVE Tool.
Also, ich gehe hier, ich habe in Amazon.com getippt,
und Amazon macht es nicht zu schlecht.
Sie können sehen, dass sie die gleichen Probleme haben wie die meisten Menschen.
Es kommt immer auf diesen fehlenden alternativen Text an, genau da.
Dafür gibt es ein paar Gründe.
Auf einigen Seiten lädt die Öffentlichkeit die Bilder hoch,
und sie wissen nichts über alternative SMS,
also müssen wir sie darüber informieren.
Manchmal liegt es daran, dass wir Programme geschrieben haben, um die Websites zu aktualisieren,
und leider sind Computer nicht sehr gut darin, zu
wissen, welche alternativen Texte sie zu Bildern hinzufügen sollten.
Leider ist es auch, weil manche Leute es wissen und es ihnen einfach egal ist,
denken, dass es so wichtig ist.
Also, so weit wie möglich,
möchte ich, dass Sie syntaktische und semantische Hinweise zu Ihrem gesamten Code hinzufügen.
Stellen Sie sicher, dass Menschen, die es betrachten oder
hören, die größtmögliche Erfahrung haben.