Produktmanagement: Tools für die Verbesserung der Produktzugänglichkeit

1. Einführung: Wenn es um die Entwicklung für das Web geht, was ich absolut liebe ist, dass es für jeden ist. Sie brauchen kein bestimmtes Mobiltelefon zu haben, Sie brauchen keinen bestimmten Computer oder eine fette Konnektivität, im Grunde ist jeder eingeladen, Dinge im Internet zu tun. Ich verliebte mich in das Internet, als ich im Radio arbeitete, und ich erkannte, dass jeder ein Verleger werden kann, ohne Geld dafür ausgeben zu müssen. Ich wollte sicherstellen, dass das Web vom ersten Tag an für alle da ist, unabhängig von der Fähigkeit, unabhängig davon, wo Sie auf dem Planeten sind, unabhängig von Ihrem Setup und welchem Computer Sie haben, ich möchte sicherstellen, dass ich meine Fähigkeiten als Ingenieur, um sicherzustellen, dass die Produkte für alle da draußen verfügbar sind. Denn wenn wir das tun, bekommen wir viel mehr Benutzer und das ist eine sehr einfache Idee. Hallo, ich bin Christian Heilmann. Ich bin Principal Program Manager bei Microsoft und meine Aufgabe ist es, sicherzustellen, dass unsere Produkte für jedermann zugänglich sind, und darüber werden wir heute sprechen. Barrierefreiheit ist nicht diese beängstigende, problematische Sache, die eine gesetzliche Anforderung ist, sondern oft nur gesunden Menschenverstand und sicherzustellen, dass das Produkt Veränderungen standhalten kann, die Menschen brauchen, um es zu tun. Sie werden feststellen, dass Menschen unterschiedliche Bedürfnisse haben und sich Ihre Bedürfnisse selbst im Laufe der Zeit ändern. Wenn ich meine Brille ausziehe, verwende ich das Produkt anders als wenn ich meine Brille anhabe . Behinderung ist kein einmaliger Zustand. Es ist eine gleitende Skala, die sich im Laufe der Zeit ändert und unser Produkt sollte flexibel genug sein, um dies tatsächlich zu unterstützen. In dieser Klasse werden wir über Zugänglichkeit sprechen, die über Compliance hinausgehen , und das bedeutet, dass wir Dinge entwickeln , die zugänglich sind, indem wir wie Benutzer denken und nicht nur darüber nachdenken, was wir tun müssen, um zugänglich zu sein. Wir werden einen Blick auf einige der automatisierten Systeme werfen, die über Ihre Produkte laufen und Ihnen sagen wo die problematischen Teile sind, und wir werden darüber sprechen, wie das falsch positiv sein kann. Wir werden dann schalten Gänge und gehen zum Browser und verwenden Sie das Produkt wie ein Benutzer würde, und ändern einige der Aussehen und Gefühl, so dass Sie tatsächlich wissen welche Kante Fälle Sie abdecken müssen. Und wir werden die in den Browser integrierten Entwickler-Tools verwenden, um herauszufinden, wo die problematischsten Teile Ihres Produkts sind und wie Sie sie beheben können. Diese Klasse liegt mir am Herzen, weil ich täglich mit Zugänglichkeit für die Produkte in Microsoft arbeiten muss , und es ist manchmal ein steiler Kampf. Manchmal ist es schwer zu tun. Oft liegt es daran, dass Menschen nicht verstehen, dass Zugänglichkeit bedeutet, Dinge für Menschen zu tun und über Probleme herauszufinden, die Menschen mit Ihrem Produkt haben und nicht nur konform zu sein. Am Ende des Kurses werden Sie mit der Idee weggehen, dass es viele Leute gibt, die das Produkt anders sehen als Sie. Es gibt Dinge, die Sie tun können, um sicherzustellen, dass diese Personen nicht blockiert werden und mögliche Kunden und zusätzliche Benutzer Ihres Produkts werden. Sie werden auch herausfinden, dass es eine Menge Dinge gibt, die bereits mit dem Browser kommen, den Sie verwenden, mit dem Sie für diese Bedürfnisse testen können und sicherstellen, dass Ihr Produkt, das Sie gebaut haben, für Menschen da draußen verfügbar ist. Diese Klasse, die ich hoffe, ist für jeden gedacht hat, der über Barrierefreiheit nachgedacht hat und mit einem Entwicklungsteam und einem Testteam barrierefreie Produkte entwickelt hat, aber selbst nicht ganz gehandelt hat. Was ich hier sage, ist, dass Sie als Entwickler, indem Sie die Fähigkeiten, die Sie in dieser Klasse lernen, tatsächlich es viel einfacher machen, mit dem juristischen Team zu arbeiten, mit dem Entwicklungsteam zu arbeiten und mit dem Testteam, weil Sie das Richtige getan haben, bevor Sie den Test tatsächlich zurückbekommen und es wiederholen und die Dinge wieder beheben müssen. Um uns in Gang zu bringen, habe ich ein Projekt erstellt, das eine Website ist, die ein paar Probleme mit der Barrierefreiheit hat, von denen einige nicht offensichtlich sind. Ich habe auch eine feste Version dieser Website erstellt, die Sie auch herunterladen können und Sie können einen Blick darauf werfen, was ich getan habe, um diese Probleme zu umgehen. Bitte gehen Sie danach in die Diskussionsforen und besprechen Sie das Ding. Nicht einverstanden mit mir. Vielleicht finden Sie einen besseren Weg, um das zu beheben, oder Sie könnten feststellen, dass es Probleme mit den Lösungen gibt , die Sie in Ihren eigenen Produkten haben, und andere Leute können Ihnen helfen. 2. Zugänglichkeit und warum das wichtig ist: In dieser ersten Lektion werden wir darüber sprechen, was Barrierefreiheit ist und warum es wichtig ist. Es gibt viele Mythen über Barrierefreiheit. Es gibt viele Befürchtungen über die Zugänglichkeit. Manchmal wird es als etwas gesehen, das automatisiert werden könnte, was es nicht ist. Wir wollen sicherstellen, dass wir auf dem rechten Fuß beginnen, indem wir die Zugänglichkeit verstehen und nicht nur versuchen, es zu schaffen. Wenn es um die Barrierefreiheit im Internet geht, machen Menschen einfache Fehler, die katastrophale Folgen haben. Eines der größten Probleme, die wir dort herausfinden, ist, dass wir immer wieder medienähnliche Bilder ohne alternative Texte haben. Es scheint kein Problem zu sein. Die Leute können das Bild sehen. Aber wenn Sie blind sind, können Sie das Bild nicht sehen und Sie wissen nicht, worum es bei dem Bild geht. Aber wenn es einen alternativen Text hat, würde das für Sie übersetzt werden. Es ist ziemlich einfach, das Richtige zu tun. Es ist einfach sehr einfach, es zu vergessen. Unsere eigene Erfahrung ist nicht das, was unsere Endnutzer haben und was niemand außer uns hat. Wie ich die deutsche Website lesen kann, können Sie wahrscheinlich nicht. Ich kann eine französische Website lesen, wahrscheinlich können andere Leute das nicht lesen, also brauchen sie sie für Sie übersetzt. Diese Bedürfnisse sind anders als Ihre. Siehst du, das ist großartig. Stellen Sie einen alternativen Text für Leute ein, die nicht sehen können. Sie haben ein Video da draußen, das tatsächlich einen tollen Sound hat und tatsächlich gute Bilder hat, aber wenn jemand schwerhörig ist, wissen sie wahrscheinlich nicht, was los ist. Vergewissern Sie sich, dass Ihre Videos Untertitel haben. Sie werden feststellen, dass das etwas ist, von dem Sie auch profitieren können. Wenn du zum Beispiel in einem Pub bist und da oben ein Fernseher ist und die Musik laut drängt, würdest du diese Untertitel wirklich schätzen, weil du das Programm verstehst , ohne dem Barkeeper sagen zu müssen , dass er sich drehen soll. aus der Musik und schalten Sie den Fernseher, was sie nicht für Sie tun. Auf die gleiche Weise, wenn Sie Untertitel in ausländischen Filmen aktivieren, können Sie die Sprache wahrscheinlich besser lernen. Mit dieser kleinen zusätzlichen Anstrengung, um sicherzustellen, dass Endbenutzer mit unterschiedlichen Fähigkeiten als Ihre Produkte konsumieren können, vervielfacht Ihre Endbenutzer tatsächlich. Es stellt sicher, dass jeder das Produkt verwenden kann und es ist oft nur eine einfache Sache, es zu setzen, wie ein alternativer Text für ein Bild, wie eine Beschriftung für ein Video, oder stellen Sie sicher, dass Ihr Produkt eine Schriftgröße hat das ist nicht wirklich winzig, aber eigentlich schön, auch auf einem Mobiltelefon in der Sonne zu lesen. Wenn es um Taktik geht, denke ich, dass das erste, worüber man nachdenken muss, ist, sich in die Schuhe Ihrer Endbenutzer zu bringen. Verwenden Sie nicht nur Ihr Produkt auf dem großartigen Computer, den Sie mit einer großen Auflösung und der schnellen Internet-Konnektivität haben, erhalten Sie ein schlechtes Handy mit einer schlechten Konnektivität, laufen Sie in den Wald und schauen Sie sich Ihre Produkte dort an. Dann werden Sie feststellen, dass es nicht so viel Freude ist, auf diese 50-Megabyte-Animation zu warten , bevor Sie tatsächlich etwas tun können. Es ist wichtig, dass Sie die Bedürfnisse Ihrer Benutzer verstehen , indem Sie Bilder von Zeit zu Zeit deaktivieren. Zum Beispiel, deaktivieren Sie den Ton eines Videos oder einer Animation und erkennen, ist es immer noch sinnvoll? Sie können Ihre Entwicklungsumgebungen einrichten, um sicherzustellen, dass Sie, wenn Sie beispielsweise einen alternativen Text oder ein Bild vergessen , eine verrückte Linie erhalten und Ihnen das ein Problem darstellt. Es ist ärgerlich, Probleme zu haben, während Sie sich entwickeln , aber gleichzeitig ist es viel weniger problematisch, dass, wenn es um Ihre Endbenutzer oder Ihre Tester geht und Sie eine weitere Runde des Bauens der Sache durchlaufen. Um Sie in die richtige Stimmung für diese Klasse zu bekommen, möchte ich, dass Sie einen Blick auf die Eingabehilfen mit Betriebssystemen und Browsern bereits da draußen kommen, die Menschen verwenden, um Ihr Produkt zu ändern und tatsächlich müssen auch Ihr Produkt ändern, damit sie es konsumieren können. Dies beginnt mit der Größenänderung Ihrer Schriftart auf Ihren Websites bis zu 400 Prozent. Es sieht entmutigend aus, aber das ist es, was die Leute brauchen. Stellen Sie sicher, dass Ihr Produkt immer noch auf diese Weise funktioniert. Sie können auch einen Blick auf einige der neuen Funktionen in Betriebssystemen werfen, wie Dunkelmodus und Licht-Modus. Es gibt einen Modus mit hohem Kontrast in Windows, der von bis zu sechs Prozent der Benutzer oder Windows verwendet wird, gibt es ein paar Millionen Menschen da draußen. Sie werden sehen, dass Ihre Website ganz anders aussieht. Sie wussten wahrscheinlich nichts davon, aber es ist etwas, das Sie in Betracht ziehen sollten. Neulich hatte ich zum Beispiel eine Tastatur, die an mir kaputt war. Ich benutze den Weg, um mit dem Computer zu sprechen, um meine Texte tatsächlich zu diktieren. Das ist etwas, das viele Leute da draußen auch brauchen. In der Vergangenheit bedeutete dies, dass ich einige zusätzliche Software kaufen musste, die veraltet wurde, heutzutage kommt nur mit Betriebssystemen und Sie können es selbst ausprobieren. Schauen Sie sich Ihr Betriebssystem und Ihren Browser um und sehen Sie, was Sie ein- und ausschalten können , was für Menschen mit Behinderungen einen Unterschied macht und Sie ihre Bedürfnisse viel besser verstehen lässt. 3. Automatisierte Tools für die Zugänglichkeit: Werfen wir einen Blick auf eines dieser Tools, die einen automatisierten Bericht liefern, und sehen, wie weit es uns dauert. Dies ist ein Produkt namens Accessibility Insights, das ich jeden Tag bei der Arbeit verwende. Es ist eine Browser-Erweiterung, die Sie installieren können und es gibt Ihnen alle Einblicke darüber, was in Barrierefreiheit los ist und welche Probleme Ihre Website hat. Sie gehen zu einer Website, die Barrierefreiheit Probleme hat und Sie möchten testen, Sie haben dieses kleine Symbol hier, mit dem Sie einen FastPass darüber ausführen können. Sobald Sie das tun, erhalten Sie tatsächlich einen Bericht, der Ihnen alle Probleme zeigt , die es gefunden hat, und er sagt Ihnen tatsächlich, wo auf der Seite sie sich auch befinden. Es erklärt Ihnen, dass es tatsächlich gescheiterte Instanzen gibt, von denen sieben. Es gibt ein Problem mit Farbkontrasten. Es gibt ein Bild-Alt-Problem, bei dem Bilder keinen alternativen Text haben. Es gibt ein Etikettenproblem, bei dem ein ausgefülltes Formular keine Beschriftung aufweist. Es zeigt Ihnen auch auf dem Bildschirm, wo diese Probleme sind und was sie tatsächlich bedeuten. Wenn Sie die Informationen erweitern, erfahren Sie mehr über den Farbkontrast, wo Sie erfahren können, wo dies ein Problem ist, welche Webstandards es tatsächlich definieren, das ist auch eine gesetzliche Anforderung, und dann tatsächlich, welcher Teil der Seite dieses Problem hat und wie man es beheben kann. Das ist großartig, denn das gibt Ihnen nicht nur einen Bericht, sondern erzählt Ihnen auch die nächsten Schritte. Aber im Moment ist es wichtig zu wissen, dass diese automatisierten Tests nur einen Teil der Seite erhalten. Sie sehen die Seite oder sie erleben die Seite auf eine Weise und Ihre Endbenutzer erleben die Seite in vielerlei Hinsicht. Das ist etwas zu überlegen. Computer können uns nicht sagen, wann etwas zugänglich ist. Sie müssen mit der Seite wie Ihre Endbenutzer interagieren. So finden Sie wirklich die Barrierefreiheitsprobleme heraus. Webhint ist auch ein Open-Source-Projekt, das tatsächlich auf Barrierefreiheit, Leistungsprobleme usw. testet . Es hat eine Browser-Erweiterung, aber wo ich es benutze, ist eigentlich interessanter, was in meinem Editor ist. Um etwas mit Accessibility Insights zu testen, müssen Sie die Website bereitstellen und dann dort testen. Dieser sagt dir, während du etwas baust, dass etwas schief läuft. Zum Beispiel hat das Eingabeelement, das hier keine Beschriftung hat, gerade eine quiggly Linie darunter. Wenn ich das in meinem Editor überlaufe, sagt es mir tatsächlich, dass jedes Eingabeelement ein Label benötigt. Ich mache nicht einmal die Fehler, die ich später testen muss indem ich diese Erweiterung in meinem Visual Studio Code-Editor habe. Installieren Sie diese beiden und Sie sind auf dem besten Weg tatsächlich einige richtige Barrierefreiheitstests durchzuführen. 4. Zugänglichkeit für Farbe und Text testen: In dieser Lektion werden wir über Text und Farbzugänglichkeit auf unserer Website sprechen, und wir werden lernen, dass das, was wir auf dem Bildschirm sehen , nicht das ist, was andere Leute sehen, und manchmal ist es ziemlich entmutigend zu sehen, wie Menschen unsere Produkte verwenden, aber es ist wichtig, dass wir sie bauen, dass sie auch für diese Umgebungen arbeiten. Werfen wir einen Blick auf unsere Website und unsere Test-Website jetzt und treten Sie die Reifen und sehen, wo wir tatsächlich Probleme mit der Farbzugänglichkeit finden. Das erste, was, wenn ich eine Website auf Probleme mit der Barrierefreiheit teste , ist, die Schriftgröße zu vergrößern. Dies ist ziemlich einfach mit Command plus oder Control plus gemacht. Die meiste Zeit, die Sie wahrscheinlich auch in der Vergangenheit erlebt haben, gehen Sie bis zu 125 Prozent und Sie sind glücklich, dass alles funktioniert, aber das ist nicht genug. Die meisten Endbenutzer da draußen, die wirklich ein Zoomen benötigen, gehen bis zu 400 Prozent. Das ist eigentlich eine gesetzliche Anforderung ab Juli dieses Jahres im Jahr 2021, dass man mit 400 Prozent Zoomfaktor erreichbar sein muss. Das bedeutet, dass Sie nur in eine Richtung scrollen können und Sie nicht in zwei Richtungen scrollen müssen , um zu sehen, was mit der Website vor sich geht. Wenn Sie einen Blick auf diese Website werfen jetzt, es tatsächlich ziemlich gut in diesem Zoomfaktor. Aber einige der Dinge, die auf dem normalen Zoomfaktor ziemlich cool aussehen , werden in diesem wirklich ärgerlich. Wie wir diese Animation auf der Navigation hier, die ziemlich cool aussieht, wenn ich auf meinem normalen Zoom-Modus bin, aber es ist wirklich super nervig, wenn ich tatsächlich in diesen 400-Prozent-Modus zu bekommen. Auch wenn ich auf all diese Dinge klicke und glätte, scrollt dieser nach unten, was gerade in CSS eine wirklich coole Sache ist. Aber in einem 400-Prozent-Modus ist das eigentlich ärgerlicher als alles andere. Eine andere Sache, die ich mag, ist tatsächlich die Größe des Bildschirms zu ändern und sicherzustellen, dass alles gut fließt. Dazu öffne ich die Entwicklertools und das erste, was ich tue, ist ein Mobiltelefon zu simulieren. Das ist sowieso großartig, denn die meisten Endbenutzer da draußen werden ein mobiles Gerät haben. Dann können Sie sehen, wie Ihre Website Messen. Sie können hier bereits sehen, dass sich der Header nun in zwei Zeilen befindet und andere Elemente überlappt. Das ist schon hässlich, aber kein Problem mit der Barrierefreiheit. Aber wenn ich beginne, die Seite zu scrollen, plötzlich mein fester Header, der in normaler Auflösung cool aussieht überlagertplötzlich mein fester Header, der in normaler Auflösung cool aussieht, jetzt das Suchfeld und das bedeutet, dass es nicht wirklich funktioniert. Ausprobieren Ihrer Website in verschiedenen Auflösungen findet auch das. Sie können das auch zusammen setzen, wenn Sie nicht ein Mobiltelefon simulieren, sondern nur ein ansprechendes Design und stoßen die Schriftgröße, werden Sie tatsächlich feststellen, dass es alle verschiedenen Probleme in dieser Umgebung als auch. Das ist das erste, was zu tun ist, um zu sehen, ob Ihr Produkt tatsächlich für Menschen mit unterschiedlichen Bedürfnissen verfügbar ist. In diesem Fall, Menschen, die tatsächlich brauchen einen 400 Prozent Zoom. Sie sind mehr Menschen, als Sie denken, und sie sollten tatsächlich Ihre Website verwenden, Sie sollten sie nicht blockieren. Das nächste, was zu beachten ist, ist tatsächlich Kontrast und zu sehen, ob Sie genug Farbkontrast in allen Elementen haben, die Sie auf Ihrer Seite haben. Um das zu tun, gibt es zwei Möglichkeiten. Eine der Möglichkeiten ist, tatsächlich auf die Registerkarte Probleme zu gehen und die Probleme hier oben erscheinen unter diesem kleinen Symbol. Es steht, es sind sieben Ausgaben auf der Seite. Wenn Sie darauf klicken, werden Sie unter anderem herausfinden, dass es im Grunde zwei Dinge gibt , die nicht genug Kontrast haben, zwei Elemente. Sie klicken auf sie und Sie können sehen, es ist eine Li.high, die jetzt auf dem Bildschirm auch hier hervorgehoben wird. Es zeigt Ihnen, dass der Farbkontrast dafür nicht gut genug ist. Wir müssen etwas tun, um den Farbkontrast dort zu machen. Die andere ist ein p, das den ganzen Weg nach unten zum Bildschirm ist. Um zu diesem zu gehen, können Sie hier zu diesem Menü gehen und sagen, scrollen Sie in die Ansicht. Auf diese Weise siehst du, dass es tatsächlich die Fußzeile hier unten ist. Wenn Sie diese Probleme beheben möchten, wenn Sie sie im Browser selbst beheben möchten, ist das ebenfalls integriert. Es ist etwas, von dem viele Leute nichts wissen. Wenn Sie hier wieder zum p gehen, finden Sie, dass es einen Hintergrund, eine Vordergrundfarbe gibt. Wenn Sie auf die Vordergrundfarbe klicken, sehen Sie in der Farbauswahl einen Bericht, dass das Kontrastverhältnis 365 ist. Das ist nicht gut genug und es hat tatsächlich diesen kleinen Pfeil daneben, der sagt, dass es nicht gut genug ist. Sie können das jetzt auswählen. In der Farbauswahl erhalten Sie zwei Linien, die Ihnen sagen wie hoch Sie gehen sollten, um sicherzustellen, dass Sie genügend Kontrast haben. Sie können auch faul sein wie ich und klicken Sie einfach auf eine dieser Farben hier, die Ihnen tatsächlich empfohlen werden. Wenn Sie diese Option wechseln, sehen Sie, dass die Fußzeile jetzt eine bessere Färbung hat und dass es sich tatsächlich um eine gültige Farbe mit genügend Kontrast handelt. Der Browser sagt Ihnen nicht nur im Bericht, dass etwas los ist, sondern Sie können das Tool tatsächlich direkt verwenden, um es zu beheben und dann zu Ihrem CSS zurückkehren, eine andere Farbe einfügen und sicherstellen, dass die Zugänglichkeit für die Kontrasteinstellung davon. Das Issues-Panel zeigt uns offensichtliche Probleme, die da sind, aber es sieht die Website nur in einem Zustand. Es erkennt nicht wirklich, dass Menschen verschiedene Dinge auf der Website tun können , um verschiedene Zustände zu haben. Da kommt ein anderes Werkzeug ins Spiel, das den Inspektor nennt. Der Inspektor ist dieses kleine Pfeil-Ding hier oben. Wenn ich mich jetzt auf der Seite bewege, gibt es mir alle Informationen über die verschiedenen Tools. Es gibt mir die Dimensionen, es sagt mir, was es ist. Darauf werden wir in einer anderen Lektion zurückkommen. Es zeigt mir auch das Layout davon. Wenn es wirklich coole Layout-Probleme hat, die Sie dort auch finden und inspizieren können. Aber noch wichtiger ist, es sagt mir tatsächlich die Farbprobleme von etwas als auch. Es zeigt mir, dass der Kontrast dieses hier gut genug ist. Aber der Kontrast zum Beispiel zu dem Element, das wir vorhin betrachtet haben, dass auch das berichtete Themen-Panel nicht gut genug ist. Anstatt ein Häkchen zu bekommen, bekomme ich dieses Ausrufezeichen. Das Problem ist aber, dass der Inspektor nur wieder einen Zustand davon sieht. Wenn Sie zum Beispiel die Navigation hier nehmen, sagt es, dass dieses dunkelblau und weiß völlig in Ordnung ist, es gibt genug Kontrast. Aber wenn Sie sich daran erinnern, die Website zu benutzen, gibt es diesen Rollover-Zustand, der es tatsächlich zu einer anderen Farbe macht. Diese andere Farbe, ich weiß nicht, ob es jetzt zugänglich ist oder ob es genug Kontrast hat, denn sobald ich den Inspektor einschalte, löst er es nicht mehr aus. Sie können es umgehen, indem Sie die Zustandssimulation in den Entwicklerwerkzeugen verwenden. In jedem Element können Sie diese Zustandssimulation auslösen. Sie können zum Beispiel sagen, wie sieht es aus, wenn ich darüber schwebe? Jetzt hat es den Hover-Zustand, ohne dass ich mit der Maus darüber schweben muss. Auf diese Weise kann ich den Inspektor benutzen, um herauszufinden, ob er genug Kontrast hat. Wenn Sie jetzt darauf klicken und zum Farbwähler gehen, erfahren Sie, dass das Kontrastverhältnis nicht gut genug ist und Sie eine andere Farbe auswählen sollten. Dies ist interessant, wenn es darum geht, mit verschiedenen Elementen auf der Website zu interagieren. Aber was ist, wenn Benutzer tatsächlich eine andere Art haben, auf die Website zu schauen? Einer von ihnen wird Rendering-Bereich genannt. Sie können das tatsächlich aktivieren, indem Sie zum Punkt-Punkt-Punkt-Menü gehen, zu weiteren Werkzeugen und Rendern wechseln. Auf diese Weise können Sie es dort unten einschalten. Es macht alle Hardcore-coole Sachen zum Testen auf Leistung. Aber noch wichtiger ist, wenn Sie den ganzen Weg nach unten scrollen, können Sie verschiedene Modi der Website auf diese Weise simulieren. Jetzt habe ich einen dunklen Modus hier auf meinem Computer, weil ich den dunklen Modus mag, wie es die meisten Leute heutzutage tun, aber andere Leute haben einen Lichtmodus. Normalerweise würde ich zum Betriebssystem gehen, mein Betriebssystem in den Lichtmodus verwandeln und sehen, wie die Leute die Website sehen würden. Aber diese Simulation im Rendering-Schmerz ermöglicht es Ihnen, dies auf eine einfachere Art und Weise zu tun. Sie können nun zum bevorzugten Farbschema wechseln und es auf Licht schalten. Natürlich sind einige der Dinge, die wir für okay gehalten haben, vielleicht nicht mehr in Ordnung. Man kann das hier unten sehen, wo der Kontrast für das Gelb und das Rot im dunklen Modus völlig in Ordnung war, aber im Lichtmodus ist es nicht mehr oder das nehme ich gerade an. Aber auch hier kann mir der Problembereich helfen. Ich gehe jetzt und simulieren den Lichtmodus und dann lade ich die Seite neu. Sie sehen, dass wir viel mehr Dinge haben, die tatsächlich ein Farbkontrastproblem haben, als wir zuvor hatten. Wir hatten zwei Elemente vorher, und jetzt bekamen wir sechs Elemente, weil wir in einen anderen Modus der Website gewechselt haben. Unser Farbschema, unser Lichtthema, muss auch auf Zugänglichkeit und Farbprobleme getestet werden. Dies ist nicht das Ende, weil Benutzer alle Probleme mit ihren Augen haben , die wir sicherstellen wollen, dass wir auch arbeiten. In den Entwickler-Tools haben Sie eine Sache namens emulieren Sehschwäche, die Ihnen erlaubt, die Website zu sehen, wie Menschen mit unterschiedlichen Sehstörungen würden die Website jetzt sehen. Das erste, was Sie ausprobieren möchten, ist verschwommenes Sehen. Das ist, als wäre meine Brille schmutzig oder die Sonne scheint auf meinem Handy. Ich kann sofort sehen, dass es hier einige Probleme gibt, wie der Header gerade abgestimmt aussieht, dieser Schlagschatten, der ziemlich cool aussieht, wenn ich es richtig sehen kann. Eigentlich hilft es der Sache nicht, sondern behindert sie. Auch die Schriftgrößen könnten eigentlich nicht so groß sein , wie ich möchte, dass sie richtig verwendbar sind. Das ist etwas, das Ihnen die verschwommene Vision bereits schenkt. Sie können dann auch auf verschiedene Emulationen wie, verschiedene Farbblindheit wie Protanopie, Deuteranopie und so weiter und so weiter. Aus deinem plötzlichen Grund merkst du, dass Grün, Gelb und Rot keinen Sinn ergeben, weil sie nicht jeder als grün, rot und gelb sieht. Sie können auch alle Farben ausschalten, um zu sehen, ob tatsächlich genug Kontrast auf allen Dingen vorhanden ist , wenn Menschen überhaupt keine Farben sehen können. Das sind nur ein paar Möglichkeiten, wie man anfängt. Jetzt bist du dran. Ich habe Ihnen ein paar Dinge gezeigt, wie Sie Probleme beheben können. Sehen Sie sich zum Beispiel das Rot, Grün und Gelb an, was Sie dagegen tun können. Machen Sie etwas Größenänderung, finden Sie einige weitere Probleme heraus. Es gibt mehr Probleme in dieser Website, an die Sie vielleicht noch nicht gedacht haben, wenn es um Farben und Text geht. Sie jetzt, was zu tun ist, klicken Sie auf die Registerkarte Probleme und tatsächlich gibt Ihnen die Probleme Informationen. Sie können den Inspektor verwenden, und Sie können die Simulation verwenden, um Dinge auszuprobieren. Sie können das auf jedem Produkt da draußen tun, tatsächlich Produkte, die nicht im Web sind, dies läuft auf Ihrem lokalen Computer. Es ist ein einfacher Weg für Sie, um sicherzustellen, dass alle Farben, die Sie ausgewählt haben, sind nicht nur hübsch, sondern auch zugänglich. 5. Zugänglichkeit für die Interaktion testen: In dieser Lektion werden wir über die Interaktion mit einer Website sprechen und sicherstellen, dass wir zugänglich sind. Es gibt viele Möglichkeiten, wie Menschen mit Ihrer Website interagieren. Die Maus ist am häufigsten, aber es gibt auch Tastaturbenutzer, es gibt Leute, die einfach ihre Augen blinzeln können, um von einem Abschnitt zum anderen zu gehen. Sie müssen sicherstellen, dass Ihre Website für alle diese Sinn macht. Wir werden darüber sprechen, wie man das testen kann, und wie man über Probleme, die sich auf einer bestimmten Website befinden, und wie man sie beheben kann. Werfen wir einen Blick auf unsere Website und sehen, wie es für jemanden funktioniert, der nur eine Tastatur verwendet, die Bildschirmlese-Benutzer und nur Menschen, die keine Maus verwenden können. Wir können es selbst testen, indem wir einfach nicht mit unserer Maus, sondern mit der Tastatur. Der einfachste Weg ist, die Tabulatortaste zu verwenden, um von einem Element zum anderen zu wechseln, weil das auch Leute tun. Es gibt mehr weiterentwickelte Dinge wie Eingabetaste, um Formulare und Raum zu senden , um durch verschiedene Abschnitte zu gehen. Aber das müssen wir nicht eingehen, aber das können Sie später selbst nachsehen. Wenn ich gerade durch die Seite blättere, markieren Sie zuerst das Suchfeld, und es hat diesen Rahmen um ihn herum. Viele Leute denken, dass dies unser Schlüssel ist. Das ist sehr notwendig, schalten Sie das nicht aus. Viele Leute werden Ihnen dafür danken. Gehen Sie auf die Schaltfläche Go, und dort werde ich versuchen, zurückzukehren, wenn das das Formular sendet. Es sendet das Formular ab, es geht nirgendwo jetzt, dass' warum ich einfach nach unten scrollte. Aber es funktioniert tatsächlich mit einer Tastatur, also sollten wir dort glücklich sein. Wenn ich erneut die Registerkarte drücke, ist das erste, was ich tue, tatsächlich durch die Links auf der Seite zu gehen, und das ist eine seltsame, denn im Wesentlichen bedeutet das, dass dieses Menü hier oben nicht im Fluss ist, und es sollte im Fluss sein da es optisch sinnvoll ist , diesen zu verwenden, um zu den Abschnitten auf der Seite zu gehen. Mit einer Tastatur bin ich bereits auf der Seite. Wenn ich jetzt weiter oben gehe, weiß ich nicht, wo ich bin, weil das Menü nur einen Hover-Zustand hat. Es hat keine Fokuszustände. Mit einer Tastatur, wenn ich darauf zugreife, bekomme ich den Fokusstatus, mit einem Hover bekomme ich nur einen Mauszustand. Ein Tastaturbenutzer würde nicht wissen, wo sie im Moment sind, außer zu wissen, dass sie auf einem Link sind und ein Bildschirmleser würde Ihnen vorlesen, dass Sie auf Link, aber Sie sind nicht ganz sicher, dass Sie im Menü gerade jetzt sind, aber irgendwo Sonst. Das nächste, was hier zu erkennen ist, ist, dass, wenn ich durch das Menü gehe, ich wieder in einem anderen Suchfeld bin, ich bin gerade in der anderen Box, aber es gibt Schlüssel darüber. Was ist da los? Diese Tasten können nicht auf die Tastatur zugegriffen werden. Mit einer Maus kann ich auf die 200, die 50 und die 100 klicken . Mit einer Tastatur kann ich nicht darauf zugreifen. Tabbing wieder bringt mich nicht zu spenden Button, aber tatsächlich bringt mich zur Hauptnavigation. Sie sehen, dass es einige Probleme auf dieser Website gibt, die mit der Tastaturnavigation zu tun haben, und jetzt versuchen wir herauszufinden, warum. Nun, das Werkzeug, das wieder verwendet werden soll, ist der Inspektor, wir haben das früher versucht, um über Farbprobleme herauszufinden. Jetzt können wir es verwenden, um tatsächlich über Interaktionsprobleme zu erfahren. Wenn ich zum Beispiel auf das Eingabeelement gehe, sagt es mir, dass es eine Rolle des Suchfelds ist und dass es Tastatur fokussierbar ist. Deshalb könnte ich es mit der Tastatur angreifen. Es hat aber keinen Namen. Der Grund dafür ist, dass etwas war, das von den Problemen früher gekennzeichnet wurde, dass wir ein Label im Quellcode haben, aber es ist nicht mit dem Element verbunden. Die Eingabe befindet sich nicht innerhalb des Suchfelds, oder die Beschriftung hat kein for-Attribut und die Eingabe hat keine ID. Dies ist ein Etikett, das tatsächlich falsch verwendet wird und keinen Sinn ergibt. Um das zu beheben, können Sie das selbst tun oder sich den fixen Teil der Website ansehen , ist ziemlich einfach. Eine interessante Sache ist jedoch, wenn Sie an die automatisierten Tests zurückdenken, die wir früher hatten, dass das Formular hier, von dem wir gerade gelernt haben, als völlig unzugänglich Tastaturbenutzer ist eigentlich nicht gekennzeichnet ist, weil wir hier eine Beschriftung verwendet, und wenn Sie auf die Beschriftung klicken, können Sie das Formularfeld hervorheben, aber es ist nicht Teil eines Formulars. Es wusste nicht, dass diese Tasten nicht zugänglich sind, weil sie keine Knöpfe sind, sie sind einfach etwas. Was sind sie? Wieder verwenden wir den Inspektor und wir rollen über ihn, und wir finden heraus, dass die Rolle generisch ist und dass es nicht Tastaturfokussierbar ist , denn wenn Sie sich den Quellcode ansehen, finden wir tatsächlich heraus, dass es sich um DIFS handelt. Diese DIFS sind etwas, das Leute gerne tun, weil sie super stylabel sind und sie haben kein Styling out of the box wie diese Umrisse zum Beispiel, aber sie bedeuten nichts. Wie habe ich sie tatsächlich anklickbar gemacht, um diese verschiedenen Dinge auszuwählen? Sie können das auch ausprobieren, indem Sie zu den Ereignis-Listern gehen und dem folgen, und Sie können sehen, dass ich etwas JavaScript geschrieben habe, um sie in verschiedene Schaltflächen zu verwandeln. Aber mit einem Tastaturbenutzer oder ohne JavaScript wäre dieses Formular überhaupt nicht zugänglich. Stattdessen hätte ich Tasten oder Optionsfeld verwenden sollen. Sehen Sie sich die feste Version der Website an, um zu sehen, wie Sie damit umgehen können. Sie werden oft feststellen, dass Sie etwas zusätzliches JavaScript schreiben , nur weil Sie den falschen HTML verwendet haben. Die meiste Zeit ist es nicht notwendig, das zu tun, weil JavaScript immer zerbrechlicher ist als HTML, weil HTML Ihnen viele kostenlose Sachen direkt aus dem Browser gibt, und Sie können das in Entwicklertools auch hier herausfinden. Im Allgemeinen können Sie durch alle Elemente auf der Seite gehen und herausfinden, ob ihre Tastatur fokussierbar ist, welchen Namen und welche Rolle sie haben. Aber wenn Sie das über das gesamte Dokument wissen möchten, können Sie auch hier die Eingabehilfen verwenden. Das Dokument, das Sie haben, kommt in zwei Formen. Es kommt in den DOM-Baum , der hier tatsächlich generiert wird , der von Watson über HTML kommt und auch, was JavaScript mit dem HTML macht. Was auf dem Bildschirm ist und wie die Reihenfolge des Bildschirms ist, ist auch das, was das CSS uns sagt zu tun. Zum Beispiel haben wir erkannt, dass der Inhalt hier aus irgendeinem Grund tatsächlich vor diesem ist, aber er schaut sich immer noch an, und wir wissen nicht, wie wir das machen sollen. In der Barrierefreiheitsstruktur, das ist etwas, das eine Hilfstechnologie wie ein Bildschirmlesegerät bekommen würde. Dies ist eine weitere Ansicht der Seite, die tatsächlich zusammengestellt wird , bevor der Rest des Dokuments vorhanden ist. Was auch immer Sie in Ihrem HTML und Ihrem JavaScript später tun, landet möglicherweise nicht dort. Wenn Sie die verschiedenen Elemente auf der Seite durchlaufen und sich die Eingabehilfen daneben ansehen, können Sie herausfinden, ob etwas generisch ist, es einen Namen hat oder eine Rolle und ob es ist auch die Tastatur zugänglich. Das ist ein sehr tief verwurzter Weg, um das ganze Dokument zu durchlaufen. Da die Hilfstechnologie durch die Quellreihenfolge geht , wird in der Quelle des Dokuments, dem HTML-Dokument, zuerst ausgelesen, und zweitens, und so weiter und so weiter. Auf dem Bildschirm könnte das völlig anders aussehen, und wir wissen es nicht, es sei denn, wir schauen auch in die Quelle, was ziemlich entmutigend ist, weil niemand HTML lesen will. Wir haben dieses kleine Tool namens „Source Order Viewer“ gebaut. Wenn diese eingeschaltet ist, können Sie tatsächlich auf eines der Elemente hier klicken und Sie können die Quellreihenfolge für Sie anzeigen lassen. Wenn Sie in den Abschnitt gehen, erfahren wir jetzt, dass der Abschnitt mit dem Inhalt der erste ist, die Navigation ist die zweite, und die Hauptnavigation ist die dritte, was wir auch früher verwirrend fanden. Dies ist etwas, das Sie verwenden können, um sich über diese kleinen Probleme zu informieren. Eine andere Sache, die ich Ihnen zeigen möchte, ist, wir früher über Accessibility Insights gesprochen haben, und es hat eine wirklich coole Funktion, die Ihnen beim Testen der Tastaturbarrierefreiheit hilft. Zusätzlich zu dem FastPass, den wir früher verwendet haben, haben Sie auch Ad-hoc-Tools. Diese Ad-hoc-Tools sind Überlagerungen über die Seite, mit denen Sie zeigen können, was auf der Seite in Bezug Tastaturinteraktion und in Bezug auf andere Dinge wie Farbe passiert. Das erste, was man ausprobieren muss, sind Wahrzeichen. Landmarks ist eine wirklich gute Sache, um Tastaturbenutzer zu geben , weil das bedeutet, dass sie direkt zu diesem Abschnitt springen können. Wenn ich sage, dass ich zum nächsten Navigationselement gehen möchte, wenn das Navigationselement eine Rolle der Navigation hat, kann es es finden. Wenn es nur ein DIF ist, kann es es nicht finden. Dies ist wirklich gut für Tastaturbenutzer und Bildschirmlese-Benutzer haben , um schneller durch Ihre Website zu navigieren. Ein weiteres Interessantes ist die Tabstopps hier. Wie wir es früher durchgemacht haben, konnten wir es einfach selbst finden, aber die Tabstopps sind jetzt visualisiert, so dass ich herausfinden kann, dass ich zuerst in Suchfeld bin, dann Schaltfläche hinzufügen und so weiter und so weiter. Es wird nicht über die Seite überlagert. Diese Seite ist nicht so komplex, aber wenn Sie in Apps oder sehr komplexen Seiten mögen, kann das wirklich brutal aussehen. Es ist eine gute Möglichkeit, einen Screenshot zu erstellen, um den Leuten zu zeigen, wie viel Arbeit es für Bildschirmlesebenutzer oder Tastaturbenutzer ist, um Ihre Anwendung zu durchlaufen. Legen Sie das in ein Dokument, legen Sie das in eine Präsentation und zeigen Sie uns, das ist, was wir getan haben. Können wir Zeit für die Ingenieurarbeit haben, um es zu reparieren? Natürlich, wenn Sie die Quellauftragsanzeige verwenden und Sie es selbst mit der Registerkarte ausprobieren, müssen Sie das nicht wirklich tun. Jetzt sind Sie dran, werfen Sie einen Blick auf die Entwickler-Tools, werfen Sie einen Blick auf die Quelle oder den Betrachter. Probieren Sie diese Websites aus, die Sie haben. Probieren Sie Ihr Produkt mit einer Tastatur aus. Erfahren Sie mehr über die Tastaturnavigation Tabbing ist nur eines dieser Dinge. Einschalten der Leertaste oder das Drücken von „Enter“, um Formulare zu senden, ist eine andere. Erfahren Sie, wie Ihre Endbenutzer, die tatsächlich eine Tastatur benötigen, mit Ihrer Website interagieren, und werfen Sie einen Blick auf Ihre Produkte und sehen Sie, wo sie stecken bleiben. Verwenden Sie diese Werkzeuge zu Ihrem Vorteil und Sie werden ein schönes zugängliches Produkt haben. 6. Zugänglichkeit für Medien und Bild testen: In dieser Lektion werden wir über Medien sprechen, hauptsächlich Bilder und Animationen auf Ihren Websites. Diese Dinge sind großartige Dinge, aber sie können eine massive Barriere sein, also werden wir herausfinden, wie wir sie verantwortungsvoll einsetzen können. Wenn es um Medien und Zugänglichkeit geht, ist es eigentlich wichtiger, was Sie mitnehmen können als das, was Sie hinzufügen können. Wenn Sie ein Bild haben, sollten Sie sicherstellen, dass es einen alternativen Text gibt. Man muss eigentlich davon ausgehen, dass das Bild nicht gesehen werden kann. Es kann entweder nicht geladen werden oder Leute können es nicht sehen, so dass der alternative Text viel Sinn macht. Dasselbe mit Video. Einbetten eines Videos ist heutzutage ziemlich einfach, aber es ist eigentlich gut, wenn es auch eine Transkription hat. Die meisten Videodienste wie YouTube oder andere erlauben es Ihnen auch, dies automatisch zu tun. Das ist etwas zu überlegen, um tatsächlich jedes Mal einzuschalten. Natürlich wird es wirklich toll sein, wenn du eine Transkription für das Video hattest und stattdessen auftauchst, aber es ist etwas, das jetzt ein zusätzlicher Schritt zu machen ist. Wenn es um Animationen geht, ist es auch eine andere Sache, wo es mit Mäßigung kommt. Es ist, als wäre es toll, diese zu haben, aber sie können wirklich verwirrend für viele Leute sein. Wir werden jetzt einen Blick darauf werfen, was unsere Demo-Website hat, warum ich es getan habe und wie ich es tatsächlich zugänglicher machen kann. Auf der Demo-Seite, die wir für diese Klasse haben, haben wir tatsächlich ein paar Animationen. Alle von ihnen frivol, aber der Grund ist, dass ich sie benutzen wollte. Sie alle wissen, dass Sie Stunden mit CSS-Animationen verbringen können , um Dinge zu optimieren. Es macht eine Menge Spaß. In meinem Fall hier haben wir die Animation auf der Navigation, die nur das Highlight zeigt, das ziemlich cool aussieht. Wenn Sie tatsächlich zu etwas scrollen, scrollt es tatsächlich reibungslos nach unten, anstatt nur zu ihm zu springen. Der Abschnitt, auf den Sie klicken, blinkt auch ein wenig. Ein „Mehr“ -Button wird hier auch größer, wenn ich darauf gehe. Alles scheint frivol, aber manchmal kann Animation tatsächlich einen Unterschied machen wo ein Kauf-Button oder etwas auftaucht, wo Sie gehen, macht Sinn für Sie. Das Problem ist aber gerade jetzt, dass viele Benutzer dadurch verwirrt werden können. Die andere Sache im Inneren, die ich habe, sind viele Bilder wie Bilder von Katzen oder Hunden, was großartig ist, aber nicht alle von ihnen haben alternative Texte, wie wir früher herausgefunden haben. Auch hier ist der schnellste Weg, um dies herauszufinden, den Inspektor zu verwenden. Wenn ich das jetzt übersetze, habe ich eigentlich keinen Namen und keine Rolle. Es ist nur Rollenbild, es hat Tastatur fokussierbar, aber es gibt keinen Namen. Dieses Bild hat einen alternativen Text, also sagt es eigentlich Foto von Socke, das ist der Hund unserer Familie, der auf die Kamera schaut. Das macht Sinn. Wenn ich nicht sehen kann, habe ich eine Erklärung, dass dieses Bild da ist. Es ist eigentlich ziemlich einfach herauszufinden, ob ein Bild einen alternativen Text hat oder diesen nicht verwendet, und es ist ein einfaches Problem, das zu vermeiden ist. Darüber haben wir bereits in der Einleitung gesprochen. Hoffentlich haben Sie auch in naher Zukunft darüber nachgedacht , wenn Sie selbst neue Dinge machen. Wenn es um die Animationen geht, gibt es einen sehr wichtigen Schritt, den wir heutzutage berücksichtigen müssen , ist, dass die meisten Betriebssysteme mit einem Modus namens reduzierte Bewegung kommen, Sie Animationen im -Betriebssystem. Das ist zweifach. Einer ist für die Leistung. Viele Leute erkannten, dass die Akkulaufzeit ihres Mobiltelefons schnell stirbt, wenn Websites viele Dinge animieren. Natürlich ist es ein Problem mit der Barrierefreiheit. Menschen mit einem geklopften Kopf werden durch Animationen übel. Menschen können Probleme beim Lesen haben, wenn Animationen sie ablenken, und Menschen können generell abgelenkt werden und wissen nicht mehr, wo sie sich befinden, sobald etwas anfängt zu blinken. All die Dinge, die wir dort reinlegen, sollten einen Scheck neben ihnen haben , um sicherzustellen, dass sie nur dann auftauchen, wenn sie wirklich gesucht werden. Sie können dies in CSS tun, indem Sie eine Medienabfrage namens Reduced Motion verwenden. Auch hier können Sie dies testen, indem Sie zum Betriebssystem gehen und alle Animationen ausschalten und zu Ihrer Website zurückkehren und sie neu laden. Aber wir wollten es Ihnen einfacher machen, daher haben wir diese auch zu einer der Emulationen im Renderfenster gemacht. Sie gehen zu bevorzugt reduzierte Bewegung, und Sie sagen, lieber reduzierte Bewegung, reduzieren. Jetzt klicken Sie auf die Navigation, Sie werden sehen, dass es springt. Das fließt nicht mehr. Es führt nicht das verlangsamte Scrollen nach unten zum anderen Abschnitt. Es springt einfach dazu, was für uns hässlich aussieht, aber für jemanden, der durch Animation verwirrt ist, ist es eine sehr, sehr schöne Sache zu haben. Die Navigation zeigt immer noch die Animation an, das ist also ein Problem. In der festen Version der Seite tut es nicht mehr, und Sie können einen Blick werfen, wie ich das gemacht habe. Okay, es gibt einige Dinge in Entwicklertools, die Ihnen helfen, Ihre Medien-Zugänglichkeit zu überprüfen. Sie können den Inspektor verwenden, um zu sehen, ob ein Bild einen alternativen Text enthält. Sie können auch die Simulation zur Reduzierung der Animation verwenden, um sicherzustellen, dass Ihre Animationen nur mit denen angezeigt werden, die Animationen verwenden können und möchten. Eine Sache, die Sie vielleicht gesehen haben, dass ich eigentlich noch nicht gesprochen habe, ist, dass Sie in den Elementen , im HTML, gerade hier unter diesem Bild eine verrückte Zeile haben. Das bedeutet, dass es dort ein Problem mit der Barrierefreiheit gibt. Wenn Sie Umschalttaste darauf klicken, springen Sie tatsächlich zum Eingabehilfen, zur Liste der Probleme, und dieser sagt Ihnen genau, was mit diesem nicht stimmt. Dies ist jedoch der HTML-Code, der bereits generiert wurde, das ist bereits erledigt. Was ist, wenn Sie das tun möchten, während Sie HTML schreiben? Dies bringt uns zurück zu etwas, über das wir früher gesprochen haben, die Webhint-Erweiterung für Visual Studio Code. Wenn Sie in Ihren Editor gehen, werden Sie die gleichen quiggly Zeilen unter problematischen HTML-Stücken sehen. Sobald Sie sie reparieren, dann werden diese Schnörkel tatsächlich verschwinden. Wieder, wenn Sie durch die Probleme Schmerzen gehen und Sie es direkt dort sehen möchten, können Sie den Mauszeiger darüber zeigen und Ihnen erklären, was das Problem in diesem Fall ist, dass dieses Bild keinen alternativen Text hat. Wenn Sie einen alternativen Text eingeben, verschwindet er. Das ist ärgerlich. Das ist nicht schön und es bedeutet tatsächlich, dass Sie es reparieren möchten. Das ist etwas, das Sie in Ihrem Visual Studio-Code und auch im Quell-Viewer der Entwicklertools installieren können, und zeigt Ihnen jetzt genau, wo Ihre Probleme sind. In dieser Lektion haben wir über Bilder ohne alternative Texte gesprochen , die Sie es schreiben sollten. Wir haben ein bisschen über Videos gesprochen, aber wir haben dort keine Demo gezeigt. Aber probieren Sie das aus. Laden Sie ein Video auf eine Plattform hoch, stellen Sie sicher, dass Sie ein Transkript erhalten, und sehen Sie, ob Sie das Transkript irgendwie mit dem Video zeigen können, wenn es nicht automatisch tut. Wir sprachen über reduzierte Bewegung, und wir sprachen über verschiedene Zustände, was Menschen auf Ihre Website schauen können. Stellen Sie sicher, dass Sie einen Blick auf reduzierte Bewegung werfen, denn es ist eine sehr mächtige Sache zu tun. Denken Sie darüber nach, wenn jemand keine Animationen sehen will oder keine Animationen sehen kann und Sie ihnen ein animiertes GIF mit zwei Megabyte senden, macht das keinen Sinn. Stellen Sie sicher, dass Sie diese CSS reduzierte Motion-Media-Abfrage auf gut verwenden, und stellen Sie sicher, dass Menschen nicht Dinge laden müssen , die sie nicht haben wollen und mit denen sie nicht umgehen können. 7. Letzte Gedanken: Nun, das ist das Ende dieser Klasse und ich hoffe, Sie haben etwas über Zugänglichkeit und Interaktion gelernt . Diese Barrierefreiheit kann nicht automatisiert werden, aber viele der Probleme treten nur auf, wenn Sie mit der Seite selbst interagieren, und Sie beginnen zu simulieren, wie Benutzer Ihre Website ändern, um ihre Bedürfnisse zu erfüllen. Da ist die Website, die wir dort haben, die ein paar Fehler hat, also schauen Sie sich diese an, versuchen Sie, sie selbst zu beheben, und werfen Sie einen Blick auf die feste Website als auch, und wenn Sie etwas finden, das ich nicht gedacht habe von, und ich bin mir ziemlich sicher, dass da etwas drin ist, an das ich nicht gedacht habe, kommen Sie zu den Diskussionsforen, sprechen Sie mit uns darüber und erfahren Sie mehr über Barrierefreiheit.