Web-Barrierefreiheit: Lernen Sie die besten Praktiken zum Erstellen von All-Inclusive-Websites

1. Einführung: In dieser Klasse werde ich Ihnen die Grundlagen der Web-Zugänglichkeit beibringen. Was es ist, warum es wichtig ist und wie Sie die verschiedenen Best Practices in Ihre Webprojekte umsetzen. Die Website sollte immer so entwickelt werden, dass sie von jedem aufgerufen und interagiert werden können , unabhängig von der Fähigkeit des Benutzers. Wo Zugänglichkeit ein grundlegender Aspekt der Web-Entwicklung ist, der jeder Entwickler bewusst sein muss. Und ich werde Ihnen zeigen, wie Sie all inclusive Website Strände machen. Sie werden dann diese neu Gleichheit anerkannt Cray verwenden, Ihre eigene einseitige Website unter Verwendung verschiedener Zugänglichkeitstechniken , die Benutzererfahrung für alle verbessern wird. Hey, ich bin David und ich bin ein Front-End-Webentwickler aus Northridge in England. Ich habe langjährige Erfahrung in der Erstellung digitaler Anwendungen für eine Vielzahl internationaler Kunden. Ich genieße es, Scheitern gut Entwickler wie sich selbst zu helfen, ihre Fähigkeiten zu verbessern, die ihnen helfen, weitere Bakterien und letztlich ihnen helfen, die beste Wolle lief Entwickler, die sie sein können. Diese Klasse richtet sich an Studenten, die einige grundlegende Kenntnisse in HTML und CSS haben, aber gerne über die Bedeutung Web-Barrierefreiheit erfahren möchten und wie diese Funktionen über gemeinsame HTML-Elemente implementiert werden, wird in jedem erstellen Sie Ihre Klasse -Projekt ist Ihre Lieblings-IDE. Vs-Code wird mein Code-Editor der Wahl sein, und ich werde dies in der gesamten Klasse verwenden. Aber alle anderen, mit denen Sie vertraut sind und bequem zu bedienen sind, sind absolut in Ordnung. Sie werden Ihr Website-Projekt auf GitHub Pages hosten. Und mach dir keine Sorgen, wenn das völlig neu für dich ist. Ich zeige dir, wie einfach es ist. Und es ist alles völlig kostenlos. Mit den Fähigkeiten, die Sie aus dieser Klasse gewinnen, werden Sie in der Lage sein, so viel mehr als Webentwickler zu bieten, unabhängig davon, ob Sie ein Freiberufler sind oder wenn Sie für ein Unternehmen arbeiten. Sie werden in der Lage sein, nicht nur die Bedeutung der Web-Zugänglichkeit zu erklären, sondern wir mussten auch demonstrieren, wie barrierefreie Funktionen für jeden Website-Build implementiert werden können. Eine weitere Möglichkeit, unser neues feines Zugänglichkeits-Wissen anzuwenden , ist weit vor Beginn der Projektentwicklung. So können Sie Ihr Wissen in der Planungsphase oder in einem Projekt vermitteln und die Projektkreativen oder UX-Designer beim besten Ansatz beraten die Projektkreativen oder UX-Designer beim und eine all inclusive Website erstellen. Also bis zum Ende dieser Klasse, werden Sie sicher sein, dass alle Feature Web. Also, ich Projekte, die Sie bauen werden, werden für alle zugänglich sein. Also, ohne weitere Umschweife, lasst uns anfangen. 2. Das Kursprojekt: Das Projekt, das Sie zusammenstellen werden, ist eine einseitige Website, die mindestens eine Navigation im Bild, Text, ein Formular und eine Fußzeile enthält. Jetzt ist das Wichtigste hier ist, dass diese Elemente mit Eingabehilfen erstellt werden . Ich möchte, dass Sie eine einseitige Website mit einigen lustigen Informationen über einen persönlichen Helden erstellen , sei es ein musikalischer Held und Schauspieler oder eine Schauspielerin, die Sie bewundern, oder jemand, der Ihnen wichtig ist. Also, ich meine, du könntest es sogar zu einer Seite über dein Lieblingstier machen. Auch hier werden die zugänglichen Komponenten, die Sie bauen werden, das Wichtigste sein. Verbringen Sie also nicht zu viel Zeit damit, Ihre Inhalte zu überdenken. Dieses Projekt ist also eine perfekte Möglichkeit für Sie, Ihre neu gefundenen Barrierefreiheitsfähigkeiten auf eine reale Website mit tatsächlichen Komparatoren anzuwenden Ihre neu gefundenen Barrierefreiheitsfähigkeiten auf , die von einigen Inklusivfunktionen für ein erfolgreiches Projekt profitieren und fünf goldene Sterne am Ende dieser Klasse, sollten Sie Konzepte, die in den Lektionen behandelt werden, enthalten. Wenn es fertig ist, müssen Sie es testen, um sicherzustellen alle Audit-Tests in Light-Hires bestehen, um sicherzustellen, dass sie vollständig zugänglich sind. Natürlich werde ich Ihnen zeigen, wie Sie Lighthouse verwenden und wie Sie Ihre Arbeit am besten testen und wie Sie alle notwendigen Korrekturen vornehmen können. Schüler sollten ihre Lieblings-IDE verwenden, um ihr Klassenprojekt zu erstellen. Ich werde VS-Code verwenden, aber alle ID- oder Code-Editoren funktionieren genauso gut. Und ich werde Sie ermutigen, Ihre Arbeit auf Skillshare zu teilen. Und dazu empfehle ich, Ihr endgültiges Projekt bereitzustellen, um Hub-Seiten zu erhalten. Daher ist GitHub-Konto erforderlich, um dies zu tun. Aber keine Sorge, ich werde Ihnen zeigen, wie einfach es ist, Ihre Arbeit einzurichten und auf eine Live-Webseite zu übertragen, die alle sehen können. Aber zuerst lernen wir, was Barrierefreiheit tatsächlich ist, warum sie wichtig ist, und welche grundlegenden Grundlagen sie in Ihrer Website implementieren. 3. Was ist die web: Die Macht des Internets liegt in seiner Universalität. Der Zugang für jedermann unabhängig von einer Behinderung ist ein wesentlicher Aspekt. Das ist ein Zitat von TBL, dem Erfinder und Pate des World Wide Web und natürlich unserem Lord and Retter. Ebenso wenig gibt es mehr als 1 Milliarde Menschen mit unterschiedlicher Behinderung. Und das ist von der Weltgesundheitsorganisation. Das sind also 15 bis 20 Prozent der Bevölkerung. In diesem Sinne liegt es in unserer Verantwortung als Entwickler, Websites zu erstellen, auf die jeder zugreifen kann. Es ist ein grundlegendes Menschenrecht, dass jeder auf die gleiche Weise behandelt wird und Peak mit jeder Behinderung kann das Web gleichermaßen zugreifen. Und darum geht es im Grunde bei der Praxis der Barrierefreiheit im Web. Sicherstellen, dass Ihre Websites von so vielen Personen wie möglich nutzbar sind. Um dies zu ermöglichen, gibt es bestimmte Regeln und Vorschriften, die Sie befolgen können. Am bemerkenswertesten ist die WCAG, die die Richtlinien für die Barrierefreiheit von Web-Inhalten sind. Nun, das ist nicht gerade eine kurze Lektüre mit irgendwelchen Mitteln, und ich bitte Sie leider nicht, es Wort für Wort zu lesen, aber es ist nützlich, die wichtigsten Konzepte zu verstehen, die in diesem Dokument beschrieben werden. Dabei gibt es auch unterschiedliche Ebenen, die die Erfolgskriterien messen. Das ist also ein Doppel-A und das strengste ist aaah. Jetzt sollten Sie immer darauf abzielen, zumindest die einzige eine Ebene entsprechen ist auch nützlich, um über Ihr Land wissen kann seine eigene Reihe von Gesetzen zur Web-Zugänglichkeit haben . Sie schulden, dass Ihr Unternehmen in rechtliche Schwierigkeiten geraten könnte, wenn sich jemand darüber beschweren würde, dass Ihre Website nicht zugänglich ist. Unternehmen wurden in der Vergangenheit wegen Ignorierung dieser Maßnahmen verklagt. Nun, das ist nicht etwas, was du dir darüber Sorgen machen musst. Denn wenn Sie mit mir in diesem Kurs folgen und Barrierefreiheit zu einem Teil Ihres zukünftigen Webentwicklungsprozesses machen. wird dir gut gehen. Vielleicht wird das Hinzufügen von Eingabehilfen in Ihrem Webprojekt Zeit erschöpfend sein. Dies kann etwas zutreffen, wenn Sie versuchen, Eingabehilfen in ein bereits erstelltes Projekt hinzuzufügen . Aber ich möchte Ihnen verschiedene Techniken beibringen, die Sie beim Planen und Erstellen einer Website implementieren können . Und auf diese Weise, wenn es für Sie zur Norm wird, wird es nur Teil Ihres Entwicklungsprozesses sein , ohne viel Zeit in Anspruch zu nehmen. Und um ehrlich zu sein, weil es ein wesentlicher Bestandteil der Webentwicklung ist, sollte es sowieso nicht als zusätzliche Zeit betrachtet werden. Und weil ich weiß, dass du ein großartiger Mensch bist, willst du natürlich das Richtige tun, und du kümmerst dich um alle Menschen gleichermaßen. Also gibt es hier keine Diskriminierung, oder? 4. Was zu betrachten: Welche Art von Behinderung müssen Sie beim Aufbau Ihres nächsten Webprojekts beachten? Lassen Sie uns zuerst über Sehbehinderungen sprechen. Das könnte also jemand mit Sehschwäche mit völliger Blindheit oder Farbenblindheit sein. So Benutzer mit niedriger oder völliger Blindheit würde etwas als Bildschirmlesegerät verwenden, um durch eine Website zu navigieren , um zu lesen ist im Grunde Software, die digitalen Text laut liest. Und es gibt einige kostenpflichtige Optionen. Und die berühmtesten Juwelen und Delphin, gibt es auch kostenlose Optionen. So hat der Apple Mac Voiceover integriert. Und Sie können ChromeVox auch aus dem Google Chrome-Erweiterungsspeicher herunterladen. Also diese Leute mit niedriger oder vollständiger Blindheit Wort verlassen sich auf eine Tastatur, um durch die Website zu navigieren , so dass sie nicht in der Lage, den Mauszeiger zu sehen, zum Beispiel, drücken Sie die Steuertaste. Okay, hier ist ein Beispiel für die Verwendung von VoiceOver auf dem Mac. So können Sie hier ein kleines Dialogfenster sehen. Und du bist auch, hey, wie ich mit der Navigation, was passiert und wie es ausliest. Link zu Liste drei Elemente. Sie koppeln Galerie. Sie befinden sich derzeit auf einem Link, um diesen Link zu klicken, drücken Sie Control, Auktion, Raum. Link, Blog. Sie befinden sich derzeit auf einem Link. Link. Lesen Sie mehr Names2 erforderlich ungültige Datenmenü-Popup, Text bearbeiten mit Auto-Fill-Menü eingegeben ein Chrome hat neues Fenster. Token werden Auto-Fill-Menü, drücken Sie den Pfeil nach oben, Pfeil nach unten D, dann drücken Sie die Return aufgrund, um es in das Formular eingeben. Sie befinden sich derzeit in einem Textfeld, um Text in dieses Feld einzugeben. So kann es automatisch sein. Sie müssen den Aufwärtspfeil D drücken und dann die Eingabetaste drücken, um es in das Formular einzugeben. Bedenken Sie also, dass Sie eigentlich nicht, wenn Sie blind sind, werden Sie irgendwas davon gesehen werden. Es ist buchstäblich nur die Audiobeschreibung, die von der Voice-Over gelesen wird. Deshalb ist es so wichtig, sicherzustellen, dass alle Ihre HTML und Markup richtig semantisch sind, richtig geschrieben, damit es wie vorgesehen beschrieben und ausgelesen werden kann. Jetzt ist Typografie wirklich wichtig, auch mit geringer Sichtbarkeit würde von bestimmten Schriftfamilien betroffen sein , die verwendet werden, und auch die Größe der Schriftart als auch. Und das kann sich auch auf ältere Benutzer auswirken. Sehen Sie, wie Sie älter werden, kann sich Ihre Sehkraft verschlechtern. So ist Topographie auch eine wichtige Sache, die für die älteren Website-Nutzer zu berücksichtigen ist. Jetzt, wenn es um Farbblindheit geht, ist Kontrast wirklich wichtig. Das ist also die Verwendung von Farbe, von Text. Und Hintergründe. Wenn also die Farbe des Textes der eines Hintergrunds ähnlich ist, werden manche Leute den Text überhaupt nicht lesen können. Eine andere Sache ist auch zu beachten, wie Sie Farbe für verschiedene Statusänderungen verwenden. Zum Beispiel bei einem Hover-Zustand, wenn Sie nur die Farbe ändern. Dies kann auch von bestimmten Benutzern nicht gesehen werden. Kontrast ist auch wichtig für die Blendung des Bildschirms. Es ist also eine Überlegung wert, dass jemand Ihre Website auf einem Mobiltelefon oder einem Tablet draußen oder auf der Box ansieht , oder irgendwo, wo es einige Bildschirmgriffe geben würde. Sie sind also vielleicht nicht die Person, die die Website tatsächlich gestaltet, aber Sie könnten dennoch Einfluss auf die Gestaltung der Website haben. Das sind also einige Dinge, die es wert sind, zu wissen. So können Sie sich frühzeitig im Entwicklungsprozess an diesen Gesprächen beteiligen. Einige Personen oder einige Benutzer können auditive Behinderungen haben. Das hat also mit Taubheit zu tun. Und Dinge, die man beachten muss. Hier wären alle Videos oder Musik, die auf Ihrer Website sind , wo Untertitel in diesen Situationen wirklich nützlich wären. Und auch, wenn es irgendwelche Aktionen, die auf Ihrer Website passieren, werden durch Ton nur angezeigt , diese Menschen würden nicht in der Lage, diese Aktionen zu erkennen. Einige Benutzer können kognitive oder neurologische Behinderungen haben. Und das ist wie Lernbehinderungen oder ADHS oder MS, oder Anfallsstörungen wie Epilepsie. Also Dinge, die Sie brauchen, betrachten Sie die Verwendung von Animationen. Sie möchten also nicht zu ganz oben mit Ihren Animationen sein, die ablenken können und bestimmte Benutzer Probleme verursachen können. Es ist auch erwähnenswert, dass diese Benutzer die Bewegung auf Websites reduzieren können. So kann ich in die Einstellungen gehen und dann auf Bewegung reduzieren klicken. Und solange der Entwickler uns in Betracht gezogen hat, sollte dies alle Animationen von Websites reduzieren oder vollständig entfernen. Und ich werde Ihnen zeigen, wie Sie das in einer zukünftigen Lektion tun. So körperliche Behinderung, dies könnte so etwas wie Muskeldystrophie oder jemand mit reduzierter Geschicklichkeit sein. Und wieder, diese Menschen, die möglicherweise nicht in der Lage, die Maus zu verwenden, so dass sie auf die Tastatur verlassen, um zu navigieren. Es ist möglich, dass die Benutzer etwas in den Mund halten, um die Schlüssel zu drücken, und das wird eingestellt, ich würde auf einer Website navigieren. Eine 100-prozentige Zugänglichkeit ist etwas, das wirklich schwer zu erreichen ist, vor allem bei großen Projekten. Also verprügeln Sie sich nicht, indem Sie dies nicht jedes Mal erreichen können. Oft werden das Randfälle sein. Also tu einfach das Beste, was du kannst. Ich würde dort raten, wenn jemand Sie nicht benachrichtigt, dass Ihre Website ein Problem mit der Barrierefreiheit hat , einen Dialog mit ihnen beginnen , natürlich einfühlsam sein und einfach vernünftige Schritte unternehmen, um das Problem zu beheben. 5. So testens erproben: Wie können Sie also eine Website auf eine gute Zugänglichkeit testen? Nun, ich zeige Ihnen den Prozess, den ich durchmache, wenn ich so etwas mache. Also zuerst, wenn wir auf die Website kommen, habe ich versucht, durch die Website zu navigieren, nur mit meiner Tastatur allein. Also meistens mit der Tabulatortaste, um zu sehen, ob ich auf alle Anker und Tasten und Eingaben zugreifen kann. Nun ist es gut zu wissen, dass alle Inhalte außerhalb des Bildschirms nicht angreifbar sein sollten. Stellen Sie sich also ein Menü vor, das geöffnet wird, indem Sie auf einen Menüanker oder ein Burger-Symbol klicken. Und Sie würden die Navigationselemente erst sehen, wenn Sie auf diese Schaltfläche „Öffnen und Schließen“ klicken. In diesem Sinne sollten Sie, wenn Sie mit dem Tab über, sollten Sie nicht Tabbing sein oder Sie sollten nicht in der Lage sein, in dieses versteckte Menü zu tippen. Sie können nur auf diese Elemente tippen oder auf diese Elemente tippen, wenn das Menü aktiv und geöffnet ist. Also, das lohnt es sich zu überprüfen. Und Sie sollten in der Lage sein, bis zum Ende der Seite, einschließlich der Fußzeile, zu Tabulatoren . Nun, ein Beispiel für schlechte Zugänglichkeit ist auf einer, sagen wir, eine Blog-Liste Seite Listen, viele verschiedene Blog-Posts. Und es hat eine unendliche Schriftrolle, was bedeutet, dass Sie, wenn Sie Ihre Maus verwenden würden, werden Sie nach unten scrollen und mehr Beiträge laden würden, und Sie scrollen weiter nach unten und einige weitere Beiträge würden geladen. Nun, das könnte eine cool aussehende Funktion für mich sein, ein neues Buch für jemanden, der blind ist und muss Tab down, die nie in der Lage sein, die Fußzeile zu erreichen, bis alle Beiträge geladen sind. Und das ist wirklich verwirrend für sie. Stellen Sie also sicher, dass Sie bis zur Fußzeile mit Tabulatoren versehen können und verwenden Sie kein unendliches Scrollen. Und ich fokussiere Ringe sollten auf Ankern, Tasteneingaben, alles, was ausgewählt ist, vorhanden sein . Jetzt habe ich in der Vergangenheit mit Kreativen gearbeitet, die gesagt haben, dass sie das Aussehen des blauen Umrisses nicht mögen und es sollte entfernt werden. Aber es sollte nie entfernt werden und es sollte auch nicht subtiler gemacht werden. So kann der Fokusring neu gestaltet werden. Aber stellen Sie sicher, dass es nicht entfernt wird, weil es wichtig ist die Leute sehen, was sich derzeit im Fokus auf der Seite befindet. Also würde ich sagen, dass es Ihre Verantwortung als Entwickler ist, vielleicht den kreativen oder den UX-Wunsch zu erziehen , warum es wichtig ist, in diesen Fokusringen zu bleiben. Wenn es darum geht, Zustände auf einen Anker oder eine Schaltfläche oder irgendetwas, das anklickbar ist, zu schweben. Dies sollte, der Hover-Zustand selbst sollte nicht durch Farbe allein angezeigt werden. Weil jemand, der Farbblindheit oder Teilblindheit hat, können wir den Unterschied nicht erkennen. So können Sie die Farbe beim Hover ändern, aber auch etwas Physisches, vielleicht wie eine Unterstreichung oder einen Rahmen. Jetzt ging ich zu bemerken, eine Animation auf einer Seite ist wert zu überprüfen, ob es entfernt werden kann, wenn Sie Bewegung reduzieren auswählen. Also in Ihren Einstellungen für Ihr MacBook oder Ihren PC oder den Computer, den Sie verwenden. Dies sollte eine Option in Ihren Barrierefreiheitseinstellungen sein, um reduzierte Bewegungen einzuschalten. Und wenn Sie wieder auf die Website gehen, können Sie sehen, ob der Entwickler dies in eine Lektion aufgenommen hat oder alle Animationen, die sich auf der Website befinden, vollständig entfernen. Wie bereits erwähnt, kann ablenkende Animationen ein Problem für jedermann sein, hat irgendwelche kognitiven Probleme. Nun, das sind einige praktische Tipps, um die Barrierefreiheit am Frontend zu testen. Werfen wir einen Blick auf einige nützliche Werkzeuge, die wir tiefer in den Code selbst eingraben werden. 6. Nützliche Test-Tools: Schauen wir uns ein paar nützliche Tools an, die Ihnen beim Testen auf eine gute Zugänglichkeit helfen. Also der erste, den ich dir zeigen möchte, ist in Google Chrome. Also, wenn wir nur die Seite überprüfen, die unsere DevTools öffnet, auf der rechten Seite hier. Es sollte ein Dropdown-Menü mit ein wenig leichten Reifen hier enthalten sein. Wenn du das nicht siehst, überprüfe einfach zuerst. Und wenn es nicht da ist, gehen Sie zum Google Chrome-Erweiterungsspeicher, laden Sie es herunter, weil Sie es nicht zu verschiedenen anderen Browsern hinzufügen können , wenn Sie es als Erweiterung herunterladen. Klicken Sie also einfach auf den Leuchtturm. Okay, und wir haben hier einige Optionen, einschließlich Best Practices für Performance, SEO und was uns interessiert, ist Barrierefreiheit. Sie können auch für Mobilgeräte und Desktops testen, um zu sehen, wie dies auf kleineren Geräten funktioniert. Also werde ich ein paar dieser ausgewählt lassen und ich werde einfach auf Bericht generieren klicken. Nach ein paar Sekunden, je nachdem, wie schnell Ihr Computer und Ihre Verbindung ist, sollte dies uns einen praktischen Bericht geben und einige Schulen sind an der Spitze. Ok, und wir kommen hier eigentlich drei von diesen Grünanlagen und die Schule ist aus 100, was wir wollen. Zugänglichkeit hier ist ein Bernstein, also 87. Idealerweise würden Sie wollen, dass dies grün ist. Also würde ich sagen, Ziel für 90 bis 100. Manchmal ist es sehr schwierig, Zugänglichkeit zu 100 zu bekommen, aber versuchen Sie, es 90 oder höher zu bekommen, wenn Sie können. Also werden wir Performance-Best Practices ignorieren, und SEO, sie sehen alle gut aus. Aber Zugänglichkeit, es sieht so aus, als könnte es einige Dinge geben, die wir Haare verbessern können. Wenn wir also nach unten scrollen, können wir hier die Barrierefreiheit sehen. Und dann gibt es uns einige Probleme, die wir uns jetzt ansehen sollten. Also der erste ist Kontrast. Jetzt steht hier, die Beschreibung hier für Leuchtturm sind sehr nützlich, so dass es sich lohnt, zu lesen. Es steht also Kontrast. Dies sind Möglichkeiten, die Lesbarkeit Ihrer Inhalte zu verbessern. So wie hier dargestellt, dass Hintergrund- und Vordergrundfarben kein ausreichendes Kontrastverhältnis aufweisen. Also, wenn wir das einfach öffnen, können Sie sehen, dass es drei fehlgeschlagene Elemente gibt. Und wenn ich den Mauszeiger über sie zeige, sehen Sie, dass die Navigationsleiste oben hervorgehoben wird. So heißt es hier, Texte mit geringem Kontrast, schwierig oder unmöglich für viele Benutzer zu lesen. Jetzt wissen wir, dass es die Navigationselemente an der Spitze hier sind, die geändert werden müssen. Also lassen Sie mich einfach meinen Code hier nach oben verschieben. können wir sehen. Sehen wir uns nun unsere Navigation an, die hier ist. Also mache ich diese und irgendwie grau. Lassen Sie uns sie alle zu einem soliden Schwarz machen, und sie werden aktualisiert. Ok. Als nächstes auf der Liste steht, okay, Navigationsüberschriftenelemente befinden sich nicht in einer sequentiellen absteigenden Reihenfolge. Das scheiternde Element ist also h4. So können wir nur H4 verwenden, die Seite, wenn H1, H2 und H3 dies auf der Seite vorangeht, aber es gibt nur einen Header hier. Also lasst uns einfach überprüfen, was das ist. So können Sie hier sehen, ist ein H1, was bedeutet, dass dies ein H2 sein muss, weil es der nächste Header in Zeile ist. Denken Sie daran, dass der Kopf und die Zahl nicht die Größe angeben, aber es zeigt die Bedeutung an und sie müssen in sequentieller Reihenfolge sein. Also, wo es Fünf mehr sagt, sollte es kein H4 geben, sie sollten in der Tat sein. Und H2. Also, so fett. Okay, gehen wir zurück zum Leuchtturm. Als Nächstes haben Formularelemente keine Beschriftungen zugeordnet. Also ist es das aufmachen. Es sagt mir, dass der Eingabename und die E-Mail keine Beschriftungen haben. Also Hit, sie haben Platzhalter, aber das ist nicht genug. Diese Eingaben müssen Beschriftungen aufweisen. Also lassen Sie uns sie hinzufügen. Okay, das ist unser Name. Lassen Sie uns ein Label hinzufügen. Label für ist die ID des Namens und des Namens und ein Sternchen, da es erforderlich ist. Und dann tun wir dasselbe für E-Mail, für ID der E-Mail. Und dann schreiben wir hier eine E-Mail. Ok? Und Sie können sehen, dass die Etiketten dort erscheinen. Nun, das hat all die Dinge, die für Barrierefreiheit gekennzeichnet wurden. Also werde ich nicht tun, ist dieser klare Leuchtturm und dann generiert einen Bericht ein zweites Mal. Und hoffentlich sollten wir im Grünen sein. Da gehen wir. Zugänglichkeit ist 100 und in der grünen, perfekt. Das nächste Tool, das ich Ihnen zeigen mag, ist gekühlt Website verbessern Barrierefreiheit Checker. Und es ist durch die Firma Website zu verbessern. Und Sie können dies aus dem Chrome Web Store direkt hier herunterladen. Okay, und das taucht tiefer ein als Licht-Verleih-Stars. Es ist also wirklich nützlich, wenn Sie wirklich sicherstellen müssen, dass Ihre Website zugänglich ist, um einen Standard zu verdoppeln oder sogar zu verdreifachen. Service ist ein wirklich tiefgreifendes Werkzeug für die Barrierefreiheit. Nun, zuerst zeige ich Ihnen nur die Filter hier. So können Sie einfach für die verschiedenen Ebenen überprüfen, eine Debatte für das Flugzeug. Lassen Sie uns nach allen suchen. Sie können auch angeben, was Ihre Aufgabe ist. Also sind wir Entwickler, also lassen Sie es uns dabei behalten. Andere würden zum Beispiel für Inhaltsanbieter gelten. Es wäre also nützlich für sie. Aber wir wollen nur den Code überprüfen. Und im Moment habe ich gerade Fehler ausgewählt, um einfach die Filter zu schließen. Es gibt keine Bereiche, also ist das wirklich gut. Aber wie wäre es, wenn wir nur ein paar Morgen und Bewertungen hinzufügen , nur um sicherzustellen, dass wir alles abgedeckt haben. Ich werde auch alle Job-Titel auswählen, nur zwei, nur damit wir alles überprüfen können. Wir wissen also, dass wir keine Fehler haben, aber es gibt einige Dinge, die es wert sind, zu überprüfen. Also öffnen wir das in für Zusammenhänge, wird das kleine Tag korrekt verwendet? Hier steht, Lasst uns darauf klicken. Sie werden sehen, dass das Werkzeug automatisch nach unten scrollt und in rot hervorgehoben wird, das hier unten ist. All dies sagt mir also, zu überprüfen, ob ich das kleine Tag richtig verwende. Verwenden Sie das kleine Tag nicht, um die Textgröße zu ändern. Das ist in Ordnung. Ich benutze es nicht alles auf die Größe. Ich benutze es nur für die Copyright-Erklärung hier unten in der Fußzeile. Okay, sicher, wir überprüfen es. Noch einen. Bilder von Text. Ist das Bild frei von Text. Nun hat das hier mit dem Logo zu tun, das hier größtenteils seitlich hervorgehoben ist. Und ich sage mir im Grunde, dass Sie keine Bilder verwenden sollten, die Text im Inneren haben. Wenn Bilder von Text jedoch nicht so vermieden werden können, als ob es sich um ein Firmenlogo , sollte das alt-Tag denselben Text wie das Bild enthalten. Also Text Alternative sagt es hier, enthält nicht den gleichen Text. Also sind wir alle gut. Es gibt also ein paar nützliche Werkzeuge, die Sie verwenden können. Ich würde empfehlen, dass, wenn Sie mit mir kodieren, wenn wir mit dem Projekt beginnen, dass Sie Lighthouse verwenden, um zu testen, während Sie gehen, weil es nützliche Probleme kennzeichnet, die Sie ändern können. Wenn Sie wirklich weiter eintauchen wollen als Siteimprove geht wirklich in viel mehr Zugänglichkeit Tiefe. Also gibt es zwei Möglichkeiten. 7. Semantic Markup: Schauen wir uns nun in semantisches Mockup an und warum ist wichtig für die Zugänglichkeit. So können wir hier ein typisches Website-Layout sehen und bemerken die verschiedenen Elemente und die verschiedenen HTML-Tags verwendet. Sir, wir haben eine NAB, die in der Kopfzeile ist. Wir haben eine Fußzeile an der Unterseite, wir haben eine beiseite. Und dann in der Mitte, wo der Hauptinhalt ist, ist ein Haupt-Tag mit dem Abschnitt. Und dieser Abschnitt hat einen Header 1-Tag. Und dann innerhalb des Abschnitts ist ein Artikel. Dies ist also nur ein Beispiel für die verschiedenen Layout-Tags, die ich Ihnen zeigen wollte. Und ich wollte auch darauf hinweisen, dass Sie Single div nicht sehen können. Also, was ich versuche, hier rüber zu kommen, ist, kein div oder weniger zu verwenden. Es gibt buchstäblich keine anderen Tags, die Sie für diese Situation verwenden können. Also hier sind einige divs, und dies ist für eine Navigationskomponente oder ein Navigationsmenü. Und dann gibt es nur diff Container und innerhalb der Entwickler einzelne divs für jeden Menüpunkt. Das ist eine schlechte Art, es zu tun. Also, wie auf der vorherigen Folie erwähnt, verwenden Sie keine divs und wie Sie müssen. Ein besseres Beispiel ist die Verwendung eines nav -Tags für den Container. Und dann haben wir eine ungeordnete Liste. Innerhalb der ungeordneten Liste finden Sie unsere einzelnen Listenpositionen. Also wieder, versuchen Sie einfach, die Tanks zu verwenden , dass es viel klarer für Bildschirmlesegeräte ist, um anzuzeigen, welchen Teil der Website, dass auf, wenn Sie semantische Tags verwenden, ist leicht, zwischen verschiedenen Arten von Daten zu unterscheiden. Und auch wirklich gut für Suchmaschinen wie Google, um durch Ihre Seite zu navigieren. semantischem HTML geht es also darum, die richtigen Tags für jedes Element zu verwenden. Was bedeutet das also für Bildschirmlesegeräte? Werfen wir einen Blick darauf, wie ein Bildschirmlesegerät diese beiden Beispiele lesen würde. Werfen wir zuerst einen Blick darauf, wie der Screenreader diese Navigation auf der Seite liest, während wir sie mit nur divs codiert haben. Also nicht auf die beste semantische Art und Weise. Sie befinden sich derzeit in einem neuen Fenster. Sie befinden sich derzeit auf einem Link. Sie befinden sich derzeit auf einem Link. Klicken Sie auf diesen Link, Gras-Steuerung, Auktionsraum. - Musik. Okay, also liest es sich als Link aus und liest den Namen des Links aus. Aber das könnte aussagekräftiger sein. Es gibt keine Möglichkeit, es zu wissen. Hierbei handelt es sich um ein Navigationsmenü. Klingt einfach so, als wäre es eine Auswahl oder zufällige Links, die irgendwo auf der Seite sein könnten. Lassen Sie uns nun überprüfen, wie der Screenreader diese Navigation ausliest , wenn wir die richtigen Navigation HTML-Elemente verwenden. Okay, Jetzt sind diese drei Elemente in einer korrekten Liste im HTML. Lassen Sie uns sehen, wie die Bildschirmlesegerät es als eine Registerkarte über das über Seitenelement ausliest. Listenelemente haben ein neues Fenster. Ok. Es wird also gesagt, dass es eine Liste von drei Elementen gibt, weil es weiß, dass diese Elemente in einer Liste von, gut drei Elementen und dann nicht in einigen zufälligen div-Tags sind . Also nur das kleine bisschen zusätzliche Informationen sagt dem Benutzer, dass eine Liste von drei Elementen ist. So leicht, das wird ein Menü mit einer Beschreibung sein. Werfen wir nun einen Blick auf einige HTML-Tags, die Ihnen vielleicht nicht bewusst sind. Diese sind also nicht notwendigerweise so häufig. Und oft, anstatt diese richtigen Tags zu verwenden, können divs verwendet werden oder Absatz-Tags verwendet werden , wenn es tatsächlich so viele gibt, aus denen Sie wählen können. Hier ist ein gutes Beispiel für die Verwendung eines Zeit-Tags, um diesen Tag des 20. Mai hier zu repräsentieren. Und wie wär's mit der Beschreibungsliste? So haben Sie vielleicht von einer bestellten Liste oder einer ungeordneten Liste gehört. Nun, diese Beschreibungsliste enthält Beschreibungsbegriff und dann die Beschreibung Detail. Und dieses Detail ist für den obigen Begriff. Also ist es eine Art Zusammenfassung des obigen Punktes. Das ist eine andere Art von Liste, die es wert ist, zu wissen. Wie wäre es mit dem Adresse-Tag? Innerhalb der Adresstags können Sie also eine physische Adresse enthalten, eine Telefonnummer und E-Mail enthalten, sogar Kartenpunkte oder Längen- und Breitengrad. Sie können sogar Twitter-Handles und andere Social-Media-URLs einschließen. Wie wär's mit dem kleinen Etikett? Dies wird oft für Urheberrechte verwendet, die ich in diesem Beispiel teile. Also wird wirklich mit der Barrierefreiheit helfen, wenn Sie die richtigen semantischen Tags verwenden und Ihre Websites auf die beste Weise, dass Sie alle Tags verwenden können, die Ihnen zur Verfügung stehen. Werfen Sie nun einen genaueren Blick auf einige gängigere HTML-Elemente und wie sie auf die richtige zugängliche Weise verwendet werden können. 8. HTML-Elemente: Werfen wir einen eingehenden Blick auf einige gängigere HTML-Elemente und wie sie am besten für eine optimale Zugänglichkeit verwendet werden können. Bei gemeinsamen Headern sehen Sie wahrscheinlich H1, H2, H3 und so weiter in, bis wir zu H6 kommen. Und ich habe gesehen, dass viele Entwickler sie auf diese Weise verwenden , um die Größe der Überschrift zu ändern, und das ist falsch. Sie repräsentieren das Wichtigkeitsniveau, nicht die Größe. Das ist also eine wichtige Sache, sich daran zu erinnern, wenn es darum geht, diese Header-Tags korrekt zu verwenden. Jetzt müssen sie eine sequentielle Reihenfolge auf der Seite folgen. Du kannst also nicht einfach reinkommen und H4. Wenn es zum Beispiel kein H1, H2, H3 gibt, geht es auf der Seite weiter. Und es ist nützlich zu wissen, dass einige Bildschirmlesegeräte zwischen Kopfzeilen überspringen können. Sir, alles, was eine Art Wichtigkeit , die vielleicht vor der Kopfzeile kommen kann, kann übersehen werden. Lassen Sie mich Ihnen ein Beispiel geben, was ich damit meine, entschuldigen Sie das sehr fade Styling hier. Aber Sie können sehen, verschiedene Blog-Post oder kleine Artikel auf diese Weise mit einem Datum, wann es veröffentlicht wurde und der Titel Anson Text angelegt. Nun ist das Problem hier, wie bereits erwähnt, einige Bildschirmlesegeräte können zwischen Kopfzeilen überspringen, um auf der Seite zu navigieren. Einfacher. Aber dann bedeutet das, wenn Sie hier zu diesem Header springen alles darüber in diesem Container völlig verpassen. Dieses Datum wird also nicht zurückgezogen. Also bitte legen Sie Ihre Beiträge nicht so aus. Der beste Weg wäre, sie zu tauschen und alle wichtigen Informationen unter der Kopfzeile zu halten. Bilder sollten immer ein aussagekräftiges Alt-Tag enthalten. Und das einzige Mal, dass Sie die alten Tags leer lassen würden , wenn das Bild rein präsentativ ist. Wenn es zum Beispiel darum geht, Bilder zu verwenden, die Wörter enthalten , haben Logos oft Wörter in ihnen. Das alte Tag sollte die genauen Wörter enthalten, die verwendet werden. Sehen wir uns nun schnell einige Bildbeispiele an. Wenn es also um Bilder geht, wenn Sie Ihrem Bild-Tag ein Alt-Tag hinzufügen, stellen Sie bitte sicher, dass es beschreibend ist und beschreibt, was sich im Bild befindet. Jetzt ist das nicht offensichtlich, was BBs Preis als das höhere Minimum festzusetzen, einige alte Panzer sind Live-Szene. Also mit diesem Bild, diesem schönen Bild dieser Katze, ist das Alt-Tag eine graue Katze, die eine Krone trägt. Also ja, beschreibt genau das, was auf dem Bild ist. Also erwähnte ich Präsentationsbilder. Das einzige Mal, wenn Sie das alte Tag leer lassen. Dies könnte also wie ein Teiler wie dieser beinhalten. Es fügt also keine Informationen auf dem Bildschirm hinzu, wenn Sie möchten, ist nur für die Präsentation. In diesem Beispiel ist das alt-Tag leer. Und um Screenreader weiter zu helfen, habe ich hier eine Rolle gleich Präsentation zum Bild-Tag hinzugefügt. Nun, wenn es um Logos wie dieses geht, die ich während des Kurses verwendet habe. Es hat Text innerhalb des Logos. Im Allgemeinen möchten Sie vermeiden, Text in einem Bild zu verwenden, aber natürlich haben einige Firmenlogos Text. In diesem Beispiel sollte das alte Tag genau sagen, was die Wörter sind, und es tut hier. Wenn es nun um Anker und Schaltflächen geht, stellen Sie sicher, dass sie alle einen Hover-Zustand und auch einen Fokusumriss haben. Jetzt könnte es verlockend sein, den Fokus zu entfernen, wenn Sie denken, dass er hässlich aussieht, aber entfernen Sie ihn nicht, Sie können ihn neu gestalten. Aber entfernen Sie es nicht vollständig ist wichtig, dass ein Fergus Umriss für Zugänglichkeit bleibt. Wenn es um externe Links geht, sollten sie eine Art und Weise angeben, dass sie tatsächlich extern sind und sie werden eine neue Registerkarte oder ein neues Fenster öffnen. So können Sie dies mit etwas Text tun, der es begleitet, sagt öffnet sich in einem neuen Fenster. Oder Sie können ein Symbol einschließen, das in einem neuen Fenster geöffnet wird. Stellen Sie sicher, dass Ihr Anker- und Schaltflächentext beschreibend. Buttons, die etwas haben können, wie mehr lesen oder hier selbst klicken, sind einfach nicht genug. Um also mehr Informationen aufzunehmen, ohne sie tatsächlich dem Text hinzuzufügen, können Sie aria-Attribute verwenden, in denen Sie etwas außerhalb des Bildschirms einfügen können. Werfen wir einen Blick auf einige Beispiele dafür. Wie bereits erwähnt, stellen Sie bitte sicher, dass Ihre anklickbaren Anker oder Tasten, haben Sie einen Hover-Zustand und einen Fokusstatus? Wenn ich also auf diese erste Schaltfläche klicke, siehst du den blauen Umriss. Wenn ich mit der Maus darüber schwebe, hat ein Erntedatum mit dem Schatten. Und wenn es um Erntedaten geht, ändern Sie bitte nicht nur die Farbe des Textes, weil Menschen mit geringer Sichtbarkeit oder Farbenblindheit den Unterschied nicht sehen können. Stellen Sie also sicher, dass sich etwas physisch ändert. Und bei externen Links geben Sie bitte an, dass es sich um einen externen Link handelt. Also entweder mit einem Symbol oder noch besser haben einen beschreibenden Text, der buchstäblich besagt, dass er in einem neuen Fenster geöffnet wird. Und bitte seien Sie beschreibend. So werden Sie oft Tasten oder Ion Kinder, die nur sagen, lesen mehr oder klicken Sie hier oder etwas entlang dieser Linie. Aber für jemanden mit geringer Sichtbarkeit, Sie, können Sie nicht den gesamten Kontext der Seite oder den Inhalt bekommen. Wir brauchen mehr Informationen. Also, was lesen sie? Mohr Buret. Also, das ist nur überprüfen Sie diesen Read More Button. Und Sie werden sehen, dass ich ein Arienetikett mit einer Beschreibung von mehr über beschreibende Informationen hinzugefügt habe . Zumindest wenn ein Screenreader dazu kommt, aber mehr Informationen über den Kontext dieser Schaltfläche haben. Ich möchte darauf hinweisen, dass RA Armaturenbrett Etikett. Die Worte darin sind nicht zu 100 Prozent übersetzbar. Das bedeutet also, dass es nicht zu 100% zugänglich ist. Eine bessere Lösung wäre hier. Und um einen beschreibenden Text einzuschließen, der nicht sichtbar ist , aber von Bildschirmlesegeräten abgeholt wird. Also in einer Spanne habe ich diesen Text hier aufgenommen. Wir würden mehr, indem wir beschreibend sind. Ich habe eine Klasse von SR oder Link hinzugefügt, die Screenreader Bindestrich früh ist. Und dann, wenn wir die Stile hier sehen können, ich jetzt keine Anzeige hinzu, denn dann wird dies fehlen und der Bildschirmleser wird es nicht auslesen. Stattdessen können Sie die Stile hinzufügen, Ränder entfernen und eine Höhe und Breite von nur einem Pixel geben. Positionierung absolut, und dann geben Sie ihm einen Rand von minus 1 Überlauf versteckt und Padding von 0 im Grunde entfernt es vollständig vom Bildschirm. Es ist also für dich nicht sichtbar. Und ich kaufe ein wird für Bildschirmlesegeräte sichtbar sein. Und mit Formulareingaben, die Buttons und Ankern ähnlich sind, sollten sie immer einen Fokusumriss haben. So können Sie sehen, welches Feld sich im Fokus befindet. Formularfelder sollten auch Beschriftungen enthalten. Bitte entfernen Sie sie nicht und Platzhalter allein sind nicht genug. Sie sollten also ein Label einfügen. Bildschirmlesegeräte lesen die assoziierte Ebene aus, selbst wenn das Feld im Fokus steht. Also, das ist gut zu wissen. Und Sie können der Eingabe auch den Fokus hinzufügen, indem Sie einfach auf das Etikett klicken , damit der Trefferbereich größer ist. Und das gilt auch für Touchscreen-Geräte wie Mobiltelefone. Hoffentlich haben Sie diese Tipps nützlich gefunden und Sie werden in der Lage sein, sie zu implementieren , sobald Sie beginnen, zusammen mit dem bald kommenden Klassenprojekt folgen. 9. ARIA: Betrachten wir nun Aria-Attribute und wie sie bei der Barrierefreiheit helfen können. So sind sie nützlich MDM-Dokumente Zustand, wo Accessible, Rich Internet Applications, für das R steht, ist eine Reihe von Attributen, die Wege finden, Webinhalte und Webanwendungen zu erstellen, vor allem in JavaScript, zugänglicher für Menschen mit Behinderungen. So können sie benutzerdefinierten Komponenten Zugänglichkeit Semantik hinzufügen , wo sie normalerweise nur auf nativen Elementen existieren würden. In den vorherigen paar Lektionen habe ich erklärt, viele native HTML-Elemente haben bereits zugängliche Funktionen für Sie zu verwenden. Aber es kann Situationen und Gelegenheiten geben, in denen Sie etwas benutzerdefinierteres erstellen müssen. Werfen wir einen Blick darauf, wie wir dabei helfen können. Jetzt ist hier eine häufige Situation, wo die Anker-Symbole, so dass Sie dies in einer sozialen Symbol-Liste oder einer kompakten Navigation spezielle und Mobiltelefon finden , wo Sie möglicherweise keinen Text überhaupt bekommen, aber Sie haben nur Symbole, um eine anklickbares Element. Das Problem besteht darin, dass mit diesen Symbolen kein Text zugeordnet ist. Bildschirmlesegerät kommt zu ihnen. Sie wissen nicht, was sie repräsentieren. Sie können den Stil dieses Symbols nicht sehen, also würden sie keine Ahnung davon haben, dass es Instagram und Twitter sind, geschweige denn, wo dies klicken würde. In unserem Code gibt es also einen Weg, wie wir dies beheben können. Also auf unserem Anker nur in Chrome DevTools hier, Ich werde nur ein Attribut hinzufügen. Und das wird Aria sein, Armaturenbrett-Etikett. Und dann können wir innerhalb dieses Labels einen beschreibenden Text schreiben. So können wir sagen, öffnet das Instagram-Konto von mir. Und dann öffnet sich die Klammern in einem neuen Fenster. Richtig? Und wenn ein Screenreader dazu kommt, wird es in der Lage sein, dieses Arien-Etikett zu lesen, das genau beschreibt, was dieses anklickbare Symbol Sie zu dem bringt, was sich öffnet und was es darstellt. Lassen Sie uns dasselbe für Twitter als Attribut, Arie, Label tun. Und deshalb öffne ich den Schalter. Aktuell. Ich wieder in Klammern, öffnet in einem neuen Fenster. Wenn es also keine Texte zu lesen gibt, nützt ein Arien-Etikett das. Und ich würde sagen, das ist wie das grundlegendste Beispiel für einen Aria-Attributfall. Ich möchte Ihnen zwei Beispiele für eine Reihe von Kontrollkästchen zeigen und wie die Bildschirmlesegerät sie ausliest. Zuerst schauen wir uns die nativen Checkboxen an. Also mit den normalen Eingabe-HTML-Checkbox-Tags. Und dann unten ist eine Reihe von benutzerdefinierten Checkboxen, die ich selbst gemacht habe, nur mit Spannen und Labels, aber nicht mit den nativen Eingabe-Checkbox-Tags. Lassen Sie uns also die Voiceover-Screenreader einschalten und sehen, wie die nativen Kontrollkästchen erneut eingeben. Checkboxen, Google Chrome-Fenster, The Godfather Kontrollkästchen hat Tastaturfokus. Sie befinden sich derzeit in einem Kontrollkästchen, um dieses Kontrollkästchen zu aktivieren oder aufzuheben, drücken Sie die Option Steuerelement. Alles klar, tippen wir jetzt auf die Ellipse, ich sage das Kontrollkästchen. Sie befinden sich derzeit auf einem Häkchenfeld, das Wild One Kontrollkästchen. Sie sind derzeit das wilde Ein-Häkchen. Ok. Das ist also ziemlich klar. Es erkannte, dass sie Kontrollkästchen waren, erkannte, dass sie sich in einer Gruppe von Kontrollkästchen befanden und auch erkannt wurden, wenn sie angekreuzt und nicht markiert waren. So sehr nützlich. Was passiert jedoch, wenn Sie einige benutzerdefinierte Kontrollkästchen von z formatieren möchten? Dieser Entwurf ist schrecklich. Ich werde hier keine Spuren für gutes Design bekommen, aber das ist nicht der Sinn dieser Lektion. Ich möchte Ihnen nur zeigen, dass was passiert, wenn wir Designs und benutzerdefinierte Checkboxen erstellen , in denen wir das HTML-Äquivalent nicht verwenden können. Wie das Bildschirmlesegerät diese ausliest und was wir tun müssen, um Arie zu verwenden, um sicherzustellen, dass diese zugänglich sind. Also lassen Sie mich VoiceOver einschalten und wir werden sehen, wie es derzeit diese Liste von Checkboxen ausliest. Voiceover auf Chrome aria Kontrollkästchen, Google Chrome-Fenster. Sie befinden sich derzeit auf einem Textelement innerhalb Web-Inhalten, um diese Nassbereich-Presse-Steuergruppe zu verlassen. Sie befinden sich derzeit auf einem Textelement innerhalb der Web-Content-Gruppe. Sie befinden sich derzeit auf einem Textelement innerhalb des Webinhalts, um diesen Nassbereich zu verlassen, drücken Sie die Steuerungsoption. Sie befinden sich derzeit auf einem Text nach oben VoiceOver aus. Okay, also überhaupt nicht sehr nützlich. Es denkt, dass es nur das Textelement ist. Es weiß nicht, dass es ein Kontrollkästchen ist, weiß nicht, ob es angekreuzt oder deaktiviert ist. Es ist im Grunde sehr leer und nicht nützlich für jemanden, der ein Bildschirmlesegerät verwendet. Wie können wir das ändern? Also auf der Spanne, die das Kontrollkästchen selbst ist, habe ich bereits einen Tab-Index von 0 über alle von ihnen hinzugefügt, so dass ich zumindest Tab zu ihnen. Andernfalls wäre ich nicht einmal in der Lage, sie mit einer Tastatur auszuwählen. Für diese vier müssen wir Bildschirmlesegeräte mitteilen, dass die eigentliche Rolle dieser benutzerdefinierten Kontrollkästchen in der Tat Kontrollkästchen sind. Also ist eine Rolle gleich Checkbox. Das ist also der erste Schritt. Als nächstes müssen wir angeben, ob dies aktiviert oder deaktiviert ist. Also können wir ein Arie Etikett von Arie Dash überprüft verwenden. Und wir werden den Paten auf die Wahrheit setzen. Und dann für diese drei unten, werden wir eine Arie hinzufügen, überprüft gleich falsch. Okay, speichern Sie das. Okay, und ich habe schon gestylt, also hat der Scheck ein kleines Kreuz drin. Das ist auch nicht genug. Diese Beschriftungen müssen also mit diesen benutzerdefinierten Kontrollkästchen verknüpft werden. Nun, ähnlich wie der native Eingabetyp von Kontrollkästchen ist, wo es eine Beschriftung unten, die vier sagt. Und dann wird der Wert innerhalb des vollständigen Links zur ID der Eingabe. Wir müssen dies mit unseren benutzerdefinierten Checkboxen replizieren. das zu tun, können wir ein Nother Arie Etikett namens Arie Dash verwenden, beschriftet durch. Und das muss der ID des Labels entsprechen. Also das hier. Und ich werde einfach schnell die gleiche Arie hinzufügen, die für die folgenden Kontrollkästchen gekennzeichnet ist. Mit diesen Aria-Rollen und Attributen, die unseren benutzerdefinierten Checkboxen hinzugefügt werden. Mal sehen, wie die Bildschirmlesegerät sie liest. Tun Sie jetzt. Voiceover auf Chrome, aria Kontrollkästchen, Google Chrome-Fenster. Das Häkchen des Pate hat den Tastaturfokus. Sie befinden sich derzeit auf einem Häkchen innerhalb, wenn Inhalte dieses Kontrollkästchen aktivieren oder deaktivieren, Apokalypse. Jetzt bin ich Jake, um das Kästchen anzukreuzen. Sie sind momentan nicht markiert. Häkchen. Sie befinden sich am Wasser, um das Kästchen anzukreuzen. Sie befinden sich derzeit auf einem Häkchen innerhalb, wenn CMS nicht VoiceOver ausgeschaltet ist. Okay, das ist großartig. Mit der Verwendung von Arie haben wir es geschafft, sicherzustellen, dass unsere benutzerdefinierten Checkboxen zugängliche semantische Details haben , die mit Screenreader helfen werden. Beachten Sie nun bitte, dass das MDS-Dokument wieder besagt, dass die erste Regel der Arie ist, wenn ein natives HTML-Element oder Attribut die Semantik und das Verhalten hat, die Sie benötigen, verwenden Sie es, anstatt ein Element neu zu verwenden und einen Arie-Rollenstatus oder eine Eigenschaft, um es zugänglich zu machen, verwenden Sie nur Aria-Rollen, wenn kein HTML-Element äquivalent ist, um dasselbe zu erreichen. Viele HTML-Elemente verfügen bereits über so viele großartige Eingabehilfen. Es sollte also nur eine einzigartige Situation sein, in der man etwas Einzigartiges schaffen muss. Und wenn du zugänglich bleiben musst, was natürlich du tun solltest, dann kommt die Arie ins Spiel. 10. Kursprojekt – Einrichten: Jetzt ist der Teil des Kurses, in dem ich ein Mini-Projekt erstellen werde, nur einen einzigen Pager , der verschiedene Eingabehilfen dazu hat. Also fordere ich Sie wirklich auf, mit mir zu folgen und bauen Sie sich eine einseitige Website ähnlich wie auch. Ich werde Ihnen in den nächsten Lektionen zeigen und versuchen, so viele Barrierefreiheitsfunktionen einzubeziehen , die Sie während dieses Kurses gelehrt haben. Also werde ich hier VS Code verwenden. Und wenn Sie mein Kursprojekt verfolgen und kopieren möchten, dann brauchen Sie eine index.html für Ihr Modell, eine style.css für Ihre Stile. Dann möchte ich, dass du an deinen Lieblingsschauspieler oder -musiker denkst, oder an jemanden, der ein Held für dich ist und vielleicht eine Seite über sie schreibt. Und dann benutzen wir Marlon Brando, weil ich denke, er ist ein großartiger Schauspieler oder gibt es irgendwelche Wände? Also benutzen wir ein Porträt von ihm. Und ich habe auch dieses Logo erstellt, das wir in der Kopfzeile verwenden werden. Also erschaffen Sie das selbst. Wir hatten keinen Zugang zu etwas, um sich selbst ein Logo zu kreieren. Finden Sie einfach online ein passendes Bild. Und wirklich der beste Weg zu lernen ist, Ihr neues gefundenes Wissen in die Praxis umzusetzen. Lassen Sie uns also weiterhin Ihr Projekt auf einer Seite hosten, die jeder sehen kann. Und ich und andere können Ihnen Feedback geben. Ich zeige Ihnen, wie Sie Ihr Projekt auf GitHub Pages hosten ist völlig kostenlos und es ist einfach zu tun. Wenn Sie noch kein GitHub-Konto haben, gehen Sie bitte auf github.com und melden Sie sich an. Ich habe bereits ein Konto, also werde ich nicht den gesamten Prozess durchlaufen, sondern befolgen Sie einfach die Anweisungen auf dem Bildschirm und Sie werden eingestellt. Die einfachste Möglichkeit, Ihre Arbeit auf GitHub zu übertragen, besteht darin, GitHub Desktop herunterzuladen und zu verwenden. Sie können diesen Desktop dot github.com herunterladen. Und am Ende haben wir alle Ihre Arbeit bereit, um auf GitHub Pages zu hosten. Jetzt, wenn Sie GitHub heruntergeladen haben, sieht Desktop etwas Ähnliches aus. Jetzt müssen wir keine Arbeit vorantreiben, bis Sie das Projekt vollständig getestet haben und Sie bereit sind, es zu hosten. Also werde ich Ihnen diesen Prozess am Ende der Projektstunde zeigen. Aber wenn Sie GitHub Desktop haben, stellen Sie sicher, dass Sie bei GitHub angemeldet sind. Und Sie können das tun, indem Sie zum Hauptmenü gehen und auf Einstellungen klicken. Ich kann sehen, dass ich hier bei GitHub angemeldet bin. Wie ich schon sagte, mach dir keine Sorgen darüber, dass du keine Arbeit bis zum Ende hochschiebst. 11. Kursprojekt – HTML Teil 1: Werfen wir einen Blick auf ein Mini-Projekt, ja? Also werde ich eine einseitige Webseite über mein Schauspiel hier aufbauen , ich, Marlon Brando. Nun, es wäre cool, wenn du mir folgen könntest. Also gehen Sie weiter und öffnen Sie Ihren Code-Editor. Warum hast du nicht eine Seite über deinen persönlichen Helden gemacht, ob es ein Schauspieler oder eine Schauspielerin oder ein Musiker oder ein tolles Familienmitglied oder sogar ein Haustier ist? Wichtig ist hier nicht zu viel Zeit damit zu verbringen, sich um den Inhalt selbst zu kümmern, denn der Fokus auf dieses Mini-Projekt liegt darin, zugängliche Komponenten zu machen. Also bitte folgen Sie mir. Perfektes Elternteil ist Punkte. Vielleicht schauen Sie sich einige zugängliche HTML-Tags an, die Ihnen in früheren Lektionen nicht angezeigt werden. Und Sie müssen auch nicht die genaue Reihenfolge meiner Komponenten kopieren , die Sie ein wenig ausgetauscht werden können. Versuchen Sie also zu experimentieren, wenn Sie können , aber wenn wir uns nicht wohl fühlen, können Sie natürlich folgen, was ich tue. Und ich werde die zugänglichen Funktionen als unsere Codierung erklären. Also hoffe ich, dass das klar ist. Also lasst uns anfangen. Nun, ich werde Ihnen in dieser Lektion zeigen, ist das HTML-Mockup. Alles, was Sie im Moment brauchen, ist eine index.html Datei. Also werde ich die Erweiterung namens emmet verwenden, die es mir ermöglicht, Code-Snippets wie folgt zu verwenden, Ausrufezeichen Tab-Diagramme. Und es hat eine HTML-Vorlage gemacht, okay? Und wenn Sie Emmett nicht haben, können Sie in Erweiterungen suchen und danach suchen. Am Ende sollten Sie Emmett in der Liste der Erweiterungen finden, von denen ich glaube, dass es mit VS-Code geliefert wird. Ok. Hören Sie auf, barrierefreie Funktionen Also zuerst werde ich den Titel anpassen, was Marlon Brando Info-Seite verursachen kann. Zuerst im Körper, werde ich einen Header machen. Und in der Kopfzeile werde ich einen Rap machen. Und wenn wir anfangen, die Stile zu betrachten, werde ich die Rampe so einstellen, dass sie eine maximale Breite hat. Also alle unsere Inhalte sind schön in der Mitte. In der Kopfzeile möchte ich ein Bild-Tag einfügen. Ich werde ihm eine Klasse von Header-Logo geben. Jetzt werde ich dieses Logo hier benutzen. Jetzt habe ich das selbst in einem Grafikpaket erstellt. Also, wenn du nicht das Gleiche kannst, brillant. Wenn Sie keinen Zugriff auf so etwas haben, können Sie nicht einfach jedes Logo verwenden, das Sie im Internet vorerst finden. Aber selbst wenn Sie kein, ein Bild für Ihr Logo verwenden möchten , können Sie nicht einfach eine Kopfzeile wie ein H1 oben oben in Ihrem Kopf verwenden, eine Zeile, die den Titel Ihrer Seite darstellen kann. Aber was auch immer Sie tun, stellen Sie sicher, dass es zugänglich ist. - Sir. Ich werde dieses Logo verwenden, das hier ist. Und unser erster wichtiger Teil der Barrierefreiheit ist das Hinzufügen eines alten Tags, sorry, weil es so ist. Ein Logo mit Text darin ist wichtig zu schreiben, die Wörter sind innerhalb des Bildes. Entschuldigung, ist buchstäblich Marlon Brando. Werfen wir nun einen Blick auf das Erstellen einer Navigationsliste. Entschuldigung, ich werde einige semantische Tags S verwenden oder keine Entwickler verwenden, versucht zu verwenden, was Ihnen zur Verfügung steht, Sir nav. Und dann eine ungeordnete Liste. Im Inneren befinden sich drei Listenelemente, die Anker enthalten. Jetzt wird das kein funktionierendes Navi sein. Diese waren also nirgends Link. Aber sagen wir, es könnte eine Seite geben, sagen wir vielleicht Galerie. Und sagen wir eine Blog-Seite. Okay, als unsere Kopfzeile. Schauen wir uns nun den Hauptkörper der Arbeit an. Das Haupt-Tag wird also verwendet, um alle sichtbaren Elemente innerhalb des Hauptteils Ihrer Seite zu enthalten . Entschuldigung, ohne die Kopfzeile , aber den Inhalt dazwischen. Also innerhalb der Hauptseite werde ich das Abschnitt-Tag verwenden. Ich werde ihm eine Klasse von Intro geben, da dies unsere Einführung sein wird. Okay, und dann werden wir die Rap-Klasse für div-Garantie verwenden. Sie verwenden eine andere coole Klasse namens Rap-Spalte. Und ich werde zu meiner Arbeit schicken. Also werde ich eine andere Klasse namens Rap Center erstellen. Diese Klassen werden also alle in der nächsten Lektion klar werden, wenn wir uns das CSS ansehen, die eigentlichen Stile selbst. Und dann wird dieser Abschnitt seinen eigenen Header haben. Und innerhalb des Headers wird ein H1 sein. Jetzt ist dieser Titel wichtig. Dies wird der sehr schnelle und der Haupttitel der Seite sein. Und ich muss immer nur ein H1 pro Seite und pro Abschnitt sein. Also werde ich sagen willkommen auf der Marken-Info-Seite. K außerhalb der Kopfzeile. Less enthalten ein Image-Tag mit einer Klasse inter image. Ich werde dieses Porträt des Mannes selbst benutzen. Und dann lassen Sie uns einen kurzen Blick auf dieses Bild, so dass wir wissen, was für die ol Tag war schwarze Kunst Bild von ihm in seinen jüngeren Tagen enthalten. Das Alt-Tag sollte also so etwas wie ein Porträt eines jungen Marlon Brando sein. Und eigentlich ist das ein schwarz-weißes Porträt eines jungen Marlon Brando gesetzt. Okay, das ist cool. Lassen Sie mich diese Seiten-Paletten-Ionen schließen, damit es mehr Platz gibt. Okay, dann, und dann lasst uns einen kleinen Absatz mit einleitendem Text haben. Also werde ich eine Klasse von Intertext hinzufügen. Und lasst uns etwas über Marlon Brando schreiben. Mono, Marke gilt als einer der besten Schauspieler von allen. Zeit, er hat zwei Oscars gewonnen. Und sein geschätztes Korea für die Uferpromenade. Und in welchem Jahr hat er das gewonnen? Lassen Sie mich versuchen, mich an Dinge zu erinnern. 1954. Und du solltest 4 und 4 sein, Der Pate. Ok? Wenn du also mit mir folgst und deine eigene Seite erstellt hast, denke vielleicht an einen netten Intertext über deinen persönlichen hier und schreibe es dort. Verbringen Sie einfach nicht zu viel Zeit damit, sich zu viel Gedanken über den Inhalt zu machen. Stellen Sie einfach sicher, dass es mit den richtigen HTML-Tags zugänglich ist, wie wir es hier tun. Okay, dann der nächste Abschnitt. Lassen Sie uns diesem eine Klasse geben, Mu herauszufinden. Jetzt sollte dies einen Header haben. Jetzt haben wir bereits ein H1 verwendet, also sollte es keine zweite auf der Seite geben, also sollte es H2 sein. Erfahren Sie mehr. Lassen Sie uns einen Text haben, um mehr über Marlin Breuer zu lesen und auf seiner IMDB-Seite klicken Sie bitte auf den untenstehenden Link. Und ich werde auch einen Link hinzufügen. Also diese ANCA, werde ich ihm eine Klasse von Textanker geben, damit ich es stylen kann. Also die H ref, ich werde Leute auf sein Profil auf IMDB lenken. Lassen Sie mich diese Attribute einfach auf ihre eigene Zeile setzen, damit es einfacher zu lesen ist. Jetzt haben Sie ein Ziel. Ich möchte eine bestimmte Person Nin in einem neuen Fenster oder neue Tabs oder Ziel sollte Unterstrich leer sein, was wir tun, dass. Und dann der innere Text oder Text zum Anker. Lesen Sie mehr. Jetzt, um dies zugänglich zu machen. Und dann schreibe ich öffnet sich in einem neuen Fenster. Es ist also sehr klar, dass das passieren wird. Und dann, um dies noch beschreibender zu machen, weil mehr lesen nicht wirklich genug ist, werde ich hier ein Arienlabel hinzufügen, das sagt, lesen Sie mehr über Marlon Brando auf seiner IMDB-Seite. Weil, oder er sagt, öffnet sich in einem neuen Fenster, ich habe es nicht in das Arienetikett geschrieben. Das sollte genug beschreibende Worte für die NCA sein. Lassen Sie uns das nach oben bewegen, damit Sie das ein bisschen klarer sehen können. Jetzt wird der nächste Abschnitt gehen, um ein Kontaktformular hinzuzufügen. Also werde ich meinen Rap hinzufügen und ich werde auch Rap-Spalte hinzufügen. Die Elemente im Inneren werden also stapeln, wenn wir in der nächsten Lektion zum Styling gelangen. Der nächste Header muss also ein H3 sein. Wir haben bereits H1 und H2 verwendet. Jetzt können Sie mehrere h zwei auf einer Seite haben, normalerweise wie zwei oder drei und nicht mehr als das. Das könnte also ein H2 sein, aber es kann kein H1 sein. Wir haben bereits ihre Wirtschaft und H4 aufgebraucht, weil wir H1 und H2 verwendet haben. Also unsere Optionen hier, H2 oder H3, H3, weil das sequentiell ist. Und ich werde den früheren Titel des Kontakts mit mir überspringen. K, und dann in einem Absatz. Wenn Sie mit mir direkt von Marlon Brando chatten möchten, füllen Sie bitte das untenstehende Formular aus. Speichern Sie das. Und da gehen wir. Da ist unser erstes Mockup noch nicht mit dem Kontakt für mich fertig. Ich wollte nur sehen, wie das angelegt ist. 12. Kursprojekt – HTML Teil 2: Okay, dann schauen wir uns jetzt unser Formular innerhalb eines Formular-Tags an. Jetzt wird das nicht wirklich eine funktionierende Form sein. Es wird nicht irgendwo klicken, indem wir einige Formularfelder als Beispiel dafür verwenden möchten , wie Sie sie am besten auf zugängliche Weise verwenden können. Okay, also werde ich ein paar Pflichtfelder haben. Es verhindert, dass der Benutzer das Formular absenden, ohne die erforderlichen Felder auszufüllen. Um dies für alle in einem Absatz-Tag klar zu machen, schreibe ich alle Felder, die mit Sternchen markiert sind, erforderlich, so dass jeder klar ist. Ok? Und ich werde die Felder in einer div gekühlten Formulargruppe so gruppieren. Nun lassen Sie uns eine Eingabe, eine Texteingabe. Und die ID sollte Name sein, und wir geben ihm einen Platzhalter von Enter name. Lasst uns das retten. Sie können unten unten unten sehen, geben Sie Namen und es sagt es direkt dort. Allerdings nur mit einem Platzhalter, dieser Hit Name eingeben ist nicht genug. Es sollte ein Etikett geben. Also lassen Sie uns Etikett einschließen. Das Label für ist für diese ID genau hier, die Name und Bezeichnung des Namens ist. Und das wird ein Pflichtfeld sein. Setzen wir also einen Asterix da hin und wir können den Asterix unten hier sehen. Jetzt sollen auch Screenreader helfen sicherzustellen, dass sie wissen, dass dies ein Pflichtfeld ist. Ich werde ein Attribut auf dem Gebiet der erworbenen hinzufügen. Und ich möchte nur darauf hinweisen, dass die Verwendung von Emmet in VS-Code uns einige sehr nützliche IntelliSense-Empfehlungen gibt, Hey, wenn Sie mit der Eingabe beginnen, so erforderlich sind. Dies hilft also beim Einbinden von Barrierefreiheitsattributen wie diesem. Sehr handlich. Okay, Das sieht gut aus, hat alle richtigen zugänglichen Etiketten, einschließlich Informationen darüber benötigt werden. Also sehen wir gut aus. Okay, unsere nächste Formulargruppe kann es richtig buchstabieren. Lassen Sie uns eine Eingabe für eine E-Mail-Adresse hinzufügen. also sicher, dass Sie die richtigen HTML-Tags verwenden, die Ihnen zur Verfügung stehen, werde ich den Eingabetyp von E-Mail verwenden. Sagen Sie, die ID sollte E-Mail sein. Lassen Sie uns das Etikett für E-Mail nicht vergessen. Und stellen Sie sicher, dass E-Mail steht und dies nicht erforderlich ist. Also werde ich keinen Asterix oder ein erforderliches Tag einschließen. Also, was als nächstes für unser Formular ist, können wir ein weiteres div hinzufügen. Form-Gruppe. Und was wir hier verwenden werden, sind vielleicht einige Checkboxen. Denken Sie also über das Formular nach, das Sie in Ihr Projekt aufnehmen werden und welches Feld Sie einschließen können. Es spielt keine Rolle, ob du nicht genau das kopierst, was ich tue. Wie gesagt, stellen Sie sicher, dass das, was Sie tun, vollständig zugänglich ist. Und wir werden dies am Ende dieser Lektion und direkt am Ende des Projekts testen . Ok? Also, weil es ein paar Checkboxen geben wird, aber sie werden alle Teil derselben Gruppe sein. Wir können sie mit einem Feldsatz gruppieren. Und das wird sie zusammenhalten. Und ein Feldsatz sollte eine Legende haben, die im Grunde die Kopfzeile des Feldsatzes ist. Und dieser Abschnitt wird Natur der Untersuchung sein. Ok, großartig. Es gibt also Kontrollkästchen in einem div, jedes können wir Eingabetyp Checkbox machen. Stellen Sie also sicher, dass Sie die richtigen HTML-Tags verwenden. Und dann wird der Name eine Anfrage sein. Und dann schauen wir uns das Etikett an, das ich unterlegen werde. Und dieses Label ist eine Anfrage über seine Filme, sagen wir. Geben Sie der Eingabe also eine ID seiner Filme und das Etikett für die Bedürfnisse, die diesem entsprechen. Genau da. Das ist kopieren und fügen Sie dies das nächste Kontrollkästchen ein. Also sagen ihre Informationen über sein Leben , dass es die RD und die 4. verändert hat. Beachten Sie jetzt, wie wir hier bei der Untersuchung den gleichen Namen behalten. Das liegt daran, dass die Kontrollkästchen Teil der gleichen Frage sind. Also werden wir noch eine pro andere Information machen. Also sollte die ID anders sein, Label für, sollte anders sein, und der Name bleibt Anfrage, weil es mit der gleichen Frage übereinstimmt. Und das ist alles sehr wichtig für Bildschirmlesegeräte, weil dies die Art von Informationen ist , die dem Benutzer vorgelesen werden. Speichern Sie, dass K Saqqara Checkboxes funktionieren perfekt gute Sachen. Okay, als nächstes lassen Sie uns ein, vielleicht ein Textfeld wie ein Freiform-Textfeld, in dem Sie schreiben können, was sie wollen. Seit ich div form-group gemacht habe, werde ich einen Textbereich verwenden. Und lasst uns ihr eine Reihe von sagen acht geben. Mach dir keine Sorgen um die Säulen. Geben Sie ihm eine ID der Nachricht. Und dann muss das Etikett voll von Nachrichten sein. Und wir schreiben nur eine Nachricht für das Label k und dann brauchen wir eine Möglichkeit, das Formular zu senden, als wäre es ein funktionierendes Telefon. Ist es nicht. Aber wir bauen den Marker und die Stile, als wäre es eine funktionierende Form. Also müssen wir Schaltfläche senden, so werden wir tun Schaltfläche Senden. Okay, also Art der Einreichung, gutes Zeug, und dann schreiben wir einreichen. Hier. Da ist ein Knopf unten. Das ist es also für unseren Hauptabschnitt und den obigen Header. Alles, was wir jetzt brauchen, ist eine Fußzeile. Das Fußzeilen-Tag. Stecken Sie es in meine Rap-Klasse. Und dann werde ich hier eine Copyright-Erklärung verwenden. Um das Copyright-Symbol zu verwenden, machen Sie ein kaufmännisches Und-Kopie-Semikolon und schauen Sie, wie der VS-Code IntelliSense diese guten Dinge erkennt. In Ordnung, Copyright und mein Name und das Jahr. Und was wäre besser, um dies noch semantischer und zugänglicher zu machen , ist die Verwendung des richtigen Tags für dieses Copyright. Also werde ich klein verwenden. Oder klein ist sehr nützlich für Dinge wie, Nun, Geschäftsbedingungen oder Copyright-Erklärung. Wir fahren mit dem Mauszeiger darüber. Die MDM-Referenz oben besagt, dass das kleine Element Seitenkommentare wie Kleingedruckte darstellt. Und das ist kleiner Druck. Verwenden Sie das kleine Etikett nicht nur zu meinen Texten Maulwurf. Das ist der falsche Weg, es zu benutzen. Verwenden Sie es für, na ja, für so etwas wie ein Copyright, also stellen Sie sicher, dass es semantisch ist. Okay, und das ist so ziemlich das HTML-Labor, das ich verwenden werde. Wie gesagt, Sie können genau das kopieren, was ich tue, aber Sie erhalten Bonuspunkte für das Verschieben Ihrer Konkurrenten. Haben Sie sie vielleicht nicht in der gleichen Reihenfolge, in der ich sie mache , oder verwenden Sie ganz verschiedene Komponenten. Vielleicht denken Sie an verschiedene Formularfelder, die Sie verwenden können. Das stellt nur sicher, dass es zugänglich ist. Was wir tun können, ist vielleicht testen Sie diese Innenbeleuchtung , so gibt es noch keine Stile und wir haben sicherlich noch nicht mit der Arbeit fertig. Aber als das Mockup fertig ist, lasst uns auf Light Nesselsucht klicken und sehen, welche Punktzahl es uns gibt. So Zugänglichkeit ist überprüfen Sie die, generieren Sie den Bericht und sehen, welche Punktzahl wir bekommen. Barrierefreiheit 100. Das ist also sehr, sehr gut. Wenn wir nach unten scrollen, gibt es hier nichts, woran wir arbeiten können. Es gibt uns Gründe dafür, warum es passiert ist. Und Knöpfe haben einen zugänglichen Namen. Das ist gut. Wir haben das Titelelement aufgenommen. Die Seite enthält eine Überschrift. Unsere IDs sind einzigartig. Formularelemente verfügen über Beschriftungen. Okay, das ist gut. Vielleicht, wenn wir anfangen, mit den Stilen zu arbeiten, könnte dies einige Vorschläge für uns werfen, aber wir werden sehen, wenn wir zu diesem Abschnitt kommen , der als nächstes kommt. 13. Kursprojekt – CSS Teil 1: Jetzt ist dein Mockup an Ort und Stelle. Lassen Sie uns über das Styling der Seite nachdenken. Und wenn Sie Ihre Seite aufhalten. Vielleicht kopieren Sie genau die Stile und Farben , die ich teilen werde Sie vielleicht denken Sie an etwas Ihre eigenen. Aber wie ich immer wieder sagen werde, denken Sie über Zugänglichkeit nach. Sind die Farben, die Sie gehen, um zu wählen, gehen von allen gesehen werden. Ist der Kontrast gut? Der Text lesbar oder die Animationen zu ablenkend? Dies sind nur einige der Dinge, über die Sie in dieser Lektion nachdenken müssen. Das erste, was ich tun werde, ist, dass ich einige benutzerdefinierte Schriftarten hinzufügen werde. Also gehe ich einfach zu Google Fonts. Also vielleicht wählen Sie aus der Liste auf Google-Schriften und wählen Sie etwas, eine Schriftart, die Sie wie die alotta gefangen. So können Sie sehen, dass dies sehr lesbar ist. Das ist sehr klar zu lesen. Das wird also gut für mich sein. Aber wie wäre es, wenn ich Ihnen ein Beispiel für etwas zeige, das nicht so leicht zu lesen ist. Also diese Ballettschriftarten klicken Sie einfach auf diese. Lasst uns das größer machen. Ich weiß nicht, wie es dir geht, aber das ist schwer für mich zu lesen und ich habe eine sehr gute Sicht. Denken Sie an jemanden mit Sehschwäche Lesen dieser, wenn dies die Schriftfamilie Jugend Lappen des Sehens, wird sehr schwierig für diese Person sein, um den Inhalt auf Ihrer Seite zu lesen. Die vielleicht einzigartigen Szenarien, in denen dies anwendbar ist. Aber wenn Sie versuchen, Informationen auf Ihrer Webseite, Schriftart zu erhalten , werden Familien wie diese einfach nicht für jeden geeignet sein. Also werde ich bei meiner Wahl einer Menge bleiben. Und wenn Sie die Schriftart finden, die Sie verwenden möchten, können wir den Stil auswählen und dann wird es Ihnen einen Link geben, den Sie in die Kopfzeile Ihrer Seite einfügen können . Nun, ich habe diesen Link bereits von Google Fonts bereit, und wir können dies einfach über unserem Titel auf unserer index.html Seite einfügen , so dass die Schriftart bereit ist zu verwenden. Also beginnen die Stile als nächstes. Und er ist ein Asterix, um alles auszuwählen, und er ist box-size border-box. So sind alle unsere Dimensionen vorhanden und funktionieren wie erwartet. Fügen wir nun die benutzerdefinierte Schriftart hinzu. Also auf der Leiche, werde ich eine Schriftfamilie von Antennen hinzufügen. Also, was ich tun werde, ist der Verlust von Spaß. Die Argumente von Google-Schriftarten, die ich nur für den Kopf verwenden werde, ist der Haupttext wird Arial sein. Zweitens war Helvetica und dann sans serif. Okay, und dann noch ein paar Reset-Stile auf dem Körper, auf der UL und den Alliierten. Nur gehen, um den gesamten Rand und Padding und Rand 0, Padding, 0 Header zu entfernen. Ich benutze ein H1, H2, H3 und auch an unseren Knöcheln. Ich möchte meine viel Schriftart verwenden, aktualisiert Seite und die Stile auf die Arbeit, weil natürlich vergessen Sie nicht, Ihr Stylesheet zu verknüpfen. Also über dem Titel. Da gehen wir. Links zu style.css. Und Ihr Stylesheet muss sich im selben Ordner wie Ihr HTML befinden. Speichern Sie das einfach. Und dann können wir sehen, wie sich unsere Schriftart dort ändert. Also habe ich eine Rap-Klasse für alle unsere Komponenten gemacht. Also lasst uns sie biegen, Flex anzeigen. Und dann möchte ich Elemente Center ausrichten. Lassen Sie uns den Inhalt rechtfertigen, den Abstand zwischen. wir sicher, dass sie in der Mitte sind. Also margin auto ist geben Sie die rep, maximale Breite von, sagen wir, eins, Feuer und Pixel. Überspringen Sie die schnelle Polsterung von 0, oben und unten, 25 links und rechts. Und wir stellen sicher, dass die Breite 100% beträgt. Okay, sieh mal, wie unsere Verpackung aussieht. Ok. Bisher gut aussehend, aber es gibt noch mehr, was wir hinzufügen müssen. Sir, ich habe auch eine Klasse von Wrap-Spalte auf einige Komponenten aufgenommen. Nein, ich muss tun, ist eine Flexrichtung der Spalte, so dass sie übereinander sitzen. Und dann richten wir die Elemente so aus, dass sie am Anfang stehen. So Flex Dash Dot, großartig, so dass Sie sehen können, wie Sie sich dort ändern. Und dann habe ich auch eine Klasse von Wrap-Center gemacht. Und ich werde das Items Center ausrichten, die Strenge. Also für eine Klasse von Header, die ich in den Haupt-Header hätte aufnehmen sollen, was ich nicht getan habe. Also fügen Sie es hier hinzu. Klasse der Kopfzeile. Dies ist also unsere Kopfzeile, die das nav und das Logo oben enthält. Lassen Sie uns Flex anzeigen. Die Gegenstände. Die Elemente müssen zentriert ausgerichtet werden. Begründen Sie den Inhalt als Abstand zwischen. Und lassen Sie uns eine Polsterung von 10 Pixeln geben, oben und unten, 25 Pixel, links und rechts. K kommt näher. Okay, wie Sie sehen können, ist das Header-Logo massiv. So Spieß Header Logo von Höhe kann automatisch oder ändern, und Breite wird es zu einem 100 Pixel machen. Das ist besser lesbar, okay, Wasser von diesem Navi. Also lasst uns das nav anvisieren und dann werden wir die UL anvisieren, die das direkte Kind von nav ist. Und dann werden wir die Verbündeten anvisieren, die alle Kinder der URL sind. So, wie wir entfernen die Aufzählungspunkte, List-Style-Typ, keine, und alle geben ihnen alle den Rand links von 20 Pixel. Eigentlich wollen wir, dass sie sich Sorgen machen. Also, was ich tun werde, ist, Ihnen das Navi und dann die UL zu sagen. Sicher, das Display flex. Also in einer Reihe. So, gute Sachen und dann rechtfertigen Inhalt Raum zwischen. Jetzt sieht es eher wie ein normaler Header aus. Sehen wir uns nun die Anker selbst an. Also entfernen wir das Blau, vielleicht eine andere Farbe. So nav UL, LI und dann Anker geben eine Farbe von schwarz. Und was wir tun werden, ist die unterstrichene Textdekoration zu entfernen, keine. Wie wär's nun mit den Hovers für diese Nav-Elemente? Jetzt werde ich nur diese Zeile hier kopieren und dann Hover hier hinzufügen. Also, was wir auf Hover tun könnten, ist vielleicht eine schöne Goldfarbe hinzuzufügen. Afb 61, dh. Wenn wir den Mauszeiger darüber bewegen. Nun, es sieht ziemlich gut aus für mich wusste, aber ich würde sagen, jeder, der Farbblindheit hat könnte nicht in der Lage sein, dieses Gold auf dem weißen Hintergrund und auch irgendwelche Farbänderungen zu sehen . Nun, sie würden sowieso sehen können. Also wirklich, was ich tun muss, ist auch etwas physisch auf diesen Ankern verändert, während Sie schweben. Also werde ich Textdekoration des zugrundeliegenden hinzufügen. Also die Unterstreichung. Jetzt bin ich mir noch nicht sicher über den Kontrast. Also vielleicht, wenn wir uns am Ende mit Lighthouse Test beschäftigen, werden wir sehen, ob diese Farbe markiert wird. Und wenn es so ist, können wir es ändern. Es wird einige grundlegende Stile zu allen Abschnitten hinzufügen. Nur einige Polsterung, Polsterung oben und unten von 50 Pixeln. So sind sie verbreitet EIR und ein wenig lesbarer. Leerzeichen auf Ihrer Webseite machen die Dinge besser lesbar. Unsere H1, dann machen Sie diese Schriftgröße von drei rems. Okay, viel größer. So gut. Vielleicht werde ich gehen, wie es vorerst ist. Die H3 Darren hier. Lassen Sie uns eine größere h3-Schriftgröße von zwei rems machen. Okay, beachte, wie das H3 jetzt größer ist als das H2 und das ist in Ordnung. Wenn Sie auf der Suche nach verschiedenen Größen Kopf ist. Wie ich in der Vergangenheit erwähnt habe, verwenden Sie nicht H1 und H2 und so weiter, nur um die Größe des Headers zu ändern, dafür werden sie nicht verwendet. Sie geben die Bedeutung jedes Abschnitts an. Also, nur weil dies größer ist als dieser Header hier oben, bedeutet das nicht, dass sie H2 und H3 sein sollten. So verwenden Sie diese Header nicht semantisch. So ist das Niveau der Bedeutung. Also halten wir das H3 etwas größer als das H2 hat. Absolut gut zu tun. Lassen Sie uns nun über unseren Intro-Sektion nachdenken. Ich werde dafür sorgen, dass das das Display Flex ist. Und lassen Sie uns die Argumente ausrichten, um Mitte k zu sein.Eigentlich machen wir sie in Spalten der Flex-Richtung wird Spalte sein. Aber das ist in Ordnung. Gehen, um den Text eine goldene Farbe zu machen. Haben Hex-Wert von c 6, a 105 be. Okay, Sie können sehen, wie es sich hier geändert hat. Jetzt. Rsa, der Kontrast ist ziemlich Pool da. Also werde ich eine Hintergrundfarbe von Schwarz hinzufügen. Das ist viel lesbarer, das ist gut. K Das Bild ist ziemlich groß in Ihrem Bild. Geben wir ihm eine Breite für vielleicht 200 Pixel. Sieht gut aus. Lassen Sie uns nur sicherstellen, dass die Höhe Wasser ist, also ist es reaktionsschnell. Nun der Intro-Text, lassen Sie uns sicherstellen, dass Text ausrichten in der Mitte ist. Sieht das gut aus? Lassen Sie uns einen Rand oben von 25 Pixeln und eine maximale Breite von 500 Pixeln. Gut auseinander. Ich habe gerade bemerkt, dass ich rannte, er hat zwei von Gottes Denken gewonnen, das ist eine Auszeichnung für jeden. Also lassen Sie uns schnell die Tippfehler ändern. Und es buchstabiert auch falsch geschätzt. Er ist Philister. Ja, lass uns damit gehen. Hoffentlich ist es richtig. Okay, zurück zu den Stilen. Gehen wir zu unserem Abschnitt mehr erfahren. Fine Art, mehr Hintergrundfarbe. Ich werde es geben, diese goldene Farbe Protokollierung mit Gelb sieht cool aus. Für jetzt. Ich lasse die Farbe so, wie sie ist. Ich werde einen Leuchtturmtest durchführen, um zu sehen, ob das akzeptabel ist, ob der Kontrast gut ist, wann könnte es dazu zurückkehren. Aber ich muss einen Hover-Zustand hinzufügen. Das ist wichtig. Jeder muss wissen, dass das anklickbar ist. Also der Text, den ich Co-Host bin. Das ist nur die Textdekoration zu Textdekoration entfernen. Keiner. Großartig. Ok. 14. Kursprojekt – CSS Teil 2: Okay, schauen wir uns jetzt unser Formular an. Also die Form, ich werde uns eine Grenze geben, solide ein Pixel und dann Hex von j, k. lasst uns es leicht gerundet machen. So Grenzradius von fünf Pixeln, Min-Breite. Lassen Sie uns das 500 Pixel geben. Und stellen wir sicher, dass es eine Polsterung innerhalb von 25 Pixeln gibt. Okay, schön geformt. Ok? Und dann habe ich Tiefs von divs innerhalb für Form dash group verwendet, die Klasse der Form gestrichelten Gruppe. Und für all diese Elemente werde ich Flex anzeigen. Und ich werde sicherstellen, dass die Flex-Richtung als Spalten, so dass sie übereinander stapeln. So wie das. Stellen wir sicher, dass es eine Polsterung unten oder 25 Pixel gab, so dass sie verteilt sind. Ich sah lesbar aus. Und dann stellen Sie für alle unsere Etiketten sicher, dass zwischen ihnen etwas Platz ist. Und die Formularfelder unter etwas Rand, unten. Zehn Pixel. Ja, das ist genug Platz, der in Ordnung ist. Wie wär's mit den Feldern selbst? Also Eingabe und auch den Textbereich. Ich werde einige Polsterung von 10 Pixeln hinzufügen, oben und unten, 25 Pixel links und rechts, okay, und verteilt. Ich denke, das ist zu viel Polsterung. 15 Pixel. Ja, okay, das sieht gut aus. Nur erkennen, dass die E-Mail fehlt Lärm Platzhalter. Also füge ich das einfach hier hinzu. Platzhalter gleich E-Mail eingeben. Viel besser. Ich werde das gleiche tun, tatsächlich für den Textbereich. Platzhalternachricht hier. Ok, großartig. Zurück zu den Stilen. Nun könnte dieser Formular-Send-Button ein bisschen besser aussehen. So wie die Form direkte untergeordnete Schaltfläche. Okay, wie sollen wir diese Hintergrundfarbe stylen? Machen wir hier Nullen, 0000, etwas Schwarz. Geben wir ihm einen Rahmen, solide ein Pixel. Und dann wird das Goldfarbe verwendet, die ich benutzt habe. Ist das suchen k, wir müssen die Farbe dann wieder ändern, verwenden wir das gleiche Gold. Ja, ja. Ok. Karina machen dies leicht abgerundet. Sagen wir, lassen Sie uns Grenzradius von fünf Pixeln machen. wir sicher, dass Krebs ein Zeiger ist. Wir wissen, dass es so anklickbar ist. Gutes Zeug. Polsterung Zehn Pixel, oben und unten, 20 Pixel links und rechts. Und das sieht ziemlich gut aus. Jetzt möchte ich nur überprüfen, wie der Fokus Umriss nach diesem Formular sucht. Also ja, für Namen als gute E-Mail, Checkboxen, Nachricht, und dann geht es auf die Schaltfläche „Senden“. Aber weil ich Muster ist schwarz, kann nicht wirklich sehen, die Fluggesellschaft Fledermaus. Nun, tut mir leid, ich werde ein wenig Platz zwischen der Schaltfläche und dem Umriss hinzufügen. So können Sie das tun, indem Sie Augenlinie, Bindestrich, Offset verwenden. Fügen Sie hier fünf Pixel hinzu. Tabulatortaste erneut. Okay, das sieht gut aus. Sie können den Umriss jetzt ganz klar sehen. Wie wäre es nun mit einem Hover-Zustand für die Schaltfläche? Also, weil ich faul bin, werde ich das einfach kopieren. Und dann werde ich Doppelpunkt Hover hinzufügen. Okay, was würde ich gerne ändern? Es hat die Hintergrundfarbe geändert, um Gold zu sein. Wir ändern die Textfarbe in Schwarz. Also kehre ich im Grunde die Farben um. Wie sieht das im Moment aus? Ja, gut, oder wird Befehle ändern. Nun, eigentlich, um das Gegenteil zu sein, so Grenze solide ein Pixel, schwarz. Gut. Weil ich Lust habe, werde ich die Größe zu erhöhen, um Skala zu transformieren 0,25 K getragen werden Und dann werde ich sicherstellen, dass die Animation schön und glatt ist. Also Übergangseigenschaft, wir ändern die Hintergrundfarbe. Wir ändern die Grenze. Ich habe gelesen, die Transformation zu ändern. Jetzt habe ich eine Übergangsdauer. Lass uns das über 0,2 Sekunden machen. Und dann sehen Sie die Übergangstiming-Funktion auf 0s in Armen. Okay, sieht schön und glatt aus. Wie ich bereits in einer vorherigen Lektion erwähnt habe, könnten Animationen wie diese für Menschen mit neurologischen oder kognitiven Problemen ablenken . Was Sie also sicherstellen möchten, ist, dass, wenn Sie zahlen Animationen enthalten, die sich ganz dramatisch ändern. Sagen Sie diesen Knopf. Sie müssen dem Benutzer die Möglichkeit geben, diese auszuschalten oder zumindest die Bewegung auf der Seite zu reduzieren. Wie machst du das jetzt? Was Sie tun müssen, ist, dass ich dies oben auf der Seite setzen werde, da dies für alle Animationen gelten wird, ist, dass Sie einen Medienabfragecode bei Medien hinzufügen. Dann in Klammern. Für Fors, Bindestrich reduziert, Bindestrich, Bewegung, Doppelpunkt reduzieren. Ok. Und alles hier drin. Enthält Stile, die für jemanden gelten, der dies auf seinem Computer festgelegt hat. Also, was können wir tun? Ich werde alles auswählen. Ich werde das Pseudo-Element mit vorher und das gleiche für nachher auswählen. So war es, dass ich eigentlich dort auswähle. Nun, es ist so ziemlich alles, was auf der Seite existiert. Das ist es, was dieser Asterix tut. Und dann bedeutet es, dass ich die Animationsdauer auf 0,0012 einstellen kann. Also werde ich dies auf wichtig setzen, also überschreibt es alles. So werden die Animationen sofort sein. Ich werde dasselbe für die Übergangsdauer tun. Übergangsdauer 0.0012. Das wird auch wichtig sein. Nun wird die Bewegung zwischen den beiden Animationszuständen geändert oder entfernt. Also sieh hoch. So sieht das immer noch gleich aus. Und das liegt daran, dass ich meine reduzierten Bewegungseinstellungen auf meiner Maschine nicht geändert habe. So kann jemand mit irgendwelchen kognitiven Problemen zu seinen Vorlieben gehen wie diese. Dort gehen wir zur Barrierefreiheit. Und wir gehen zu Display. Und sie würden auf klicken, würde Bewegung verwenden. Und dies löst alle Informationen aus, die sich in dieser Medienabfrage befinden. Was bedeutet das für unseren Knopf? Sie können sehen, dass es keinen Übergang gibt, ist die Animation passiert sofort. Aber dieser große Anstieg könnte immer noch ablenkend sein. Also werde ich auch diesen Skalierungsübergang angeben. So Form Schaltfläche Hover Transformation. Ich werde die Skala so zurücksetzen, dass sie nur eins ist. Ich werde dafür sorgen, dass das wichtig ist. Jetzt lassen Sie uns das testen. Besitz ändert also die Farbe, so dass es keine störenden Animationen mehr gibt. So testen Sie die Verwendung von Bewegungsanimationen. Und ich werde das einfach entfernen. Sagt überprüfen, aber die Animation ist zurück. Okay, es bleibt noch mehr zu tun. Nun, es ist jede unsere Fußzeile unten da unten, wenn Sie es sehen können. So Fußzeile. Lassen Sie uns eine Hintergrundfarbe von Schwarz hinzufügen. 000, 000. Wir fügen eine Farbe von vielleicht grau für den Text hinzu. Anzeige. Flex die Elemente. Lassen Sie uns unsere Artikel ausrichten, um zu sein. Mitte. Richten Sie den Inhalt so aus, dass er zwischen Polsterung, 10 Pixel oben und unten und 25 Pixel links und rechts ist. Okay, und das ist Urheberrecht. Also, wie eine Seite so ziemlich getan, lassen Sie mich einfach überprüfen. Ich habe keine Klassen verpasst. Von unserem Mock-up. Ich kann sehen, dass ich einen Fall in diesen alles im Inneren endlich mehr, stellen Sie sicher, dass in unserer Verpackung ist. Und haben auch RAP-Spalte hinzugefügt. Werfen wir einen Blick auf unsere Styles jetzt. Okay, das sieht gut aus. Hoffentlich haben Sie mit mir gefolgt und vielleicht ändern Sie die Farben, kann das Layout geändert werden, um Ihre Hero-Seite entsprechen. Aber wir sind noch nicht ganz fertig. Ich kann hier einige Dinge sehen, die keine Barrierefreiheitsprüfungen fehlschlagen würden. Also, wie eine Barriere? Wir überprüfen nur noch einmal und Leuchtturm Lichthaare in Google Chrome es. Ok. Barrierefreiheit ist als Bericht generieren aktiviert. Sehen Sie, was es uns gibt. Okay, Barrierefreiheit 1907 waren im Grünen, also das ist gut und das ist es, was Sie anstreben sollten. Aber mal sehen, ob es uns Empfehlungen gibt. Okay, Zugänglichkeit, Hintergrund und für Grundfarben hatten kein ausreichendes Farbverhältnis. Fehlende Elemente, die zu sehen sind, ob ich den Mauszeiger über dieses hier führe, Es zeigt, mehr hier zu lesen. Okay, das ist in Ordnung. Also lasst uns das reparieren. Das ist also in unserem Text ANCA. Also bin ich irgendwie sicher, dass der Text Anchor klar ist. Lass uns die Farbe schwarz machen. Also 000, 000. Ok, es ist nicht schwarz. Und dann ist ein weiteres scheiterndes Element klein, was das Urheberrecht ist. Und wie Sie sehen können, ich hoffe, Sie können sehen, dass rechts unten, dass grau ist nicht sehr lesbar auf der schwarzen ist ein. Also lasst uns die Fußzeile aktualisieren. Lassen Sie uns sicherstellen, dass Änderungen grau sein, wie wäre es mit dieser Goldfarbe, die ich verwendet habe? Und das ist besser lesbar. Ok. Und die letzten Audits sind alle grün, so dass diese Funktionen verfügbar sind, die wir verwendet haben, die gut funktionieren. Bitte führen Sie Lighthouse auf Ihrer Seite aus und wenn dies irgendwelche Probleme oder Warnungen markiert, arbeiten Sie bitte durch sie. Und dann ist das Ihre Seite mit voll funktionsfähigen, zugänglichen Funktionen fertig . Gut gemacht. 15. Kursprojekt – Sharing: Jetzt, um Ihre Arbeit auf Skillshare zu teilen. So können ich und andere Schüler Ihre großartige Arbeit sehen. Öffnen Sie einfach GitHub Desktop, was ich hier gemacht habe. Stellen Sie einfach sicher, dass Sie angemeldet sind oder auf Einstellungen gehen, und ich bin angemeldet. Und dann das Drop-down-Menü hier, werden wir ein neues Repository erstellen. Ok? Und ich werde einfach zu dem Ordner navigieren. Lassen Sie uns sicherstellen, dass Sie das gleiche mit dem Stammordner Ihrer Arbeit tun und geben Sie Ihren Repower-Namen und Anruf Barrierefreiheit Skillshare. - Das ist in Ordnung. Und klicken Sie dann auf Repository erstellen. K sollte offen sein. Und stellen Sie sicher, dass Sie ein paar Dateien hier auf der linken Seite sehen, was ich nicht tue. Das liegt wahrscheinlich daran, dass es einen Repo-Ordner für mich in meinem Verzeichnis erstellt hat. Also werde ich tun, ist nur meine Dateien in diesen Ordner kopieren. So wie so. Und dann können wir unsere Veränderungen hier sehen. Sind k bereit, auf GitHub zu schieben? Also in der Zusammenfassung gescheitert, ich werde nur eine Notiz schreiben. Feature, einzelne Seite, Barrierefreiheit, Website, etwas in diesen Zeilen, und dann zu Haupt verpflichten, das ist der Name des Zweigs. Und dann auf der rechten Seite oben werde ich im Repository veröffentlichen. Also, nur um diesen Wert bis zu GitHub zu bestätigen. Und nach ein paar Sekunden, sobald es Ihre ganze Arbeit hochgefahren ist, können wir das Repo auf GitHub überprüfen, was wir in unserem tun werden und zu github.com gehen, stellen Sie sicher, dass Sie angemeldet sind. Und auf der linken Seite sollte eine Liste Ihrer Repositories sein. Ich habe gerade nach Skillshare gesucht, um sich auf die Reparatur einzugrenzen. Klicken Sie also einfach darauf und es öffnet sich. Okay, und um sicherzustellen, dass dies öffentlich gemacht wird, damit Sie es auf GitHub Pages schieben können, gehen Sie einfach zu Einstellungen hier. Und dann den ganzen Weg den Boden runter. Sie müssen die Sichtbarkeit des Repos von privat zu öffentlich ändern. Und unter GitHub-Seiten können Sie sehen, dass es upgraden oder dieses Repository öffentlich machen, um Seiten zu aktivieren. Also ändern Sie die Sichtbarkeit hier. Es ist derzeit auf „privat“ eingestellt. Klicken Sie auf öffentlich machen. Und dann werde ich sagen, Bitte geben Sie den Namen Ihres Repos zu bestätigen. Also kopiere ich das einfach. Das ist also aus Sicherheitsgründen. Da gehen wir hin. Ich verstehe die Sichtbarkeit des Änderungs-Projektarchivs als Und dann werden Sie in GitHub Pages sehen, dass es jetzt einige Optionen für Sie gibt. Stellen Sie also sicher, dass Sie den Hauptzweig auswählen, an dem Sie gerade Ihre Arbeit engagiert haben. Lasst uns darauf klicken. Wir wollen das Root-Verzeichnis, ich werde auf Speichern klicken. Und dann, wenn dies geladen wird, sollte dies uns eine URL zu unserer Website geben, die Öffentlicher Ordner sein wird. Sehen Sie hier ist so, wenn Ihre URL bereit ist, Ich ermutige Sie, es zu teilen, wie es ein Link zu Ihrem veröffentlichten wie Seite, Website sein wird. Ich vielleicht durch eine, durch die Eingabehilfen Features, die Sie hinzugefügt haben. Indem Sie dies alles zum Projektabschnitt der Klasse hinzufügen. Weil ich Ihnen auf diese Weise Feedback und Anregungen anbieten kann. Ich ermutige Sie auch, mit anderen Schülern zu interagieren, damit Sie sich gegenseitig unterstützen können. Natürlich, wenn Sie Fragen haben oder mehr Tipps benötigen, dann lassen Sie es mich wissen. Ich helfe Ihnen gerne. 16. Zusammenfassung: Gut gemacht. Sie haben einen tollen Job gemacht den ganzen Weg durch diesen Kurs zu bekommen und Ihre eigene All-Inclusive-einseitige Website mit Eingabehilfen zu erstellen . Sie haben in diesen Lektionen so viel über die Grundlagen der Web-Barrierefreiheit gelernt. Die verschiedenen Ebenen in den Barrierefreiheitsrichtlinien, die verschiedenen Behinderungen, die Sie berücksichtigen müssen, wenn Sie an Ihrem nächsten Webprojekt arbeiten. Und wie Sie die richtigen HTML- und CSS-Eingabehilfen implementieren , um Websites zu erstellen, die alles inklusive und für alle nutzbar sind. Jetzt bin ich ein Entwickler und habe Web-Zugänglichkeit Wissen, so eine wichtige und notwendige Fähigkeit, egal auf welchem Niveau Sie sind, egal auf welchem Niveau Sie sind, ob es ein Junior, Mid-Level oder Senior, es ist absolut grundlegend , dass Sie Barrierefreiheit Teil Ihres Webentwicklungsprozesses machen. Nicht nur auf juristischer Ebene, sondern auch in gedruckter Form. Jede Diskriminierung und die Produkte, die Sie herstellen, ermutige ich Sie, Ihr neues gefundenes Wissen zu nehmen. Und wenn Sie in einem großen Entwicklungsteam oder Kreativteam arbeiten, vermitteln Sie Ihr Wissen zur Barrierefreiheit in der Planungsphase Ihres nächsten Projekts und erklären, wie und warum es wichtig ist, diese Funktionen einzubeziehen. Abschließend möchte ich Ihnen nur ein großes Dankeschön sagen, dass Sie sich nicht nur an den Schulen angemeldet haben, sondern auch dafür, dass Sie sie abgeschlossen haben. Ohne Ihre Unterstützung wären Lehrer wie ich nicht in der Lage, solche Inhalte zu erstellen. Ich danke Ihnen so sehr. Wenn er diesen Kurs genossen hat und ich hoffe wirklich, dass Sie es getan haben, würde es mir so viel bedeuten, wenn Sie sich die Zeit nehmen könnten, um eine Rezension zu hinterlassen Ich lese jedes bisschen Feedback, das ich bekomme und nehme alle Kommentare an Bord, die Sie hinterlassen können. So kann ich weiterhin unsere Lektionen verbessern und halten Sie die Ziele ist, dass Sie nützlich finden. Also, wenn das gesagt wird, danke nochmal so viel, du bist genial. Jetzt geh raus. Angetreten.