Hallo, willkommen zurück.
In diesem Vortrag werden wir über barrierefreie Navigation sprechen.
Ich weiß, dass es sich bei diesem Kurs hauptsächlich um CSS handelt, aber ich mag es,
dich an die verschiedenen Dinge zu erinnern,
über die du beim Styling deiner Seiten nachdenken musst.
Navigation ist wirklich der kritischste Aspekt der Barrierefreiheit.
Wenn Leute nicht durch Ihre Seite navigieren und zu den Inhalten gelangen können, die sie wirklich brauchen
, um zu gelangen, dann haben Sie wirklich nur ihre Zeit und einige von Ihnen verschwendet.
Also, zitierte Benutzer haben diese Art von bewährten und wahren Dingen, nach denen sie
auf einer Seite suchen.
Sie wissen, was ein Suchfeld ist.
Sie wissen, wohin das Banner normalerweise hingeht.
Wo sich die Hauptnavigation befindet.
Und es ist nicht verwunderlich für sie, dass oft der Hauptinhalt,
in dem, was wir den Inhalt gut nennen, unten in einer Seite versteckt ist.
Und das wissen wir, weil wir es sehen können, sobald wir den Browser öffnen.
Aber für blinde oder schwache Visions-Benutzer müssen sie sich wirklich
auf die richtige Codierung der Seite verlassen, um zu dem zu gelangen, was sie wollen.
Und nicht nur die richtige Codierung, aber es
gibt viele stilistische Probleme, über die Sie nachdenken müssen, wenn Sie dies tun.
Also, was, wenn du es nicht sehen kannst?
Der erste Ort, an dem Sie Informationen erhalten, ist aus dem Titel der Seite.
Sie möchten sicherstellen, dass Ihr Titel kurz ist, aber
auch den Benutzer wissen lassen, wie sich diese Seite von anderen Seiten auf Ihrer Website unterscheidet.
Als Nächstes
ermöglicht die korrekte Platzierung von Überschriften und die Art dieser Hierarchie Bildschirmbenutzer, die verschiedenen Navigationslinks zu überspringen und
direkt zu dem zu gelangen, wonach sie suchen.
Ich denke, ihr seid alle auf Seiten gewesen, wo es sich anfühlt, als müsst ihr an einen Ort gehen und
dann einem anderen folgen und einem anderen folgen.
Und das kann wirklich nervig und irritierend sein.
Vor allem, wenn es wirklich wichtig ist, dass Ihre Maus genau an der richtigen Stelle ist.
Also wollen wir sicherstellen, dass wir Bildschirmlesegeräte und
andere Benutzer direkt dorthin überspringen lassen, wo sie gehen wollen.
Wir möchten auch über Ihre Links nachdenken.
Denn wenn Sie die Links zu den verschiedenen Websites auf Ihrer Seite haben,
sind diese Beschreibungen alles, was Benutzer für sie haben.
Du willst also nicht „Klick mich“, „Folge mir hier“ verwenden.
Sie möchten gute Informationen in diesen Linkbeschreibungen geben.
Als nächstes müssen wir über die richtige Überschriftenhierarchie sprechen, okay?
Überschriften müssen verschachtelt werden, um wirklich Struktur bereitzustellen, so dass
Sie keine h3-Überschriften haben sollten, bevor Sie h2-Überschriften haben.
Sie sollten nur eine h1-Überschrift haben.
Sie sollten nicht von h2 zu h4 springen.
Stattdessen möchten Sie wirklich einer bestimmten Art von Ordnung folgen
, damit die Leute erkennen können, dass es Bedeutung hinter Ihrer Seite gibt.
Hier ist also ein Beispiel hier.
Ich habe meine einzelne h1-Überschrift, und dann auf dieser Seite
kann ich mir vorstellen, dass ich drei Abschnitte habe.
Jeder dieser Abschnitte hat eine h2-Überschrift im Inneren.
Und in meinem ersten Abschnitt könnte es sein, dass ich diese bestimmten kleinen Aufzählungspunkte
oder andere Punkte habe, die ich mache, wo sie wichtig genug sind, dass ich entschieden habe, hey,
ich werde h3 verwenden, um zu bedeuten, dass dies ein weiterer Unterabschnitt in meinem Abschnitt ist.
Wo Leute in Schwierigkeiten geraten und was Sie die ganze Zeit sehen, ist, dass die Leute entscheiden,
Ich mag das Aussehen dieser h2 Schriftart wirklich.
Ich mag, wie groß der Text ist.
Ich mag, wie die Art von Schriftart sie verwenden, also werde ich nur so
viele Dinge wie möglich in die h2-Schriftart einfügen, um mir gefällt, wie es aussieht.
Und sie denken nicht an die Semantik.
Dasselbe passiert mit der h3-Schriftart.
Sie gehen auf die Seite von jemandem und finden heraus, dass es überhaupt keine h2-Schriftarten gibt.
Stattdessen sind es alle h3-Elemente, und
sie haben das nur getan, weil sie das Aussehen dieses bestimmten Tags mögen.
Also jetzt, hier kommt das Styling ins Spiel,
deshalb spreche ich darüber in der Styling-Klasse.
Ist das jetzt wissen Sie, dass Sie stattdessen, wenn Sie das Aussehen dieser h3-Überschrift wirklich mögen,
anstatt das Tag zu verwenden, andere Tags stylen sollten, um diesen Look zu replizieren.
Finden Sie heraus, welche Schriftfamilie sie verwenden.
Finden Sie heraus, welche Schriftgröße.
Wiederholen Sie es einfach.
Verwenden Sie keine Tags, nur weil Sie so mögen, wie sie aussehen.
Die andere Sache, die Sie denken können, um die Navigation zu helfen,
ist diese Idee von Off-Page-Überschriften.
Es ist nützlich zu tun, wenn Sie dem Bildschirmlese-Benutzer eine Art
Navigationshilfe geben möchten, aber Sie wollen es nicht richtig auf die Seite setzen und
Ihre sehenden Benutzer müssen sich auch ständig damit beschäftigen.
Also, lassen Sie mich Ihnen ein Beispiel dafür geben.
Wir werden Styling-Blätter verwenden, um im Grunde etwas abseits zu setzen,
wir haben ihm den Namen Offpage gegeben, und wir haben gesagt
, hey, ich will das in einer Position platzieren, die absolut nach links von -1000px.
Du wirst also wissen, dass das ziemlich weit weg ist.
Ich habe hier die University of Michigan Human Resources Seite.
Und wenn du in die Nähe der Spitze schaust, gibt es wirklich nichts,
hier oben in der oberen Ecke.
Aber was ich tun werde, ist, dass ich auf Tab gehe.
Und, was Tab tut, ist es bringt das nächste Element in den Fokus.
Also, gehen Sie voran und Tab, da.
Und Sie können sehen,
dass jetzt, es gibt diese neue Sache hier, die sagt Überspringen zum Hauptinhalt.
Wenn ich darauf klicke, gehe ich den ganzen Weg nach unten, und ich konnte
viele dieser zusätzlichen Informationen überspringen, die sie nicht wirklich sehen mussten.
Es war mehr nur Marketing und andere Dinge wie das.
Also, diese verschiedenen Off-Screen-Navigationslinks sind äußerst nützlich, um Menschen
zu ermöglichen, sofort zu dem zu springen, was sie wollen zu bekommen.
Aber mit Styling
haben wir es von der Seite genommen, dass Sie es nur verwenden, wenn Sie wirklich wollen.
Eines der Dinge, die ich erwähnen wollte, ist, dass Sie, wenn Sie Off-Page-Überschriften ausführen,
nicht {display: none} oder {visibility: hidden} verwenden.
Diese verwirren sich wirklich nur irgendwie mit dem Code und machen es für
Bildschirmlesegeräte oder andere Leute, die Ihren Code ansehen, sehr schwierig, zu sehen, was los ist.
Zu Beginn der Vorlesung habe ich erwähnt, dass aussagekräftiger Linktext
für die
Barrierefreiheit sehr wichtig ist, da Screenreader alle Links finden und auflisten können.
Was Sie vielleicht nicht erkennen, ist die Art und Weise, wie diese Links angezeigt werden,
möglicherweise nicht in der Art, wie Sie es erwarten.
Sie können also außerhalb des Kontexts sein.
Möglicherweise können Sie nur über Tabbing auf sie zugreifen oder
sie werden in einer Liste angezeigt.
Also, Sie wollen wirklich vermeiden, Dinge wie klicken Sie hier, lesen Sie dies und mehr.
Der Grund dafür
ist, dass vielleicht der einzige Kontext, den einige Leute bekommen, um zu den Links zu gehen.
Bitte verwenden Sie die URL nicht als Linkbeschreibung.
Es ist ziemlich üblich, auf eine Website zu gehen, und Sie können sehen, klicken Sie hier, und
sie haben die gesamte URL, www.umich.edu/etc.
Es mag sehr beschreibend aussehen, aber wenn Sie auf die Beschreibung hören müssen,
kann es sehr verwirrend sein.
Stattdessen, es sei denn, Sie haben eine sehr kurze URL, gehen Sie voran und
verwenden Sie eine Art Textbeschreibung.
Also, nur um zu überprüfen, lassen Sie uns darüber nachdenken, was wir heute gelernt haben.
Wenn Sie mit der Erstellung Ihrer Seite fertig sind, reicht es nicht aus, dass sie gut aussieht.
Sie müssen darüber nachdenken, wie einfach es ist, auf Ihrer Seite zu navigieren.
Denken Sie darüber nach, was passieren würde, wenn die Farben nicht vorhanden wären oder
wenn jemand nur mit der Maus zu Ihrer Seite navigieren könnte.
Also will ich Sie wirklich schnell machen, wovon ich hier rede.
Hier ist eine alte Seite von mir, und unten habe ich die University of Michigan.
Ich will dir nur zeigen, was passiert, wenn ich den Stil wegnehme.
Die Seite jetzt, Sie können nicht einmal den Text mehr sehen.
Dies sind die kleinen Dinge, die Sie nie bemerken würden,
es sei denn, Sie haben Ihre Seite sowohl mit als auch ohne Styling überprüft.
Wenn Sie also Ihre Seite planen, stellen Sie sicher, dass Sie für alle planen.
Nutzen Sie die Überschriften sehr.
Nutzen Sie den Linktext sehr gut.
Stellen Sie sicher, dass Sie den Benutzern die Tools zur Verfügung stellen, die sie benötigen, um
erfolgreich auf Ihrer Seite zu navigieren.
Danke.