Hallo, und willkommen zurück, wenn wir zurück gehen und wir reden
wieder über die Gestaltung für Barrierefreiheit.
Also, da ich dir mehr und mehr Art coole,
ordentliche Dinge erzählt habe, fühle ich manchmal das Bedürfnis, dich wieder einzugliedern und
dich an die Grundlagen zu erinnern, wenn du deine Seite entwerfst.
Und ein Teil dieser Grundlagen ist, dass ich Sie daran erinnern möchte, dass der Inhalt Ihrer
Seite in Ihrem HTML sein sollte.
Was ich damit meine, ist, dass es wirklich verlockend sein kann, Inhalte über Farben
, Bilder usw. hinzuzufügen, Dinge, die Menschen vielleicht nicht wahrnehmen können, aber
Sie denken nicht unbedingt darüber nach, wenn
Sie als visueller Benutzer etwas dazu bringen.
Was ich also möchte, dass Sie beim Entwerfen Ihrer Seiten und beim Testen und Neuentwerfen und Testen und
Neuentwerfen tun, ist sich daran zu erinnern, was wir die POUR-Richtlinien nennen.
Wir möchten, dass Ihre Seiten wahrnehmbar, bedienbar, verständlich und robust sind.
Und das
wahrnehmbare und verständliche wirklich passt zu dem, was Sie mit Ihrem CSS tun.
Damit die
Dinge wahrnehmbar sind, möchte ich, dass du dich an ein paar Dinge erinnerst. Denken Sie
zunächst immer daran, Textalternativen für Ihre Bilder bereitzustellen.
Ihre Bilder sollten die Informationen nicht vollständig auf eigene Faust vermitteln.
Stellen Sie sicher, dass Sie Untertitel und Transkripte für Video und Audio bereitstellen.
Jetzt hat nicht jeder Zugriff auf Tools, um Ihnen dies
kostenlos zur Verfügung zu stellen, aber wo Sie arbeiten oder wo Sie zur Schule gehen, kann Ihnen helfen.
Stellen Sie sicher, dass Sie das richtige semantische Markup verwenden
, damit Inhalte auf unterschiedliche Weise dargestellt werden können.
Ich möchte, dass du das Nav-Tag verwendest.
Ich möchte, dass Sie das Figur-Tag anstelle des Bild-Tags verwenden.
Was dazu neigt, ist, dass Leute Code haben, den sie bereits geschrieben haben, und
sie wollen ein wenig faul sein und ihren HTML-Code nicht ändern müssen,
denn wenn sie es tun, müssen sie ihr CSS ändern.
Gehen Sie weiter und machen Sie diese Veränderung.
Es wird sich wirklich lohnen.
Machen Sie es
Benutzern leicht, sich zu verbinden, ihre Inhalte zu sehen, indem Sie wirklich guten Farbkontrast verwenden.
Sie wären sehr erstaunt zu erkennen, wie viele Menschen nicht in der Lage sind,
auf Informationen im Internet zugreifen, weil sie wirklich nicht sehen können, was Sie dort oben gemacht haben.
Lassen Sie uns als nächstes darüber sprechen, was es bedeutet, dass Ihre Seite funktionsfähig ist.
Was ich damit meine, ist, dass alle Funktionen, die in Ihre Seite gehen, über
die Tastatur verfügbar sein sollten.
Erwarten Sie nicht, dass jeder eine Maus benutzen wird, um über Ihre Seite zu gehen.
Erwarten Sie nicht, dass einige Dinge, es ist in Ordnung, dass
einige Dinge nur zugänglich sind, wenn Sie den Mauszeiger über sie bewegen.
Benutzer sollten die Kontrolle über das gesamte Timing und die Grenzen haben.
Also, wenn Sie diese Videos in Medien haben, stellen Sie sicher, dass Sie setzen es in, dass es
ein Bedienfeld für sie gibt, um die Dinge auszuschalten, schalten Sie sie nach unten, zurückspulen, usw.
Dies ist etwas, das ist wirklich wichtig für mich,
weil ich Familienmitglieder, die damit umgehen, ist, dass Sie sicherstellen wollen, dass Sie wollen, um sicherzustellen, dass Sie
dass Sie keine Art von Inhalt haben, der die ganze Zeit blinkt.
Ich spreche nicht über Flash, die Software.
Ich spreche von Dingen, die auf dem Bildschirm blinken werden und
der Benutzer nicht die Kontrolle hat, es auszuschalten.
Dies kann tatsächlich Anfälle verursachen.
Sie möchten Möglichkeiten bereitstellen, um Benutzern beim Navigieren durch Ihre Seite zu helfen.
Machen Sie es nicht zu einem Rätsel, wo sie irgendwie herausfinden müssen, wie sie
hinkommen, wohin sie wollen.
Es ist Ihre Aufgabe, es ihnen so einfach wie möglich zu machen, Inhalte zu finden und
herauszufinden, wo sie sich auf Ihrer Seite befinden.
Hier sind nur ein paar kurze Beispiele für verschiedene Möglichkeiten,
die Menschen manchmal auf das Internet zugreifen, sei es mit einem Stift, einer
Tastatur, einer Fernbedienung, einer Art zugänglicher Tastatur oder
sogar einer Art von Puff-Geräten, die sie verwenden können, um durch das Internet zu navigieren.
Lassen Sie uns als nächstes darüber sprechen, was ich meine, wenn eine Seite verständlich ist.
In der Regel möchten Sie Ihre Sprache kurz und süß auf Ihrer Seite halten.
Es sei denn, Sie sind Autor und zeigen Ihre Werke,
Leute werden nur ein paar Sekunden auf Ihrer Seite verbringen.
Machen Sie es ihnen leicht zu verstehen, was Sie zu sagen versuchen.
Wenn Sie Text mit Illustrationen, Videos
und anderen Formaten ergänzt haben, möchten Sie sicherstellen, dass Sie ein
gutes universelles Design verwenden, damit Benutzer darauf zugreifen können.
Navigation, Informationsstruktur, diese sollten wirklich
getrennt und erkennbar von Ihren Inhalten sein.
Machen Sie Menschen, machen Sie es einfacher für Menschen zu entkommen, zurück zu bestimmten Seiten usw.
Und schließlich, machen Sie Ihre Seiten auf vorhersehbare Weise funktionieren.
Dies kann eine Art verwirrende Sache sein, über die man nur reden kann, aber
wenn man jemals auf einer Website gewesen ist, wo man einfach nicht ganz herausfinden kann, wie man auf
die Seite zurückkommt, die Sie vor drei Seiten waren, macht es einfach für die Leute, das zu bekommen.
Schließlich helfen Sie Benutzern, Fehler zu vermeiden und zu korrigieren.
Es liegt an Ihnen, nicht an ihnen, herauszufinden, wie Sie auf die Informationen zugreifen können.
Schließlich ist die R, die robuste in der POUR.
Ist Ihre Website über verschiedene Technologien hinweg funktionsfähig, ein Smartphone,
Bildschirmlesegerät, Laptop, Stifte?
Wenn Sie mit mir arbeiten und
wir weiter gehen, werden wir in einigen späteren Klassen über Responsive Design sprechen.
Und das ist sicherzustellen, dass Ihre Seite am besten aussieht, die sie
auf verschiedenen Bildschirmgrößen aussehen kann.
Aber es ist mehr als Bildschirmgrößen, Sie müssen auch über Dinge nachdenken, wie wir gesagt,
die Stifte und die Bildschirmlesegeräte.
Es wird also Syntaxfehler geben, die Sie möglicherweise in Ihrem Code haben
, die nicht beeinflussen, wie die Seite für Sie aussieht.
Du bist reingegangen, es sieht toll aus, du bist wie, ich bin golden.
Sie müssen sich daran erinnern, dass diese Syntaxfehler andere Technologie durcheinander bringen können.
Stellen Sie also sicher, dass Sie Standards einhalten und
zukünftige Kompatibilität mit neuen Browsern sicherstellen.
Und der einfachste Weg, dies zu tun, ist, auf validator.w3c.org und auf
wave.webaim.org zu gehen, um Ihren Code zu validieren.
Es ist einfach, es ist schnell, und es wird Ihnen wirklich eine viel bessere Seite geben.
Also nur um zu überprüfen, ich bitte Sie nicht, große Fortschritte zu machen.
Ich will nur, dass du Kleinigkeiten richtig machst.
Und das beginnt wirklich mit den richtigen HTML-Tags.
Styling kann es tatsächlich für einige Leute schwieriger machen, auf die Informationen zuzugreifen, also
testen, testen, testen.
Lassen Sie die Leute auf Ihre Seite schauen. Lassen
Sie sie Ihnen Feedback geben.
Nimm es nicht persönlich.
Es geht nicht um deine Codierung.
Es geht darum, wirklich ein tolles Produkt zu machen.
Lassen Sie sich schließlich in die frühe
Gewohnheit, diese verschiedenen Eingabehilfen zu verwenden.
Sie sind für dich da, um dir das Leben leichter zu machen, nicht härter.
Schließlich ist die einzige Sache, mit der ich wirklich
zu kämpfen, mit Studenten, dass wir alle die coolen neuen Dinge tun wollen.
Aber coole neue Stile und coole neue Technologien
sollten nicht auf Kosten der Barrierefreiheit und die Leute, die Ihre Seite sehen, sein.
Also wirklich hoffe ich, dass, wenn Sie diesen Code lernen und
Sie ein wenig gestresst werden, um all diese coolen Dinge zu nutzen, die
Sie lernen, dass Sie sich daran erinnern, dass es nicht darum geht, die coolste Webseite zu haben.
Es geht darum, eine saubere Seite
zu haben, die wirklich die Informationen darstellt, die Sie im Internet erhalten möchten.
Viel Glück.