Unverzichtbare Tipps für HTML und CSS

1. Einführung: Hallo! Mein Name ist Aga und ich bin ein erfahrener Programmierdesigner, aber ich liebe es auch zu unterrichten. Deshalb bin ich ein Top-Lehrer bei Skillshare. meiner gesamten Karriere habe ich mein Wissen auf verschiedenen Konferenzen auf der ganzen Welt geteilt , von Lissabon bis Singapur und es ist höchste Zeit, meine Leidenschaft und mein Wissen mit Ihnen zu teilen . In diesem Kurs mit dem Titel Essential Tips for Accessibility in HTML und CSS erfahren Sie, wie Sie überprüfen können, ob Ihr HTML semantisch ist. Was beim Schreiben von barrierefreiem CSS zu vermeiden ist So führen Sie den Screenreader auf Ihrem Computer aus. Warum Animationen gefährlich sind und Sie vorsichtig mit ihnen umgehen sollten. Der letzte, wie Sie schnell Tipps zur Barrierefreiheit implementieren, auch wenn Sie in Ihrer täglichen Routine nicht als Programmierer arbeiten. Alles in sehr prägnanten und kurzen Kursen, Sie werden sofort von Ihrer täglichen Arbeit als Designer oder Programmierer profitieren . Wir alle wissen, dass Barrierefreiheit heutzutage ein entscheidendes Thema ist und wir können es sowohl als Designer als auch als Programmierer vernachlässigen. Barrierefreiheit ist ein sehr wichtiges Thema. Etwa 15 Prozent der Bevölkerung leben mit einer gewissen Behinderung. Deshalb sollten wir als Designer und Entwickler wissen, wie wir unsere Produkte zugänglicher machen können wie wir unsere Produkte zugänglicher machen und Sie können jetzt damit beginnen, indem Sie an meinen Kursen teilnehmen. Es ist höchste Zeit, dass Sie sich das Grundwissen aneignen und mehr über barrierefreies HTML und CSS erfahren. Sie wissen wahrscheinlich , dass die Dokumentation zu Richtlinien zur Barrierefreiheit von Webinhalten sehr komplex und nicht einfach zu lesen ist. Aber in meinen Kursen werden wir uns auf sehr praktische Weise auf dieses Thema konzentrieren. Natürlich bekommst du, wie in meinen Klassen üblich, die Hausaufgaben und ich empfehle dir dringend deine Ergebnisse in der Projektklassen-Sektion zu teilen. Aber was ist, wenn Sie keine Programmiererfahrung haben? Keine Sorge. Ich habe bereits Klassen mit dem Titel Code Your Own Portfolio vorbereitet und dank ihnen werden Sie in der Lage sein, die Grundlagen von HTML und CSS zu erlernen. Nach Abschluss können Sie direkt zu diesen Kursen gehen und mit dem Erlernen der Barrierefreiheit beginnen. Wenn Sie jedoch bereits mit dem Schreiben von HTML und CSS vertraut sind, werden Sie dringend gebeten, mit der ersten Lektion dieses Kurses zu beginnen. Was an diesen Kursen sehr wichtig ist, ist, dass Sie das erworbene Wissen umsetzen , um Theorie in Praxis zu bringen, indem Sie eine Aufgabe von mir erhalten. Als besonderer Bonus für alle Personen , die dieses Klassenprojekt erfüllen werden, schicke ich Ihnen die Checkliste zur Barrierefreiheit Sie für Ihre tägliche Arbeit verwenden können. Wir sehen uns in der ersten Lektion. 2. Warum sollten wir Barrierefreiheit lernen?: Lektion Nummer 1, warum wir etwas über Barrierefreiheit lernen sollten. Das allererste , womit ich eigentlich beginnen sollte , ist die Definition von Barrierefreiheit. Barrierefreiheit macht das Produkt für jedermann zugänglich. Natürlich werde ich mich in diesen Kursen auf die digitalen Produkte wie Websites oder Apps konzentrieren . Natürlich deckt Barrierefreiheit nicht nur die digitale Sphäre ab, sondern betrifft auch das reale Leben, zum Beispiel Architektur und 3D-Welt. Um Ihnen einige Einblicke zu geben, warum das Lernen von Barrierefreiheit und warum es so wichtig ist, sich darum zu kümmern, werde ich mich eingehend mit Statistiken befassen. Wie das Pew Center feststellt, mehr als 15 Prozent der haben mehr als 15 Prozent der Gesamtbevölkerung eine gewisse Behinderung. Über 2,2 Millionen Menschen haben Sehbehinderungen. Elf Menschen unter allen Menschen mit Behinderungen haben kognitive Probleme. Zum Beispiel, sich an Informationen zu erinnern oder sie zu verdauen, sie zu verarbeiten oder zu konzentrieren. Über 98 Prozent der Homepages sind nicht vollständig zugänglich. Es gibt jede Menge Arbeit zu erledigen, und wir als Programmierer, als Programmierer, als Entwickler können helfen. Es gibt bestimmte Kategorien von Beeinträchtigungen, auf die wir stoßen können und die wir bei der Gestaltung oder Codierung der Produkte berücksichtigen sollten . Zuallererst ist es auditiv, dann kognitiv, neurologisch, physisch, sprachlich und visuell. Sie denken vielleicht, dass Barrierefreiheit mich vielleicht nicht betrifft , weil ich an keiner Krankheit leide oder keine Probleme oder Herausforderungen habe. Aber tatsächlich beweist live, dass jeder von Barrierefreiheit und barrierefreien Produkten und barrierefreien Produkten profitieren kann. Stellen Sie sich zum Beispiel eine Situation vor, Mutter soziale Medien nutzen möchte, einige Videos und einige Instagram Reels ansehen möchte, aber sie ist im selben Raum mit ihrem kleinen Kind, das bin gerade eingeschlafen. Dank der Bildunterschriften, gelieferten Untertitel, nicht nur für Leute , die nicht hören können. Wir decken auch all diese Fälle ab, in denen Menschen einfach ihre Lautstärke erhöhen können. Es ist absolut vorteilhaft. Sehr oft passiert es auch in meinem wirklichen Leben. Immer wenn ich zum Beispiel in einem eigenen Bus bin und etwas sehen möchte aber meine Kopfhörer nicht eingeschaltet habe, schaue ich es mir nur mit leiser Lautstärke an. Gleiches gilt für die Situation mit aggressiven Farben. Wenn Sie nachts müde sind, können Sie den Dunkelmodus verwenden. diesem Grund sollten wir Designer sorgfältig über die Farben nachdenken, sollten wir Designer sorgfältig über die Farben nachdenken die wir auf einer Website verwenden und über ihre Konsequenzen. Sie können sich auch eine Situation vorstellen Sie viele Rücken halten und Ihre Hände beschäftigt sind und es schwierig ist, Ihr Handy zu benutzen, aber Sie müssen Ihrer Mutter schnell zurückschreiben, und es fällt Ihnen schwer , weil der anklickbare Bereich sehr klein ist, sodass Sie sich darauf konzentrieren müssen. Aber eigentlich lässt dich die Situation nicht. Es gibt viele andere echte Anwendungsfälle Barrierefreiheitsfunktionen. Wir sollten allgemein über sie nachdenken, nicht nur über alte Menschen oder Menschen, die offiziell unter einigen Beeinträchtigungen leiden. Aber jeder kann wirklich von unserer Pflege barrierefreier Produkte profitieren . Barrierefreiheit hilft sowohl Menschen mit dauerhaften als auch vorübergehenden Beeinträchtigungen. Bitte bedenken Sie, dass es bei Barrierefreiheit nicht nur um die Menschen geht , die älter werden, sondern auch um die alternde Gesellschaft Es geht um uns, um unsere Nachbarn, um unsere Eltern, um unsere jüngere Schwester und um Menschen von der Arbeit. Im Grunde jeder. 3. Wie wird die Zugänglichkeit gemessen und definiert?: Lektion Nummer 2, wie die Zugänglichkeit gemessen und verifiziert wird. Ganz am Anfang schulde ich Ihnen tatsächlich eine Definition wofür WCAG eigentlich steht. Diese Abkürzung bedeutet Richtlinien zur Barrierefreiheit von Webinhalten Dies sind die Richtlinien , die unsere Website, unser digitales Produkt, erfüllen muss, um das Barrierefreiheitsaudit erfolgreich zu bestehen. Die sehr wichtige Information ist , dass Barrierefreiheit manchmal als schwierig oder aufgrund der sehr komplexen Dokumentation als langweilig angesehen werden kann . Ehrlich gesagt ist es nicht einfach zu lesen, daher verstehe ich vollkommen , wenn Sie noch keine Gelegenheit hatten, tiefer in sie einzutauchen Deshalb habe ich diese Kurse erstellt, damit Sie sehen können, dass Barrierefreiheit eigentlich etwas, das wir in unserer täglichen Praxis, in unserem täglichen Arbeitsablauf implementieren können . Wie wir über semantisches HTML denken sollten und wie wir über barrierefreies CSS denken sollten. In Bezug auf die Prinzipien, die tatsächlich innerhalb der WCAG enthalten sind, gibt es vier Kategorien , an die wir uns erinnern sollten , und diese sind wahrnehmbar, bedienbar, verständlich und robust. Das heißt, wenn wir möchten, dass unsere Produkte alle in der WCAG genannten Kriterien erfüllen, sollten wir es dem Benutzer ermöglichen, unser Produkt wahrzunehmen es zu verstehen. Daher ist auch die Kopie sehr wichtig. das UX-Schreiben. Neben der Navigation sollten ihre Benutzer in der Lage sein, auf dem Produkt zu navigieren und natürlich mit ihm zu interagieren. Alle diese vier Hauptkategorien wirken sich auf alle Aktionen dieser Benutzer aus. Natürlich dürfen wir einen sehr wichtigen Begriff nicht vergessen, wenn wir über die Nutzung von Websites durch Personen sprechen , die nicht sehen können, oder Personen mit Sehschwierigkeiten und dies sind Screenreader. Bildschirmlesegeräte sind eine Hilfstechnologie und verwenden Text in Sprache. Sie lesen den Inhalt der Website und sprechen laut. Das haben sie kürzlich gelesen. Sie ändern Text in Sprache , damit Personen , die nicht sehen können, die nicht konsumieren können, was auf der Website ist, zumindest ihren Inhalt hier haben können. Personen, die Screenreader verwenden, navigieren innerhalb der Website mithilfe einer Tastatur oder einer Tastenkombination. Natürlich können Sie Bildschirmlesegeräte loungen und selbst testen. Wenn Sie ein Windows-Benutzer sind, können Sie zum Windows-Logo gehen und dann die Spracheinstellungen öffnen. Drehen Sie, um unter Sprecher verwenden umzuschalten. Dies ist das kleine Tutorial , das Sie verwenden können. Leider bin ich noch kein Windows-Benutzer daher kann ich Ihnen nicht Schritt für Schritt zeigen, wie es geht , aber auf jeden Fall finden Sie einige Tutorials auf der Website. In Bezug auf einem Mac sollten Sie zu Systemeinstellungen, Eingabehilfen, Voice-Over gehen Eingabehilfen, Voice-Over und diese Funktion dann aktivieren. Wie geht das? Ich zeige es dir gleich. Starten wir den Screenreader auf unserem Mac. Zunächst öffne ich die Systemeinstellungen. Dann suche ich nach Barrierefreiheit und öffne den Voice-Over-Tab und klicke auf „Voice-Over aktivieren“. Adam reagiert nicht, unbenanntes Fenster, kein Text leer, als Tastaturfokus. Ihr Textfeld innerhalb einer Gruppe. Entschuldigung. Wenn Sie das Fenster schließen, wird das Voice-Over ausgeschaltet sodass Sie schnell entscheiden können ob Sie es verwenden möchten oder nicht und in welchen Momenten und natürlich können Sie direkt zum Webbrowser gehen ist es oder nicht und in welchen Momenten und natürlich können Sie direkt zum Webbrowser gehen. Es gibt auch einige Chrome-Plugins, also zeige ich dir das auch und dieses Plugin heißt Chrome Fox, wenn ich mich nicht irre, oder Screenreader. Schauen wir uns an, wie das Plugin funktioniert. Ich öffne nur eine zufällige Website wired.com. Das ganze System-Startup in London. Link-Illustration des Eiffelturms in Paris vor gelbem Hintergrund. Verlinkte Listen, die heißesten Startups in Paris, Illustration von Berlin vor flossenem Hintergrund. Verknüpfte Listenelemente. Empfehlen Sie, mit diesem Chrome-Plugin zu spielen und zu überprüfen, wie es auf Ihrer Seite funktioniert. 4. Semantischer HTML-Code: Wir wissen, warum Barrierefreiheit so wichtig ist. Wir verstehen auch, wie die Screenreader einen Code unserer Website verwendet haben. Aber das sehr wichtige ist, die Semantik von HTML tatsächlich bedeuten würde, semantisches HTML zu schreiben. Fangen wir mit einem Beispiel an. Semantisches HTML. Wir können es mit dem Erzählen einer Geschichte mit Emojis vergleichen. Wenn Sie dieses Set aus fünf verschiedenen Emojis sehen, konnten Sie wahrscheinlich nicht erraten was die Geschichte dahinter ist. Natürlich können Sie einige Ideen haben, aber eigentlich sind Sie sich nicht hundertprozentig sicher. Das gleiche passiert mit dem Computer und den Browsern. Wir müssen eine sehr genaue Anweisung geben was auf unserer Website passiert, welche Arten von Informationen werden wir präsentieren? Wie ist eigentlich die Struktur der Informationen? Wie ist die Struktur des Dokuments? Die Situation ändert sich, wenn ich Ihnen mehr Kontext gebe , zum Beispiel, dass ich eine Freundin Jane habe und sie kürzlich bei der Arbeit super hungrig war. Sie bestellt gerne chinesisches Essen, aber sie muss sehr vorsichtig mit scharfem Essen sein , weil ihr Magen es nicht mag. Wenn ich Ihnen diese kleinen Informationen gebe, würden Sie diesen Emoji-Kopf auf eine ganz andere Weise interpretieren . Genau das gleiche passiert mit dem Browser. Wenn wir die ganze Geschichte liefern wollen und wenn wir unseren Inhalt mit aussagekräftigen HTML-Tags verpacken , wird der Browser sofort verstehen was wir dem Benutzer zu vermitteln versuchen, das tut der Screenreader auch. Deshalb ist es so wichtig, HTML-Tags sorgfältig zu verwenden. Da unser HTML Semantik ist, liefert es eine Art von Information, zum Beispiel, dass wir einen Link, einen Absatz, eine Überschrift, die Ebene der Überschrift und auch verschiedene über die Struktur der Website, zum Beispiel, dass wir die Kopfzeile, den Hauptteil und auch die Fußzeile haben, es ist sehr wichtig, sie zu verwenden. Aus diesem Grund möchten wir dem Browser Kontext liefern. Bitte vergessen Sie nicht, dass semantisches HTML der Kern des Schreibens von barrierefreiem Code ist . Es gibt zwei Aspekte von semantischem HTML-Code. Der erste ist der Inhalt. Wir fügen die Bedeutung hinzu oder umschließen unseren Inhalt mit semantischen Tags wie Überschriften wie Absätzen, wie Links, wie Listen, unsortiert und geordnet und so weiter und so fort. Aber es gibt auch den zweiten Aspekt, nämlich das Layout. Alles, was miteinander verbunden ist, wie die Informationen tatsächlich organisiert sind, ob sie wichtig sind, also ganz oben stehen, oder ob sie weniger wichtig oder detaillierter sind , also mittendrin oder ob es sich um Informationen handelt, die wir normalerweise in Fußzeilen speichern, wie Kontaktinformationen , E-Mails, Links zu Datenschutzbestimmungen usw. Wenn Sie den Code überprüfen, werden Sie sofort feststellen , dass wir eine logische Struktur haben. Wir beginnen mit der Navigation, also Nav-Tag, dann fügen wir einen Header hinzu, ganz oben auf der Website. Wir haben ein paar Abschnitte. Jeder Abschnitt hat auch einen Artikel. Jeder Artikel hat eine richtige Überschrift und einen Absatz. Wenn Sie ganz oben hinschauen, werden Sie sehen, dass wir in der Kopfzeile ein h1-Tag haben, mit dem wir normalerweise unsere Website beginnen. Mal sehen, wie unsere Website gerendert wird. Dafür verwende ich das Paket atom-live-servers starts server. Es sollte meine Website öffnen. Ich gehe zur Kopie des Portfolios. Sie werden sehen, dass ich den Header mit H1 habe und wenn ich nach unten gehe, sehe ich einen Abschnitt und dann einen weiteren. Diese drei Abschnitte sind einander sehr ähnlich. Der einzige Unterschied besteht darin, dass die Elemente seitlich am Layout platziert werden. Aber im Allgemeinen ist jeder von ihnen ein Artikel, hat die Überschrift der zweiten Ebene, einige Texte, die ein Absatz sind, und dann einen Link. Dann haben wir ganz unten die Fußzeile. Die Aufrechterhaltung einer logischen Reihenfolge auf unserer Website und in unserem Code ist sehr wichtig da wir dann eine nahtlosere Erfahrung für die Person haben , die die Struktur nicht sehen kann, aber folgen möchte . die wir definiert haben. Denken Sie daran, vorsichtig zu sein, wie Ihre Inhalte strukturiert sind, denn das ist sehr wichtig. Dank einer Reihenfolge in unserer Hierarchie und deren Einhaltung im Code. Wir vermitteln den Menschen , die Screenreader verwenden, eine sehr klare Botschaft . Dies ist von größter Wichtigkeit , darauf zu achten. Da wir bereits wissen, was semantisches HTML bedeutet, können wir tief in detaillierte Tags eintauchen und herausfinden, welche Tags und Attribute wichtig sind um unseren Code zugänglicher zu machen. 5. HTML-Attribute und Verbesserungen der Barrierefreiheit – Teil 1: Es ist höchste Zeit, zum HTML-Code zu springen und mehr über Attribute und Steuern zu erfahren über Attribute und Steuern , die Ihnen helfen, Ihre Zugänglichkeit zu verbessern. Das allererste HTML-Tag , das ich erwähnen möchte, ist die DOCTYPE-Deklaration. Es befindet sich immer oben im HTML-Dokument. Warum ist es so wichtig? Es teilt den Browsern mit, welche Version von HTML wir verwenden. Dank dessen weiß der Browser , wie man alle Tags interpretiert. In HTML5 können wir semantische Tags wie nav verwenden, wie Header, wie Footer, also article und Main und so weiter. Dank dieser DOCTYPE-Deklaration der Browser genau weiß der Browser genau, welche Informationen an den Screenreader weitergegeben werden. Das sehr wichtige an der Website ist ihre Sprache. Dank des lang-Attributs weiß der Bildschirmleser , wie die im Dokument enthaltenen Informationen zu lesen sind. Wenn unsere Website Englisch verwendet, sollten wir das lang-Attribut mit en anwenden, was für Englisch steht. Das bedeutet, dass das gesamte Dokument in englischer Sprache verfasst ist. Der Screenreader liest jeden Text auf Englisch. Aber manchmal kommt es vor , dass wir etwas in einer anderen Fremdsprache zitieren , zum Beispiel Spanisch. Wir haben einen Teil des spanischen Zitats, nur schnell, ich werde einfach die Codezeilen umwickeln, damit Sie es leichter sehen können. Ich habe einen Text auf Spanisch, aber die anderen Absätze, die Liste, die Navigation sind auf Englisch. Mal sehen, wie Screenreader mit diesem Problem umgehen. Werkzeugleiste im Fenster „ Sie befinden sich derzeit in der Audioleiste. Überblick. Voice-Over. Besucht, Link, Kontakt. Link, Werke, Link, Erfahrung, Behance, Link, Twitter, LinkedIn. Überschriftenebene eins-zwei Elemente. Hi, ich bin Jane Doe. Hi, ich bin Jane Doe. Wie Sie hören können, ist es nicht die beste Erfahrung. diesem Grund ist es so wichtig , den Elementen auf unserer Website eine angemessene Sprache und entsprechende Sprachattribute zuzuweisen . In unserem Fall sollten wir Englisch für die gesamte Website haben. Aber für diese Information sollten wir ein weiteres lang-Attribut hinzufügen und ES hinzufügen, was für Espanol steht. Schauen wir uns an, wie es funktioniert. Sie befinden sich derzeit in einem Textelement. Chrom. Wie Sie sehen konnten, ist die Erfahrung dank dieses lang-Attributs, das auf die gesamte Website angewendet wird, viel besser , aber es gab auch ein Element , das sich von der gesamten Website unterscheidet. Der Bildschirmleser weiß, dass er die Sprache wechseln muss. Zusammenfassend hilft das lang-Attribut dem Screenreader, den Inhalt der Website richtig zu lesen und angemessen auszusprechen. Es gibt aber auch eine weitere Funktion zur Verwendung des lang-Attributs, nämlich den Dienst der Google-Übersetzung. Dank der Definition der Website dank des Hinzufügens einer geeigneten Sprache zeigt Google dem Nutzer dank des Hinzufügens einer geeigneten Sprache ein kleines Popup an , in dem gefragt wird , ob der Inhalt der Website übersetzt werden soll oder nicht die Einstellungen des Benutzers im Browser. 6. HTML: <a>vs vs</a>: Lassen Sie uns über die Struktur unserer Website sprechen. Wenn Sie sich diese Portfolio-Website ansehen, werden Sie sofort eine allgemeine Vorstellung von der Informationsarchitektur bekommen, sodass Sie wissen, dass dies wahrscheinlich die wichtigsten Überschriften sind, nämlich h1. Wenn wir dann nach unten scrollen, haben wir eine ziemlich große Bildunterschrift, wir haben kleinere Überschriften und fassen auch die gesamte Website in der Fußzeile zusammen. Mal sehen, wie es im Code aussieht. Ich öffne jetzt div tools, die mir über die richtigen Tags informieren, die im Code verwendet werden. Hier ist, wie erwähnt, h1, also ist dies die allererste Überschrift, die der Suchmaschine mitteilt , was hier passiert. Dank dieses h1 könnten wir davon ausgehen, dass dies die Website sein wird , die Jane Doe beschreibt. Wir haben eine Reihe von Listenelementen in einer geordneten Liste, die ol. Aber dank der geordneten Listen haben wir diese Nummer vor jeder Zeile. Das ist die Liste. Wenn wir näher darauf eingehen, werden Sie die Abschnitte sehen, und in jedem Abschnitt befindet sich h2. Wenn wir dieses Element wählen, werden wir sehen, dass wir h2 haben, und hier ist ein anderes. Wir haben h1, h2, und wenn die Website komplex ist, gilt auch h3. Es ist immer sehr wichtig, sich an diese gesamte Struktur in der Sitemap zu erinnern . Lassen Sie uns schnell sehen, was die WCAG-Dokumentation besagt. In Bezug auf Überschriften haben wir hier die Information, dass wir Überschriften nach ihrem Rang oder Level verschachteln sollten , und die wichtigste Überschrift ist h1. Es ist sehr wichtig, Überschriftenebenen nicht zu überspringen da dies verwirrend sein kann und wo immer möglich vermieden werden sollte. Schauen wir uns das echte Beispiel auf der Website an, und dies ist der Blog von Tobias Van Schneider und er hat auf seinem Blog verschiedene Blog-Beiträge. Dies ist ein Beispiel für einen von ihnen. Wenn wir zu den div-Werkzeugen gehen und das Element überprüfen, werden wir sehen, dass es h1 ist. Die allererste Überschrift aus der Liste in der Site-Struktur. Dann können wir uns ansehen, dass es kurze Informationen über das Äußere gibt. Hier wurde es auf dem div-Tag erstellt. Wir könnten einen anderen suchen , der aussagekräftiger ist, zum Beispiel eine Seite oder einen Abschnitt. Aber schauen wir uns den nächsten an, nämlich die Überschrift h2, also haben wir h1, h2, was absolut sinnvoll ist. Wir gehen noch weiter und hier ist der Absatz, der allererste der Blog-Beiträge. An dieser Stelle haben wir ein Zitat, und es ist großartig, weil wir ein Blockquote-Tag haben, das semantisch mit der Funktion dieses Elements der Website verbunden ist . Wir haben Absätze, und ganz unten steht „Lesen Sie mehr“. Es gibt h2 als eins. Schauen wir uns die kleineren Überschriften an, diese sind auch h2. Ich würde wahrscheinlich mit h3 gehen, der dritten Ebene der Überschrift. Sie könnten aber auch hier verwendet werden. Nein. Eigentlich haben wir hier nur Links und das Div. Ich zeige dir vielleicht mehr Code. Es gibt div. Der nächste ist Spam. Dies sind Zahlen, also würde ich mit der Reihenfolge zur Liste gehen, anstatt Spam hinzuzufügen, um semantisch korrekter zu sein , so wie es in Portfolios von Jane Doe dargestellt wird. Denken Sie an h1, und h1 ist auch in Bezug auf SEO und Suchmaschinenoptimierung sehr wichtig, da die Suchmaschine nach den Meta-Beschreibungen, dem Metatitel, aber auch nach h1 sucht . Es sieht auf der Sitemap der Website aus, die dank dieser Struktur erstellt wurde, die wir durch die Definition von Überschriftenebenen hinzufügen. Wir haben bereits behandelt, warum die Struktur der Website und die Einhaltung der richtigen Überschriftenebenen so wichtig sind. 7. CSS und Zugänglichkeit – Teil 1: Willkommen bei Lektion Nummer 5. In dieser Lektion werden wir behandeln, wie wir unseren CSS-Code zugänglich machen können. Wenn Sie an Barrierefreiheit und CSS denken, die natürlich für die Bereitstellung der visuellen Ebene unserer Website verantwortlich sind, ist Bereitstellung der visuellen Ebene unserer Website verantwortlich sind, das allererste, was uns normalerweise in den Sinn kommt , der Farbkontrast. Ich zeige Ihnen, wie wir es schnell ohne zusätzliche Plug-ins oder ohne zusätzliche Software überprüfen ohne zusätzliche Plug-ins können. Lassen Sie uns jetzt auf unsere Portfolio-Website springen. Ich möchte Ihnen zeigen, wie Sie den einfachen Kontrastprüfer auf DevTools verwenden. Ich benutze Chrome, aber es ist auch in Firefox. Sie können sich diesen Element-Explorer schnappen und zum Beispiel auf dem Element der Navigation navigieren . In diesem kleinen Fenster sehen Sie, dass es einen Abschnitt zur Barrierefreiheit gibt und wir einen Kontrast haben, dass es 17,2 ist, was bedeutet, dass wir die Kontrastanforderung erfüllen. Aber wenn wir die Farbe ändern würden, so würde ich schnell bei einer Immobilie, zum Beispiel weiß ich, dass EEE grau ist. Wenn wir erneut zu diesem Element navigieren, sehen wir diesen Kontrast als 1,05, was sehr klein ist. Es ist eigentlich sehr schwierig, die Farbe des Textes von der Farbe des Hintergrunds zu unterscheiden . Sobald wir die größeren Werte in Bezug auf die Farbe anstreben , werden Sie feststellen, dass auch das Kontrastverhältnis größer ist, und wir übergeben es. Zum Beispiel gibt es hier diese Grenze, diesen Bereich, in dem wir die Barrierefreiheitsanforderungen in Bezug auf den Farbkontrast nicht erfüllen Barrierefreiheitsanforderungen in Bezug auf den werden. Ich empfehle Ihnen dringend, es zu verwenden, da es einfach, leicht und anstrengend ist und vergessen Sie nicht , dass der Farbkontrast sehr wichtig ist. Es gibt ein weiteres sehr wichtiges Werkzeug zum Stylen der Elemente der Website, nämlich das Styling der Hyperlinks, also aller Links. Normalerweise werden Links blau oder mit dem Basiswert dargestellt . Es ist sehr wichtig, keine Farbe nur zu verwenden denn für Menschen, die an Sehbehinderungen wie Daltonismus oder Monochromie leiden Sehbehinderungen wie Daltonismus oder Monochromie leiden , sollten wir dies beachten. Anstatt nur Farben auf Links anzuwenden, könnten wir sie auch unterscheiden, indem wir einen Hintergrund oder eine Unterstreichung hinzufügen . Stellen wir uns vor, wir haben irgendwo in unserem Text einen Link , zum Beispiel hier. Wo ist der Link. Wir haben das Standarddesign, das zugrunde liegt und für besuchte Websites ist es violett. Ich denke, dass wir diesen Link auch auf Schwarz setzen könnten. Es wird in Ordnung sein. Es ist jedoch wichtig, mindestens eine visuelle Quelle für die Leute zu behalten , dass dies das anklickbare Element ist. Natürlich können wir mehr bewerben. Wir können auch eine markantere Lösung anwenden. Also habe ich die Link-Klasse hinzugefügt, und wir konnten sie hier schnell stylen. Ich füge Hintergrund hinzu, zum Beispiel Weiß für den Link und Farbe Schwarz. Auf diese Weise wäre es leicht zu erkennen, dies der Hyperlink ist. Natürlich können Sie visuell ansprechendere Lösungen anwenden. Alles liegt bei dir. Das Wichtigste ist jedoch, dass es in Bezug auf die Zugänglichkeit möglicherweise nicht die beste ist, sich nur auf Farbcodierung zu verlassen möglicherweise nicht die beste ist, sich nur auf Farbcodierung . Es gibt eine andere CSS-Eigenschaft, bei der wir vorsichtig sein sollten. Die Bildschirmleser sehen kein Element , auf das wir Sichtbarkeit anwenden, ausgeblendet. Ich klicke, du bist für eine Weile verschwunden. Wenn wir zu diesem IMG-Tag Eigenschaft, Sichtbarkeit und Wert ausgeblendet hinzufügen , werden Sie sehen, dass das Bild weg ist. Es ist tatsächlich versteckt, aber der Code bleibt in unserer HTML-Struktur. Es gibt jedoch unterstützende Technologien wie Screenreader, dieses Element sehen möchten, so wie wir es auf einer Website sehen können. Bitte denken Sie daran , wenn Sie einige Animationen hinzufügen oder den Status des Elements ändern da Bildschirmleser sie nicht lesen können. Das gleiche gilt für die Anzeige, keine. Wir sollten auch nicht vorsichtig sein. Es gibt auch einen wirklich schönen Artikel , den ich Ihnen dringend empfehle, ihn nach Code-Bits zu lesen. Hier geht es um die Sichtbarkeitseigenschaft und darum, dass es nicht nur um eine schlechte Sicht geht, es gibt auch einen Abschnitt über Barrierefreiheit, über unterstützende Technologien. Wenn Sie mehr darüber erfahren und mehr über mögliche Techniken in CSS zum Ausblenden von Elementen lesen möchten, empfehle ich Ihnen dringend, dies zu überprüfen. 8. CSS und Zugänglichkeit – Teil 2: Es gibt eine Pseudoklasse, die eng mit Barrierefreiheit verbunden ist, und sie ist Fokus. Mal sehen, wie Focus funktioniert und was wir bei der Implementierung dieser CSS-Funktion vermeiden sollten . Schauen wir uns die Portfolio-Website damit ich Ihnen die Pseudoklasse in der Praxis zeigen kann. Wenn ich anfange, die Tipptastatur zu verwenden würden Sie sofort feststellen, dass etwas mit dem Element passiert, das in einem bestimmten Moment fokussiert ist mit dem Element passiert, . Jetzt lese ich mehr, und Sie können es an diesem blauen Umriss sehen. Das ist es, was Focus bewirkt. Wenn Sie dies ändern möchten, zum Beispiel die Farbe dieses Umrisses, verstecke ich mich vielleicht für eine Minute. Ich kann eine neue Klasse schreiben. Also füge ich den CSS-Klassenfokus hinzu und kann Konturfarbe hinzufügen. Für die Demonstrationszwecke wählen wir Rot. Wenn ich anfange zu testen, funktioniert es. Bitte beachten Sie, dass das Element der Liste und die Navigation mit einem blauen Umriss versehen sind. Dies ist standardmäßig. Aber wenn ich zu den Schaltflächen springe, sind diese rot weil ich eine separate Fokus-Pseudoklasse erstellt habe. Natürlich kann ich auch die Farbe für diese Artikel ändern. Ich müsste einen solchen Selektor erstellen. Im Fokus die Konturfarbe, und ich kann zum Beispiel Rosa auftragen. Wenn ich anfange zu navigieren, werden Sie sehen, dass der Umriss rosa ist. Diese Warteschlange, diese visuelle Warteschlange, ist sehr wichtig , da sie den Leuten die Informationen gibt , wo sie sich gerade auf der Website befinden. Auf vielen Websites stolpere ich über die Situation, in der die Gliederung auf keine gesetzt wurde. Zum Beispiel kann ich Selektoren schreiben. Für jedes Element mit dem Fokus Pseudoclass würde die Gliederung auf none gesetzt werden. Vielleicht vergrößere ich etwas, damit du es besser sehen kannst. Wenn ich anfange, die Tipptaste zu verwenden werden Sie feststellen, dass Sie die Position auf der Website ändern , aber tatsächlich haben Sie keine visuelle Ahnung wo sich Ihr Cursor befindet. Es sollte nicht passieren, und wir sollten immer bedenken, dass die Gliederung standardmäßig zumindest blau bleiben sollte. Natürlich können Sie die Farbe je nach Design ändern , abhängig von Ihrem Konzept und Ihrer Idee. Bitte denken Sie jedoch daran, dass das Setzen von outline auf none in Bezug auf die Zugänglichkeit nicht unterstützt wird. Wir haben das Thema Pseudoklasse behandelt, aber es gibt auch Pseudoelemente, Pseudoinhalte wie vorher und nachher. Die Information, die Sie beachten sollten , ist, dass Elemente vor und nach Pseudo-Inhalten tatsächlich rot sind und für Screenreader erkennbar sind. Lassen Sie uns schnell zum Code springen und sehen, wie Pseudo-Inhalte auf einer Website aussehen. Stellen wir uns vor, wir hätten zum Beispiel gerne ein kleines Tag und würden in der Nähe der Überschrift angezeigt, dass dies der neue Inhalt ist. Vielleicht wäre es einfacher, wenn ich es dir zeige, anstatt es zu beschreiben. Wir möchten Pseudo-Inhalte erstellen, zum Beispiel h2: nach oder vor, vielleicht mit dem Inhalt. Hier füge ich den Inhalt und den Wert hinzu. Wie Sie sehen können, wurde das Wort jetzt hinzugefügt. Screenreader würde es sehen. Aber ich würde es gerne ein bisschen anders stylen. Auf dem schwarzen Hintergrund mit weißer Farbe würde ich die Zeilenhöhe auf Null ändern. Ich würde die Schriftgröße auf 15 ändern. Nehmen wir an, Schriftfamilie wäre die, ich kann mich nicht erinnern, welche für Space Mono, Mono Space verwendet werden , sagen wir mal. Vielleicht wäre es einfacher , serifenlos zu arbeiten. Buchstabenabstand, eins, und ich füge Padding hinzu. Wir haben dort einen Teil des Inhalts, der in CSS generiert wird. Wir müssen uns daran erinnern, und wenn Sie sich die verschiedenen Überschriften ansehen, werden Sie feststellen, dass sie zu jedem h2 hinzugefügt werden. Aber natürlich können wir eine Klasse erstellen und sie dann, vor Pseudoinhalten, mit dieser Klasse verknüpfen . Schauen wir uns an, wie der Screenreader diese Pseudoelemente sieht. Ich öffne die Systemeinstellungen und schalte unser VoiceOver ein. Außerhalb der Gruppe mit zwei Artikeln und Gruppe mit zwei Artikeln, drei Artikeln und Artikel mit drei Artikeln, drei Artikeln Überschrift Ebene 2, vier Artikel. Neu, ich habe eine Gruppe für den Künstler. Wie Sie hören konnten, liest das VoiceOver die neue iPad-App. Es sieht es also. Es ist gut, daran zu denken, da wir diese Techniken in der Regel verwenden, um komplexere Layouts oder Konzepte anzuzeigen oder zu positionieren . Eigentlich sind es gute Nachrichten. 9. Animationen und Zugänglichkeit: Willkommen bei Lektion Nummer 6. In dieser Lektion werden wir sehr wichtiges Thema behandeln, das Animationen und den Zugänglichkeitsfaktor enthält. Zunächst muss ich Ihnen eine sehr wichtige Tatsache zeigen , vielleicht haben Sie noch nicht gehört, dass 35 Prozent der Erwachsenen in den USA 40 Jahre oder älter sind, also ungefähr 70 Millionen von Menschen. Sie hatten eine gewisse vestibuläre Dysfunktion. Was heißt das? Lass es uns schnell durchgehen. Menschen mit vestibulären Störungen leiden normalerweise unter Reisekrankheit, Kopfschmerzen, Gleichgewichtsproblemen, chronischen Krankheiten und Lärm, wenn sie sich großformatige Animationen auf dem Bildschirm ansehen . Lassen Sie mich Ihnen etwas mehr über vestibuläre Störungen erzählen, über das Vestibularsystem selbst. Vestibularsystem ist eigentlich ein Teil des Innenohrs, deshalb vermittelt es die Informationen über den Raum, also die räumlichen Informationen, aber es ist auch für sensorische Informationen verantwortlich, deshalb Bei Menschen mit vestibulären Störungen treten tatsächlich Symptome wie Lärm oder Schwindelgefühl auf. Sie sollten sich auch daran erinnern , dass all dieses Flackern, all diese blinkenden Elemente mit einer sehr hohen Frequenz für Menschen, die an Epilepsie leiden, sehr gefährlich sein können . Es gibt noch etwas , das wir beim Entwerfen beachten sollten , wenn wir die Animation auf unseren Websites implementieren. Wir müssen bedenken, dass nicht jeder von unseren Animationen und schnellen Änderungen des Zustands der Komponenten beeindruckt sein unseren Animationen und schnellen Änderungen wird. Aber es gibt die guten Nachrichten, es gibt eine wirklich große Rolle in CSS , die den Leuten hilft, die Animationen zu überspringen und sie tatsächlich auf einer Website loszuwerden . Mal sehen, wie es gemacht werden kann. Ich werde hinzufügen, und wenn Sie die Website jetzt sehen, werde ich sie aktualisieren. Sie werden sehen, dass das Bild von Jane ständig rotiert wird, sodass es eine konstante Animation gibt. Wenn wir uns eingehender mit dem Code befassen, werden wir sehen, dass in CSS eine Keyframe-Animation definiert ist und das Element transformiert , indem es um minus drei Grad gedreht wird. Wenn wir es im Code sehen, gibt es die Klasse intro-img, also wird diesem Bild eine Animation hinzugefügt und es geht unendlich und jede Animation dauert zwei Sekunden. Ich würde sagen, dass für Menschen , die an einer vestibulären Störung leiden, die eigentlich bedeutet, diese Art von Animationen zu entfernen aber gleichzeitig wollen wir ein cooles Erlebnis bieten, also etwas zu cooles Erlebnis bieten, haben sich zu bewegen, auf der Website zu blinken, kann manchmal von anderen Menschen attraktiv sein, richtig? Um diesen Ansatz ausgewogen zu gestalten, können wir etwas anwenden , das als Prefers-Reduced-Motion bezeichnet wird. Dies ist die Medienregel, vielleicht bevorzugen unsere Linien, damit Sie sie in der Mitte sehen können, damit Sie sie in der Mitte sehen können, reduzierte Bewegung. Das heißt, wenn der Benutzer die Option für reduzierte Bewegung aktiviert hat , können wir hier einige Bedingungen hinzufügen. Zum Beispiel wurde unsere Animationsrotation zu dieser Klasse hinzugefügt und zum Beispiel können wir hier Animationsnamen none hinzufügen. Wir überschreiben die Eigenschaft des Animationsnamens und für Benutzer mit dem Vorzug reduzierter Bewegung würde dieser Code angewendet, dieses CSS würde angewendet. Lassen Sie uns jetzt unsere Website aktualisieren, um zu sehen ob sich etwas geändert hat, wo? Eigentlich ist es das nicht. Warum ist das so? Weil ich diese Präferenz für reduzierte Bewegung nicht aktiviert habe. Wie ich das machen kann, auf einem Mac ist Systemeinstellungen und ich kann hier zum Beispiel Bewegung eingeben , und es hebt mir die Barrierefreiheit hervor. Jetzt sollten wir zur Anzeige gehen und die reduzierte Bewegung überprüfen. Sie werden sofort feststellen , dass die Animation bei aktivierter Bewegungsreduzierung nicht funktioniert. Dank dieser CSS-Regel. Wenn wir es entfernen, also werde ich den Boden umleiten, empfehle ich diesen Code und aktualisiere ihn. Ohne diese Regel noch, auch wenn ich diese reduzierten Bewegungen eingeschaltet funktioniert die Animation immer noch, auch wenn ich diese reduzierten Bewegungen eingeschaltet habe. Deshalb ist es so wichtig, nur ein paar Codezeilen hinzuzufügen. Im Ernst, es nimmt nicht viel Zeit in Anspruch, denken Sie also bitte an diese CSS-Medienfunktion da sie vielen Menschen helfen wird. Tatsächlich gibt es ein sehr wichtiges Element, das auf einer Website weit verbreitet sehr beliebt ist und Probleme mit der Barrierefreiheit hat. Kannst du erraten, was ist das? Nur es erscheint ganz oben, es wird häufig auf E-Commerce-Websites verwendet und die Antwort lautet Karussells. Ich zeige Ihnen schnell das Beispiel. Sie kennen wahrscheinlich die ganzen Banner , die sich nach ein paar Sekunden automatisch ändern . Aus Sicht der Barrierefreiheit ist es sehr wichtig, die Kontrolle darüber zu haben denn wenn der Screenreader liest was gerade passiert, kann er die Geschwindigkeit nicht so sehr einholen ist oft sehr hoch. Es gibt einen super interessanten Artikel, wie man ein zugänglicheres Karussell oder einen Slider baut , gepostet von Jason Webb und er fügt einige Tipps hinzu und teilt seine Erfahrungen mit dem Bau barrierefreier 360 km. Er teilt auch seine Erfahrungen mit der Bereitstellung Barrierefreiheitsprüfungen auf vielen Websites und hebt hervor, dass die wichtigsten Dinge , an die wir uns erinnern sollten. Die sehr wichtige Regel, die ich beachten sollte, ist die Deaktivierung automatischen Wiedergabe, da wir ohne sie die WCAG 2.2.2-Regel, die Pause, Stopp und Höhe angibt, nicht erfüllen können . Bitte denken Sie daran, dass wir immer dann Sie Erregung implementieren oder entwerfen, , wenn Sie Erregung implementieren oder entwerfen, Pause oder andere Steuerelemente implementieren müssen. Es gibt ein wirklich gutes Beispiel, das von Jason vorbereitet wurde, also hier haben wir das Karussell , das natürlich mit unserem Cursor oder unserer Maus gesteuert werden kann und es gleitet und auch durch den schwarzen Punkt des Blocks, wir sehen den aktuellen eins. Aber das Coolste daran ist, dass wir dieses Karussell über die Tastatur navigieren können dieses Karussell über die Tastatur navigieren Wenn ich also die Tabulatortaste verwende, kann ich von jedem der Kacheln zum Link-Abschnitt gehen, aber ich kann auch die Pfeile verwenden. Ich kann diese Elemente auch ganz unten verwenden, also diese kleinen Punkte, um zu der angegebenen Kachel zu navigieren. Es gibt eine wichtige Sache, ohne die wir uns unser Leben nicht vorstellen können , das sind Gifs. Das Wichtigste an Gifs ist, dass sie nicht vollständig zugänglich sind, da sie automatisch abgespielt Daher ist es für Leute, die Probleme mit kognitiven Problemen haben, nicht sehr ratsam Leute, die Probleme mit kognitiven Problemen haben, oder Probleme mit der Bewegung. Was wir als Entwickler tun können, als Programmierer, um Gifs benutzerfreundlicher zu machen. Es gibt eine wirklich gute Sache und dies ist ein GIF für die Bibliothek, das Ihnen hilft, GIF unter Berücksichtigung der Barrierefreiheit zu implementieren . Wie Sie hier sehen können, spielen wir, damit wir Geschenke kontrollieren können, was super cool ist, denn besonders heutzutage haben wir Tonnen von Geschenken auf verschiedenen Artikeln wie auf Medium also bitte Denken Sie daran, dass wir einige Bibliotheken haben , die meiner Meinung nach sehr nützlich sind und wie GIF funktioniert. Nun, ich werde dieses GIF pausieren , weil es mich auch ermüdet. Wir haben Attributdaten-Gifffer, wir fügen das GIF per IMG-Tag hinzu. Wir können auch das data-gifffer-alt-Attribut hinzufügen und natürlich müssen wir die Bibliothek implementieren, aber alles ist einfach zu machen, weil wir das Skript haben. Wir müssen unsere Website erweitern und dank ihr, dem Geschenkspieler, funktioniert es sofort. Ich empfehle Ihnen dringend , diese Website und dieses Bibliotheks-Gifffer mit Triple F zu besuchen und dieses Bibliotheks-Gifffer mit Triple F und ich hoffe, dass Sie die Gifs benutzerfreundlicher und zugänglicher machen . 10. Was ist ARIA: Lektion Nummer 7. Was ist ARIA? ARIA steht für zugängliche, reichhaltige Internetanwendungen. Dies sind eine Reihe von Attributen, die wir auf unseren Code anwenden wenn das native HTML die Barrierefreiheitsprobleme nicht abdeckt. ARIA überbrückte die Lücke zwischen Barrierefreiheit und Elementen, die wir nicht einfach mit semantischem HTML beschreiben können. Lassen Sie uns in Beispiele eintauchen. Stellen Sie sich die Situation vor , dass wir Tabs haben und der Benutzer zwischen den Tabs wechseln kann. Die Registerkarten werden mit dem Button-Tag erstellt, aber der Screenreader muss wissen, was auf dem Bildschirm passiert. Wenn wir zum Beispiel eine Schaltfläche selbst haben, würde der Bildschirmleser die Schaltfläche anzeigen. In Bezug auf Tabs und ihre spezifischen Funktionen erhalten wir jedoch keine Informationen von der Hilfstechnologie. diesem Grund müssen wir mehr Informationen weitergeben, die Botschaft vermitteln, dass wir Tabs verwenden und die Person über die Tastatur zwischen ihnen wechseln kann. diesem Grund fügen wir das Rollenattribut hinzu, das eines der ARIA-Attribute ist also role und weisen ihm einen Wert zu, Tab. Sie können sich auch Situationen wie das Erscheinen von Modellen, einige QuickInfos oder Warnungen für den Benutzer vorstellen . In dieser Situation müssen wir uns auch um Barrierefreiheit kümmern und ARIA hilft uns sehr. Ich kann dir einen Code zeigen. Wir haben div, einen Container, in dem wir zum Beispiel die Information anzeigen, zum Beispiel die Information anzeigen, dass Ihr Benutzername die E-Mail-Adresse ist. Wir geben zusätzliche Informationen und es wird als Tooltip angezeigt. Wir haben ID, es spielt keine Rolle, ob es sich um eine ID oder eine CSS-Klasse handelt. Aber das Wichtigste ist, dass wir eine weitere ARIA-Rolle haben und den Value-Tooltip hinzufügen. Wie wir diesen Tooltip mit einem bestimmten Element in HTML verknüpfen können . Du kannst sehen, dass wir einen Teil des Forums haben, also Label und Input. Wenn Sie sehen, hat die Eingabe natürlich den Typ, der Text-ID ist aber auch ein anderes ARIA-Attribut, nämlich aria-describedby. Hier fügen wir den Namen der ID dieses Tooltips hinzu. Diese beiden Objekte sind miteinander verbunden. Dies ist eine sehr wichtige Information für den Screenreader. Dank dieser ARIA-Rolle und der von aria-description by würden die vollständigen Informationen an den Benutzer geliefert. Es gibt weitere Beispiele für die ARIA-Nutzung, und ich kann Ihnen diese Website zeigen , bei der es sich um ARIA-Beispiele auf GitHub handelt. Wenn Sie tiefer graben möchten, können Sie hier zum Beispiel die Schaltflächeneingabe sehen , Sie können zum HTML-Code gehen und nach einigen Beispielen suchen. Zum Beispiel haben wir hier Aria-Controls, Aria-Live. Nun, ich würde gerne für einen Moment hier aufhören. Dieser ist super interessant, weil wir manchmal ein Element haben , das sich dynamisch ändert. Zum Beispiel Zahlen auf Lager. Wenn Sie sich eine solche Situation vorstellen, dass jemand die Website betritt und diesen Vortrag überprüfen möchten , der sich jede Sekunde ändert. Es ist wichtig, die Informationen so zu unterscheiden , dass sie sich tatsächlich im Lebenselement befinden. Zusammenfassend gibt uns ARIA viele Möglichkeiten und es ist ein komplexeres Thema. Ich möchte Sie daran erinnern, dass ARIA Fälle wie die Navigation bearbeitet. Außerdem Formularhinweise, Fehler, einige Widgets, Nachrichten, einige andere an den Benutzer, einige interaktive Inhalte. Bitte denken Sie daran, wenn Sie versuchen, etwas Komplexeres und Interaktiveres mit dem Benutzer zu implementieren etwas Komplexeres . 11. Kursprojekt: Lass uns jetzt über das Klassenprojekt sprechen. Ich habe eine Aufgabe für Sie vorbereitet und zwar das Audit zur Barrierefreiheit. In dem Klassenpaket , das Sie aus dem richtigen Abschnitt auf Skillshare herunterladen können , finden Sie die Website heraus , die 20 CSS-Tricks heißt. Das ist übrigens die Website, die über meine Klassen aufgerufen wird, einfach so typvoll. Schauen Sie es sich also gerne an. Ich füge den Link unten hinzu. Sie können auch diese Kurse durchgehen , wenn Sie mehr kreative Techniken in CSS herausfinden möchten . Aber mein Punkt ist, dass ich diese Website mit 20 CSS-Tricks vorbereitet habe . Wir können diese Website im Browser öffnen. Schau, was hier passiert. Es gibt einige Probleme mit der Barrierefreiheit , die durch Hinzufügen von HTML- und CSS-Code behoben werden könnten . Später kannst du die Screenshots der kritischsten Dinge und sie im Bereich Klassenprojekte hochladen. Ich würde mich sehr über Ihren Beitrag dort freuen. Für die ersten drei Personen, die ein paar Verbesserungen für Barrierefreiheit anwenden würden , habe ich etwas Besonderes vorbereitet. Ich warte auf Ihre Antworten und natürlich wäre es toll wenn Sie das Wissen, das Sie in dieser speziellen Übung gesammelt haben, nutzen könnten . Lass uns noch einmal einreichen. Laden Sie zuerst das Zip-Paket herunter und öffnen Sie es , das Sie im Projektbereich gefunden haben. Überprüfen Sie dann Probleme in HTML- und CSS-Dateien. Klicken Sie auf der Skillshare-Website unter Meine Klassen auf „Projekt erstellen“ Skillshare-Website unter Meine Klassen und laden Sie dann Screenshots oder Pakete oder Listen von Problemen hoch, die Sie gefunden und behoben haben. Viel Glück. 12. Zusammenfassung: Es ist höchste Zeit für die Zusammenfassung der Klassen. Ich habe eine Mindmap für diesen Kurs vorbereitet, und wir können sie schnell durchgehen um das gesamte Material, das wir gelernt haben, zu überarbeiten. Zunächst einmal wissen Sie, dass Barrierefreiheit die Websites für alle zugänglich macht. Es ist ein sehr wichtiges Thema, weil es eine sehr große Anzahl von Menschen betrifft . Es geht nicht nur um Beeinträchtigungen, es geht nur um vorübergehende Tap-Situationen , in denen wir einige Schwierigkeiten haben, zum Beispiel eine Nachricht zu lesen oder ein Video anzuhören. weißt du alles. Wir können eine bestimmte Anzahl von Kategorien von Beeinträchtigungen unterscheiden , wie Sprache, auditive Version, neurologische, kognitive oder körperliche Bewegung. Es ist auch gut, daran zu denken , dass Barrierefreiheit gemessen werden kann und tatsächlich sehr streng definiert ist. Wir müssen alle Regeln kennen, um die Kriterien erfolgreich zu erfüllen. Der Hauptstandard, die offizielle Organisation, ist W3C, der für die WCAG verantwortlich ist, die Richtlinien für die Barrierefreiheit von Webinhalten. Dies ist eine Dokumentation, an die wir uns erinnern sollten. Wir wissen auch, was Screening-Reader ist, was ein Teil der assistischen Technologie ist. Außerdem wissen wir, wie man Screenreader lernt. Wir wissen, dass sie auch in Mobiltelefonen verfügbar sind, und ich empfehle Ihnen dringend, sie zu testen. Wir wissen auch, was semantisches HTML ist und was so wichtig ist. Wir wissen, dass die DOCTYPE-Deklaration ganz oben in unserem HTML-Dokument stehen sollte . Wir wissen auch, dass es einige HTML-Tags gibt, die für das Hinzufügen der Semantik unserer Site-Struktur verantwortlich sind , wie Header, Main, Artikel, Fußzeile usw. Wir wissen auch, dass die Hierarchie der Überschriften sehr wichtig da sie dem Benutzer die Navigation auf der Website erleichtert . Screenreader können sich auch logischer innerhalb des Dokuments bewegen, und wir wissen auch, dass Barrierefreiheit und Suchmaschinenoptimierung miteinander verbunden sind und wir uns nicht nur darum kümmern sollten Zugänglichkeit, aber auch über SEO. Wir haben auch HTML-Attribute behandelt, und wir wissen, dass sie die Barrierefreiheit verbessern. Zuallererst ist dies das Lang-Attribut, aber auch ein sehr wichtiges Alt-Attribut für Bilder, das wir auch auf Portalen, Diensten wie Facebook, LinkedIn, hinzufügen können , also sollten wir dies berücksichtigen immer wenn das Bild deklarativ ist, sollten wir alt leer lassen. Ich habe dir auch von div versus bottom versus hyperlink erzählt , also ein Tag, das ist wichtig zu bedenken , dass div ein sehr allgemeiner Text ist. Wir sollten vorsichtig sein, wenn wir für Schaltflächen oder Hyperlinks verwenden . Natürlich ist ein CSS ein weiteres großes Thema, an das wir uns in Bezug auf Barrierefreiheit erinnern sollten. Natürlich ist Kontrast das allererste, was uns in den Sinn kommt. Es gibt aber auch einige CSS-Eigenschaften wie Anzeige, Sichtbarkeit, aber auch Pseudoklassen, Fokus oder Gliederung, aber auch einen Pseudo-Inhalt wie vor und nach, Pseudoelemente. Wenn wir über visuelles Sehen sprechen, müssen wir natürlich Animationen erwähnen, also Bewegung, Thema im Allgemeinen, es gibt eine sehr nützliche CSS-Medienfunktion, die reduzierte Bewegung bevorzugt. Dank dessen können wir Menschen, die an vestibulären Störungen leiden, eine ausgewogene Erfahrung bieten . Vielleicht sollte ich hier auch hinzufügen, dass wir vestibuläre Störungen behandelt haben. Natürlich haben wir ganz am Ende Klassenprojekte. Ich empfehle Ihnen dringend , das Paket, das ich für Sie vorbereitet habe, herunterzuladen und die Barrierefreiheitsprüfungen durchzuführen. Bitte teilen Sie Ihre Ergebnisse mit. Sie können es als Screenshots der Stellen hinzufügen , an denen Sie den Code korrigiert haben , um Screenshots zu erstellen, zum Beispiel Ihres Konzeptdokuments, oder verknüpft mit dem Begriff. Ich werde es wirklich zu schätzen wissen. Das Gute ist, dass, wenn fünf Personen ihre Ergebnisse und Hausaufgaben einreichen, ich Ihnen allen die Checklisten zur Barrierefreiheit mitteilen werde , die Sie Ihre tägliche Arbeit verwenden können. Es lohnt sich, die Hausaufgaben zu machen. Vielen Dank, dass Sie an diesen Kursen teilgenommen haben. Ich hoffe, dass Sie keine Angst mehr vor Barrierefreiheit haben und dass Sie sich häufiger mit diesem Thema beschäftigen. Natürlich sehen wir uns in den sozialen Medien. Du kannst mich auf Twitter besuchen. Ich kann hochladen, oder du kannst meinen Newsletter abonnieren, oder du kannst mich auf Instagram besuchen. Wir sehen uns später. Tschüss.