Transkripte
1. Einführung: Willkommen zu diesem Kurs zur Barrierefreiheit von Web-Design. Dies ist ein wunderbares Thema, mit dem man sich beschäftigen muss ,
denn dadurch machen wir
nicht nur das Internet zu einem besseren, faireren Ort, sondern wir bieten auch eine Menge Vorteile, wie die Öffnung unserer Websites für ganze neue Märkte und ganz neue Kunden zu machen, die Erfahrung für alle besser zu verbessern. Unsere Konversionsraten verbessern unsere Benutzerfreundlichkeit. Egal, ob Sie sich diese Quintessenz ansehen oder ob Sie nur auf der Suche nach einer wirklich wertvollen Fähigkeit für Ihren Lebenslauf sind, das ist
auch wichtig , denn die Mitarbeiter wollen heutzutage wissen, dass die Dinge zugänglich machen, weil sie wissen, wie wichtig das ist. Und sie suchen danach. Und das fragen sie in Interviews. Ich bin Chris Ich bin ein Software-Berater auf Nicht seit 10 15 Jahren arbeitete jetzt für viele internationale Marken, ihnen
helfen, ihre Websites zugänglicher zu machen. Und ich bin auch ein qualifizierter Psychologe. Also könnte denken, das ist ein bisschen wie eine Nicken Kombination. Aber ich liebe es herauszufinden, wie Computer funktionieren, ich liebe es herauszufinden, wie Menschen daran arbeiten, alles zusammenzubringen , so dass
es wirklich aufregend ist, also kann ich es kaum erwarten, Ihnen all das Material beizubringen, das sich in diesem Kurs erholt. Vergessen Sie nicht, das Kostenhandbuch herunterzuladen, damit Sie zusammen mit den Video-Lektionen auf lesen können . Ich sehe dich in der ersten Lektion.
2. Quick: Lassen Sie uns einige der Möglichkeiten, die Sie wirklich schnell mit Barrierefreiheit beginnen können auf der ersten ist nur ein Bildschirmlesegerät zu aktivieren und zu versuchen, Ihre Website zu verwenden. Wenn Sie dies tun, viel Zeit, erkennen
Sie wirklich schnell die Probleme, die sie sind. Also, wenn Sie unter Windows sind, können
Sie Jaws verwenden, das ist Ah, kostenpflichtige Stück Software. Aber Sie können eine kostenlose Testversion bekommen, oder Sie können die etwas weniger beliebt verwenden, definitiv an Popularität gewinnt. Neid das A, das ist völlig kostenlos. Und wenn Sie auf der neueren Version von Windows sind, kommt
es jetzt mit einem integrierten Bildschirmlesegerät namens Sprachausgabe. Wenn Sie auf Mac sind, dann hat das eine integrierte Bildschirmlesegerät namens Voice Over You auf Lenox Areas Walker und Lennon Screen Reader. Und wenn Sie Android wollen, gibt es eine eingebaute Bildschirmlesegerät namens Rate genannt Talk Back. Also diese wirklich einfach zu bekommen, halten Sie sich im nächsten Modul auf einen tiefen Sprung in einige von ihnen und wie sie funktionieren. Aber Sie können sie herunterladen, installieren und einfach anfangen, ein Spiel mit ihnen oder einigen von ihnen in nur eingebaut, so ist es eine gute Möglichkeit, um loszulegen. Zweitens können
Sie auch eine ähnliche Sache mit einer Reihe von Online-Tools tun, einschließlich Welle, die nur ermöglicht es Ihnen, in einer Website setzen Sie l auf. Es wird Ihnen dann zeigen, dass Website auf all die Dinge, die Dinge möglicherweise ein
Problem sein könnten. Und so wirklich, ohne Teoh alles über Barrierefreiheit lernen zu lassen, können
Sie einfach anfangen, Dinge zu reparieren, weil ich Ihnen sagen werde, was kommt, haben auch eine
kurze Liste von Dingen gemacht , die ich viel sehe, die mit der Verbesserung tun könnte, Also würde es ein Top für Hoffnung sein. Aber es gibt definitiv sechs. Nummer eins ist die Überschrift der Hierarchie. Sie wollen ein Ziel hassen oben auf der Seite und dann will es kaskadieren. Sie können mehrere Hitch zwei haben, aber dann wollen Sie frei hassen und hassen für auf all diese. Wenn Sie semantische Meetings haben wollen, gehen Sie in all diese in mehr Details in der inklusiven Design-Modul. Aber nur um Ihnen einen schnellen Kopf nach oben Ihre Überschriften zu geben, eine Kaskade schön hinunter Unzureichender Farbkontrast zwischen Ihrem Vordergrund im Hintergrund, so dass Text schwer zu lesen Fokusprobleme, wenn es ein Motil oder ein interaktives Element gibt. Wenn Sie ein Bildschirmlesegerät verwenden oder auf der Website über Tastatur und nicht mit der
Maus navigieren , können Sie diese Modelle ein- und aussteigen? Nummer vier ist Formulareingaben zu Beschriftungen, auch wenn Sie die Beschriftungen ausgeblendet haben. Es ist wirklich wichtig, diese Etikettenluft zu haben, um den Leuten zu sagen, was los ist, weil es offensichtlich ist, wenn aus einem visuellen Kontext, aber es ist nicht offensichtlich, wenn Sie nicht sehen können. Daher ist es wirklich wichtig, diese Etiketten in ihren Tasten der Nummer fünf zu nahe
beieinander zu haben . Wir denken oft an Barrierefreiheit als ein Problem von Menschen, die nicht sehen können, weil
Bildschirmlesegeräte der vorherrschenden Art und Weise, wie wir Computer zugänglicher machen. Aber es gibt auch motorische Beeinträchtigungen oder einfach nur im Allgemeinen, Menschen mit großen Finger versuchen, für mobile Geräte zu tippen. Also müssen wir diese Klickbereiche schön und groß machen,
so dass, wenn Sie keine perfekten motorischen Fähigkeiten haben, können
Sie immer noch diese Tasten drücken, ohne auf die daneben zu drücken. Dann schließlich ist
Nummer sechs Videoinhalte ohne Untertitel . Idealerweise wir
jedes Mal, wenn
wir Videoinhalte bereitstellen möchtenwir
jedes Mal, wenn
wir Videoinhalte bereitstellen, es für Menschen, die Hörschwierigkeiten haben, auch Dinge wie Podcasts oder einfach Audio-Streams können auch ein Transkript haben, so dass Menschen, die nicht hören können, oder Menschen , die nicht hören wollen, können stattdessen einfach das Transkript lesen. Und wir werden in all diesen Themen im inklusiven Designmodul näher eingehen. Aber es gibt ein paar Ideen, nur um dich anzufangen.
3. Accessibility: in diesem Modul werden einige der Tools, die Sie verwenden können, um Ihnen helfen, Probleme mit der
Barrierefreiheit auf erfüllt Ihre Entwürfe besser zugänglich zu identifizieren . Wir fangen damit an, weil es Ihnen wirklich helfen wird, schnell loszulegen. Wenn Sie diese Tools in bekommen, werden
sie Ihnen zeigen, wie Sie Dinge sofort beheben können, damit Sie beginnen können, Ihre
Website heute besser zu machen .
4. Leuchtturm: Licht wird sich Life House ansehen, das ein in den Google Chrome Web-Browser eingebautes Tool ist. Lassen Sie uns beginnen, indem Sie zu einer Website navigieren, die wir bestellen möchten, und die Knoten, um darauf zuzugreifen . Wir müssen Chrome-Entwickler-Tools öffnen, um dies zu tun. Wir können nicht einmal schreiben lecken Hit spect oder wenn wir nur F 12 auf der Tastatur passen und dann wahrscheinlich starten diese Elemente Tablet und werden so. Aber wenn wir zur Bestellung gehen, ist
es hier. Es wird diesen Auditschrei eines kleinen Lichthauses hervorrufen, und wir können wählen, wo wir es als mobiles oder Desktop-Gerät bestellen möchten. Wir können wählen, was wir bestellen wollen und wie wir die Verbindung
auch simulieren wollen . Also in diesem Fall können
wir es auf ein Telefon von für G simulieren,
und dann, wenn wir Pete von all seinen Optionen haben, können
wir einfach diese Bandreihenfolge treffen. Es ist eine Schaltfläche, und dies ist nicht speziell für die Barrierefreiheit. Auch Leistung und ASIO und gibt uns viele wirklich nützliche Informationen. Jets dauert eine Minute zu laufen, während es verschiedene Verbindungen simuliert, und dann wird es Ihnen eine Punktzahl von 100 für jedes dieser Elemente geben. So Leistung nicht so gut, aber Zugänglichkeit fto läuft wirklich gut. Also lassen Sie uns nach unten scrollen und sehen, was der Bericht Saiz. Hier sind wir in überschüssiger Fähigkeit, also ist es besonders dieses Problem gekennzeichnet. Es sagt, dass wir nicht genug Kontrast zwischen Vordergrund und Hintergrund haben,
und wenn wir das öffnen, wird
es sogar zu den Elementen nehmen und uns hier sagen, dass dies die Telefonnummer ist. Dies wird also unten unten auf der Seite hier sein, wo es sagt, dass es genug
Kontrast gab . Gerade fair genug, Sie gehen zurück zu der Reihenfolge es und es gibt auch eine Liste von all den Dingen, die es in der
Vergangenheit betrachtet . Zum Beispiel schreibt
der Bereich die Rolle,
Attribute, Attribute, Ideen sind einzigartig, wir können all die guten Dinge sehen, die wir getan haben, und auch alle Funktionen sind nur bekannt zugänglich, nicht relevant für diese Website, weil es einfach keine auf dieser Seite angezeigt wird auch hier. So ist dies eine wirklich nützliche Kinder, um einen schnellen Überblick über alle Probleme zu bekommen, und es wird Sie zu den Problemen als auch, und es gibt Ihnen auch, dass Performance-Tipps, wenn wir zur Leistung bekommen, gibt uns all diese Ratschläge, wie Zehe auch die Leistung steigern. Es ist also ein wirklich nützliches Werkzeug. Es gibt nur eine Menge Informationen. Freut mich schnell.
5. Voiceover: in dieser Lektion werden
wir uns ansehen, wie man Voice-Over verwendet, das ist der eingebaute Reiter, der mit Mac OS geliefert wird. Andi. Es spricht mit viel, sagte. Es könnte ein paar Reden geben, während ich rede und über Gespräche lebe. Aber um loszulegen, müssen
wir nur den Befehl drücken. Fünf auf alternative Stimme von auf Voiceover auf Chrome New Tab, Google Chrome Fenster Adresse und Suchleiste Bearbeiten Text hat Tastaturfokus und dann können wir Lincoln Address beigetreten
sagen. Blei sank. City Clinic Co. UK hat keine Web-Inhalte und nie umgehen, wir müssen die Stimme eines modifizierenden Schlüssels standardmäßig verwenden, ihre Steuerungsoption. Also halten wir die fest, dann tun, was wir wollen. Manchmal müssen wir uns auch hier bewegen. Es ist nicht so, als würde JoJos Löhne nach oben und unten drücken. Das sind ziemlich viele Schlüssel, die man halten muss. Aber für einen Anfang, wir können nur halten die Stimme der Tasten ändern und dann scrollen Chris Quote führt, Angstklinik, private Therapie und l s ein, wo Inhalte Sie derzeit auf. Ob komisch Verschiebung ging in den Webbereich. Drücken Sie die Steuerungsoption. Verschieben Sie nach unten. Pfeil Stimme über ist ziemlich gut, wie Sie sehen können, dass, um Ihnen die Richtung der Dinge, die Sie jetzt brauchen, haben
wir in den Web-Inhalt fallen gelassen, und wir vermittelten durch die Seite führt Angstklinik Crume hat Neues Fenster Weniger überspringen Hauptinhalt, ganz ein paar unbequem auf den Link, um diesen Link zu klicken. Drücken Sie die Steuerungsoption Raum, den Sie sehen, dass Websites tun, ist sie haben einen versteckten Sprung zum Hauptinhaltslink in der Nähe der Spitze. Der wird nur angezeigt, wenn Sie ihm den Fokus geben, sodass er sofort angezeigt wird,
wenn Sie mit der Tastatur
oder mit einem Bildschirmlesegerätblättern ,
wenn Sie mit der Tastatur
oder mit einem Bildschirmlesegerät . Aber zitierte Verwendungen brauchen diesen Link nicht. Ich werde es nicht sagen. Link nennt ein Buch einen Termin. Sie befinden sich im Moment in der Navigation. Sie sind ein besuchtes Link-Buch online
besucht, verlinkt , besucht, Link unsere Therapie und was ist derzeit auf dem Link Klicken Sie auf diesen Link Drücken Sie Steueroption Raum A erhalten Beispiel aus, wo Sie Layout Seite semantisch, aber Sie könnten es visuell anders aussehen lassen. Ein Buch online, dass wahrscheinlich der Hauptaufruf zum Handeln dieser Seite, so dass tatsächlich kommt zuerst in der Navigation auf den über Links kommen nach, dass jetzt, wenn sie schreien, durch die Seite zu gehen. Logischerweise sieht
es ein Buch online, dass, obwohl visuell, wir es angelegt haben, um die Vermeidung herum zu sein. Das war also ein Witz dafür. Besuchen Sie mein Link-Buch online, drücken
Sie besucht Vorname Bearbeiten Text Haupt anpassen und steuern. Google Chrome Update ist verfügbar. Sie befinden sich derzeit auf einer Schaltfläche, um auf diese Schaltfläche zu klicken, drücken Sie die Steuerungsoption Leerzeichen. Und mit Voiceover ist
es ziemlich einfach, Farmen zu machen. Könntest du einfach geradeaus gehen? H n Crume hat einen neuen Window Customer. Chris Knopf. Sie sind aktuelle Chromebook Online führt Angst Klinik besucht Link Link Überspringen zum
Hauptinhalt hat derzeit konzentriert. Springen Sie zum Hauptinhalt. Überschriftenebene ein Buch online. Du bist Johnson. Legen Sie Telefon für E-Mail ein. Ein sanftes enthalten komplementär. Sie möchten das Ende aus Überschriftenebene mit Verknüpfungsüberschrift verknüpfen, klicken Sie auf Hyperlink Überschrift. Es wurde schwach, aber besucht. Link besucht Presse besucht Link häufig gestellte Fragen, Leads, Angst, Klinik Web-Inhalte, Kompromiss und Kontrolle. Google Chrome-Update ist verfügbar. Sie befinden sich derzeit auf einer Schaltfläche, um auf diese Schaltfläche zu klicken. Drücken Sie die Steuerungsoption Leertaste. Ganz einfach zu testen, wie zugänglich Kugeln Likes sind, nur durch Einschalten der Voiceover. Wenn Sie einen Mac haben,
Andi, Andi, fangen Sie an, für Ihre Website zu gehen und zu sehen, ob Sie die Dinge tun können, die Sie tun möchten. Und wenn nicht, dann ist es vielleicht an der Zeit, die Art zu überdenken, wie Sie es entworfen haben. Voiceover aus.
6. JAWS: auf diesem Laptop haben
wir Jaws installiert, das ist das beliebteste Bildschirmlesegerät für Windows. Lassen Sie uns einen kurzen Blick darauf werfen. Hör auf, es aufzumachen, John für Windows, BBC. Das ist zu Hause. Das ist brutal. Crow BBC Das ist zu Hause. Typischerweise wird
es das Farbschema ändern. Infusion in den erweiterten Farbschemata auf Ich habe bereits eine Webseite geladen hier oben auf der Hauptweg, wie Sie in Jaws navigieren ist nur durch die Verwendung der Pfeile nach oben und unten besucht Link über Seite spielen Überschrift Ebene Zugänglichkeit Lease-Liste von zwei Elementen. Gleiche Seite Link. Überspringen Sie zu Inhalten wie eine Menge von Websites zu BBC. Setzen Sie einige versteckte Barrierefreiheitslinks hinein. Wenn wir direkt zum Hauptinhalt überspringen wollen genießt, können
wir Q drücken, die von den Schock-Tasten und wieder nach unten gehen. Überschrift Ebene, um die BBC Sonntag 2 Februar willkommen. Im Gegensatz zu Voiceover, das einen visuellen Indikator dafür setzt, wo Sie auf dem Bildschirm sind, tut
George nicht, was offensichtlich kein Problem ist, wenn Sie blind sind, möglicherweise ein Problem für partielle, aufgeregte Menschen, aber das Feedback von Jobs im Allgemeinen gut, so dass Sie es wahrscheinlich nicht benötigen, wenn Sie ein Bildschirmlesegerät verwenden. Es ist mehr, wenn Sie als visuell sehende Person testen, dass Sie diese Art von
Voice-over-Stil möchten . Indikator. Leere Streichelungsebene drei Link Australian Open Herren Titel im Link von Tennis Blank Streicheln Level drei Link von Rugby Union sind jetzt. Wenn wir es ein wenig weiter zerlegen wollen, können
wir die linken und rechten Pfeile verwenden, und das wird einzelne Zeichen O r lesen und es gibt eine Menge Uhr Rolle. Genießen Sie Ihre, damit Sie es auf Satzebene lesen und es auf Zeilenebene lesen . Sie können es auf einer Charakterebene essen. Es gibt eine Reihe von verschiedenen Pralinen für diejenigen, die auf der Seite navigieren wollen. In der Regel möchten
Sie es durch Überschriften tun, hoffentlich die Überschriften oder so richtig auf der Website, die Sie suchen. Also, zum Beispiel, wenn ich für die Level zwei Überschriften gehen möchte, kann
ich einfach die beiden Schlüssel oder Top-Geschichten Überschrift Ebene bis Nachrichten Schlagzeilen Ebene zu leben Sport Überschriften Überschrift Ebene zu Lick an diesem Wochenende Sport Überschrift Ebene zwei drei Dinge, die wir heute lieben, Überschrift Ebene zwei auf Wenn Sie durch die Hass-freie Überschriften wieder bekommen wollen. Verwenden Sie einfach die kostenlose Kuchen-Text-Farben Capture semantische Dschungelkultur Überschrift Ebene 3. Antikes Schiff Wiederaufbau seiner weltweit größten drei D Puzzle Überschrift Ebene. Die 400 nationale Sicherheit, die Legenden über Level drei Link inspiriert. Das ist eine schnelle Demo der grundlegenden Navigation. Nun schauen wir uns an, etwas zu tun, und das wird uns eine Chance geben, Jaws ist auch für Modi zu sehen. Also, das ist laden Sie diese Website für Bleiangst dort. Wir werden nur die Startseite Neustart gegen Angstklinik Leckte verlässt Angstklinik besucht. Live Page hat vier Region Zustand Kopfschmerzen und 22 am wenigsten führt. Angstklinik. Nationale Gewehr-Therapie Sie wissen, dass ein besuchte Bein führt und Wunsch Blätter Angst besucht Link Blätter, Angst Cliff. Gleiche Seite Link Erneut zum Hauptinhalt überspringen. Ein Zugänglichkeits-Link an der Spitze, der die Menschen nicht dazu führt, genannt ein Buch und Termin Link 0113 zur Navigationsregion. Gute Verwendung der NAFTA-Tags, die Buch Godlike Link. Lassen Sie uns dieses Buch online getroffen, so dass wir auf dem Link Spaceflight zu wählen Godlike national entschieden die Klinik Dash Google Crow Book up wie nationale isst und beschlossen, die Klinik
Schrägstrich Google Krähe. Aber Gott, wie nationale isst und Verlangen, bleibt
die Klinik. Region Artikel Region Vorname Bearbeiten Nachrichten John People ist alt Spiele sind, um das Skript
der Textbuchungsformular zu lesen . Schritt eins von drei Arten von Textformularen. Stimmen Sie ab. Vielleicht haben Sie diesen kleinen Peep gehört, als wir die Seite geladen haben, und das ist, um anzuzeigen, dass George in den Formular-Modus gegangen ist, in dem Sie die Dinge
ausfüllen können . Es hat tatsächlich gesagt, Formular-Modus in diesem Fall auch. Es ist auf einer sehr für beide Einstellung, also lasst uns versuchen, etwas auszufüllen. Unser I in Jaws Wochenende drücken Sie einfach Enter, um das Formular einzureichen. Es gibt viel weiter unten, aber mal sehen, was passiert, wenn wir es jetzt treffen. Alarmieren Sie jemals Air Hollow Square Bullet, bitte. Sie diese Warnung nach Ihrer Telefonnummer SchließenSie diese Warnung nach Ihrer Telefonnummer. Vorname Bearbeiten Nachrichten John Keep Lessel Spiele sind, um das Skript von Text Chris
Buchungsformular Schritt eine von drei Art von Text zu lesen . Also nicht perfekt unsere Handhabung hier, aber es hat die Warnung gelesen, also das ist großartig. Wir auch wie in einem regelmäßigen Bögen, schwächen tippen durch den interaktiven Elementtyp Text. kannst du auch tun. Genießt was? Drei. Was? Was, was? Was? Was? Was? Inhalt zitieren. Schreist du? Was? Jeter Kombibox. Bitte wählen Sie, bitte per E-Mail. Hey mit dir, scrollen Sie in der Kiste nach oben und unten. Möglichkeit, so etwas einzureichen. Schritt, um das Blätter und wünschen die Klinik, die Google Krähe Aber Gott wie dieser Schritt zu nationalen führt und wünschen die Klinik, dass Google Chrome weiter Button. Also, das ist ein kurzer Blick auf die Verwendung der Jaws Bildschirmlesegerät. Das sind Milligramm Spickzettel da draußen, die dir eine vollständige Aufschlüsselung aller
verschiedenen verfügbaren Befehle geben , also empfehle ich, das auszuchecken.
7. WAVE: in dieser Lektion wird sich die Web Barrierefreiheit Bewertung auch bekannt diese Welle und dies wird von Web Ziel zur Verfügung gestellt. Also, wenn wir es die Web-Ziel-Website bekommen und wir wollen, um die Welle zu finden. Sobald wir hier sind, können
wir keine Website eingeben. In diesem Fall sind wir es gewohnt. Wir sehen es los, und das wird die BBC-Website auf einer Seite laden und uns diesen Bericht geben. Es sieht ziemlich gut aus. Ein paar Kontrastfehler, keine großen Pfeile, viele Warnungen. Und wenn wir hinuntergehen, um die Details in Ihrer Wurst zu sehen, ist
es auf der Registerkarte „Details“. Es wird uns durch jedes der Elemente führen. So, zum Beispiel, sehr niedriger Kontrast, können
wir einfach klicken. Diese wird es nehmen, ist auf das spezifische Stück Text. Das geht viel detaillierter als Leuchtturm. Also, zum Beispiel, wir haben verdächtige Text-Warnung, weil hier haben wir mehr Link und hier haben wir mehr
Link gelesen , der wirklich keinen Kontext bietet. Also, wenn Sie sich vorstellen, durchzugehen mit Screen Reader und es nur lesen mawr, nicht ein sehr hilfreicher Link können wir durch Dinge wie Texas gehen, zum Beispiel, zu klein, um zu lesen führt uns auch durch all die guten Sachen und jeder der Strukturelemente. So die Meere Zehenhelfer vorstellen, wie man Seite als Schrei Redwood navigieren, wo man durch die Überschriften ging. Es markiert jeden dieser Helfer. Verstehen? Zum Beispiel, hier ist ein H zwei und hier ist der Hass Einfrieren darunter, so dass wir überprüfen können. Wir haben alles in Ordnung. Und wenn wir keine hierarchischen Überschriften als die Welle hätten, bis würde das markiert und es induziert auch ist die Verwendung von allen. Der Bereich wird später mehr von unserem Bereich erfahren, aber dies ist eine Möglichkeit, Screenreader zusätzlichen Kontext zu geben. Und Sie können mehr Informationen erhalten, einschließlich eines eingebauten Kontrastwerkzeugs, und wir werden später auch wieder über Kontrast sprechen. Aber wieder, dies ist ziemlich detaillierter Bericht auf unserer Website, so dass Sie Ihre U R L in die Adressleiste setzen können. Es wird dies einen detaillierten Bericht über all die Dinge, die gut über Ihre Website sind und Dinge, die Sie verbessern könnten, als auch
8. W3C Validator: in dieser Lektion wird sich die W drei c Validierung ansehen, zu der ein Werkzeug ist, das unsere
Hasen Mel validiert . Nun, das ist nicht wirklich direkt mit der Barrierefreiheit verbunden. Aber eines der wichtigsten Dinge, die wir tun können, um unsere Website zugänglich zu machen, ist
semantic html verwendet und diejenigen validieren html, so dass der Browser Composite richtig gesagt alle Bildschirmleser zusammengesetzt richtig auf wir keine größeren Probleme wie das haben. Es gibt Autobahnen, die dieses Tool funktionieren kann. Sie können einfach die u R L in oder wenn Sie noch lokal entwickeln, können
Sie eine flache Hass-weibliche Datei hochladen, wenn Sie eine hatten, oder Sie können einfach kopieren und einfügen Hasen, um hier zu mailen und drücken. Überprüfen Sie dieses Beispiel, das wir validieren werden. Auf der Grundlage, dass Sie draußen sind. Also lasst uns einfach die BBC-Website benutzen. Ich werde nach Dhere überprüfen. Wir haben den Bericht. Es hat also einen abgenutzten Fehler bei vielen Warnungen gefunden, um nicht so zu sehen, als ob hier etwas überhaupt nicht
stimmt,
möchte, dass wir ein Meta-Tag bei vielen Arten von alten Schulsachen höher bewegen. So zum Beispiel haben wir
zum Beispielbei einem Attribut verwendet, das Text eingegeben wurde. Jarvis crypto erlauben JavaScript-Ressourcen, die ab html fünf nicht mehr benötigt werden. Setzen Sie eine Menge Code hat es immer noch in. In der Tat haben
wir hier unten auch noch einige Fehler. Dies ist ein wirklich nettes Tool, weil wir alle eine Menge der Zeit denken, dass wir große HTML schreiben aber tatsächlich erstaunt Veränderung. Oder vielleicht machen wir nur einen Fehler. Vielleicht sind die Dinge einfach nicht ganz so gut, wie wir denken, und so können wir zum Validator gehen, überprüfen Sie es, beheben Sie Fehler und die bessere Qualität hasst morgen, die wir produzieren können, dann desto weniger wahrscheinlich ist es, dass ein Durchsuchen oder Screenreader wird verwirrt, wenn es sich um etwas handelt, das Sie nicht verstehen.
9. Inverkehrbringen: in diesem Modul wird auf die Palette der Barrierefreiheit Probleme, die Benutzer Ihrer Website konfrontiert
sein,
so dass, wenn es darum geht, es zu entwerfen,
schwächen, gehen, um ein ganzes Spektrum von verschiedenen Bedingungen zu tun und stellen Sie sicher, dass wir ''re Catering für so viele wie möglich.
10. Sichtweise: in dieser Lektion wird auf der Website zu suchen. Das Royal National Institute for Blind People legt nahe, dass zwei Millionen Menschen in Großbritannien mit Sehverlust
leben, was bedeutsam genug ist, um ihr tägliches Leben zu beeinflussen. Es muss also nicht vollständig sein, aber genug, dass es als Behinderung eingestuft ,
was ungefähr 3%unterder Bevölkerung liegt unter wird,
was ungefähr 3%unterder Bevölkerung liegt. Und wenn die Länder über ein weniger gut entwickeltes Gesundheitssystem verfügen, könnte
das Vereinigte Königreich sogar höher sein. Also haben wir es mit einer beträchtlichen Menge von der Bevölkerung zu tun, und das ist über eine breite Palette von Bedingungen in Bezug auf Schwere verteilt, so dass jemand keinen Ort haben könnte alles. In diesem Fall wird normalerweise Screen Reader verwenden, weil das die einzigen Optionen ist, es sei denn, sie verwenden eine Art Braille-System. Regel auf dem Desktop könnte
dies Kiefer oder Neid D A oder Voice Over sein. Wenn Sie auf einem Mac und auch auf einem mobilen Gerät sind, sprechen Sie auf Android von beiden. So waren die auf dem iPhone auch sehr beliebt, zumal die mobilen dazu neigen, dann in die Software eingebaut zu kommen und
völlig blind zu sein . Wir könnten auch sehbehinderte Menschen haben, also haben sie nur Sehstörungen und sie sind niedrig. Die Zeit auch Bildschirmlesegeräte verwenden, weil es einfach macht es einfacher. Aber sie können auch Dinge wie Zigeuner verwenden, um die Dinge größer zu machen. Es ist eine Menge zu bauen in Kassen dort. Es gibt die Browser-Zoom-Funktion, und Sie können Drittanbieter-Eingabehilfen Software erhalten, die ihnen hilft. Oder sie können einfach kämpfen. Ich habe Freunde, die Teilsichtigkeit auf dem Heiligen Do haben, ist einfach ihr Gesicht direkt neben
den Bildschirm, so dass sie es sehen können. Es ist also auch eine Überlegung wert,
dass die Leute, die große versuchen, dafür zu kämpfen. Und so wollen wir es ihnen so einfach wie möglich machen. Und dies könnte durch eine Vielzahl von Bedingungen geschaffen werden und wird einige der
Auswirkungen, die später in dieser Lektion folgen. Eine andere Sache auch, wirklich seine Farbenblindheit betrachten. Dies beeinflusst etwa 5% der Menschen wollen 20 auf, wie viel Farbenblindheit, die variiert. Aber es neigt dazu, dass Menschen spezifische haben spezifische Sensoren in ihren Augen fehlen , so dass sie neigen dazu, von einer bestimmten Kombination von Farben betroffen sein, von denen
die häufigste Rotgrün ist. Aber es gibt viele verschiedene Beispiele, und es gibt einen großen Geschlechterunterschied in Colorblind sagte Nun, Männer viel eher mit Farbblindheit und Frauen zu kämpfen. Und es kann auch Grady atiert werden. So, wie farbblind Sie sind, ist auch auf einer Skala. Also, selbst wenn Sie rote grüne Farbenblindheit haben, könnte
es sehr schwerwiegend sein, und Sie könnten nicht in der Lage sein, immer noch zu unterscheiden, wenn die beiden oder es könnte nicht sein, nicht schwerwiegend auf die meiste Zeit. Wenn Sie die Dinge ziemlich deutlich machen, werden
die Menschen in der Lage, sie auseinander zu unterscheiden ist eine große Auswahl dort. Einige der Auswirkungen, die wir finden, ist offensichtlich einfach nicht in der Lage zu sein, alles zu sehen. Aber auch die Dinge könnten verschwommen sein. Oder vielleicht haben Menschen blinde Flecken, die ziemlich häufig sind. Und sie sind sich dieser blinden Flecken vielleicht gar nicht bewusst, weil, es sei
denn , du bist sehr hyperfokussiert auf sie. Es ist wirklich leicht zu vergessen, weil unsere Vision Witze kompensiert. So zum Beispiel haben
wir
zum Beispielalle einen toten Fleck in jedem unserer Augen, wo der Sehnerv herauskommt. Die Rückseite des Augapfels. Es gibt keine Sensoren dort, um das Licht zu erkennen und sagte die Reserve Spot Weg. Wenn du ein Auge schließt, kannst
du das. Das ist nur ein Ort in der Übersee. Ich wir können einfach nichts sehen, aber wir sehen nie, dass, weil unsere Vision, unser Gehirn, einfach nahtlos kompliziert Ring füllt in den Rest der Welt, weil was wir sagen ist keine direkte Bilder, während unser Gehirn denkt gibt es basierend auf den Informationen, die aus meinen Augen bekommen. Jetzt sind wir die Sinne. Das bedeutet also, dass wir alle blinde Flecken haben und sie nicht bemerken. Also, selbst wenn Sie einen Zustand haben, der
größere, bedeutendere blinde Flecken erzeugt ,
Chancen, dass ich Ihr Gehirn wird Zigeuner Dinge in so blinden Flecken wirklich wichtig füllen. Außerdem können
Leute nur einen kleinen Teil des Bildschirms auf einmal einen Bericht sehen. Wenn sie heranzoomen oder sie wirklich ihr Gesicht gegen den Bildschirm drücken müssen, dann werden sie nicht in der Lage sein, das Ganze auf einmal aufzunehmen. Deshalb wollen wir das und wie die Dinge in unseren Designs skalieren. Außerdem können
die Menschen möglicherweise nicht in der Lage sein, Farbe zu unterscheiden, daher möchten wir sicherstellen,
dass im Durchschnitt Farbe als Indikator verwendet
11. Hören: in dieser Lektion werden
wir über das Hören sprechen. Die Anhörung ist nie abgestuft Zustand. Manche Menschen haben überhaupt kein Gehör. Manche Menschen haben nur eingeschränktes Gehör. Auf eine andere häufige Bedingung ist Tinnitus, wo Sie haben ah, Ton ständig gehen in den Ohren, Regel Klingeln oder Summen so etwas, was wieder macht es schwieriger zu hören. Andi kann ziemlich unangenehm sein, mit in Bezug auf das relevante Teoh Web Design zu leben. Es ist eine ziemlich kurze Liste, weil wir hier über Audio- und Video-Inhalte sprechen,
solange Sie Factoring dort. Das ist der Hauptanliegen, und wir schauen uns an, wie das später in diesem Kurs zu tun ist.
12. Motor: in dieser Lektion werden motorische Beeinträchtigungen untersucht, so dass einige Benutzer Schwierigkeiten haben, die Maus zu steuern. Sie können eine Schlüsselstation verwenden, um nie statt zu bekommen, oder sie können einfach die Maus verwenden, aber finden es wirklich schwierig, auf Dinge zu klicken, so dass sie zwei Hände haben, die eine Hand haben können, die sie möglicherweise keine Hände haben. Sie können eine Reihe verschiedener Eingabehilfen verwenden. Manche Leute müssen den Computer mit dem Mund kontrollieren, weil sie keine Korruption
bis zum weniger schweren Ende haben , wo vielleicht jemand so etwas wie die
Parkinson-Krankheit hat , wo sie wirklich kämpfen, ihren Mund zu bewegen wo sie wollten. Theo und das Klicken auf kleine Ziele ist wirklich schwierig, oder sie können Sprachsteuerung verwenden, um diesen Computer zu steuern. Die Effekte bedeuten also, dass, wenn Sie zum Beispiel viele Links oder Schaltflächen in der Nähe
haben, einige Benutzer wirklich kämpfen können. Oder wenn Sie eine riesige Liste von Links haben und jemand die Tastatur benutzt, blättern Sie durch die Seite, dann wird das wirklich irritierend sein, weil es lange dauern wird, um durch diese
Liste zu gelangen . Und so wollen wir Tastatur, Navigation und Navigation auf der Seite mit etwas über als eine Maus in Betracht ziehen. Wir wollen auch die Größe eines unserer Tap-Ziele oder Links berücksichtigen,
und wir werden uns das im inklusiven Design-Modul ansehen.
13. Kognitiv: in dieser Lektion werden kognitive Einschränkungen untersucht. Nein, alle Behinderungen sind körperlich, und Menschen können auch Lernschwierigkeiten und spezifische Probleme mit ihrem Gedächtnis haben. Ihre Aufmerksamkeit. Es könnte auf dem autistischen Spektrum sein. Sie könnten Legasthenie oder Ablenkungen haben, was der Mathematik entspricht Legasthenie. Es gibt also alle Dinge. Selbst wenn die physischen Körper der Menschen gut funktionieren, könnten
sie immer noch Probleme haben, die Dinge zu verwenden, die wir entwerfen. Und es ist wichtig, dass
wir, um inklusiv zu sein, diejenigen in einem Schwung zu berücksichtigen,
und dies bedeutet in der Regel eine Vereinfachung. Wir wollen also sicherstellen, dass wir einfache,
zugängliche Sprache verwenden . Das wollen wir auf sehr lesbare Weise präsentieren. Das bedeutet also, Dinge wie Zeilenabstand zu betrachten und mit Chunking-Informationen sicher . Also geben wir den Menschen keine riesigen, unlesbaren Absätze. Wir wollen, dass das Design auf dem Aufruf zum Handeln klar ist, was Sie von ihnen wollen. Klicken Sie auf eine Schaltfläche, füllen Sie Formulare aus, lesen Sie Artikel, was auch immer es ist, ist wirklich klar. Wir wollen ein konsistentes Aussehen und Gefühl Wenn wir
also ein Farbschema in einer bestimmten Schaltfläche für die nächste Aktion haben, möchten
wir sicherstellen, dass dies auf der gesamten Website konsistent ist, so dass es wirklich offensichtlich jemanden ist, der versucht, mit unseren Designs, was los ist. Und natürlich machen
all diese Dinge einfach unsere Website für alle besser. Das ist das Schöne an Inklusive-Design ist, wenn Sie es besser für jemanden kämpft, machen
Sie es auch besser für Menschen, die keine körperlichen oder kognitiven Beeinträchtigungen haben, und Sie haben Conversion-Raten sind wahrscheinlich höher für alle, nicht nur für die Menschen. Wir haben spezifische Probleme, auf die Sie reagieren wollen.
14. Inklusives Design: in diesem Modul erhalten technische, wird in die hasst ihn aus gehen, und schauen Sie sich an, wie wir unsere Websites strukturieren können, um sie für jeden zugänglich zu machen, immer direkt in die Details und die Arbeit an den Web-Inhalten. Barrierefreiheitsrichtlinien bieten uns eine Menge Anleitungen, wie wir dies tun können und welches Maß Compliance Sie erreichen möchten, liegt bei Ihnen. Die meisten kommerziellen Unternehmen neigen dazu, für Double A zu gehen, was ein großes Maß an Zugänglichkeit ist und Ihnen immer noch die Flexibilität gibt, dies zu tun. Schöne Spaß Design-Arbeit Wenn Sie extra streng sein wollen, zum Beispiel, Sie sind eine Regierungsbehörde, waren eine Aufgabe, alle in der Bevölkerung zu erreichen und nicht zu viel Spaß zu haben. Sparky kommerziell basierte Designs. Dann können Sie für Triple A gehen, das ist ein extra harter Standard zu erreichen. Um zu genießen. Ihre Websites sind super zugänglich Wie wir gehen, Obst wird auf diese berühren und wir gehen für jeden Bereich aus wurden entworfen, um zu sehen, was wir
tun können . Was ist Best Practice
15. Semantischer HTML: in dieser Lektion wird auf semantische aussehen. Html. Hoffentlich sind
Sie bereits mit dem Begriff vertraut, aber wenn nicht, dann bezieht er sich auf die Bedeutung von Tags. Also in Hates Tomorrow vier tendierten wir dazu, alles in DIV zu wickeln. Auf span Tags und thes haben fast keine Bedeutung von. Und dann ist das standardmäßig blockiert
man. Wenn es ein In-Line-Element gibt, sagen
sie uns nichts über Page. Also, wenn ein Computer den HTML verarbeitet, er weiß nicht, was etwas ist, wenn es eine devora-Spanne ist und dann hasst ihn oder fünf
kam auf wollte dieses Problem adressieren und mehr aussagekräftige Tanks beantworten. Also, jetzt haben wir Dinge wie die Header und Fußzeile Tank haben wir im Hauptartikel Tank die beiseite. Tag, um zu gewinnen. Um die Sidebar zu erhalten, haben
wir Zahlen, um Diagramme und Diagramme in einzufügen. Wir haben Knaves, um die Navigation in Andi zu bringen. Nun, wenn Sie sich eine bezahlte geschrieben und hoffen auf meine fünf, es macht nur viel mehr Sinn, weil es für einen Computer sehr einfach ist zu sehen Was ist die Kopfzeile? Was ist die Navigation? Wo sind die Artikel? Was ist in der Fußzeile? Und es macht alles viel mehr Sinn, jetzt ist das wirklich wichtig, weil es nicht nur Browser und Suchmaschinen sind, die in der Lage sein müssen, dies zu verstehen. Aber wenn ein Bildschirmlesegerät kommt, um herauszufinden, was in einer 60 Meilen Seite
ist, muss es die Seite verstehen, damit es dem Benutzer helfen kann. Jetzt vergiss die Gegend. Wenn ein Benutzer zur Menüleiste zur Navigation gelangen möchte, wo ist das, wenn er alle Links im Kopf überspringen und zum Hauptinhalt gelangen ? Wie? Es ist einfach für jemanden, der nur visuell aufgeregt ist, das zu tun, weil sie
nach unten scrollen können . Aber wenn dein Bildschirmlesegerät das tun will, wie bekommst du
dann diesen arbeitenden Wolf? Wir verwenden semantische Tags. Wir können das meiste davon kostenlos bekommen, weil wir dem Screenreader sofort mitteilen, wie die Seite funktioniert, während wir durchgehen. Der Rest dieses Moduls wird sich das genauer ansehen, aber es gibt so viele semantische Informationen zur Verfügung, wenn wir die pflanzlichen fünf Tanks verwenden, aber auch wenn wir einfach das Zeug benutzen, das eingebaut wurde, um ihn zu hassen l von den frühen Tagen. Wenn wir
beispielsweise Formulare verwenden,stellen Sie sicher,
dass die Eingaben der richtigen Typen und stellen Sie sicher,
dass sie Etiketten auf ihnen haben. beispielsweise Formulare verwenden, Wenn wir
beispielsweise Formulare verwenden,stellen Sie sicher, dass die Eingaben der richtigen Typen und stellen Sie sicher, All die Dinge wie diese, die einen Computer sagen, die dem Browser sagen, wie die Seite funktioniert super nützlich für Bildschirmlesegeräte, weil es ihnen geholfen hat, es zu erarbeiten und die Informationen in einer wirklich kohärenten Art und Weise in den Laboren verwendet, um durch unsere navigieren viel einfacher.
16. Text: in dieser Lektion wird den Yusof-Text in Designs sehen, und eines der großen Probleme hier sind Überschriften, die CSS verwenden. Wir können Überschriften aussehen lassen, was auch immer wir wollen, damit wir eine Hitze haben können, die wirklich klein ist. Wir können einen Hass sechs haben, der massiv ist und die Seite über DSO dominiert. Was wir tun möchten, ist das richtige Tag für die semantische Bedeutung zu verwenden und alles andere wird über CSS
gemacht. Also wollen wir nicht daran denken, dass Tags einen bestimmten Look oder Stil darstellen. Setzen Sie die richtigen Tags ein, um semantischen Sinn für die Seite zu machen. Dann werden wir sie einfach stylen, wie wir wollen. Also, was das bedeutet, ist, dass jeder Wilderer getragen hat und Witz getragen hat Hass. Ein Tag auf dieser Seite ist Ihr Titel für die Seite. Das ist also eine Sache, die Sie lesen, und es sagt Ihnen, worum es auf dieser ganzen Seite unten geht, dass wir mehrere Hates zu Tags haben können. Wenn es also mehrere wichtige Themen auf der Seite gibt, könnte
jeder sein eigenes Alter haben, und dann unterhalb dieser würden wir jedes von dem unteren
Down-Tag haben . Also, wenn Sie Unterabschnitt in ihnen haben
, dann werden Sie anfangen, Hass frei zu verwenden und vier zu hassen und alles in ihm sollte
hierarchisch sein . Wir wollen nichts überspringen, damit wir nicht für meinen Hass auf eine riesige Vier gehen wollen. Denn wenn das passiert ist und Sie einen Screenreader verwenden, der durch die Überschriften blättert , könnten
Sie denken, dass Sie den Hassbaum vermasselt haben. Oder wenn es liest,
auf Ebene für etwas zu gehen , wirst
du denken, du hättest den Hass frei verpasst. Und in der Tat, wenn es einfach nicht auf dem Design war, dass super verwirrt so typischerweise könnte man sagen, Hass eines der oben auf der Seite. Und dann, wenn Sie Siris von Artikeln haben, die hassen zwei oder wenn es eine Artikelseite selbst ist, könnte
der Hass sein der Artikelname und dann der Körper darunter. Und wenn Sie Dinge wie Seitenleisten oder Fußzeilen haben, die auch Überschrift benötigen, dann ist Ihr Bestes, diejenigen zu machen, die ich hasse, zu einem Schwellen zu machen und dann alle Unterüberschriften darunter , dass dieser
Aufschlüsselungsteil dieses Lehren dann auf den Hass frei gehen würde. Vier Textlayout ist auch wichtig, so dass wir wollen, dass starke Farbkontrast in der Lektion über Farbe wird darüber sprechen
, was , genau ist eine zugängliche Ebene des Kontrastes. Aber wie wir bereits erwähnt haben, können
Sie Werkzeuge verwenden, um den Kontrast zu messen, um sicherzustellen, dass er ausreichend ist. Wir wollen Text schön und groß, um es lesbar zu machen. Wir wollen Absatz-Tags so wieder verwenden, so dass das semantische HMR vorwärts funktioniert. Und anstelle der Zeilenumbruch-Tags wollen
wir alles. Dieser Absatz will es innerhalb eines Absatzes Tank auf sein. Wir möchten auch Zeilenabstand und Schriftauswahl berücksichtigen. Traditionell haben Serifen-Schriftarten, die mit den kleinen Dekorationen auf, für
die meisten Menschen ihre leichter zu lesen. Aber es ist nicht viel drin. Und es gibt Hinweise, dass, wenn man Bedingungen wie Autismus hat, es eigentlich schwieriger zu lesen ist. Also San Serif Schriftarten sind eine gute Wahl und vielleicht speichern Sie die Sarah Telefone vier Überschriften. Schauen wir uns ein Beispiel aus einem gut angelegt Rückseite des Textes versus und nicht so gut angelegt Buch der besteuerten. Also hier haben wir einige Beispiele, wo auf der linken Seite alles in einen riesigen Absatz gesetzt würde nicht viel Zeilenabstand zwischen ihnen auf der rechten Seite haben wir zwei Absätze auf viel Zeilenabstand auf. Ich denke, die meisten von uns würden zustimmen, dass der Text auf der rechten Seite besser lesbar ist als der besteuerte auf der linken Seite und wieder nur durch diese Verbesserungen half allen. Es ist inklusive Design. Es ist nicht nur für bestimmte Bedingungen, aber tatsächlich unsere Website wird besser für alle auf das ist, was wir wollen.
17. Links: in dieser Lektion wird sich Links ansehen. Also eines der Dinge, die wir tun wollen, ist sicherzustellen, dass wir die Tag Hyperlinks und
Schaltflächen für ihren beabsichtigten Zweck verwenden , so dass ein Link sollte Sie zu einer anderen Webseite einem Bulletin führen sollte eine Art von Funktionalität zu tun. Also wollen wir diese Idee vermeiden, wo es ein Link-Tag und Entführung nimmt. Es war eine Art von On Click-Ereignis, etwas zu tun, wenn es tatsächlich nie beabsichtigt war,
ein Link zu sein . Also haben wir die A, Tag sagte sendet Benutzer auf eine andere Web-Seiten. Also wollen wir nicht diese falschen Bührle's, wo wir einfach ein wenig Hash reinlegen, dann entführen Sie es mit dem On Click. In solchen Fällen möchten
wir sicherstellen, dass wir eine Schaltfläche verwenden. In ähnlicher Weise sollte
der umgekehrte Weg um Ah, Button uns nicht zu einer anderen Webseite führen. Es sollte eine Art von Aktion durchführen, wenn wir das verwendete auf eine andere
Webseite nehmen müssen , als wir einen Link verwenden sollten. In Bezug auf das Styling dieser können
wir CSS verwenden, um sie aussehen zu lassen, wie wir wollen. Das bedeutet also, dass Sie ein Link-Tag wie eine Schaltfläche aussehen lassen können, die Sie machen können, dass eine Schaltfläche wie ein Link
aussieht, also denken Sie zuerst semantisch. Was macht es und benutzt den entsprechenden Tank? Und dann können Sie Stil der Macht, die Sie jetzt in Bezug auf die Links wollen. Wie wir bereits besprochen
haben, sollten wir niemals nur Farbe verwenden, um etwas anzuzeigen. Also wollen wir einen anderen Indikator, weshalb
Links traditionell Bohne in blau und unterstrichen haben, um dort einen Link anzuzeigen. Aber es gibt noch andere Dinge, die wir tun können, aber das war's. Gute Strategie, denn das ist traditionell, was auf hasst Jemele verwendet wurde. Andi ist das, was weiterhin von vielen Websites verwendet wird, daher ist es sehr verständlich, wenn wir besuchten Links in einem
Screenreader etwas anders aussehen lassen können . Sie werden dazu neigen, ausgelesen wurde Link trotzdem besucht, so dass Sie vielleicht nur diese Informationen für visuell sehende Benutzer zur Verfügung stellen möchten. So gibt es
zumindest so viele Informationen zu bekommen, ist ein Bildschirmleser von Weißen. Ein Bildschirmlesegerät bekommt einen Vorteil. Vielleicht ist das schön, dass sie nicht immer zurücklaufen, und wir wollen auch über den beschreibenden Text nachdenken. Also wollen wir das vermeiden. Klicken Sie hier, um einen Artikel zu sehen, der sagt Der Klick hier ist der Link. Schwierigkeit damit ist in einem Screenreader readapt Abschnitt zu einem Zeitpunkt, so dass wir nur sagen Link. Klicken Sie hier, und das gibt Ihnen nicht wirklich Informationen darüber, worum es bei dem Link geht. Wenn Sie also denken, stellen Sie sich vor, wenn der Bildschirmleser die Steuer ausliest, die ein Lincoln ist, heißt
es Link. Und dann liest es sich aus. Die besteuerten, die besteuert sollte dem Benutzer sagen, gehen. Die Verbindung ist wegen Verbündeter. Alles, was wir bekommen, ist eine Reihe von Dingen, die sagen Klicken Sie hier, klicken Sie hier. Klicken Sie hier auf. Das macht keinen Sinn für Seo-Zwecke, weil es den Suchmaschinen nicht sagt, worum es bei dem Link geht. Auf das gleiche Problem, es sind Bildschirmlesegeräte. Sie können sehen, dass es ein Link ist, aber sie wissen nicht wirklich, worum es bei der Verbindung geht. So stellen Sie sicher, dass wir beschreibend in unseren Links besteuert haben, fügt eine Menge Kontext
18. Farbe: in dieser Lektion wird sich die Rolle ansehen, die Farbe in unserem Design spielt. Eines der wichtigsten Dinge ist, sicherzustellen, dass es genügend Kontrast
zwischen dem Vordergrund auf dem Hintergrund gibt , denn wenn wir Text auf, sagen wir, weißen Hintergrund, schwarze Steuer, super leicht zu lesen. Aber eine Menge Zeit für populäre zu setzen, sagen wir, Steuern über Bilder auf es gibt nicht immer so viel Kontrast in MX-Angriffen wirklich schwer zu lesen. In Bezug auf Barrierefreiheit waren also klare Kontraststandards, die erreicht
werden sollten , um diesen Text lesbar zu machen. Also ein konformer, was die meisten kommerziellen Unternehmen nach normalem Text streben würde, will 4,5
zu 1 bei großen Angriffen sein , weil es leicht zu lesen ist, kann ein bisschen weniger Kontrast haben. So schön, einem frei zu sein. Wenn Sie,
sagen wir,
eine Regierungsabteilung oder jemand sind sagen wir, , der eine Organisation, die wirklich hohe Zugänglichkeit
Standards hat , möchten
Sie wahrscheinlich die Triple A Compliance geben, was Ihre normale Steuer bedeutet will einen Kontrast von 7 zu 1 auf Ihre große Steuer haben will einen Kontrast von 4,5 zu 1 haben. Woher wissen Sie, wie viel Kontrast ist? Nun, Sie können eines von den vielen Kontrastwerkzeugen verwenden. Zum Beispiel Zum Beispiel wird
diese von Web Aim zur Verfügung gestellt, und Sie nehmen die Hex-Werte Ihrer Farben und Sie schlagen sie ein, und es wird Ihnen sagen, was Ihr Kontrastverhältnis ist. Es gibt auch eine Vielzahl von Over-Tools. Solch ein Browser-Plug-ins, die dies für Sie tun wird, vielleicht sogar Pipettenabschnitt auf Ihnen sagen, was der Kontrast gibt es, um es viel einfacher zu machen . Cedar müssen die Farbwerte herausziehen und an ein unabhängiges Werkzeug gebracht. In diesem Beispiel verwenden
wir, ah, ah, weißer Hintergrund, einige schöne blaue Text, und das schafft einen großen Farbkontrast geeignet für alles. Aber sagen wir, wenn wir eine Art rot besteuert machen, als wenn es nicht stark genug wäre,
sagen Sie noch einmal, wir haben ein mittleres Rot auf weißem Hintergrund verwendet, das nicht unbedingt die Barrierefreiheitsrichtlinien
erreichen würde , denn wenn Sie Blick auf, sagen wir, den normalen Text dort, es ist viel schwieriger, im schwarzen Text zu lesen. Nun, wenn wir zu großen Text bewegen, dann ist es ein bisschen einfacher zu lesen, die dann doppelt ein erreicht würde, weil Sie nicht so
viel Kontrast auf den großen besteuerten benötigen . Aber es würde immer noch nicht die Trip Lay Standards erreichen, weil Sie wirklich starken
Kontrast brauchen , um es leicht zu lesen. Ich hasse es, nur auf das Beispiel zu schauen und das zu vergleichen, um zu sagen, den Titel der Folie. Es gibt einen deutlichen Unterschied darin, wie leicht sie zu lesen sind. Die andere Sache zu beachten ist, dass Farbe nicht als Indikator verwendet werden sollte. Also haben wir darüber in Links gesprochen. Sie können Links nicht einfach in einer anderen Farbe machen. Sie wollen etwas über Indikator haben, denn wenn der Benutzer farbblind ist, als sie nicht unbedingt in der Lage sein, zu sehen. So zum Beispiel wird
zum Beispiel
eine Menge Zeit Erfolgsmeldungen grün sein und Fehlermeldungen werden rot oder Schaltflächen und Links zeigen Dinge gut an. Es ist nichts falsch daran, eine grüne Erfolgsmeldung und eine rote Pfeil-Nachricht zu haben, denn für die meisten Menschen zeigen
diese Farben den glücklichen Pfad bei einem Fehler an. Aber wir können das nicht nur verwenden, denn wenn wir das tun, wenn diese Benutzer farbblind sind, würden
sie nicht in der Lage sein zu sagen, was los ist. Schauen wir uns also ein Beispiel dafür auf einer echten Website an. Also auf der Leeds Angst klirrt nach Finale, wenn das Top-Beispiel einer Fehlermeldung, die
nicht sehr zugänglich wäre ,
denn wenn Sie rot, grün colorblind sind, können
Sie möglicherweise nicht in der Lage sein, dass rot zu sehen. Und es würde nicht unbedingt darauf hinweisen, dass das ein Fehler war. Während im unteren Beispiel haben
wir dann ein kleines Fehlerdreieck mit der entsprechenden Steuer hinzugefügt, um den Benutzer
wissen zu lassen , ihre Bildschirmlesegerät dort in einer Luftlinie, so dass, wenn sie es verwenden, sieht dies, sie können Schau dir die Farbe an. Sie können sich das kleine Symbol ansehen, das auf die beschreibende schauen kann, besteuert im Symbol auf all diesen verschiedenen Funktionen. Sagen Sie ihnen, dass es ein Fehler ist. Also, wenn sie mit irgendeinem dieser Dinge zu kämpfen haben,
dass viele Informationen, um ihnen Kontext Toe zu geben, lassen Sie sie wissen, dass es ein Fehler ist. Wir verlassen uns nicht nur darauf, dass sie eine perfekte Farbsicht haben, um das herausfinden zu können. Es macht es auch semantischer, weil wir davon ausgehen, dass die Menschen wissen, dass Rot Ära bedeutet. Aber das könnte eine kulturelle Sache sein, also geben Sie ihnen nur einen viel Kontext und es gibt viel semantische Bedeutung wie möglich macht es klarer
19. Bilder: in dieser Lektion wird sich die Verwendung von Bildern ansehen, und dies beginnt mit den Out-Attributen. Dies ist eine alternative Beschreibung, die Bildschirmlesegeräte einen Kontext darüber gibt, worum es
geht . Sie kleben also Ihr Bild ein und beschreiben dann im Out-Tag, was sich auf dem Bild befindet. Wenn Sie also ein Bildschirmlesegerät verwenden, wissen
Sie, was los ist. Und wir müssen die Out-Attribute nur verwenden, wenn es etwas zu beschreiben gibt. Irgendwas ist also rein dekorativ, dann brauchen wir nicht da drin. Was wir wollen, ist ein leeres Tag,
zum Beispiel, zum Beispiel, auf diesen Buttons hier haben wir ein kleines Newsletter-Symbol, um zu sagen, Join unserem Newsletter Keine Person Icon, um einen Rückruf anzufordern, der, offensichtlich aus dem Link-Text. Was ist da los in den Symbolen Ziffern? Dekorativ, um mehr Bedeutung zu verleihen. In diesem Fall, anstatt das Bild zu beschreiben, weil das niemandem einen Wert geben würde, der einen
Screenreader verwendet , würden
wir immer noch das out Attribut enthalten. Aber es wäre einfach leer und jemand, der es einschließt, so dass ein Bildschirm, den wir wussten, dass es leer sein soll, denn wenn Sie es einfach auslassen, wird
der Bildschirmleser auf beschriftetem Bild auslesen, während wenn wir nur legen Sie ein leeres Tagging heraus, das der Bildschirmleser weiß, um dies nur zu ignorieren , weil es dekorativ ist. Andi,
es sei denn, du siehst es an, du wirst zitiert. Du brauchst nichts darüber zu sehen. Wir müssen auch in Bildern besteuert betrachten. Und generell wollen wir dies möglichst vermeiden. Da Bildschirmlesegeräte nichts dagegen tun können und einige Eingabehilfen, die den Text
zum Beispiel
ändernkönnten , die den Text
zum Beispiel
ändern , könnten
sie mehr Kontrast dazu hinzufügen. Oder sie könnten die Schriftgröße gut ändern. Sie können nichts dagegen tun, wenn es in ein Bild eingebettet ist, damit sie nicht
daran arbeiten können . Aber wenn Sie es verwenden müssen, dann stellen Sie sicher, dass es der Barrierefreiheit entspricht. Standard bedeutet dies, einen Kontrast von mindestens frei zu haben, auch wenn es sich um einen großen Text handelt. Und selbst wenn Sie nur eine doppelte Compliance wünschen, wenn Sie für Triple A oder seinen
kleineren regulären Textkörper gehen , als der Kontrast noch höher sein möchte, um den Menschen die beste
Chance zu geben , ihn lesen zu können
20. Audio und Video: in dieser Lektion wird sich die Verwendung von Multimedia innerhalb unserer Entwürfe ansehen. Für die Videoproduktion ist es
ein guter Ausgangspunkt, blinkende Bilder zu vermeiden. Dies verursacht echte Probleme. Menschen. Wir haben Bedingungen wie Epilepsie, aber auch Dinge sind Alternativen gut auf. Um ehrlich zu sein, blinkend, Andrea ist einfach nur ärgerlich über das Brett. Viele Menschen finden ärgerlich, und deshalb, wenn wir es vermeiden können, ist
das ein guter Anfang. Überlegen Sie, eine Audiobeschreibungen darüber zu erstellen, was vor sich geht. Tun Sie das während der Aufnahme des Videos, weil es wirklich schwer ist, zurück zu gehen und es später
zu tun , dann ging Bearbeiten der Videos. Wenn Sie besteuert verwenden müssen. Idealerweise wollen
wir das nicht. Aber wo, wo wir es verwenden müssen, lassen Sie uns einfach sicherstellen, dass es den Barrierefreiheitsrichtlinien entspricht. Also wollen wir viel hohen Kontrast auf ihre auf. Wir wollen einen schönen, großen Text. Wenn wir dann nehmen, dass und legen Sie es in eine Webseite. Wir wollen die nativen Tags von möglich verwenden, um ihm diese semantische Kontrolle zu geben, so dass das Video und die Audio-Tags, anstatt die alten School-Flash-Player und solche Dinge, wenn wir viel besser, um die Blumen der Kontrolle über dass, denn wieder, das ist etwas, in das ein Eingabehilfe-Tool gehen kann. Kann die Hoffnungen überprüfen, die TML verstehen kann, was vor sich geht und dem Benutzer die Kontrolle über
diese Probleme geben kann. Wenn wir ein proprietäres System benutzen, haben
sie nicht notwendigerweise wieder Zugriff darauf. Vermeidung von Auto-Play ist großartig, die Menschen finden nicht wirklich ärgerlich wieder. Das ist nicht etwas nur für bestimmte Barrierefreiheitsprobleme, die es eine Barrierefreiheit Richtlinien ist, um letztlich nicht zu verwenden, sondern auch alle anderen werden Ihnen danken, weil fast jeder findet Auto-Spiel ärgerlich als auch auf. Wir möchten sicherstellen, dass diese Video-Steuerelemente zugänglich sind. Um benutzerdefinierte Steuerelemente zu implementieren, möchten wir diejenigen mit der Tastaturnavigation testen, um sicherzustellen, dass sie gut funktionieren und dass Sie sie durchlaufen können. Wir haben gesagt, Screenreader oder ohne eine Maus zu verwenden, nur um sicherzustellen, dass jeder zu diesen Kontrollen, wo möglich, können wir immer eine Abschrift von dem, was los ist Andi wieder. Dies ist nur etwas, das es für alle besser macht, denn selbst Menschen ohne Behinderungen ziehen es oft vor, das Protokoll zu lesen, zum Beispiel, Sie sind mit öffentlichen Verkehrsmitteln. Vielleicht hast du deine Kopfhörer vergessen oder du liest einfach nur mit dem Video zusammen. Ich kenne auf einer Menge die FedEx Kurse. Sie stellen das Video auf einer Seite des Bildschirms, und sie setzen das Protokoll auf der anderen Seite des Bildschirms, so dass Sie buchstäblich
das Video hören und lesen Sie auf seine offensichtlich großartig, wenn Sie hören und Eltern haben. Aber viele Leute, die gut hören können, tun das gerne auch. Also, wieder macht es einfach besser für alle auf. Sie können leicht diese Transkriptionen und Untertitel von Anbietern gemacht bekommen, so dass Sie gehen und jemanden auf einen Dienst wie fünf Jahre
einstellen können. Sie können zu Transkriptionsdiensten wie Rev auf den Ägyptens gehen. Geben Sie ihnen Ihre Audiodaten in Ihrem Video und sie kämpfen mit Untertiteln oder Transkript oder was immer es ist, das Sie wieder wollen. Beschriftungen, die einem Transkript ähneln, werden zu einer schriftlichen, polierten Version. Untertitel sind die Untertitel. Es wird tatsächlich in das Video wieder auf bekommen. Wir können leicht rasten. Gehen Sie und erhalten Sie diese aus Werkzeugen wie rev oder fiver. Wir können auch Ihre Videos auf YouTube hochladen, und YouTube wird jetzt automatisch einige Untertitel für Sie erstellen, oder wir können sie manuell mit Software wie subs Factory erstellen, die lassen haben diese Untertitel in. Es hängt also davon ab, woran du arbeitest. Wenn Sie die Dinge kostengünstig halten möchten, dann können Sie sich mit Sub-Fabrik tun. Wenn du es nur erledigen willst, kannst
du uns irgendwohin bringen. Bezahlen Sie einfach jemand anderen, um es für Sie zu tun. Und dann könnten wir diese einfach auf das Video auf diese Weise kleben, Auch wenn Sie nicht hören können, können
Sie mit lesen, was passiert.
21. Formulare: in dieser Lektion betrachten wir die Verwendung von Formularen in unseren Entwürfen. Es ist eine der mächtigsten Funktionen, die wir verwenden können. Hier ist das Etikett. Jede Eingabe sollte mit dem Label vorbereitet werden, so dass, wenn ein Bildschirm wirklich zu diesem
Formularfeld kommt , es identifizieren kann, was in dieses Feld eingegeben werden soll, indem er dem Benutzer aus
dem Etikett ausliest . Jedes Mal, wenn Sie auf Eingabe gehen, sollten
sie unangemessene Beschriftung sein, die dem Benutzer mitteilt, was los war, ist ziemlich
gängige Praxis geworden , die Platzhalterattribute auch für Felder zu verwenden. Dies wird nicht empfohlen, da dies viel besser als zusätzlicher Hinweis dient, anstatt die gleichen Informationen wie ein Label zu
präsentieren. beispielsweise ein Geburtsdatumsfeld hatten, Wenn Sie
beispielsweiseein Geburtsdatumsfeld hatten,möchten
Sie, dass das Etikett das Geburtsdatum angeben soll. Sie würden das Geburtsdatum nicht in den Platzhalter einfügen, da dies
Informationen duplizieren würde . Stattdessen möchten
Sie
zum Beispiel ein ausgeblendetes Format bereitstellen , das Sie möchten,
dass das Datum sowohl in den möchten
Sie
zum Beispiel ein ausgeblendetes Format bereitstellen,
das Sie möchten,
dass das Datum sowohl in den
Daten als auch einen Schrägstrich aus dem gleichen Jahr einfügen. Sie wollte in diesem Format, das auf angemessene Sache wäre, um in den Platzhalter zu setzen. Oder Sie könnten auch einfach vermeiden, Platzhalter ganz zu verwenden, weil sie tendenziell
verwirrend sind . Eines der Dinge, die ich mir angeschaut habe, als ich meine Masterarbeit und Psychologiekriege machte, genau welchen Effekt der Platzhalter auf einen Großteil der Zeit hatte. Es verwirrte die Leute, denn obwohl es im Browser großartig ist, ist
es nicht klar, besonders wenn Ihre Vision nicht großartig ist, wie es aussieht, als wäre es irgendwie abgeschlossen. Andi. Manchmal überspringen die Leute einfach die Eingabe alle zusammen und
denken, dass ich bereits den Wert habe oder nicht wusste, warum dieser Wert dort drin war. So können Platzhalter nützlich sein, um Hinweise zu geben. Aber sie alle zusammen zu überspringen, ist oft eine bessere Option. Wir deaktivieren oft Schaltflächen, besonders wenn wir möchten, dass sich das Formular in einem gültigen Zustand befindet. jedoch, Wir empfehlen Ihnenjedoch,die Deaktivierung zu vermeiden. Die Bücher waren möglich, weil, wenn Sie dies tun, es nimmt den Tab-Index. Die Registerkarte indiziert also, wo, wenn Sie durch die Seite springen, indem Sie Tamp
drücken, Sie zu der gesamten Aktion führen. Welche Elemente auf der Seite, wie Links,
Importe, Importe, Schaltflächen und wenn Sie eine Schaltfläche deaktivieren, nimmt
es heraus, dass. Also nochmal, wenn Sie ein Bildschirmlesegerät und Ihre Tabs durch die Seite verwenden, werden
Sie diese Schaltfläche nicht sehen, und Sie werden verwirrt sein und sich fragen, wo sie ist. Eine bessere Option besteht also darin, dem Benutzer zu erlauben, das Formular in einem gültigen Zustand zu senden, indem er auf die
Schaltfläche geht und darauf klickt, ihnen
dann mitteilt, was er falsch gemacht hat, was er beheben muss, bevor
er es senden kann und fortfahren kann, wenn die schwierigste Teile oder Formen zugänglich zu machen ist der Umgang mit Fehlern Wenn möglich, dann wollen wir sie an die Quelle der Ära zu nehmen. Aber das Wichtigste ist, dass es wirklich klar ist, dass das Formular ungültig ist und was noch wichtiger ist, was sie brauchen, um zu beheben, welche Felder defekt sind. Also viel Zeit, die Sie Formular absenden, und es steht nur, füllen
Sie bitte alle Formularfelder aus. Einige von ihnen sind optional, einige von ihnen und nicht Sie wissen nicht, welche wirklich ärgerlich. Daher möchten
wir dem Benutzer wirklich klar machen, welche Felder das Problem verursachen,
und was wir brauchen, um eine gute Möglichkeit zu beheben, ist, sie auf den Fehler zu bringen,
sondern auch einige jede Beschreibung zur Verfügung zu stellen, die wir den Bereich verwenden können, der von Zehe identifizieren eine Fehlermeldung für dieses Feld wird später ein wenig mehr über Bereich sprechen. Aber in diesem Beispiel zum Beispiel haben
wir
zum BeispielE-Mail-Adresseingabe gegangen. Andi, vielleicht haben sie es nichts in das importiert. Also melden wir die MANERA in diesem Fall, dass die E-Mail-Adresse bereits registrierte
Weber ist . Also haben wir das Label, das beschreibt, was die Eingabe ist. Aber wir haben auch diesen Bereich beschrieben, durch die ihnen sagt, dass E-Mail-Kleider bereits registriert und so bedeutet, dass böse einloggen oder eine andere E-Mail-Adresse verwenden.
22. ARIA: in dieser Lektion wird über Bereich zu sprechen und wir werden mit einer Einführung beginnen. Es ist also Tonnen für zugängliche, reichhaltige Internetanwendungen. Und es kam vorbei, weil wir anfangen, auf diesem coolen Web aufzubauen, um zu stopfen, wo wir Desktop-Computer-Stil Funktionalität in einem Browser
implementieren. Onda Liebe. Die Zeit ist wirklich schwierig, die semantische Bedeutung dem Browser der
Hilfstechnologie zu vermitteln . Und so ging die W Free See auf der Kim Bereich integriert, in die HTML auf es
uns erlaubt , all diese coole Funktionalität, die in gebaut wurden Diese Dinge sind nur, wo Seiten ihre Anwendungen, um diese Bedeutung zu vermitteln Hilfstechnologie im Browser, damit jeder herausfinden kann, was los ist. Unser erster Stopp wurde aus dem Netz mit semantischem HTML zurückgerufen. Also, wenn wir das benutzen können, machen
wir Onda. Wir sind nur irgendwie zurück in die Gegend, wenn wir einfach nicht in der Lage, die Bedeutung zu kommunizieren, die wir in Vanille hasst E-Mail
wollen, aber es gibt Zeiten, die Sie vielleicht wollen, um es zu verwenden, aber proaktiver. Zum Beispiel haben wir
in den weniger Nicht-Formularen darüber gesprochen, wie wir die Schaltfläche „Senden“ nicht deaktivieren wollen, zum Beispiel, weil das aus dem Tab-Index genommen wird. Jetzt ist es in Ordnung, das untere Aussehen deaktiviert zu machen, also könnten wir CSS verwenden, um es so zu stylen, dass es gut aussieht und eine kleine Axt auf dem
Cursor hat . Jemand bewegt sich darüber, aber wir wollen nicht wirklich eine behinderte After-Sicht verwenden, weil das macht es unsichtbar unterstützende Technologie. die gleiche Weise, dass wir einfach großartig mit CSS und es aussehen lassen, als wäre es deaktiviert
,könnten
wir auch etwas wie , die deaktivierten Attribute verwenden, um Bildschirmlesegeräte zu sagen, was sie sehen würden, wie eine visuelle aufgeregte Person sehen würde. Es würde eine große Out-Taste in der gleichen Weise sehen, wie die Bildschirmlesegerät würde immer noch in der Lage sein, um es zu
tippen. Aber es würde diesen Bereich behindert sehen. Eines der Attribute, die wir Harris-Rollen verwenden können. Andi Rolls erzählen der Hilfstechnologie, welche Art von Elementnamen. Wenn Sie
zum Beispielein benutzerdefiniertes Menü pflanzen,
können Sie ihm eine Rolle der Navigation geben Nun,
zum Beispiel,
wenn Sie Styling von Kontrollkästchen an,
die einzige Möglichkeit, zum Beispiel Wenn Sie
zum Beispielein benutzerdefiniertes Menü pflanzen, können Sie ihm eine Rolle der Navigation geben Nun, zum Beispiel, wenn Sie Styling von Kontrollkästchen an, Arbeit ist mit einer Reihe von verschachtelten Spannweiten ziemlich üblich. Wenn Sie ausgefallene Formulare machen, möchten
Sie dem anklickbaren Element dort ein Kontrollkästchen geben, damit die unterstützende Technologie verstanden hat, dass eine Implementierung von einem Kontrollkästchen abwehrt, das nicht den Eingabetyp
verwendet. Überprüfen Sie, was das Standardmodell und auch gerollten Text, die ein wenig umstritten ist, weil es nicht Teil der offiziellen Norm oder Spezifikationen ist. Aber viele Browser haben es implementiert. Also, wenn Sie etwas haben, wo ein Bildschirmlesegerät wegen der eingebetteten Tags Aaron ist
, die es in sehr seltsame Sätze aufteilt, könnten
Sie Roll-Text auf das übergeordnete Element in die meiste Zeit setzen, das den Bildschirm bekommen würde Leser, um es auszulesen. Nun, nein, alle greifen auf Billy Consultant so zu. Viele Leute mögen es, sich an Standard zu halten, und ich kann völlig verstehen, dass ich ein bisschen Pragmatiker bin,
und ich möchte die beste Erfahrung, die für jemanden mit einem Bildschirmlesegerät möglich ist, also habe ich nichts dagegen es zu
benutzen. Ich denke, manchmal kann es das Problem lösen. Das ist eine Entscheidung für Sie und wie groß ein Problem Sie es finden. Was wir nicht brauchen,
sind redundante Rollen beispielsweise Wenn Siebeispielsweisedas Now-of-Tag verwenden, um die Navigation anzuzeigen, müssen
Sie dann nicht die Rolle der Navigation hinzufügen, da dies bereits von der NAFTA AG und der durchsuchen kann es bereits herausgefunden. Nur wenn wir einen Ersatz mit verschiedenen Panzern durchführen, müssen wir diese
zusätzliche Bedeutung haben . Ein gutes Beispiel dafür ist vom W drei C, wo sie einige Registerkarten aufbauen. Sie haben diese Tab-Liste, die die oberen Kopfzeilen ist, und darin haben sie Schaltflächen, die
jeweils eine Rolle von Tab hatten. Und es verwendet den ausgewählten Bereich, um anzuzeigen, ob diese Schaltfläche ausgewählt ist oder nicht. Auf auch, was es steuert, sind unten. Wir haben die Tabs, die aus Dibs gemacht haben, weil es kein Tamp-Tag an ist. Sie werden entsprechende Etiketten auf. Sie verwenden einen Tab-Index von Null. also eine positive Zahl verwenden, Wenn wiralso eine positive Zahl verwenden,die dem Browser richtig sagt, sollte
dies das fünfte Element sein, das wir ihm geben. Tabin sieht fünf aus, wenn sie durch sie fallen für dich Null. Das setzt in den Tab-Index, fällt aber in den normalen Fluss der Seite, so dass die Browns herausgefunden
haben, und es gibt auch minus eins, was bedeutet, dass es normalerweise nicht im Tub-Index sein würde. Aber wir können ihn manuell mit JavaScript so zuweisen, was dort mit dem
TAM-Index vor sich geht. Also hier können wir nur viele gute Beispiele sehen oder wo Sie alle Bereichs-Tags verwenden würden und wie man sie benutzt. Wir verwenden auch Etiketten Teoh Add Kontext. Also, zum Beispiel, wenn Sie ein kleines Hamburger-Symbol machen, was für einen sehenden Benutzer offensichtlich sein könnte, wie würden wir das ohne Ende kommunizieren? Wir könnten einige versteckte Steuern hinzufügen. Aber wir können auch einfach die Bereichsbeschriftung verwenden und sagen, dass dies in der Menü-Taste ist. Und dann haben wir einen Bereich versteckt
, wo wir alles aus dem Dom entfernen wollen, das rein präsentativ ist. Also alles Wichtige, über das der Browser wissen muss, würden
wir uns nicht verstecken. Aber zum Beispiel, in diesem Beispiel, das ich hier habe, haben
wir einen Artikel und es ist nur ein Bild in einem Titel, und dann klicken Sie durch die Hauptstory. Nun, das Bild speichert genau das Gleiche ist die Überschrift. Wenn Sie also durch die Seite auf scrollen, verwenden
Sie ein Bildschirmlesegerät, das Sie nicht sehen konnten. Sie müssten nicht wissen, dass dieses Bild da war, weil es ragt, kommuniziert die gleiche Information war Überschrift. Sie erhalten keinen Wert mehr, wenn Sie das Bild selbst nicht sehen können. Und so konnten wir das einfach verbergen, obwohl es in diesem Fall erwähnenswert ist, dass wir einfach einen leeren Tank benutzen könnten. Aber Sie könnten dieses Bild auch in ein Link-Tag umschließen, in diesem Fall könnten Sie einfach den gesamten Link ausblenden, weil Sie wieder die Informationen und
Überschrift darunter in Form von Formularen erhalten haben . Dann wollen wir Teoh benutzen. Beschriftungen, die mit beschriftet sind, stellen eine Verknüpfung zwischen einem Element und Beschriftungen her. Wenn Sie also nicht nur die Standard-Etiketten verwenden, können
Sie dasselbe tun, indem Sie den Bereich mit Requisite beschriftet haben. Und dann haben wir eine Reihe von Funktionen, zum Beispiel
zum Neuerstellen von Kontrollkästchen, über die wir gesprochen haben. Möglicherweise verwenden Sie eine Spanne und Sie können keine Dinge wie Bereich überprüft, um es auf Aria anzuzeigen deaktiviert, wenn Sie die Böden machen, die Sie nicht möchten, um den Tab in der nächsten entfernen. Aber Sie möchten den Benutzern mitteilen, dass es dieses Formular nicht einen Moment senden sollte, weil es kaputt ist. Also schauen wir uns auch ein Beispiel an, wie wir das nutzen können. Also hier haben wir ein kleines, das ein Kontrollkästchen ist. Wir werden zeigen, dass dieses Kontrollkästchen über das Abonnieren eines Newsletters. Also werden wir den mit beschrifteten Bereich verwenden und ihm das I D des Elements geben, das wir wollen. Aber auch, sagen
wir, wir wollen ein bisschen mehr Informationen hinzufügen, sagen wir einen kleinen Text darunter. Dann können wir den Bereich auf dem Weg beschrieben nutzen, um über zwei nachzudenken. Ist der von Es beschriftete Bereich gleich am Anfang ausgelesen, wenn er erklärt, worum es bei der Eingabe geht und wirklich beschrieben wird, kommt später, es spart bis zum Ende. Es ist irgendwie wie zusätzliche Informationen. Es ist nicht so wichtig, dass wir später warten können, die in das Gebiet
von Endlich beschrieben gehen will , haben
wir Live-Regionen. Also verliebt, Web zwei tat dynamische Updates auf der Seite. Andi, wenn du nur durch die Seite ziehst, siehst
du nicht auf die Seite. Sie verwenden ein Bildschirmlesegerät. Sie werden nicht unbedingt wissen, dass Einige Inhalte oben an der Spitze aktualisiert hat. Wenn Sie weiter unten auf der Seite sind,
so, um dem Benutzer zu sagen, was hier los ist, können
wir Ari lebendig auf diesem verwenden, sagt der Bildschirmleser, um auszulesen. Alle Änderungen sind im Gange. Es gibt zwei Arten. Es gibt also die höfliche Einstellung, was bedeutet, dass ein Bildschirmlesegerät ausliest, wenn es Zeit hat. Wenn es also etwas anderes durchliest, wird
es das zuerst lesen und es dann vielleicht später ankündigen. Assertive bedeutet, dass Sie diese Änderungen ankündigen sollten, sobald sie jetzt für Evers und
Alerts geschehen , dann haben wir bereits eine Abkürzung, um Region zu leben, die wir verwenden können und ihn in einer Rolle der Warnung fragen und das wird die Bildschirmlesegerät zu lesen die Alarmbereitschaft auch gerade Weg aus.