Entwicklung für Barrierefreiheit (Für Anfänger:innen geeignet): Erstelle eine barrierefreie Website!

1. Einführung: Hi, alle. Mein Name ist Brendan Kelly. Willkommen bei der Entwicklung für Barrierefreiheit, Aufbau zugänglicher Webseite Ein wenig über mich selbst. Ich bin seit 2009 ein Front-End-Webentwickler, der sich auf HTML spezialisiert hat. CSS, JavaScript und Barrierefreiheit und verschiedene Front und Frameworks wie angular und Bibliotheken wie Jake Weary, ich habe, ah, zurück ersten Abschluss in Web-Entwicklung und einen Master-Abschluss in Erwachsenenbildung. Also heute werde ich Ihnen lehren, die Grundlagen der Erstellung einer zugänglichen Webseite waren eine Reihe von verschiedenen Bereichen, wie die Richtlinien, die wir brauchen, um eine solche Abschnitt folgen 50 warten in den Web-Content Barrierefreiheitsrichtlinien, die geschrieben und gepflegt vom W drei Sitz und dann auch über die Bedeutung des Schreibens von semantischem HTML-Markup und der Betrachtung von Aria, die für erfolgreiche Rich Internet-Anwendungen steht, sprechen. Und dann schauen Sie sich die verschiedenen Attribute an, die dort verfügbar sind und wie Sie diese verwenden. Dann schauen wir uns den Farbkontrast an und wie Sie Ihre Farbpalette richtig bewerten können, um sicherzustellen, dass Sie die richtigen Konformitätsverhältnisse für Ihre Webseite erhalten. Und dann werden wir uns eine Reihe von verschiedenen Elementen und Attributen ansehen, die Sie zu Ihrem Paging hinzufügen können und sofort verwendet werden , um eine verbesserte Zugänglichkeit direkt aus dem Gate zu erhalten . Und schließlich, was wir tun werden, ist zu schauen, wie Sie Ihre Webseite richtig bewerten mit einer Tastatur und einem Bildschirmlesegerät, und auch einige kostenlose Tools wie Welle und Handlungen zu realisieren, und schauen, wie diese in der Lage sein werden helfen Ihnen, die richtige Compliance zu erhalten. Und dann, am Ende dieses Kurses, nehmen Sie alles, was Sie gelernt haben, und erstellen Sie Ihre erste erfolgreiche Webseite , die Informationen über Ihr Lieblingshobby bietet. Alles klar, gehen wir. 2. Was ist Web und was sind die Richtlinien der Richtlinien: begann, indem wir darüber reden, was Web Barrierefreiheit ist und was die Kerl Inseln sind, denen wir folgen müssen. Wikipedia hat also eine wirklich gute Definition dessen, was Web-Zugänglichkeit ist, und sie sagen, dass Web-Zugänglichkeit integrative Praxis ist, um sicherzustellen, dass es keine Hindernisse gibt , die Interaktion mit oder den Zugriff auf Websites im World Wide Web verhindern, indem Menschen mit Behinderungen. Wenn Websites der korrekten Design-Entwicklung bearbeitet. Im Allgemeinen haben alle Benutzer gleichen Zugriff auf Informationen und Funktionen, daher ist Barrierefreiheit für Entwickler und Organisationen wichtig, die qualitativ hochwertige Websites und Web-Tools erstellen und Personen nicht von ihren Produkten ausschließen möchten . -Dienstleistungen. Web-Zugänglichkeit und Tassen sind alle Behinderungen, die visuelles Hören, körperliche und kognitive Behinderungen umfassen . So zu kämmen in Begriffen, die Sie hören, wenn Sie über Barrierefreiheit sprechen, sind unterstützende Technologien und adaptive Strategien, unterstützte Technologien, Hardware und Software, die Menschen mit Behinderungen verwendet, um die Interaktion mit dem Web. Dazu gehören Bildschirmlesegeräte, die Webseiten für Personen vorlesen, die die Textbildschirmlupe für Personen mit bestimmten Arten von Sehbehinderten- und Spracherkennungssoftware sowie Auswahlschalter für Personen, die keine Tastatur oder Maus verwenden können und adaptive Strategien sind die Techniken, die Menschen mit Behinderungen verwendet, um die Interaktion mit dem Web zu verbessern , wie zum Beispiel die Erhöhung der Textgröße, die Verringerung der Mundgeschwindigkeit und das Aktivieren von Untertiteln. Nun, unter den beiden Standards und Richtlinien, die Abschnitt fünf in den Richtlinien für die Barrierefreiheit von Web-Inhalten enthalten. So 1998 Kongress geändert, dass Rehabilitation Act von 1973 Bundesbehörden verlangen die elektronische Informationstechnologie für Menschen mit Behinderungen zugänglich zu machen. Nach Abschnitt 5 „entfernt müssen die Agenturen behinderten Arbeitnehmern und Mitgliedern der Öffentlichkeit Zugang zu Informationen gewähren dem anderen vergleichbaren Zugang vergleichbar sind. Und einige der Beispiele dieser Richtlinien sind die Bereitstellung von Text-Alternativen oder Bildern und anderen Nicht-Text-Inhalten, einschließlich Komponenten der Benutzeroberfläche. Bereitstellung von synchronisierten Untertiteln für voraufgenommene Video-Multimedia. Und 1/3 würde eine vernünftige und logische Leserichtung bieten, wenn ein Sinn für Technologie verwendet wird. Und wir reden noch ein bisschen mehr darüber. Konkret später, wenn wir über Semantik und ordnungsgemäßen Ablauf sprechen oder über eine Webseite, die zu den Richtlinien für die Barrierefreiheit von Web-Inhalten geht , W. C. A. W. C. A. G kurz So W. C. A. G wird durch den W drei C-Prozess in Zusammenarbeit mit Einzelpersonen und Organisationen auf der ganzen Welt mit einem Gold entwickelt , der einen einzigen gemeinsamen Standard für Web-Zugänglichkeit bietet , der den Bedürfnissen von Einzelpersonen entspricht, Organisationen und Regierungen auf internationaler Ebene. W. C E. G deckt also C E. die gleichen Standards von Abschnitt fünf ab, aber viel mehr. Die Richtlinien und Erfolgskriterien der W. C A. G organisierten die folgenden vier Prinzipien, die die Grundlage für den Zugriff und die Nutzung der Web-Inhalte legen. Wer das Web nutzen möchte, muss Inhalte haben, die wahrnehmbar, bedienbar, verständlich und robust sind. Daher müssen Informationen und Benutzeroberflächenkomponenten den Benutzern auf eine Art und Weise vorzeigbar sein, die sie wahrnehmen könnten. Benutzeroberflächenkomponenten und Navigation müssen bedienbare Informationen sein, und die Bedienung der Benutzeroberfläche muss verständlich sein. Und Inhalte müssen robust genug sein, dass sie von einer Vielzahl von Benutzeragenten, einschließlich Hilfstechnologien,zuverlässig interpretiert werden von Benutzeragenten, einschließlich Hilfstechnologien, können. Nach jedem der Grundsätze sind Leitlinien, dass Erfolgskriterien, die dazu beigetragen haben, diese Grundsätze für Menschen mit Behinderungen und jedes der Erfolgskriterien mit einer von drei Konformitätsprioritätsstufen identifiziert werden . Es gibt Luftebene eine Ebene Doppel A und Ebene Triple A Ebene A etabliert eine Baseline Ebene der Konformität und deckt eine grundlegende Reihe von grundlegenden Fragen der Barrierefreiheit wie alternative Textbilder und Untertitel und Videos. Stufe A ist die minimale Konformitätsstufe. Double A enthält zusätzliche Erfolgskriterien, z. B. die Bereitstellung einer sichtbaren Fokusanzeige für Tastaturbenutzer und die Sicherstellung eines ausreichenden Farbkontrastgrades Double A ist ein Schwerpunkt der meisten Organisationen, weil es ein angemessenes Ziel für Websites und Webanwendungen bietet , und dann Stufe Triple A ist das höchste Leistungsniveau, das W C E G 2.1 entspricht. Es nivelliert Triple A würde bedeuten, dass jedes einzelne Erfolgskriterien erfüllt werden müsste, hat tatsächlich durch die W drei C angegeben. Es wird nicht empfohlen, dass nivellierte Triple A Konformität erforderlich ist, ist eine allgemeine Politik für ganze Websites, weil es ist nicht möglich, alle Level Triple A Erfolgskriterien für etwas in Ordnung zu erfüllen, das Standards und Richtlinien umschließt. Als nächstes wird die HTML-Semantik 3. Semantik langweilig: in diesem Video-Segment werden wir speziell über HTML-Semantik und Seitenreihenfolge sprechen. Semantisches Markup ist HTML, das einer Webseite eine Bedeutung liefert, anstatt nur Präsentation. Elemente wie Header main, Butter, Knave, eine Taste und so weiter haben eine spezifische Bedeutung und vermitteln dies dem Browser und Hilfstechnologie des Benutzers . Bei der Verwendung von semantischem Markup hat bereits viel für Sie nativ für die Barrierefreiheit getan. Zum Beispiel werden Tags für die Navigation und Schaltflächen verwendet oder für die Benutzerinteraktion verwendet. Wenn eine Webseiten mit reichhaltigem semantischem Markup erstellt, macht es viel einfacher und effizienter für Hilfstechnologie, durch sie zu navigieren und die Informationen zurück an den Benutzer zu übermitteln. Verwendung von Rich Markup wird also nicht nur Ihre Webseite nativ zugänglicher machen. Aber es wird auch den S CEO Ihrer Website zu verbessern. Eine weitere wichtige Sache, die Sie beachten möchten, wenn Sie eine Webseite für Barrierefreiheit entwickeln , ist, Ihre Elemente in einer richtigen Leserichtung zu halten. Zwei. Spezial. Betrachten Sie es einfach als oben links nach unten rechts Fokus. Reihenfolge ist wichtig, denn wenn ein Benutzer durch Ihre Seite navigiert, wird er eine Erwartung haben, wohin dieser Bildschirmlesegerät oder Fokusring sie als nächstes bringen wird . Wenn Sie also den Site-Namen in der Kopfzeile Ihrer Website haben würden, fokussiert und dann die Tab-Taste drücken und sie irgendwo anders in die Seite gesprungen ist, wäre das für den Benutzer und unerwartetes Verhalten verwirrend. Als nächstes möchte ich Ihnen einige Beispiele für mein semantisches Markup zeigen, das ich in meinem Projekt verwendet habe. Ich baute eine Webseite, die Informationen um Sie benötigen Auto-Restaurierung anzeigt. Also zuerst werde ich Ihnen zeigen, wie ich die Hauptabschnitte der Webseite mit semantischen HTML-Tags aufschlüssele . Wenn wir also in den Körper schauen, habe ich meinen Haupt-Header, mein Haupt-Haupt-Tag und mein Hauptfuß-Tag. Und wenn Sie in jede von ihnen zerlegen, dann fange ich an, die Dinge in kleinere Abschnitte zu unterteilen, und ich habe tatsächlich das hnl-Abschnitt-Tag verwendet, um dann jeden einzelnen Abschnitt in jedem einzelnen Bereich zu notieren . Wenn ich also mein Haupt-Tag öffne, wird dies diesen Punkt ein wenig besser veranschaulichen. So sehen Sie, wo mein erster Abschnitt in main meine Intra-Grafik ist, und dann mein zweiter Abschnitt ist meine Quicklink-Elemente. Und in meinem dritten Abschnitt ist mein Rampenlicht Bereich. Und schließlich, meine vierte sind meine vorgestellten Artikel. Und wenn ich dann in meine Fußzeile einbreche, habe ich nur einen Abschnitt, der meinen Text in der Fußzeile und dann meine sozialen Symbole enthält. Also lasst uns das ein bisschen tiefer in meinem Kopf zerbrechen. Äh, ich habe meinen einzigen Abschnitt, aber da drin habe ich meine Haupt-H eins und in meiner Navigationsstruktur. Und wenn ich Websites entwickelt habe, würde ich gerne der Regel folgen, eine H auf einer Seite zu haben, die immer der Websitename in der Kopfzeile ist. Und dann von dort, Ich mag es, durch die verschiedenen Überschriftenstufen kaskadieren, Level H zwei, h drei und so weiter. Und wir wollen sicherstellen, dass wir die Überschriftenebene nicht überspringen, denn wenn wir das tun, wird es gekennzeichnet und Werkzeuge für die Barrierefreiheits-Evaluierung. Dann ging ich zu meiner Navigationsstruktur, ich natürlich das Alter Geruch Knave Tag, benutzte ich natürlich das Alter Geruch Knave Tag,um zu starten, und dann benutze ich eine unveränderte Liste. Ich verwende gerne unveränderte Listen, wenn ich eine Gruppierung verwandter Elemente habe, und das ist nicht nur für die Navigation. Das sind vier verschiedene Artikel oder in diesem speziellen Fall natürlich natürlich eine Liste von Links und so weiter. Also verwende ich meine eigenen Wortlisten und in jedem Listenelement ist ein Navigationselement, und ich habe nur eine einfache Navigationsstruktur. Ich habe keine Drop-Downs oder so etwas. Ich will es nicht zu sehr für ein Projekt komplizieren. Also haben wir nur eine regelmäßige Liste von Links, nichts zu kompliziert und weiter in den Haupt-Tag-ersten Abschnitt. Wir haben die Intragrafik und ich markiere dies mit dem Figur-Tag innerhalb des Figur-Tags. Wir haben nur unser einfaches Bild mit, natürlich, unseren ganzen Text. Und dann für die Beschriftung habe ich das FIG-Beschriftungs-Tag mit einem H zwei und einem Absatz-Tag darin verwendet. Und wenn Sie bemerken, dass ich meine H zwei verwendet habe, aber ich benutze ein span -Tag, um es in mehrere Zeilen zu brechen. Es ist nie eine gute Idee, mehrere Alters-Tags zu verwenden, wenn Sie nur versuchen, einen Titel in mehrere Zeilen zu teilen . Verwenden Sie einfach eine Span-Tag innen dort, sagte es, Block anzeigen und treten Sie es auf die nächste Zeile. Auf diese Weise wird unterstützte Technologie sehen, dass als ein einziger Header und nicht zu lesen, ist es auch. Das wird für den Benutzer verwirrend sein, dann gehen Sie nach unten zu unseren QuickLink-Artikeln. Ich habe ein H drei für diesen Titel verwendet, und dann habe ich wieder unveränderte Liste für jeden schnellen Artikel verwendet. Jetzt denken einige Leute vielleicht, dass die Verwendung von nur geraden Artikel-Tags, um diese aufzuteilen, einfach zu gut wäre , und sie wären korrekt. Ich mag es, auf der bestellten Liste speziell zu verwenden, weil , wenn ein Screenreader dies durchliest , Sie Oto einfach von einem Element zum anderen Schlüssel sein werden, was natürlich dasselbe ist, wenn Sie Artikel-Tags. Aber die Plusseite der in der Reihenfolge Liste ist, dass es tatsächlich eine von vier oder zwei von vier und so weiter sagen wird. Und das gefällt mir wirklich. Ich denke, es ist ein besseres Feedback für den Benutzer. Also, wenn ich in meine eigene Bestellliste schaue, verwende ich ein A-Tag für diese schnelle Anleitung, weil sie in der Tat Links sind. Sie werden für die Navigation benutzt. Also benutze ich das ist mein Haupt-Rapper, und ich habe nur ein einfaches, gekämpftes fantastisches Symbol mit einem einfachen Titel und einer einfachen Beschriftung Bewegen zu meinem Rampenlicht. Ich habe nur einen einfachen Artikel mit einem H drei in einem Absatz-Tag und dann ein Akzentbild ab zur Seite, springe wieder zu meinen Top-Stories, ich benutze eine unveränderte Listen. In jedem Listenelement befindet sich ein Absatz-Tag und dann einige Span-Tags, um das Layout aus einem Bild und Text zu erstellen . Und schließlich, in meinem Fußzeilenabschnitt, habe ich nur einen einzigen Abschnitt mit einem Absatz-Tag für meinen Text, der Zeilen links und dann auf einer nordle ist Struktur für meine sozialen Symbole, die rechts ausgerichtet werden, So dass Wraps bis HTML-Semantik. Denken Sie also daran, dass es viele semantische HTML-Tags gibt, und Sie möchten sicherstellen, dass Sie das richtige Tag für jedes bestimmte Element verwenden, das Sie entwickeln, um sicherzustellen, dass Sie die größte Bedeutung aus Ihrer Webseite erhalten. Als nächstes wir einen genaueren Blick auf Links und Bilder 4. Ein genauer Blick auf Links und Bilder: Weg-Segment. Wir werden einen genaueren Blick auf Links und Bilder werfen, diese Luft gemeinsamen Problembereiche, die ich eine Menge von meinem Job sehe, und ich denke, es ist eine gute Idee, sich einige Zeit zu nehmen, um einige gute Anwendungsbeispiele zu betrachten. Was ich hier getan habe, ist meine Projekt-Webseite genommen und unten ein paar zusätzliche Abschnitte erstellt , wo ich einige gute Bildbeispiele, einige gute Linkbeispiele und dann schließlich einige gute Beispieleillustrieren einige gute Linkbeispiele und dann schließlich einige gute Beispiele werde, in denen wir die beiden, wo wir Bilder verlinkt haben. Wenn wir uns das erste Beispiel ansehen, haben wir nur ein einfaches Bild mit etwas Text und das zweite Beispiel. Wir haben ein Bild mit leeren alle Text mit einer Beschreibung unten, Lassen Sie uns über den Code springen und sehen, wie das aussieht. Es ist so hier drin, Sie werden sehen, dass ich wieder eine unveränderte Liste verwende, und im ersten Element haben wir dieses einzelne Bild mit beschreibendem gesamten Text. Jetzt wollen wir sicherstellen, dass wir beschreibenden gesamten Text verwenden, denn wenn ein Screenreader oder eine Hilfstechnologie dieses Bild an den Benutzer zurückliest, wollen wir sicherstellen, dass sie verwenden oder vollständig verstehen, was das Bild ist und aussagekräftig ganz Texas. Wie wir das machen werden, springen zu unserem zweiten Beispiel. Dies ist, wo ein Bild eine visuelle Beschriftung hat, und in diesem speziellen Fall möchten wir alle Attribute leer lassen, da es zu einer Redundanz führt. Wenn Sie sich zur Kenntnis nehmen, wird die Beschriftung direkt nach dem Bild und die Hilfstechnologie wird darauf aufgreifen . Also lassen Sie uns die Stimme abfeuern und sehen, wie diese Bilder klingen. Was ich tun werde, um diese Bilder zu navigieren, es ist halten v o Schlüssel und verwenden Sie meine linke und rechte Pfeiltasten. Jetzt, wenn ich sagen v o Schlüssel, das bedeutet Steueroption. Wenn Sie die Dokumentation über das Navigieren mit Voiceover lesen, bezieht sich vo immer auf die Steuerungs- und Optionstasten zusammen. Also in der Zukunft, wenn ich vo sage, werden Sie wissen, welche Tasten und sprechen über Steuerung plus Option und Stimme, die den Text ziemlich schnell lesen würde , weil ich meine Rate ziemlich hoch habe, aber Sie können auf die Voiceover-Dienstprogramm auf Ihrem Computer, um es nach Ihren Wünschen anzupassen. Oldtimer Auto Anhänger Früher, wenn Sie bemerkt, dass der Vintage-Chevy Truck am besten in der Show gewonnen hat, wurde die Beschriftung korrekt durch Voice-Over als Bildbeschreibungstext identifiziert. Die größten Probleme, die ich regelmäßig mit Bildern sehe, sind, dass Bilder entweder kein altes Attribut haben oder ein leeres Attribut haben, wenn eines benötigt wird. Oder es gibt nicht beschreibenden Text für alle Attribute. Es gibt also zwei andere Dinge, die ich erwähnen möchte, dass eine gute Bildverwendung in der 1. 1 auf meinen Spotlight-Abschnitt über den Hintergrundbildern zurückverweisen wird , ein dekoratives Bild, und es vermittelt keinen Inhalt. In diesen Fällen sollte das Attribut all leer gelassen werden. Noch wichtiger ist, dass , dass dekorative Bilder am besten über CSS-Hintergrund angewendet werden, so dass es nicht physisch im Fluss der Webseite ist. Wenn Sie ein dekoratives Bild in HTML-Struktur haben müssen. Was ich am besten tun möchte, ist, einfach eine Rolle hinzuzufügen, die Präsentation entspricht und Bereich Hidden gleich wahr ist, zusammen mit dem leeren Text. Auf diese Weise stellen wir sicher, dass es vor der assistiven Technologie verborgen ist und drittens auf den intra grafischen Abschnitt oben verweisen wird . Obwohl es nicht viel Informationen vermittelt, wollte ich es absichtlich im Fluss meiner Webseite und um jetzt von Hilfstechnologie gelesen zu werden möchte ich zu Links übergehen. Es gibt eine Reihe von verschiedenen Dingen, die ich über Links sprechen möchte, ein paar Dinge, die beinhalten, ob der Link in einem neuen Fenster öffnet oder nicht. Richtige beschreibende Textlink-Dekoration und Vermeidung von redundanten Sie URLs. In meinen guten Link-Beispielen ist mein erstes Beispiel nur ein einfacher Link mit beschreibendem Text, der sich nicht in einem neuen Fenster öffnet . Und mein zweites Beispiel ist ein Link mit beschreibendem Text, öffnet sich aber in einem neuen Fenster. Und was ich hier anzeige, ist der einfachste Weg, um einen Benutzer darauf hinzuweisen, dass dieser Link in einem neuen Fenster geöffnet wird . Dies ist ziemlich üblich, wo der Benutzer einen visuellen Indikator haben wird, dass der Link in einem neuen Fenster öffnet und auch von der Bildschirmlesegerät gelesen werden, weil, natürlich, sie gehen, um den Linktext zu lesen und die öffnet in einem neuen Fenster. Benachrichtigung ist in diesem Text enthalten, also lassen Sie uns über den Code springen, um zu sehen, wie diese aussehen. Also wieder, mit meiner a nordle ist und meinem ersten Beispiel ist mein einfacher Link, der sich im selben Fenster mit beschreibendem Text öffnet . Nichts zu kompliziert mit diesem hier los. Aber mein zweites Beispiel ist, wo ich den Link in einem neuen Fenster geöffnet habe, indem ich die Zielattribute am leeren und wo auch die Öffnungen einschließe, einen neuen Fenstertext in der Linkbeschreibung. Es gibt ein paar verschiedene Möglichkeiten, mit dieser Funktionalität umzugehen. Aber bei weitem am einfachsten in der einzigen Einheit, über die wir in dieser Klasse sprechen werden, sind die einfachen Öffnungen in einem neuen Fenstertext, der im beschreibenden Linktext enthalten ist , der wieder auf die Seite springt . Es gibt drei andere Dinge, die ich über gute Linkbeispiele sprechen möchte. Und die 1. 1 ist, dass wir sicher waren, um beschreibenden Link-Text zu verwenden, wie klicken Sie hier oder lesen Sie mehr, ist nicht beschreibend und bietet keinen Kontext für den Benutzer. In Kürze werden wir anfeuern, aussprechen, und wir werden eine Anzeige haben, eine Liste von Links, die auf der ganzen Webseite verteilt sind. Und da wirst du wirklich sehen können, wo das für uns problematisch sein könnte . Also wollen wir immer sicherstellen, dass wir den aussagekräftigsten Linktext geben Viertens haben wir darauf geachtet , einen anderen Indikator als nur Farbe zu verwenden. Jetzt sehen Sie, dass durch Links Luft grün in Farbe, aber sie sind auch unterstrichen, welche Benutzer erwarten. Andere übliche Beispiele außer Unterstreichung wäre gekämpft Gewicht oder Grenzen. Und schließlich möchten wir sicherstellen, dass wir den Focus ST mit unserem Hover-Zustand abgleichen, so dass die Interaktion genau gleich ist, egal ob Sie mit der Tastatur oder einer Maus navigieren. Also jetzt möchte ich Voice-Over öffnen, und ich möchte durch die beiden Links navigieren, die wir haben. Aber dann möchte ich die Liste der Links, die auf der Seite mit der Straße oder Funktion und Voiceover Jungs über Sie Auto Restaurierung benötigen. Google-Fenster. Sie benötigen Auto-Restaurierung Inhalt. Probieren Sie es aus. Öffnen Sie das Fenster. Sie also eine Stimme hören, können Sie klar sagen, welcher Link ein neues Fenster öffnet, in dem man nicht ist. nun Öffnen wirnundie Straße oder das Werkzeug und schauen Sie sich die Liste der Links auf der Webseite an. Links, die Sie verlinken zu Hauptinhalt Links, Links, Links, Links, Links, Absetzen, Absetzen, Absetzen chemisch chemische Beleidigung mich. Finden Sie, dass Sie nach etwas suchen, um es zu versuchen. Blinkendes Auto Zug Verbindung. Vintage Chevy Truck gewann am besten in Show Links Facebook-Link Twitter blinkt Lincoln, Wie ich erwähnt, indem ich auf die Liste der Links die Stimme ihrer bietet, können Sie wirklich sehen, wie es für einen Benutzer von all diesen Listen verwirrend wäre. Gerade gesagt, klicken Sie hier oder lesen Sie mehr beschreibenden Link. Tex hilft dem Benutzer wirklich zu verstehen, wofür diese Lecks Luft sind. Das letzte Mal, dass ich abdecken möchte, sind einige gute Anwendungsbeispiele für verknüpfte Bilder. Ich habe hier zwei Beispiele. Es ist nur ein einfaches Bild mit dem gesamten Text, der in ein Tag eingewickelt ist. Und mein zweites Beispiel ist ein Bild mit leerem ganzen Text mit einer externen Beschreibung, die in einem Tag eingewickelt ist , die zwei Beispiele liegen ähnlich denen, die wir oben beschrieben haben, wenn wir über Bilder mit allen Texten oder Bildern mit einer visuellen Beschriftung gesprochen haben. Mein erstes Beispiel ist nur ein einfaches Bild mit beschreibendem Text, gesamte Text in einem Tag umgebrochen ist. Mein zweites Beispiel ist das Bild mit leeren Attributen für die externe Beschriftung. In meinem ersten Beispiel verwendet der Screenreader das Bild alle Attribute als Linktext. Und in meinem zweiten Beispiel verwendet der Screenreader den Beschriftungstext als Linktext besucht. Link Carlin Car Dreamer Lassen Sie uns wie ein besuchter Link tun. Vintage Chevy Truck gewann am besten in der Show, so dass schließt die Beispiele, die ich mit teilen wollte. Sie müssen sich einen Code ansehen und sich die Beispiele in Aktion mit Voiceover ansehen. Als Nächstes werden wir Area-Attribute und Rollen suchen. 5. ARIA und Rollen: Warten Sie. Nächstes Segment, werden wir den Bereich Spezifikationen, die geschrieben und gepflegt wird von der W drei c Verschiedene Haltung waren zugänglich reiche Internet-Anwendungen Bereiche, eine Reihe von vordefinierten Attributen verwendet, um Web Inhalte und Web-Anwendungen, die für Menschen mit Behinderungen besser zugänglich sind. Seine primäre Verwendung mit Situationen wie dynamischen Inhalten und erweiterten Benutzeroberflächen. Wo HTML, CSS und JavaScript allein nicht genug sind. Es gibt drei Kategorien für Flächenattribute. Dies sind Rolls, Eigenschaften und Zustände. Rollen sind Attribute, die helfen, das Element, den Typ und den Zweck zu finden , und ein Rollenwert kann sich nicht ändern. Ein Beispiel. Werte von Rollen sind Menümenü-, Balkenüberschriften- und Kontrollkästcheneigenschaften oder Attribute, die zusätzliche Bedeutung oder Informationen für das Element bereitstellen , auf das es angewendet wird. Ein Beispiel. Werte für Eigenschaften sind Bereichssteuerelemente. Bereich hat Pop-up einen Bereich Live-Status oder Attribute, die helfen, interaktionsbasierte Informationen für das Element bereitzustellen , das angewendet wurde, und Status ändern sich am ehesten im Laufe Zeit durch Benutzerinteraktion oder andere Aktionen. Ein Beispiel. Werte von Zuständen sind Bereich erweitert. Ihre Sie haben den Bereich Preston überprüft, der ausgewählt wurde, um im Rahmen dieser Klasse zu bleiben, werden wir nicht erweiterte Implementierungen des Bereichsmarktes abdecken, aber ich möchte Sie durch meinen Projektcode führen und einige der Bereichsattribute anwenden , die dazu beitragen, die Qualität meines Markups zu erhöhen. Ich muss nicht sehr viele verwenden, weil ich bereits das richtige semantische Markup verwendet habe. Aber es gibt einige Bereiche, in denen ich meine Seite verbessern möchte. Was ich zuerst tun möchte, ist das Markup meiner Navigationsleiste Shell CEO zu verbessern. Meine UNO hat Liste bestellt. Wenn ich dem Brunnen eine Rolle Menüleiste hinzugefügt habe, eine Rolle von keiner zu jedem Verbündeten und eine Rolle von Menüpunkt Teach-Link jetzt eine Rolle von keinem auf jedem Verbündeten verwendet , weil die Rolle der Menüleiste Hilfstechnologie es als Menü unseres Elements erkennt anstelle einer tatsächlichen UL, wie es ist. Wenn Sie also Ihre Seite mit dem Auswertungswerkzeug für Unzugänglichkeit auswerten, werden diese Elemente gekennzeichnet, weil es die UL als Menüleistenelement und nicht als UL erkennt in dem Verbündete in Ihnen sein sollen. L. Sie müssen also eine Regel von keiner anwenden, damit diese konform sind. Der zweite Bereich, über den Sie sprechen möchten, sind das Symbol in meiner schnellen Ressource ist Abschnitt. Ich habe einen ausgeblendeten Bereich angewendet, der jedem meiner Icon-Bilder entspricht, weil ich möchte, dass sie visuell gesehen werden. Aber ich halte es nicht für notwendig, dass assistive Technologie diese interpretiert. Und dann, schließlich, für meine Social-Media-Symbole, verwende ich Icon wieder in jedem Tag, und es gibt keinen beschreibenden Text, der mit diesen verknüpft ist. Was ich also tun könnte, ist entweder Text innerhalb der A-Tags zu haben, der visuell verborgen ist, aber für unterstützende Technologie zugänglich ist. Oder wenden Sie einfach eine Antenne in der Lage auf ein Tag, was ich getan habe, so habe ich eine Bereichsbeschriftung für Facebook angewendet, Twitter und verlängern. Sobald Sie die Anwendung haben, können diese Attribute den Unterschied in der Interpretation der Elemente und Inhalte durch unterstützende Technologie erkennen. Lassen Sie uns einen Voiceover starten und auf den Webseiten navigieren. Sehen Sie, wie es direkt bei uns ist. Überschrift Ebene eins. Sie benötigen Auto-Restaurierungsarbeiten, Navigation, ein Element Menüpunkte. Sie sind zurzeit zu Hause. Jeder wollte für die Herstellung Menüpunkt vor der Karosserie. Menüpunkt drei oder vier Suspensionen für vier, und eine Minibar und Navigation und ein Anbieter für Hintergrundbild. Komplette Restaurierung. Du bekommst zu zwei Gegenstände. Willkommen, Sie brauchen Auto Restaurierung. Dies ist eine kleine Sammlung meiner Arbeit, und ich hoffe, dass Sie etwas ein wenig schnell finden. Ressourcen. Sie sind derzeit ein Analyst besucht. Link Body Tipps Hier sind einige Tipps mit Körperproblemen ein für besuchte Links Fein. Ich werde etwas Hilfe bei einem Problem zu 1/4 besuchten Link benötigen. Finden Sie Karten. Dies ist eine Liste von kürzlich Zuschauer kostenlos für besuchte Links. Finden Sie Ihre lokale swat me, um ein paar Deals für Ende der Liste Überschrift Ebene drei zu machen. Mein Lieblingsteil der Restaurierung. Sie sind derzeit auf Stufe drei Monate, sogar Geschichten zu erzählen. Sie befinden sich derzeit auf einer Liste von Elementen, die ein besuchter Link sein müssen. Muss eine unabhängige Suspension haben. Wenn ein besuchter Link Kunde bekommt öffnet ein neues Fenster unten zu betrunken kostenlos. Sie können häufig Teile Ihres Projekts finden. Lokaler Swap trifft auf einen besuchten Link. Hier finden Sie eine Liste Ihrer lokalen Swap-Treffen. Öffnet ein neues Fensterende der Liste und der Entwicklung für die Barrierefreiheit. Freundliches Gebäude zugänglich Verknüpfung Liste besucht Links Facebook einer von drei besucht zu drei Link besuchen Link Clinton kostenlos jeder und zumindest in der Zukunft in der Klassenbeschreibung haben eine Ressource genannt Gasse Style Guide in Beispielen zur Verfügung gestellt, wo Sie finden Sie eine große Sammlung von Anwendungsbeispielen, die Bereichsimplementierungen enthalten. Ich empfehle, diese Beispiele zu durchschauen. Wenn Sie Barrierefreiheit benötigen, helfen Sie bei bestimmten oder erweiterten Implementierungen, damit Bereichsattribute und Regeln zusammengefasst werden. Als Nächstes werden wir uns einige allgemeine Funktionen ansehen, die Sie sofort zu Ihren Webseiten hinzufügen können, um die Barrierefreiheit zu verbessern. 6. Erleichterung, die: Weise in diesem Segment, werde ich mit Ihnen einige gemeinsame Funktionen teilen, die Teil meiner Entwicklung Skelett sind. Einfachere wiederholte und erforderliche Funktionen, die Teil Ihrer Webseiten sein müssen, damit die Barrierefreiheit eingehalten werden kann. Das erste Feature, über das ich sprechen möchte, ist das HTML Lang-Attribut. Dieses Attribut teilt dem Browser in der Hilfstechnologie mit, in welcher Sprache die Webseite für Inhalte interpretiert werden soll. Ich habe ein Lang-Attribut auf das öffnende HTML-Tag angewendet. Wenn Sie Inhaltsbereiche haben, die in verschiedenen Sprachen verteilt sind, können Sie zusätzliche lügende Attribute auf diese übergeordneten Container anwenden. Diese Funktion umfasst Richtlinien für die Barrierefreiheit von Web-Inhalten 3.1 Punkt 1, die Sprache der Seite ist. Zweites Feature, über das ich sprechen möchte, ist ein Springen zum Hauptinhaltslink. Dies ist wichtig, um Tastaturbenutzern eine effiziente Navigation zu ermöglichen. Es ermöglicht ihnen, wiederholte Inhaltsblöcke wie Navigationsstrukturen und Header-Elemente zu überspringen, so dass sie direkt in den Hauptinhaltsbereich springen können. Diese Funktion kann auf verschiedene Arten erreicht werden. Ich entschied mich, einen Feind ganz oben auf der Seite zu haben, wenn er den Fokus erhält und ihn dann verschwinden lassen, sobald der Fokus das Element verlässt. Das Wichtige, hier zu beachten ist, dass es das allererste Fokus-Kräuterelement auf der Seite ist . Sobald ein Benutzer einen Link aufruft, sprang er zum Anker-Tag, wo er mit dem Navigieren im Hauptinhaltsbereich beginnen konnte . Ich habe einen negativen Index für meine Anker-Tags verwendet, der verwendet werden könnte, um den Fokusindikator an seine Position zu verschieben , aber keinen Tastaturfokus erhalten würde, wenn ein Benutzer durch die Seite navigiert . Natürlich deckt diese Funktion mit ihrer Tastatur Webinhalte ab. Barrierefreiheitsrichtlinie 2.4 Punkt eins, die Bypass-Blöcke ist. Das dritte Merkmal ist ein konsistenter Fokusindikator. Brüder haben Standard-Fokusindikatoren, aber es gibt alle unterschiedlich und selten, wenn überhaupt, treffen. Anforderungen in meinem Projekt zeigen einen gut sichtbaren, einzigartigen Farbkontrast konformen Fokusindikator. Es ist eine zwei Pixel gestrichelte CSS-Umriss angewendet mit der Fokus CSS Pseudo-Klasse. Die Hauptfarbe, die ich verwende, ist rot, aber ich ändere sie in einigen Regionen meines Projekts, so dass es Farbkontrastanforderungen erfüllt. Diese Funktion deckt Web-Content Barrierefreiheit Richtlinie 2.4 Punkt sieben, die fokussiert ist, sichtbare vierte Funktion ermöglicht Seiten-Zoom. Das Berichts-Meta-Tag stellt ein Attribut namens Maximalskalierung bereit. Verwenden Sie dieses Attribut normalerweise nicht, aber wenn es für Ihr Projekt erforderlich ist, stellen Sie sicher, dass 200% das Minimum ist. Das W drei C empfiehlt, dass Benutzer Inhalte ohne unterstützende Technologie auf bis zu 200% skalieren können . Wenn ich meine Projektwebseite mache, haben Sie bemerkt, dass ich keine Inhalte oder Funktionalität verliere, was ein wichtiger Aspekt ist, um diese Richtlinie zu erfüllen. Eine andere Möglichkeit, dies zu erreichen, ist durch benutzerdefinierte Steuerelemente zum Anpassen von Text und oder Element Größe befindet sich ganz oben auf der Webseite. jedoch Dies istjedocheine weniger gebräuchliche Praxis. Diese Funktion deckt Webinhalte ab. Barrierefreiheitsrichtlinien 1.4 Punkt vier, die in der Größe geändert wird. Text. Die letzten beiden Funktionen, über die ich sprechen möchte, sind nicht so sehr vorhandene Skelett-Elemente, sondern werden in allen meiner Entwicklungsarbeit gleich behandelt. Und es gibt unsere Konsistenz über Webseiten hinweg. Eine solche Website-Navigation und Branding und Verwendung von semantischem Markup. Generell sollten Navigationskopf- und Fußzeilen sehr nah sein, wenn nicht auf allen Seiten der Website identisch sein. Der Hauptinhaltsbereich wird das einzige Element mit leichten Unterschieden sein. Dies bietet eine vorhersehbarere Erfahrung für Ihre Benutzer. Diese Funktion deckt Webinhalte ab. Leitlinien für Barrierefreiheit 3.2 Punkt vier, die konsistente Identifikation ist. Wir haben viel über die Bedeutung der Verwendung von semantischem HTML-Markup diskutiert und wie es die Erfahrung Ihrer Webseiten verbessert. Denken Sie daran, immer das am besten geeignete Markup für Ihre Lösung auszuwählen. Diese Funktion deckt Webinhalte ab. Richtlinien für Barrierefreiheit. 1.3 Punkt eins, was Informationen und Beziehungen ist, so dass meine Zugänglichkeit Funktion Boilerplate abdeckt. Als Nächstes werden wir den Farbkontrast besprechen. 7. Farbkontrast: in diesem Segment sprechen wir über Farbkontrast und darüber, wie Sie sicherstellen können, dass Ihre Farbpalette konform ist . adäquater Farbkontrast ist wichtig, so dass Text, den Sie von Personen mit mäßig wenig Sehkraft lesen, die Web-Content-Richtlinien , die wir betrachten müssen, ist 1,4 Punkt drei, die entsprechend benannt ist. Kontrast. Es besagt, dass die Textfarbe, die als Vordergrund identifiziert wird, Farbe zusammen mit einer Hintergrundfarbe, dass der Text überlagert ein Mindestverhältnis von 4,5 zu 1 für normalen Text in einem Verhältnis von 3 zu 1 für großen Text haben muss . Das erste, was wir besprechen müssen, ist, dass die Richtlinie keinen Wert auf das setzt, was sie für normale Textgröße halten. Sie bleiben in der Richtlinie. Dieser 18 Punkt Text oder 14 Punkt fett Text wird als groß genug beurteilt, um ein niedrigeres Kontrastverhältnis zu erfordern , so dass wir das am wenigsten im Auge behalten können. Die Rolle, der ich folge, besteht darin, Ihre Standardtextgröße als Ihre normale Textgröße zu betrachten und das Kontrastverhältnis von dort aus auszuwerten, das 4,5 ist. Die eine normale Textgröße wird heftig diskutiert. Aber im Allgemeinen beträgt die Standard-Textgröße meiner Entwicklung etwa 14 bis 16 Pixel oder 11 bis 12 Punkte. Also diese Informationen im Kopf, können Sie die Farbpalette für Ihre Website betrachten, mein Favorit hat es erzählt. Überprüfen Sie den Farbkontrast Web Ziele Farbkontrast Checker Ich habe einen Link zu dem Werkzeug in der Klassenbeschreibung zur Verfügung gestellt . Dies ist ein großartiges Werkzeug, wo Sie leicht einfügen oder Vordergrund- und Hintergrundfarben in die Eingaben, und es bietet Ihnen sofort ein Verhältnis, wo passiert oder fehlschlägt. Was ich am meisten daran mag, jedoch, ist jedoch,dass es Ihnen Leichtigkeit Schieberegler bietet, so dass Ihre Farbpaare nicht konform sind. Sie können eine oder beide Farben anpassen, bis sie ein konformes Verhältnis aufweist. Ich habe diese praktische Funktion in keiner anderen Farbkontrastbewertung gefunden, die gesagt hat, dass ich die Auswahl von Farben verwendet habe , die ein konformes Verhältnis erzeugen, ist sehr einfach, wenn Sie einen einfarbigen Farbwert sowohl für Vordergrund- als auch für Hintergrundfarbe verwenden . jedoch Dies istjedochnicht immer der Fall. In den heutigen Web-Designs haben wir Text über Bilder, texted Rig Strahlung, Text über mehrfarbige Hintergründe, Text über Videos und, allgemeiner gesagt, Text direkt oder ein Bild oder Video ist kein gutes Idee, es sei denn , Sie haben die volle Kontrolle über diesen Inhalt und dass er nicht von 1/3 Partei geändert wird, wo es zu nicht konformen Ergebnissen führen könnte. Bewertung der Barrierefreiheit erzählt. Fast immer falsch positive Verletzungen in diesen Situationen zu werfen, weil ihre Algorithmen weder Vordergrund- noch Hintergrundfarbe bestimmen können. Und diese komplexeren Elemente, einfache Hintergründe sind über das einzige, was sie handhaben können. Also seien Sie sich dessen bewusst. Wir werden mehr darüber im nächsten Segment darüber sprechen, wie Barrierefreiheit Evaluierung Umgang mit komplexeren Situationen ganz einfach erledigt werden kann. Schützt, dass über Bilder oder Videos sitzen. Ich empfehle dringend, eine Vollfarbe zwischen einem Text und einem Hintergrundelement zu verwenden, oder zumindest eine Farbe oder Inhaltsstoffe, die auf einen hohen Opazitätsanteil gesetzt sind. beispielsweise Wenn Siebeispielsweiseeine Diashow-Galerie mit Text haben, die jede Folie überlagert, können Sie die Textfarbe Zehe Weiß in einem Feld mit einem transparenten schwarzen Hintergrund festlegen. Da die Bilder können eine beliebige Farbkombination haben, sollten Sie das Bild in seinem schlimmsten Fall Szenario betrachten, das wir weiß. In diesem Fall haben sie einen weißen Hintergrund mit weißem Text, der diesen Hintergrund mit Ihrem transparenten schwarzen Feld überlagert , das zwischen dem Text im Bild liegt. Von hier aus können Sie ein Werkzeug wie Farbkontrastanalysator verwenden. Um den Wert der Übertragung von Blackbox mit weißem Text zu überprüfen, werden Sie feststellen, dass Sie mindestens 60% Deckkraft halten müssen, um zu erfüllen. In diesem schlimmsten Fall habe ich in der Klassenbeschreibung einen Link zum Farbkontrastanalysator zur Verfügung gestellt. auf der anderen Seite Betrachten Sieauf der anderen Seiteeine Situation. Wir haben schwarzen Text, der das Bild innerhalb einer transparenten weißen Box bezieht. Dann müssen Sie ein reines schwarzes Bild in Betracht ziehen, um das Verhältnis der transparenten weißen Box mit schwarzem Text zu bewerten . Die einfachen Szenarien, in denen wir schwarz und weiß haben, aber den gleichen Ansatz verwendet werden, um verschiedene Farben zu überprüfen, wenn nötig. Im Allgemeinen sind dynamische Inhalte am schwierigsten zu berücksichtigen, aber der Schlüssel ist, immer zu bewerten. Im schlimmsten Fall gibt es tatsächlich einige Situationen, in denen Ihr Kunde eine nicht konforme Marke hat. Das Farbschema, das sie nicht ändern können, ist nicht viel Sie in dieser Situation zu ihrem tatsächlichen Farbschema tun können , Aber es gibt eine Lösung, die Sie implementieren können, um Barrierefreiheit Compliance zu erreichen. Das W C E G als allgemeine Technik mit der Bezeichnung G 1 74 bietet ihm ein ausreichendes Kontrastverhältnis, das es dem Anwender ermöglicht, auf eine Präsentation zu wechseln, die ausreichend Kontrast verwendet. Sie können diese Technik erreichen, indem Sie eine einfache Ein-Aus-Taste für hohen Kontrast sehr Top-Fieber Website, die schaltet die Website in und aus einem Modus mit hohem Kontrast. Dunkin Donuts Website hat ein großartiges Beispiel dafür. Ihr Kontrast geht nicht zu reinem Schwarz oder Weiß, aber es ändert sich gut. Ich habe bei meinem Job bei mehreren Gelegenheiten eine ähnliche Lösung implementiert, bei der ich Schwarz-Weiß mit einigen dunkelgrauen Akzenten verwende . Es liefert großartige Ergebnisse, und ich habe gesehen, dass es eine Menge positives Feedback von Benutzern bekommen. Das schließt einen hohen Kontrast ein und wie man eine konforme Farbpalette erreicht. Als Nächstes werden wir uns ansehen, wie eine Webseite auf die Einhaltung der Barrierefreiheit ausgewertet 8. Erleichterung, die Beurteilung: im Segment, werden wir uns ansehen, wie eine Website auf die Einhaltung der Barrierefreiheit bewertet wird. Um dies zu tun, werden wir eine Webseite mit der Tastatur und Bildschirmlesegerät navigieren und überprüfen Sie die Struktur und Markierung wird dann Webstrahlen verwenden, Wellenauswertung, Werkzeug-Index-Systeme, Handlungen, Evaluierungswerkzeug sowohl als sekundäre Maßnahme. Wir werden mit der Navigation auf der Webseite mit einer Tastatur und einem Screenreader beginnen, weil es die wichtigste und zuverlässigste Form ist, um Evaluationstools wie Wave und Acts nur programmgesteuert anhand einer Reihe von Regeln auszuwerten, und sie machen oft Fehler. Menschliche Tests sind immer die Nummer eins Form der Prüfung und Bewertung. Wow, navigieren mit einer Tastatur und Bildschirmlesegerät, Ich werde nur eine kleine Reihe von Steuerelementen verwenden wird wieder die Vo Keys, über die ich in einer vorherigen Lektion gesprochen. Zusammen mit Cherokees, wird auch Tab durch die Seite, um sicherzustellen, dass alle Leute pflanzliche Elemente richtig zugegriffen werden , während der Navigation, wir werden sicherstellen, dass die Seitenelemente und Inhalt oder Zugriff in einem vorhersehbaren Reihenfolge, und dass sie korrekt vom Bildschirmlesegerät interpretiert werden. Amüsant Max eingebaute Bildschirmlesegerät namens Voice Over. Es gibt viele andere beliebte Optionen, wie NBD A und Jaws, die verwendet werden können, sobald wir erfolgreich navigieren die gesamte Seite öffnet Crume Entwicklertools, um die Markierung zu überprüfen und sicherzustellen, dass die Struktur und Inhalt semantisch sind, zusammen mit allem anderen, was herausstechen kann. Wenn Sie dies zum ersten Mal tun, kann es sich überwältigend, verwirrend oder schwierig anfühlen , und das ist OK. Die Evaluierung der Barrierefreiheit erfordert Übung, und Sie werden die Fähigkeiten in kürzester Zeit aufbauen. Für zusätzliche Hilfe, Ich habe einen Link in der Klassenbeschreibung zu einem großartigen Anfänger Tutorial für Voiceover von der Chrome-Entwicklergruppe namens Screen River Basics erstellt. Lassen Sie uns nun eine Voice-Over starten und überprüfen Sie meine Projekt-Webseite auf die Einhaltung der Barrierefreiheit, was zu einer Menge Talent führt. Physisch zum Hauptinhalt springen. Sie befinden sich momentan nichts im Inhalt, genau wie die andere Überschrift Ebene eins. Du brauchst Reservierungen, Navigation. Ein Artikel. Sie befinden sich wirklich in einem Navigationsmenü. Elemente, die jemand für die Herstellung Menüpunkt vor Karosserie wollte, Menüpunkt für Suspension, viele warten auf vier und eine Minibar und Navigation und einen besseren Hintergrund Ebene zwei Elemente . Willkommen bei Ihnen. Dies ist eine kleine Sammlung meiner Arbeit, und ich hoffe, dass Sie etwas Nützliches finden. Überschriftenebene drei Schnelle Ressourcen. Sie befinden sich derzeit auf Überschriftenebene drei oder vier Artikel, die besucht werden. Link Körper-Tipps Hier sind einige Tipps für diese beiden Körper. Eine für besuchte Links Suchen Gesundheit braucht Hilfe oder Richtung bei einem Problem, bevor ein besuchter Link besucht wird. Finden Sie Karten. Dies ist eine Liste der kürzlich besuchten Besucher drei oder vier Link-Swap-Treffen. Finden Sie Ihre lokale swat me, um einige Angebote für Ihre aktuelle Liste zu machen. Überschrift Ebene drei. Mein Lieblingsteil der Restaurierung. Das Design ist wie ein Aufnahmeprojekt, besonders im Winter. Sie überschreiben derzeit Storys der Ebene 3 mit drei Elementen, die Sie derzeit verfolgen. Einer von drei Notwendigkeit zu modellieren ist so ein großer kostenloser Link, den Sie besucht haben, also habe ich es versuchen. Öffnet ein neues Fenster für die Lieferung. Muss eine unabhängige Federung haben, wenn es perfekt für Ihren Kunden ist. Konkret erhält der Kunde Öffnungen. Ein neues Fenster sprengte herunter, um kostenlos hereinzufallen. Du wachst auf. Häufig finden Sie Teile für Ihren projizierten lokalen Swap trifft einen besuchten Link. Finden Sie eine Liste Ihrer Einheimischen. Waffen hier öffnet ein neues Fenster, und die Liste und ich, die Sie derzeit für die Barrierefreiheit entwickeln beginnen eine freundliche, Gebäude zugänglich Jahrgang. Sie haben keine Gegenstände zugehört, die Sie besucht haben. Link Facebook, einer von drei besuchte Lincoln. Drei. besuchte Lincoln, Lincoln, befreie jede und Liste, und wenn ja, sieht es so aus, als wären wir in guter Form. Alle Elemente und Inhalte waren Zugriff auf die vorhersehbare Reihenfolge und wurden vom Bildschirmlesegerät korrekt interpretiert . Meine Tastatur-Steuerelemente bewegen sich auf der Webseite Genau wie die passieren soll. Nichts störte meine Interaktion. Nun lassen Sie uns auf die Seite tippen, um sicherzustellen, dass alle meine Fokus Elemente tun, in der Tat, erhalten Fokus besucht, mit Inhalten verknüpft. Du meinst, wie eine Mini-Bar für Gegenstände? Chassisherstellung, Menüpunkt Karosserie? Wie auch immer, es ist im Wesentlichen jeder Bodychips. Hier sind einige Tipps für diejenigen, die körperlich gut zu sein sind. Ich brauche Hilfe oder Richtung mit einem Problem. Besucht. Klink Karten finden. Dies ist eine Verschwendung von kürzlich besuchten Zuschauern Link Swap meets. Finden Sie Ihre lokale swat me, um einige Angebote besucht Link zu machen, so dass ich es einen besuchten Link geben kann. Der Kunde erhält öffnet ein neues Fenster besucht Link. Finden Sie eine Liste Ihrer lokalen Swap-Treffen hier öffnet ein neues Fenster. Besuchte Links Facebook-Liste Revisited Link. Sie wollen einen besuchten Link? Lincoln Leading my content unique unser Ziel Select versuchen. Jetzt, da wir bestätigt haben, dass mein Fokus Elemente den Fokus erhalten und in der richtigen Reihenfolge, die jetzt die Seitenstruktur in Markup überprüfen wird. Erhalten Sie einen allgemeinen Überblick über die Seitenstruktur. Alles sieht wirklich gut aus. Unser erster Fokus pflanzliches Element auf den Seiten. Ein Sprung zum Hauptinhaltslink, gefolgt von den semantischen Kopf- und Fußzeilen-Tags, was ich erwarten würde. Lassen Sie uns in jedes dieser Tags einbrechen. Sehen Sie sich an, wie die Teile des Inhalts erstellt werden. Okay, wir können sehen, dass die semantischen Abschnitt-Tags verwendet werden, um die größeren Abschnitte des Inhalts zusammen zu gruppieren , was großartig ist. Wir können auch sehen, dass der Überspringen zum Hauptinhalt-Anker richtig als erstes Element innerhalb des Haupt-Tags platziert wird . Bisher, alle HTML-Elemente Luft in der richtigen Reihenfolge in dem Markt, die ausgewählt wurde, ist angemessen . Lassen Sie uns ein wenig weiter in die Kopfzeile eingraben. Wir konnten sehen, dass das H für den Site-Namen verwendet wurde, was ich erwarten würde, und von hier aus gehe ich davon aus, dass alle anderen Header und Seiten von diesem H inkrementieren werden . Die Navigationsleiste wurde ordnungsgemäß mit dem semantischen Nap-Tag eingestellt, zusammen mit einer unveränderten Liste, die die richtigen Bereichsattribute verwendet, die bei der Hilfstechnologie helfen . Wenn wir auf den Infografik-Abschnitt gehen, können wir sehen, dass ein Figurelement verwendet wurde, um dieses Bild mit einer großen Beschriftung und H zwei im Absatz zu markieren . Im Inneren können wir bestätigen, dass das Bild auch alle Attribute richtig hat. Die Verwendung von semantischem Markup ist hier großartig, und alles ist in der richtigen Reihenfolge. Der Abschnitt „Quick Links“ verwendet eine korrekt inkrementelle H drei mit einer nördlichen Liste für die Links. In jedem Link können wir ein Symbolelement sehen, das vor der Hilfstechnologie verborgen ist, zusammen mit einem Link-Titel und einer Beschriftung, die in separate Span-Tags unterteilt ist. Ich mag, wie der Strich verwendet wird, um die Titelunterschriften hier zu brechen, so dass sie nicht rot durch den Bildschirmleser als ein Lauf auf dem Bindestrich erzeugt eine schöne Pause für den Bildschirmleser und Dissidenten visuell mit der definierten Gasse versteckte Glas. Der Spotlight-Abschnitt verwendet ein einzelnes Artikel-Tag mit einem H drei und einem Absatz auf der linken Seite und einem Bild auf der rechten Seite. Wir können bestätigen, dass das Bild auch alle Attribute richtig hat. Das Hintergrundbild vermittelt keine Inhalte. Stellen Sie daher sicher, dass die unterstützte Technologie nicht zugänglich ist. Wir können sehen, dass es als Hintergrundbild gesetzt ist, und das ist, was ich erwarten würde. Der Feature-Artikel Abschnitt verwendet eine weitere H drei mit einer unveränderten Liste für die Artikel jeder Artikel, Bilder, Foto links mit dem richtigen ganzen Text. Schließlich konnten wir sehen, dass die Fußzeile einen Absatz für den Slogan und eine UN-geordnete Liste für die Social-Media-Symbole verwendet. Jedes Symbol verwendet eine Bereichsbeschriftung, die perfekt ist, da diese Links oder einfach nur Symbole und wir einen erkennbaren Text für die Links benötigen. Wir haben gerade bestätigt, dass die Seitenstruktur und der Inhalt mit dem richtigen semantischen Markuperstellt werden Markup und alles in einer richtigen, vorhersehbaren Reihenfolge platziert wird . Jetzt ist es an der Zeit, unsere Barrierefreiheits-Evaluierung durch Ausführen der Welle abzuschließen und fungiert Evaluierungs-Tools als letzte Maßnahme, um völlig sicher zu sein, dass wir keine Verstöße auf dem Weg einer Axt verpasst haben. Tools sind Browser-Erweiterungen, die ich installiert habe, und wir werden mit der Welle beginnen sagte, sobald ich auf die Schaltfläche klicken, werden wir sehen, dass Welle wird die Seite auswerten und dann die Ergebnisse in der linken Seitenleiste anzeigen . Wir können sofort sehen, dass wir Null Fehler und Null-Alarme haben, was genau das ist, wonach wir suchen. Wir können alle Warnungen, Fehler, Funktionen und mehr sehen Fehler, , indem Sie auf die Flaggen klicken. Schaltfläche im Panel auch gerne CSS deaktivieren, indem Sie auf diese Stile Schaltflächen klicken, so dass die markierten Elemente leichter zu finden sind. Wenn wir irgendwelche Warnungen oder Fehler erhalten hätten, würden wir sie ganz oben in diesem Panel sehen, und jedes Element würde einzeln mit den Informationen über den Verstoß aufgeführt, wo es sich auf der Seite befindet. Und einige hilfreiche Informationen, wie man es beheben kann, zusammen mit den Barrierefreiheitsrichtlinien, die es sich um Welle bezieht, wertet auch für Farbkontrast aus, aber ich werde diese Elemente im Axtell nach meiner Erfahrung betrachten, sind die Achsen Algorithmus macht weniger Fehler. Nun, jetzt öffnen Sie die Crew-Entwickler-Tools wieder und führen Sie das Axt-Werkzeug aus. Wir werden alle Verletzungen sehen, die es in der unteren linken Seitenleiste findet, die einzigen Elemente der Auswertung gefunden oder Farbkontrastverletzungen. Wenn wir irgendwelche Verstöße erhalten hätten, würden wir sie in der linken Seitenleiste aufgeführt sehen, und jedes Element würde einzeln mit den Informationen über den Verstoß, wo es sich auf der Seite befindet, und einigen hilfreichen Informationen über wie man es repariert. Zusammen mit den Barrierefreiheitsrichtlinien, die es betrifft, Wir können sehen, dass die Farbkontrastverletzungen als Zitat markiert sind, nicht in der Lage, Kontrast für Ausgabe oder Zitat Elemente zu bestimmen . Hintergrundfarbe konnte nicht bestimmt werden, da das Element ein Bild enthält. Hinweis: Ich habe alle diese Verstöße manuell überprüft und bestätigt, dass ihre Fehlalarme es ein Werkzeug war in der Lage, eine echte Farbkontrastverletzung richtig zu bewerten. Es würde die Vordergrund- und Hintergrundfarben zusammen mit einem nicht konformen Verhältnis auflisten, das sie erzeugt haben. Ich habe ein paar Dinge, die ich über Evaluationstools erwähnen möchte. Das Wichtigste ist, dass sie absolut nicht perfekt sind. Die häufigsten Probleme, dass diese Werkzeuge automatisch eine Farbkontrastsituation kennzeichneten wenn das Werkzeug nicht in der Lage war, eine Vordergrund- und/oder Hintergrundfarbe richtig auszuwerten, anstatt sie als Elemente zu markieren, die einer weiteren Überprüfung bedürfen. Sie scheinen Israel Verstöße, die stark die Ergebnisse der Bewertung aufblasen können und verwirren die Kunden, wenn Sie sicherstellen, dass ihre falsche Positive, aber sind immer noch in den Ergebnissen aufgeführt. Ich habe auch ein Tools-Flag, richtiges Bereichs-Markup gesehen und auch keine Situationen kennzeichnen, die es erfordern. Und schließlich habe ich mehrere Elemente Flags Verstöße gesehen, die tatsächlich nicht auf einer echten Barrierefreiheit Richtlinien basieren , sondern sind nur Empfehlungen vom Ersteller des Evaluierungs-Tools. Wir müssen immer Werkzeuge zur Barrierefreiheit mit Vorsicht verwenden, und deshalb ist menschliches Testen immer die Nummer eins. In der Schließung. Ich möchte erwähnen, dass, wenn ein Kunde die Zugänglichkeit seiner vollständigen Website in Frage stellt, es eine gute Idee ist, einen freiwilligen Produkt-Zugänglichkeit, Vorlage oder V pat zu kaufen . A v Pat ist ein selbstveröffentlichendes Dokument, das vom Dritten bender erstellt wurde, das die Erfolge und Misserfolge in Bezug auf die Zugänglichkeit der Website umreißt . Der Kunde kann es dann als Gott und Road Mapping alle notwendigen Website-Updates verwenden, um letztendlich Barrierefreiheit Anforderungen zu erfüllen, die unsere Barrierefreiheits-Bewertung abgeschlossen. Als nächstes wir einen kurzen Blick zurück und alles, was wir in dieser Klasse gelernt haben. 9. Accessibility: herzlichen Glückwunsch für den Abschluss der Klasse. Nehmen wir uns nun eine Minute Zeit, um die wichtigsten Punkte, die wir in dieser Klasse lernen, zusammenzufassen. Die Richtlinien, die wir beim Erstellen einer Webseite oder Abschnitt 50 befolgen müssen, warten in den Richtlinien für die Barrierefreiheit von Web-Inhalten, es gibt direkte Links zu diesen Richtlinien in der Klassenbeschreibung. Auch Menschen mit Behinderungen, die im Web navigieren, verwendeten Hilfstechnologien wie Bildschirmlesegeräte und Bildschirm vergrößern IRS sowie adaptive Strategien wie die Erhöhung der Textgröße und Anpassen des Mausvorschubs. Semantisches HTML-Markup ist für die Barrierefreiheit äußerst wichtig. Es bietet eine reichhaltige Schnittstelle, über die Hilfstechnologie leichter auf die Informationen zugreifen und an den Benutzer weiterleiten kann . Es gibt eine Menge, die für die Barrierefreiheit erreicht wird, allein mit semantischem HTML-Markup. Außerdem Gebäudeelemente in vorhersehbarer Reihenfolge der Schlüssel für Navigationslinks und Bilder oder Elemente , die für die Barrierefreiheit häufig problematisch sind. Wir haben uns einige Beispiele für Bilder mit einfachen alle Texas Wells Bilder angesehen, die von einer Beschriftung begleitet werden , die alle Attribute leer halten, wir haben auch einige Beispiele für Links, die in einem neuen Fenster öffnen und wie man mit diesen umgehen beschreibenden Link-Text zusammen mit der richtigen Angabe für Links sind auch sehr wichtig, im Auge zu behalten. Bereichsattribute werden verwendet, um die Benutzeroberfläche und Webkomponenten zu verbessern, wenn HTML, CSS und JavaScript fallen. Kurzbereichsattribute sind ein vordefinierter Satz von Rollen, Eigenschaften und Zuständen. Rollenwerte ändern sich nie im Lebenszyklus einer Anwendung. Eigenschaftswerte können sich ändern, sind aber selten in Statuswerten ändern, oft meist durch Benutzerinteraktion. Diese Attribute werden von Hilfstechnologie interpretiert, um die allgemeine Benutzererfahrung zu genehmigen . Es gibt ein paar Dinge, die Teil jeder Webseite sein sollte, die erstellt wird, enthält das HTML Lang Attribut ein Springen zum Hauptinhaltslink, eine konsistente Fokusindikator und ermöglicht es dem Benutzer, auf mindestens 200% zu zoomen, ohne Inhalt zu verlieren für die Funktionalität. Das lügende Attribut teilt dem Browser und der Hilfstechnologie mit, in welcher Sprache die Webseite oder der Inhalt interpretiert werden soll. Zum Hauptinhalt überspringen Link ist wichtig, um Tastaturbenutzern eine effiziente Navigation zu ermöglichen. Es ermöglicht ihnen, wiederholte Inhaltsblöcke wie Navigationsstrukturen und Header-Elemente zu überspringen, so dass sie direkt in den Hauptinhaltsbereich springen können. Schließlich hilft ein konsistenter und prominenter Fokusindikator dem Benutzer zu wissen, welches Element den Tastaturfokus hat ? adäquater Farbkontrast ist wichtig, damit Text von Personen mit mäßig wenig Sicht gelesen werden kann . Die Richtlinien für die Barrierefreiheit für Webinhalte besagen, dass eine Vordergrundfarbe zusammen mit der Hintergrundfarbe ein Mindestkontrastverhältnis von 4,5 zu 1 für normalen Text im Verhältnis 3 zu 1 erzeugen muss. Für großen Text. Es gibt viele Werkzeuge, die helfen können, ein konformes Farbschema zu erstellen, und mein Favorit ist Wedding Farbe Kontrast Checker. Wir konnten einige einfache Farbsituationen sowie einige komplexe Farbsituationen betrachten und diese auf Compliance auswerten. Die Auswertung der Barrierefreiheit ist sehr wichtig, um sicherzustellen, dass eine Webseiten konform basierend auf Barrierefreiheit Richtlinien mit einer Tastatur zusammen mit Bildschirmlesegerät, um die gesamte Seite zu navigieren ist die Nummer eins Form des Tests Barrierefreiheit. Evaluierungs-Tools wie Welle und Handlungen könnten als sekundäre Maßnahme verwendet werden, um völlig sicher zu sein , dass Sie keine Verstöße verpasst haben. auch Überprüfen Sieauchdie Seitenstruktur und markieren Sie zusammen mit der richtigen Seitenreihenfolge und vorhersehbarer Navigation. Du hattest also die Chance, mein Projekt zu sehen. Viele Lektionen dieser Klasse sind auch der Projektbeschreibung zur weiteren Überprüfung beigefügt. Wenn Sie jetzt brauchen, ist es Zeit, Ihre Webseite basierend auf allem, was Sie in dieser Klasse Bill Web-Seite basierend auf Ihrem Lieblingshobby lernen und zeigte sich in der Projekt-Galerie. Lesen Sie unbedingt die Projektbeschreibung, um weitere Details zu erhalten. Viel Glück, und ich kann es kaum erwarten zu sehen, was wir uns einfallen.