UX/UI-Design für Barrierefreiheit: Design einer brarrierefreien Website! | Michelle Chin | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

UX/UI-Design für Barrierefreiheit: Design einer brarrierefreien Website!

teacher avatar Michelle Chin, UX Designer, Founder - exploreUX

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      1:44

    • 2.

      Erleichterung, die man erreichen

      5:04

    • 3.

      KURSPROJEKT

      0:58

    • 4.

      Navigieren mit Motor

      8:37

    • 5.

      Bildung, Bildung, Impairments

      14:03

    • 6.

      Umstand von visuellen Elementen mit Farbblindheit

      5:01

    • 7.

      Umstand von visuellen Elementen ohne Vision

      5:34

    • 8.

      Comprehension von Text mit kognitiven Impairments

      3:27

    • 9.

      Erzählung von Audio und Video

      4:33

    • 10.

      Letzte Gedanken

      0:49

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

381

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Manchmal wenn du Begriffe wie „Erreichbarkeit“ oder „zugängliches Design“ hörst. Vielleicht hast die „Barrierefrei“ geklagt, aber die Ressourcen kompliziert oder schwer zu verstehen waren – und du wußt, wo man anfangen sollte.

In diesem Kurs werden wir die verschiedenen Aspekte In bei der Entwicklung von Barrierefreiheit berücksichtigen Durch Aktivitäten und Beispiele erhältst du ein Gefühl für die verschiedenen Arten von impairments und Hilfsgüter (AT), um es Menschen zu navigieren. Wir werden uns verwenden, welche Tools und Techniken du verwenden kannst, um deine Designs zugänglicher zu werden. Dieser Kurs ist ideal für diejenigen, die in UX/UI-Design einsteigen, sowie erfahrenere Designer:innen, die mehr über Barrierefreiheit wissen möchten.

Für das Kursprojekt wirst du einige Tools üben und die Techniken zur Entwerfung von barrierefreien.

Am Ende dieses Kurses wirst du in der Lage sind:

  • Erläuterung von verschiedenen Arten von Aufwärmen und wie es die Fähigkeiten der Menschen beeinflusst, um eine Website oder App zu navigieren
  • Explain wie Menschen mit Hilfstechnologie zur Navigation und zur Erkennung einer Website oder von App
  • Best Practices und Tools nutzen, um zugängliche Benutzererfahrungen zu erstellen

Bevor du es kennen wird, wird sich „zugängliches Design“ nicht einschüchtern und werde Teil deines natürlichen Prozesses sein!

Triff deine:n Kursleiter:in

Teacher Profile Image

Michelle Chin

UX Designer, Founder - exploreUX

Kursleiter:in

Hi everyone! Thanks for checking out my profile. I’m a user experience (UX) designer currently in Raleigh, North Carolina. I wandered into graphic design and, through a friend, was introduced to “Don’t Make Me Think” by Steve Krug. That book opened my eyes to the whole (new to me) world of usability! I fell in love with the idea and decided, “Yes, this is it! It’s what I want to do!”

 

Later, I earned a Masters from the University of Baltimore in Interaction Design and Information Architecture (a fancy way of saying “UX design”). Soon after, I started as a UXer working at agencies and in-house design teams for enterprise apps. 

 

I absolutely love UX and enjoy sharing ideas and my passion wi... Vollständiges Profil ansehen

Skills dieses Kurses

Design UX/UI-Design Webdesign
Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hi. Willkommen zu verstehen, Sie X Sie Ich für Barrierefreiheit entwickelt, Design und zugängliche Webseite. Sie können diese Klasse vielleicht auschecken, weil Sie ein Interesse an Barrierefreiheit haben, wo Sie mehr über barrierefreies Design erfahren müssen, aber nicht ganz sicher sind, wo Sie anfangen sollen. Nun, Sie sind hier an der richtigen Stelle. Mein Name ist das Shell-Schienbein, und ich bin User Experience Designer, und ich habe über 15 Jahre Erfahrung in der Arbeit mit Barrierefreiheit. Eigentlich bin ich ursprünglich aus der Gegend von Washington D. C. C., wo viele der Produkte, an denen ich gearbeitet habe, regierungsbezogen waren und tatsächlich zugänglich sein mussten . Ich habe Workshops zum Thema Barrierefreiheit gepostet und Kollegen darüber gesprochen. Im Allgemeinen liebe ich es, Menschen zu helfen, zu lernen, wie sie mit ihren Entwürfen stärker einbezogen werden können. In dieser Klasse werde ich die verschiedenen Aspekte der Benutzererfahrung aufschlüsseln, die Designer für Barrierefreiheit berücksichtigen müssen . Sie erhalten ein Gefühl für die verschiedenen Arten von Beeinträchtigungen und die Arten der Systemtechnologie , um Menschen mit diesen Beeinträchtigungen zu helfen, Sie werden sehen, welche Werkzeuge und Techniken Sie verwenden können, um Ihre Entwürfe leichter zugänglich zu machen, und schließlich lernen Sie XY y Best Practices zum Erstellen von barrierefreien Designs für diese Klasse kennen. Sie sollten mindestens grundlegende XY y Web-Design-Fähigkeiten haben. jedoch Sie könntenjedochein Anfänger zu einem erfahrenen beruflichen Verständnis sein. Barrierefreiheit ist eine wichtige Fähigkeit für alle. Für das Projekt. Kein Design. Eine Webseite mit Blick auf Barrierefreiheit. Ich ermutige Sie, zusammen mit dem Unterricht an Ihrem Projekt zu arbeiten. Dies gibt Ihnen die Möglichkeit, die Werkzeuge aus erster Hand auszuprobieren. Ich ermutige Sie auch, Ihre Fortschritte mit den anderen Schülern zu teilen und Fragen auf dem Weg zu stellen. Man lernt oft viel mehr und beschränkt Inspiration und andere Menschen Lösungen. Ich freue mich darauf, Ihre Fortschritte zu sehen und Ihre Fragen zu beantworten. Bist du bereit zu beginnen? Fangen wir an. 2. Erleichterung, die man erreichen: bevor wir in die Gestaltung für Barrierefreiheit springen, werde ich ein wenig über die Grundlagen der Barrierefreiheit sprechen. Und in dieser Lektion werde ich darüber nachdenken, was Barrierefreiheit ist, warum es wichtig ist und welche verschiedenen Arten von Beeinträchtigungen und wie Sie haben, dass der U X Y-Designer sich dem Design für Barrierefreiheit nähern kann. Barrierefreiheit ist das Design von Produkten wie Websites und APS, so dass sie unabhängig von den Fähigkeiten einer Person nutzbar sind. Im Kern geht es darum, sicherzustellen, dass Ihre Website oder APP so konzipiert ist, dass sie inklusiv ist. Laut dem Weltbericht über Behinderung der Weltgesundheitsorganisation haben im Jahr 2011 mehr als eine Milliarde Menschen in der Welt irgendeine Form von Behinderung. Das sind etwa 15% der Weltbevölkerung, oder das Dreifache der gesamten Bevölkerung der Vereinigten Staaten. In dem Bericht heißt es auch, dass zwischen 110 und 190 Millionen Menschen sehr große Schwierigkeiten beim Funktionieren haben . Wenn wir die Barrierefreiheit im Auge , können viele, viele Menschen von unseren Websites und Produkten profitieren. Es gibt drei Arten von Beeinträchtigungen dauerhaft, das ist eine Beeinträchtigung, die unbegrenzt bleibt, und einige Beispiele dafür sind Blindheit, eine fehlende Gliedmaße, traumatische Hirnverletzung oder Arthritis vorübergehend, was eine Beeinträchtigung ist, die von kurzer Dauer ist. Einige Beispiele sind Ah, gebrochener Arm, eine Handverletzung oder Beeinträchtigungen durch Operationen oder medizinische Behandlungen. Und schließlich gibt es situativ, was eine Beeinträchtigung ist, die aufgrund der Situation verursacht wird, in der Sie sich befinden. Und einige dieser Beispiele könnten eine laute Bar enthalten, und Sie können den Fernseher nicht hören, wo Sie versuchen, Ihr Telefon in hellem Sonnenlicht zu verwenden. und Eltern könnten Ihre Fähigkeit behindern, Websites zu navigieren oder Inhalte auf ihnen zu verstehen , um zu verstehen, was eine Behinderung ist. Ich werde dieses Zitat aus der Präambel der UN-Konvention über die Rechte von Menschen mit Behinderungen lesen . In der Präambel wird erwähnt, dass Behinderung ein sich entwickelndes Konzept ist und dass Behinderung aus der Interaktion zwischen Personen mit Beeinträchtigungen und Haltungen und Umwelthindernissenresultiert aus der Interaktion zwischen Personen mit Beeinträchtigungen und Haltungen und Umwelthindernissen , die ihre volle und effektive Beteiligung an der Gesellschaft auf einem gleiche Basis mit anderen. Was bedeutet das für U Ex? In Bezug auf die Benutzererfahrung? Die Behinderung ist, dass die Interaktion zwischen einem Menschen und dem Computer, wenn jemand mit der Website oder Website interagieren kann , die Behinderung lebt mit der Erfahrung selbst und nicht mit dem Benutzer. Als U.X Y-Designer ist es unsere Verantwortung, diese Hindernisse zu beseitigen, damit Sie unabhängig von Ihren Beeinträchtigungen Beeinträchtigungenauf die Website oder App zugreifen können. Als nächstes werde ich ein wenig darüber reden, wie wir für Barrierefreiheit entworfen haben. Wenn es darum geht, für Barrierefreiheit zu entwerfen, gibt es Standards, die Sie befolgen können. Vielleicht haben Sie von Abschnitt 508 gehört, und dies ist ein Abschnitt des Gesetzes über die Rehabilitation von Arbeitskräften . Es legt die Anforderungen für zugängliche Informations- und Kommunikationstechnologie oder I C T fest. Es ist eine Verordnung, die jede Bundesbehörde befolgen muss, wenn Ihr Cider-Produkt von der Regierung verwendet wird und mehr als wahrscheinlich drei benötigt Abschnitt fünf entfernt Konformität. Im Januar 2018 sind die Richtlinien für die Gewichtsaktualisierung von Section 5 in Kraft getreten. Diese Standards enthalten Richtlinien, um mit unserer sich ständig verändernden Technologie Schritt zu halten, und es geht auf einen CAG-Zwei-Punkt zurück. Oh, ein weiterer Standard sind die Richtlinien für die Barrierefreiheit von Web-Inhalten oder was? CAG 2.1. Es ist ein nichtstaatlicher Standard. Stattdessen werden diese Standards für die Barrierefreiheit im Web vom World Wide Web Consortium oder W drei Cfestgelegt oder W drei C und vom Konsortium im Juni 2018 empfohlen. Die CAT-Richtlinien haben drei Konformitätsebenen, die meisten Kriterien, und die Richtlinien haben nur eine Konformitätsebene. Einige Kriterien haben jedoch mehrere Ebenen für die Kriterien. Mit mehreren Ebenen können Sie sich die Ebenen auf diese Weise vorstellen. A, die eine Basislinie ist. Betrachten Sie es als C Klasse in der Schule, Double A ist ein besseres Niveau der Zugänglichkeit, und Triple A ist die höchste Stufe der Zugänglichkeit. Aber in den meisten Situationen reicht es aus, auf Doppel-A zu zielen. In einem typischen Prozess der Erstellung einer Website oder App. Da ist die Entwurfsarbeit. Dann ist es codiert und schließlich wird es getestet. Der Prozess der Einbeziehung der Barrierefreiheit liegt nicht nur in der Verantwortung von Designern. Entwickler müssen sicherstellen, dass ihr schreibbarer Code verfügbar ist, und Testingenieure müssen ihre Sorgfaltspflicht durchführen, um zu bestätigen, dass die Website oder das Produkt zugänglich ist . jedoch darin, Unsere Aufgabe bestehtjedoch darin,proaktiv im Hinblick auf die Barrierefreiheit zu gestalten, um den Prozess der Implementierung von Barrierefreiheit zu vereinfachen. Die Grundlagen unserer Rolle als U. X Y Designer ist es, sicherzustellen, dass Benutzer auf der Website navigieren und deren Inhalte verstehen können. Für diesen Kurs habe ich die Lektionen nach Navigation und Verständnis aufgeteilt. Jede Lektion baut auf Informationen aus der vorherigen auf, daher empfehle ich Ihnen dringend, jede Lektion in der Reihenfolge zu beobachten. Wenn Sie mehr über die Richtlinien und Grundlagen der Barrierefreiheit lesen möchten, schauen Sie sich die Ressource ist Abschnitt I hat einige hilfreiche Links dort zur Verfügung gestellt. 3. KURSPROJEKT: Das Projekt für diese Klasse ist die Gestaltung einer zugänglichen einseitigen Website über Ihr Lieblingsessen . Sie werden die Webseite nicht überstreichen, aber Sie erstellen das Design beim Entwurf der Seite. Sie erhalten die Möglichkeit, einige der Tools auszuprobieren und barrierefreie Designtechniken anzuwenden. Ich ermutige Sie, mit einem groben Design Ihrer einseitigen Website zu beginnen und dann nach jeder Lektion auf das Design zu generieren . Auf diese Weise Annäherung an Barrierefreiheit für diese Klasse nicht so entmutigend erscheinen. Sie benötigen Sketch, Adobe Illustrator oder Adobe X'd oder eine andere Webdesign-Software, mit der Sie vertraut sind . Es gibt einige andere Tools, und Ressource ist, die Sie benötigen, und ich werde diese in das Projekt einbeziehen. Ressource ist Bereich, den Sie sofort einrichten. Sie nicht, Ihre Arbeit zu posten, während Sie auf Ihre Entwürfe für den Unterricht wiederholen VergessenSie nicht, Ihre Arbeit zu posten, während Sie auf Ihre Entwürfe für den Unterricht wiederholen. Ah, großer Teil des Verständnisses von Barrierefreiheit besteht darin, den Inhalt vor und nach einer Tuller-Technik zu sehen und zu sehen, wie andere ihre Design-Lösungen für Barrierefreiheitnäherten Barrierefreiheit 4. Navigieren mit Motor: bevor wir in die Navigation mit motorischen Geschicklichkeitsstörungen springen, möchte ich ein wenig über die Navigation im Allgemeinen sprechen, also ist die Navigation der Prozess der Bewegung durch diese Seite. Zum Beispiel, wenn ich auf Online-Shopping-Website bin, navigiere ich durch die Optionen für Schuhe und den tatsächlichen Schritt für Schritt Prozess der Kauf dieser Schuhe. Bei der Navigation geht es auch darum, sich daran zu orientieren, wo Sie sich auf der Website befinden und wo Sie sich innerhalb einer Seite auf dieser Website befinden. Zum Beispiel, wenn ich auf der Online-Nachrichtenseite bin, bin ich in der Lage, die Hauptnavigation zu finden. Die Hauptüberschriften in der Fußzeilennavigation können sowohl von Beeinträchtigungen der motorischen Fähigkeiten als auch von Sehbehinderungen beeinflusst werden. In dieser Lektion werde ich eingehen, was einige dieser motorischen Beeinträchtigungen sind und wie Websites zugänglich gemacht werden können , damit sie keine Barriere mehr darstellen. Beeinträchtigungen der motorischen Fähigkeiten hemmen die Verwendung einiger Werkzeuge und Gesten. Einige Beispiele für Beeinträchtigungen der motorischen Fähigkeiten sind Zerebralparese, Arthritis, Karpaltunnel oder gebrochene Finger, um nur einige zu nennen. Die Beeinträchtigungen könnten die Verwendung einer Maus oder Tastatur erschweren. Zum Beispiel, wenn mein Finger verletzt wurde, könnte es schwierig sein, die Tasten an meiner Maus zu verwenden oder in einem normalen Tempo zu tippen. Beeinträchtigungen der motorischen Fähigkeiten könnten auch die Verwendung eines mobilen Geräts herausfordernd machen. zum Beispiel Wenn ichzum Beispielmeinen Daumen brechen würde, wäre das SMS nicht so einfach. Und auch nicht mit einigen Gesten, wie Kneifen zum Zoomen, um Menschen mit motorischen Geschicklichkeitsstörungen zu helfen. Es gibt eine Vielzahl von Hilfstechnologien zur Verfügung. Hilfstechnologie wird manchmal abgekürzt oder als T bezeichnet. Einige 80 enthält eine spezielle Maus, eine spezielle Tastatur oder nur mit einer Tastatur. beispielsweise Wenn ein Benutzerbeispielsweisenur eine Tastatur verwendet, kann er die Tabulatortaste verwenden, um zu verschiedenen Elementen auf der Website zu navigieren. Ich werde näher darauf eingehen, wie das in ein wenig funktioniert. Websites können auch über 80 freundliche Funktionen verfügen, was die Verwendung von 80 auf ihrer Website viel einfacher macht. Sehen wir uns nun Beispiele für die Verwendung nur einer Tastatur zum Navigieren an. Zuerst führe ich Sie durch eine Website, die schwer zu navigieren ist, und dann führe ich Sie durch eine Website, die leicht zu navigieren ist. Also, jetzt werde ich versuchen, die Home Depot Website zu navigieren, nur mit meiner Tastatur. Etwas traf Tab und es sieht aus, als ob ich entlang der oberen Kopfzeile bin, und jetzt bin ich in der Suche. Aber ich finde nicht, wo ich gerade bin. Und zurück auf mein Konto. Ich versuche jetzt, zum Hauptquartier zu kommen. Ich werde versuchen, nach Spiegeln zu suchen. Also ich denke, es ist unter zu Hause, um Maismöbel und drücken Sie Enter. Und jetzt gehe ich wohl in die Speisekarte. Sieht so aus, als wäre ich jetzt noch an der Spitze. Setzt ein wenig frustrierend. , Ich weiß gar nicht,wo ich bin, und ich gehe weiter auf Tab. Und ich weiß immer noch nicht, wo ich bin, und ich kann mich nicht finden. Ok. Es sieht so aus, als ob ich es jetzt zur Sekundärstufe geschafft habe, und ich möchte in das Menü gehen, das ich gerade öffne, aber ich kann nicht hinkommen. Okay, Sieht so aus, als wäre ich in der Lage, dorthin zu gelangen, aber es hat wirklich lange gedauert. Ich hatte nicht erwartet, alle anderen Navigationselemente zu durchlaufen. Werfen wir einen Blick auf eine andere Seite hier. Ich werde mir die Ari i i Dot Com-Site ansehen, und ich werde nach Karabinern suchen. Ich bin jetzt im Petr und jetzt bin ich auf der Suche und kann sehen, wo ich bin. Also jetzt über den Mai jetzt so gut zu klettern und sofort, wenn ich das Climb Menü öffne, sind meine Navigationspunkte in diesem Klettermenü, im Gegensatz zu der Home Depot Website, wo ich durch den Rest der Navigation gehen musste. Es ist also ein bisschen komplexer, weil es eine E-Commerce-Website ist und es viel los ist. Aber wenigstens war es ziemlich einfach, das zu finden, wonach ich gesucht habe. Pausieren Sie das Video und versuchen Sie, einige dieser Websites auf eigene Faust, mit Ihrer Tastatur Onley Registerkarte um die Website und sehen, wo Sie am Ende. Kannst du sehen, wo du bist? Sind die Dinge wählbar? Sind die Dinge unmöglich oder frustrierend? Betrachten Sie dies ist, mit dem Schlüsselwort nur Benutzer zu tun haben. Was ist schön ist, dass mit der häufigeren Barrierefreiheit wird, ist es schwieriger, Websites zu finden, die nicht tastaturfreundlich sind. Und das ist eine tolle Sache. Dies ist eine kurze Notiz, wenn Sie Safari verwenden. Wenn Sie Safari verwenden, müssen Sie die Eingabehilfen aktivieren, oder Sie können nicht in Safari wechseln, auf Ihre Einstellungen zugreifen, auf Ihre Einstellungen zugreifen, dann zu Erweitert gehen, dann zur Barrierefreiheit gehen und das Kontrollkästchen , der besagt, dass gedrückt jedes Element auf einer Webseite hervorgehoben werden muss. Dadurch wird sichergestellt, dass, wenn Sie die Tabulatortaste drücken, es zum nächsten Element auf der Seite geht. In diesem Beispiel sollten Informationen, die angezeigt werden, wenn Sie den Mauszeiger über ein Element bewegen, ebenfalls tastaturfreundlich sein . Also gehen Sie weiter und schauen Sie in diese vor meiner Sicht. Und sie haben diese Tool-Tipps, wo Sie den Mauszeiger über und erfahren Sie mehr über diese spezifischen Elemente. Also lasst es uns versuchen. Verwendung von Anarchie waren nur und mit diesen Tool-Tipps, um zu sehen, ob wir auf den Inhalt zugreifen können. sieht es so aus, als ob ich durch die Tasten bin und es ging nur nach unten auf die Seite, so dass es scheint nicht wie die Tool-Tipps Air-Tastatur zugänglich, die wirklich frustrierend sein kann, wenn Sie nur sind wir Navigation durch eine Tastatur nur. Also jetzt auf Flachs-Preisseite schauen, und wir können sehen, sie haben Tool-Tipps als auch, und Sie können mit dem Mauszeiger über sie. Mal sehen, ob wir nur mit einer Tastatur zu ihnen navigieren können, und es sieht so aus, als ob es so aussieht, als ob wir können, was wirklich schön ist. Das ist also großartig, denn jetzt können Sie auf Tool-Tipps nur mit der Tastatur zugreifen und diesen zusätzlichen Inhalt erhalten. Mobilgeräte verfügen über 80 benutzerfreundliche Funktionen, so dass Benutzer Standardgesten ändern und durch alternative Befehle ersetzen können. Ich zeige Ihnen hier eine kurze Demo einer alternativen Methode zum Kneifen und Zoomen auf dem iPhone. In der Regel können Sie mit dem Daumen und dem Zeigefinger eine Pensions-Zoom-Geste verwenden, um Bildschirm zu vergrößern und zu verkleinern. Aber wenn du einen gebrochenen Daumen hättest, ist es wirklich schwierig und fast unmöglich, dies zu tun. Stattdessen können Sie die unterstützende Touch-Funktion verwenden, der Sie die Pensions-Zoom-Geste nur mit einem Finger ausführen können. Schauen wir uns einige Techniken für die Gestaltung der Website, so dass sie einfacher zu navigieren sind. Du willst sicherstellen, dass die Leute in einer logischen Reihenfolge auf Ari navigieren können, zitiere ich. Sie können vorhersagen, wo Sie als Nächstes Tabbing werden. Sie möchten auch das Element hervorheben, das im Fokus steht, damit die Benutzer wissen, wo sie sich auf der Website befinden . Wenn Sie über eine große Navigation verfügen, sollten Sie überspringen Links zur Navigation bereitstellen. Dies waren die ersten Links auf der Website, wo die Leute sie auswählen können, um zu ihrem gewünschten Abschnitt zu springen . Auf diese Weise haben sie nicht mehrere Gegenstände durch. Jedes Mal, wenn die Seite geladen wird, werden sie nur angezeigt, wenn Tab, damit sie die Sie nicht stören. Ich, jedoch, Elemente sollten auch Tastatur zugänglich sein. Dies ist eine fortgeschrittene Technik, aber Sie können Tastenkombinationen bereitstellen. Tastenkombinationen sind Tastenkombinationen. Menschen konflikten. Um eine Aktion auszuführen, verfügt Gmail über eine Liste von Tastenkombinationen, die Sie verwenden können, um diese Verschiebung anzuzeigen. Und die Frage Marquis. Wenn Sie sich entscheiden, Tastenkombinationen zu erstellen, stellen Sie sicher, dass sie die Tastaturbefehle für Bildschirmlesegeräte nicht stören. Was ist schön an diesen Tastenkombinationen? Gibt es auch ideal für Power-User, weil sie diese Befehle verwenden können, um schnell zu arbeiten? Schauen wir uns einige Techniken zum Entwerfen von Websites an, damit sie einfacher zu navigieren und einfach zu erstellen sind. Dokument ist ein Dokument zur Navigationsreihenfolge. Dieses Dokument zeigt, wie jemand hier durch das Design navigieren soll. Ich nehme ein Design auf meiner Webseite und füge der Navigationsreihenfolge Anmerkungen hinzu. Ich versuche, die Reihenfolge logisch zu machen. Ich empfehle dringend, mit anderen Designern, Entwicklern oder Experten für Barrierefreiheit zusammenzuarbeiten . Ich war sicher, dass das Dokument für alle Parteien funktioniert. Ein weiteres Werkzeug, das Sie ausprobieren können, ist das Prototyping. Einige Ihrer Entwürfe. mit einem Entwickler arbeiten, erhalten Sie einige der Interaktionen beschichtet, damit Sie sehen können, wie die Navigation funktionieren könnte. Andere Tools umfassen Usability Testing, Barrierefreiheitstests mit wirklich Endbenutzern. Es kann schwierig sein, Teilnehmer mit Beeinträchtigungen zu finden, aber Sie können simulieren, was sie tun müssen. Beispielsweise können Sie den Teilnehmer fragen, ohne die Maus zu benutzen. Versuchen Sie, Lebensmittel auf der Website zu bestellen. Validierung Ihrer Entwürfe ist wichtig, um eine gute Benutzererfahrung zu gewährleisten. Jedes Experimentieren und Testen hilft Ihnen und Ihren Teamkollegen, die Barrierefreiheit besser zu verstehen . Navigation. Lassen Sie uns nun darüber sprechen, wie Sie diese Werkzeuge und Techniken auf Ihr Projekt anwenden können. Für Ihr Projekt. Beschriften Sie die Navigationsreihenfolge Ihres Entwurfs. Stellen Sie sicher, dass es einer logischen Reihenfolge folgt und nicht herumspringt, wenn Sie fertig sind. Teilen Sie Ihre Lieferung ble. Teilen Sie auch Ihren Prozess darüber, wie Sie auf Ihrer Seite navigieren und zögern Sie nicht, Fragen zu stellen wenn Sie Fragen haben. 5. Bildung, Bildung, Impairments: wie wir in der letzten Lektion gelernt haben. Bei der Navigation geht es darum, sich auf der Website zu bewegen, aber auch zu wissen, wo Sie sich befinden. In dieser Lektion werde ich einige der Sehbehinderungen durchlaufen, die die Fähigkeit einer Person beeinflussen können, zu navigieren. Ich werde auch erzählen, wie Sie ein Erlebnis gestalten können, das zugänglicher ist. Es gibt verschiedene Arten von Sehbehinderungen, aber wir können sie in zwei Kategorien gruppieren. Teilsicht, Verlust und keine Sehkraft. Beispiele für partiellen Sehverlust sind Glaukom oder Makuladegeneration. Keine Vision beinhaltet völlige Blindheit. Ich zeige Ihnen, wie sich Arten von Sehbehinderungen auf den Zugriff auf Inhalte auf Websites auswirken können . In diesem Beispiel betrachten wir eine Website mit voller Sicht. Jetzt. Dies ist eine Ansicht, die das von Glaukom betroffene Sehen simuliert. In diesem Beispiel wird Ihr Sichtfeld sehr eng. Die Simulation ist nur teilweise genau. In der Regel, um mehr Menschen zu sehen, bewegen sich in der Regel den Kopf zurück, um eine Website mit voller Sicht zu betrachten . , Dies ist eine Ansicht,die die Sehkraft simuliert, die von Makuladegeneration betroffen ist. In diesem Beispiel gibt es Patches, für die Sie nicht sehen können. Die Simulation ist nur teilweise wieder genau. Typischerweise bewegen Menschen ihren Kopf zu sehen, aber immer noch nicht sehr bequem. Wenn Sie eine dieser Sehstörungen simulieren möchten, können Sie dies leicht mit Ihren Händen tun, um Glaukom zu simulieren, eine Faust mit einer schmalen Öffnung wie diese zu machen und versuchen, einige Websites durch diese schmale Öffnung zu lesen, um zu simulieren Makuladegeneration . Legen Sie einfach Ihre Handfläche vor Ihre Ansicht und versuchen Sie, einige Websites mit dem Hindernis zu lesen . Einige Hilfstechnologie für Menschen mit Teilsicht umfassen einen speziellen Tastaturbildschirm, Magna-Brände und Bildschirmlesegeräte. Ich werde mehr auf Bildschirmlesegeräten berühren Im No-Vision-Teil dieser Lektion macht eine Bildschirmlupe genau das. Es vergrößert den Inhalt eines Bildschirms. Manchmal können Farben geändert werden, um einen erhöhten Farbkontrast zu erzielen. Die meisten Betriebssysteme verfügen über eine eingebaute Bildschirmlupe. Wenn Sie sie später testen möchten, habe ich Informationen im Ressourcenabschnitt dieser Klasse bereitgestellt. Eine weitere Sehbehinderung ist völlige Blindheit. Menschen ohne Vision müssen sich auf andere Methoden verlassen, um Websites zu navigieren. Beispielsweise können sie mit einem Bildschirmlesegerät den Inhalt des Bildschirms lesen. Um ein Gefühl davon zu bekommen, wie das ist, hören Sie ein Telefonmenü der North Carolina DnB. Lassen Sie uns so tun, als ob Sie eine Fahrzeugregistrierung erneuern, den Clip anhören und über die Relevanz des Inhalts, Ihre Orientierung im System und Ihr mentales Modell im Vergleich zum Systemmodell nachdenken möchten. Vielen Dank, dass Sie die North Carolina Division of Kraftfahrzeuge angerufen haben. Sie können jetzt Ihren Führerscheinstatus erhalten, also nicht das Polizeiantwortsystem. Bitte hören Sie genau zu. Menüoptionen gefunden haben sich geändert. Hier ist eine besondere Nachricht von der North Carolina D M V. Planung, einen Flug zu fangen, wird eine Militärbasis besuchen. Es gibt neue Gedankenanforderungen in North Carolina. Das liegt daran, dass das Bundesgesetz Real I D neue Sicherheitsstandards für den Bau von Flugzeugen und das Betreten von Bundesanlagen erfordert . Die North Carolina, die Sie mögen, brauchen wir die föderale Anforderung. Erfahren Sie, wie Sie Ihre echte i d. bei N. C. Real erhalten bei N. C. . Ich tue Dot Gov, um einen Termin zu vereinbaren, damit Sie erkennen, t drücken Sie neun. Andernfalls drücken Sie eine Sache Menü fortsetzen Für Fragen über das Leben Ihres Fahrers in drücken Sie ein oder sagen Lizenz für die Versicherung Drücken Sie zwei oder sagen Versicherung für Nummernschilder, Grundsteuer berechtigt Kleid drei oder ein Fahrzeug für Büro Standorte vorbereitet oder sagen Standorte für alle anderen DMG Services Drücken Sie fünf, andere zwingen, es für den internationalen Registrierungsplan zu wiederholen, drücken Sie eine oder, sagen internationale Lizenz, Invest Vertrauen zu oder sagen, Diebstahlverkehr Aufzeichnungen. Drücken Sie drei oder sagen Crash Schulbus in der Verkehrssicherheit, Drücken Sie vier oder sagen Sicherheit. Um sein Menü zu wiederholen, drücken Sie neun oder sagen wiederholen, um zum Hauptmenü zurückzukehren, drücken Sie die Pfund-Taste oder, sagen Sie Hauptmenü für die operative Unterstützung. Drücken Sie Null oder, sagen wir, Operator, waren Sie in der Lage, herauszufinden, welche Auswahl Sie treffen möchten? Das ist eigentlich eine Aufgabe, die ich mehrmals versuchte, und ich fand es so frustrierend. Ich hätte fast beschlossen, physisch zum D. M. B.zu gehen M. B. Vielleicht haben Sie, als Sie zugehört haben, darüber nachgedacht, wie viel einfacher das wäre, wenn Sie nur sehen könnten, wo es auf der Websitezu finden ist , wo es auf der Website und es wäre wahrscheinlich. Aber das ist eine Erfahrung, die nicht sehende Benutzer auf einer täglichen Basis haben würde, und deshalb ist es wichtig, dass wir Website entworfen, damit sie eine einfache Zeit haben, durch sie zu navigieren . Menschen mit niedrigerem Sehvermögen verwenden oft Bildschirmzähler, um Websites zu navigieren, und APS , ein Bildschirmlesegerät, ist eine App, die den Inhalt auf dem Bildschirm an die Person liest. Der Screenreader liest auch einen Teil des Codes, um ihnen zu helfen, den Kontext dessen zu interpretieren, was sie hören. beispielsweise Wenn das Bildschirmlesegerätbeispielsweiseeine Aufzählungsliste liest, lassen Sie die Person bemerken, dass dies eine Aufzählungsliste mit fünf Elementen ist, und dann werde ich Alan gehen, um diese fünf Elemente zu lesen. Zusätzliche Hilfstechnologie beinhaltet zugänglichen, freundlichen Code. Solch eine semantische Elemente in Arie Attribute, kombiniert mit einem Screenreader thes helfen Benutzern, den Kontext dieser Website zu verstehen. Es stehen mehrere Bildschirmlesegeräte zur Verfügung, wenn Sie Zeit haben. Ich ermutige Sie, mindestens eine auszuprobieren und zu sehen, wie es funktioniert. Für Windows gibt es Envy D A, die kostenlos ist. Es gibt auch Jaws, das ist eines der am häufigsten verwendeten Bildschirmlesegeräte zur Verfügung, und Sie können eine kostenlose Demo davon ausprobieren. Schließlich gibt es Sprachausgabe, die in Windows enthalten ist. Als ich die Erzählerin ausprobierte, hatte ich nicht viel Glück. Ich empfehle ausprobieren und VD a oder Jaws statt. Mac OS und IOS enthalten Voiceover für ihre Bildschirmlesegerät. Android Screen Reader heißt Talk Back, und es ist im System als auch enthalten. Lassen Sie uns einen Screenreader in Aktion hören. Dies ist Voiceover auf einem Mac. Es wird die eine weit Sicht Voiceover auf Geworfen Off unserer Reise-Magazin und führen Google Chrome Fenster aus unserem leeren Bild Schrägstrich Net Link lesen . Jetzt werde ich auf der Website navigieren. Die meisten Leute lesen keine Website von Anfang bis Ende. Stattdessen überspringen wir normalerweise eine Seite. Sie könnten Schlagzeilen überspringen und tiefer in eine Unterposition von Interesse eintauchen. Menschen, die Bildschirmlesegeräte verwenden, lesen die gleiche Weise. Sie wollen nicht eine ganze Seite von Anfang bis Ende hören, aber sie suchen nach etwas, das mit diesem Bildschirm helfen kann. Leser können oft eine Überschrift springen, und dann konnte ich nicht zu einer Überschrift interessanter semantischer Elemente in HTML-R-Elementen navigieren Bedeutung haben , die mit um verbunden ist. Einige Beispiele sind das Formular-Tag für ein Formular, das tabellentag zur Angabe einer Tabelle und ein H one -Tag für Überschriftenebene 1. Bildschirmlesegeräte greifen diese Elemente auf, die dem Benutzer helfen zu verstehen, wo sie sich befinden und was sie hören. Einige Beispiele für nicht semantische Elemente sind das DIV-Tag und das SPAN-Tag. Andere zugängliche, freundliche Code enthält Ari Attribute Aria steht für zugängliche, reiche Internet-Anwendungen. Und diese Attribute kodieren unsere Komponenten, die helfen, die Reichen zu machen. Web-Erlebnis ist zugänglich. Einige Kernkomponenten umfassen, sind aber definitiv nicht auf Rollen beschränkt, wie vielleicht in der Navigation Inhaltssuche und so weiter . Eigenschaften und Status Bildschirmlesegeräte greifen diese Attribute auf, die dem Benutzer helfen zu verstehen, wo sie sich befinden, was vor sich geht und was sie hören. Teoh. Dies ist ein visueller Leitfaden Um zu demonstrieren, wie Arie-Attribute funktionieren, Attribute Aria Bereiche des Bildschirms auf dem Bildschirm beschriftet. Reader kann diese Information Toe Listener weiterleiten, um Kontext bereitzustellen. Wenn ich die Landmarks anschalte, können Sie sehen, wie die Gebiete identifiziert werden. Zum Beispiel ist dies das Banner. Dies ist eine Navigation, und dies ist der Hauptinhaltsbereich. In diesem Beispiel gibt es einen Leitfaden, wie Überschriftenebenen wieder identifiziert werden. Dies ist nur eine visuelle Demo auf tatsächlichen Websites. Dieses Markup ist hinter den Kulissen und für die Endbenutzer nicht sichtbar. Lassen Sie uns das ein Beispiel zusammenstellen. Für diese Aktivität benötigen Sie einen Stift und ein Papier. Ich werde Audio-Clips abspielen. Der erste Bildschirmlesegerät, der eine Website liest, die mit nicht zugänglichem Code erstellt wurde . Der zweite Clip ist die gleiche Website, die mit zugänglichem Code erstellt wurde. Wenn Sie sich den ersten Clip anhören, versuchen Sie, einen Drahtrahmen von dem zu zeichnen, was Sie hören. Die US Daily News Trendnachrichten Familie und Indiana findet einen lebenden Dinosaurier. Spät gestern, eine Familie besuchen einen lokalen Spielplatz entdeckt eine lebende T. Rex und Liverpool, Indiana Trending Nachrichten, Sport-Unterhaltung. Okay, jetzt spiele ich den zweiten Clip. Dies ist ein Screenreader, der eine Website liest, die mit zugänglichem Code erstellt wurde. Sie, während Sie diesen Clip anhören, VersuchenSie, während Sie diesen Clip anhören,einen Drahtrahmen von dem zu zeichnen, was Sie hören. Sie sind die USA Lee News Web Content Überschrift Level 1 Link Die US Daily News Liste. Drei Elemente verknüpfen Trendnachrichten Link Sport Link Unterhaltung Überschrift Ebene zu lokalen Nachrichten Überschrift Ebene drei Familie und Indiana findet einen lebenden Dinosaurier. Ende gestern entdeckte eine Familie, die einen lokalen Spielplatz besuchte, einen lebenden T. Rex und Liverpool, Indiana. Wie lief das Anhören dieser Clips? War ein zweiter Clip. Einfacher zu verstehen? Je nachdem, wie Ihre Website beschichtet ist, könnte es einfacher oder schwieriger für jemanden sein, der sich auf eine Bildschirmlesespitze verlässt. Verstehen Sie den Inhalt. Deshalb ist es sehr wichtig, dass es so geschrieben werden könnte, dass ein Bildschirmlesegerät richtigen Kontext bietet. Zehe Zuhörer. Werfen wir nun einen Blick auf die Website. Die beiden beschriebenen Audioclips. So sehen die tatsächlichen Websites aus. Sie sehen tatsächlich genau gleich aus. Haben Ihre Drahtframes im Allgemeinen der Website ähneln? Im zweiten Clip wurden Semantischer Code und ari-Attribute verwendet. Dies hilft dem Bildschirmlesegerät, Elemente zu identifizieren, so dass Sie den Kontext der Informationen erhalten Sie gelesen werden. Wichtig ist, dass Sie die gleiche genaue Anzeige erhalten können, aber mit zwei verschiedenen Sätzen von Codes. Verwendung von barrierefreiem Code hat also keinen Einfluss auf die Ergebnisse Ihrer Website. Hier sind Screenshots des Codes, der zum Erstellen der Beispiel-Website verwendet wird. Die linke Seite ist ein nicht zugänglicher Mantel. Die auf der rechten Seite ist zugänglicher Code und enthält semantische Elemente und Arie-Attribute. Es gibt ein paar Techniken, die Sie verwenden können, wenn Sie sich nähern. Lösungen für die Navigation ihrer 1. 1 besteht darin, die Navigationsreihenfolge Ihrer Website zu bestimmen, was wir in der Lektion über die Navigation mit motorischen Beeinträchtigungen diskutiert haben. Das hilft nicht nur bei Beeinträchtigungen der motorischen Fähigkeiten. Aber zu bestimmen, wie jemand auf der Website navigieren sollte, hilft auch Menschen mit Sehbehinderung . Ich ermutige Sie, gemeinsam mit Ihren Design- und Entwickler-Teamkollegen zu arbeiten, um festzustellen, welche Ari Attribute am besten funktionieren. Entwickler haben vielleicht eine gute Vorstellung davon, welche Ari-Attribute existieren, aber es liegt an Ihnen als Designer, zu bestimmen, welche die beste Benutzererfahrung bietet. Bestimmung der Informationshierarchie ist eine weitere Technik, die frühzeitig zu berücksichtigen ist Begonnen in einem Fund, die Überschriftenstufen gehen von H eins bis H sechs. Typischerweise wird die H eine Überschriftenebene nur einmal verwendet, was für den Haupttitel gilt. Wenn Sie das Muster für Ihre Überschriftenebenen bestimmen, können Sie diese in einem Styleguide dokumentieren. Und schließlich, während Sie entwerfen, stellen Sie sicher, dass Sie ein konsistentes Erlebnis bieten. Wenn Menschen Ihre Website besuchen, bilden sie ein mentales Modell in ihrem Kopf. Zum Beispiel, nachdem sie einige Seiten verwendet haben, können sie die Reihenfolge der Elemente in der Hauptnavigation kennen. Es hilft ihnen, Ihre Website herauszufinden und schneller auf Inhalte zuzugreifen. jedoch Wenn Siejedochdie Dinge in der Navigation ändern, stört es Ihr mentales Modell und wird verwirrend. Ähnlich wie, dass Sie sicherstellen möchten, dass Sie nicht überspringen, Überschriftenebenen auf einem Bildschirm, zum Beispiel möchten Sie kein H zwei haben und dann sofort mit einem H folgen, denn der Hörer wird sich fragen, was passiert, um die H drei und wenn sie irgendwie verloren auf der Seite wieder, ein Tool können Sie die Navigationsreihenfolge Dokument verwenden. Zusätzlich zur Aufnahme der Bestellung können Sie beliebige Arie-Orientierungspunkte identifizieren, um die Navigation zu erleichtern. Ich empfehle dringend, mit anderen Designern, Entwicklern und Barrierefreiheitsexperten zusammenzuarbeiten , um sicherzustellen, dass das Dokument für alle Parteien funktioniert. Wie bei anderen Lektionen können Sie versuchen, einige Ihrer Designs zu prototypisieren oder Benutzerfreundlichkeit oder Barrierefreiheit auszuprobieren, einige der Interaktionen zu testen, indem Sie mit einem Bildschirmlesegerät hören, können Sie ein Gefühl davon bekommen, wie gut die Dinge funktionieren. Sie können sich fragen Können Menschen wirklich navigieren Aufgaben erfüllen? Trefft sich der Fluss? Benutzererwartungen sind eine Redundanz beim Anhören eines Bildschirmlesegeräts. Ein weiteres Werkzeug, das Sie verwenden können, um Sehstörungen zu simulieren, ist ein No-Coffee Vision Simulator . Es ist ein Plug in verfügbar auf Chrome und Firefox. Sie können verschiedene Simulationen von Beeinträchtigungen ein- und ausschalten, um ein Gefühl davon zu bekommen, wie Ihre Website aussieht. Ich benutze dies im Allgemeinen nicht für Designarbeiten, aber es ist ein großartiges Werkzeug, um Szenarien zu simulieren, um Empathie aufzubauen. Das Wave Tool ist eine Barrierefreiheitsprüfung für Webentwickler. Sie können es ausprobieren, indem Sie Dot Web Name Dot Org's winken gehen. Es ist ein guter Weg, um zu sehen, ob Sie die Kriterien für die Barrierefreiheit für Ihre Website erfüllt haben. Es ist ein Online-Tool und eine Chrome- und Firefox-Erweiterung verfügbar. Da wir mit Zugänglichkeit im Hinterkopf entwerfen sollten, dient dieses Tool dem Checker. Nachdem Ihr Design auf diese Weise implementiert wurde, können Sie alles sehen, was Sie oder Ihr Team verpasst haben. Sie können versuchen, die eines Baseline-Audits Ihrer Site zu verwenden. Wenn Sie versuchen zu ermitteln, wo Sie die Eingabehilfen für Ihr Webseitendesign integrieren möchten, geben Sie die Überschriftenebenen und Arie-Orientierungspunkte an, die Sie möglicherweise haben. Es liegt in Ihrem Ermessen, wie Sie sie identifizieren möchten. Du kannst meinem Stil folgen oder dir deinen eigenen einfallen lassen. Ziel ist es, sicherzustellen, dass Ihre Teamkollegen verstehen, welche Anmerkungen Sie gemacht haben. Wenn Sie fertig sind, teilen Sie mit, wie Sie die Überschrift markiert haben als die Sehenswürdigkeiten von Aria. Teilen ist eine großartige Gelegenheit, um zu sehen und sich davon inspirieren zu lassen, wie andere diese Art von Informationenkommunizieren Art von Informationen 6. Umstand von visuellen Elementen mit Farbblindheit: in dieser Lektion werde ich darüber sprechen, wie Farbblindheit das Verständnis visueller Elemente beeinflussen kann . Ich werde Techniken durchlaufen, mit denen Sie Ihre Entwürfe leichter zugänglich machen können, und ich werde über einige Werkzeuge sprechen, die Sie verwenden können, um Ihre Arbeit zu erleichtern. Bei Farbblindheit hat eine Person einen Mangel an Fähigkeit, bestimmte Farben zu sehen, was bedeutet, dass sie Farbe haben. Das Spektrum ist verengt, und was das bedeutet, ist, dass sie Schwierigkeiten haben, Elemente nach Farbe zu identifizieren oder Probleme haben könnten , Elemente von einem Mangel an Kontrast in den Farben zu unterscheiden. Ich werde Ihnen einige Beispiele zeigen, wie es sich auf das auswirken kann, was die Menschen sehen. Das Beispiel auf der linken Seite ist, wie die Marshmallow Peeps Seite mit unberührter Sicht aussieht . Beispiel auf der rechten Seite ist, wie die Marshmallow Peeps Seite aussieht. Wenn Sie versucht haben, Pia mit diesem Beispiel zu kennen, ist es fast unmöglich, den gelben Guckeln aus den Pink Peeps zu helfen. Farbkontrast ist ein Unterschied zwischen zwei Farben. In diesem Beispiel die Gelben Peeps nicht genügend Farbkontrast zu den rosa Peeps auf. Wenn der Farbkontrast nicht hoch genug ist, kann es schwierig sein, die verschiedenen Elemente zu unterscheiden. Betrachten wir in diesem Beispiel Probleme mit der Farbblindheit in Bezug auf ein Benutzeroberflächenelement, das sich in der On-Position mit unbeeinflußtes Sehen? Man kann sagen, dass es der untere ist, und das liegt daran, dass es grün ist, was normalerweise ein Indikator für einen Nichtzustand ist. Sehen wir uns nun das gleiche Beispiel an, als ob Sie ein Chrom auf CIA-Farbblindheit hätten. In diesem Beispiel ist es schwierig zu erkennen, welcher Schalter aktiviert ist, da beide die gleiche Farbe haben. Und deshalb ist es wirklich wichtig, die Verwendung von Onley-Farbe zu vermeiden, um Ihre Elemente zu differenzieren . Dies gilt insbesondere für Elemente, die wichtig sind, wie diejenigen, die den Datenschutz oder die Sicherheit beeinträchtigen können. Jetzt werde ich über Techniken sprechen, die Sie beim Entwerfen mit Farbe berücksichtigen können. Zunächst möchten Sie genügend Farbkontrast für Elemente bereitstellen, mit denen Benutzer interagieren, z. B. Schaltflächen, Menüs , Fehlermeldungen, Überschriften usw. Nun, CAG 2.1 besagt, dass für eine Ebene Doppel A das Kontrastverhältnis mindestens 4,5 zu 1 für normalen Text und 321 für großen Text sein muss . Großer Text wird als mindestens 14 Punkt und fett oder mindestens 18 Punkt für Stufe Triple A betrachtet . Das Kontrastverhältnis muss mindestens 7 zu 1 für normalen Text und 4,5 bis 1 für großen Text betragen. Eine andere Technik ist die Verwendung von mehr als einer visuellen Behandlung, um ein Element zu unterscheiden. beispielsweise In diesen Bannernachrichten wirdbeispielsweise der Farbkontext nicht nur durch Farbe, sondern auch durch Symbole angezeigt. Lassen Sie uns unser vorheriges U-Beispiel mit den Kippschaltern hier besuchen. Wir haben einen weiteren visuellen Indikator hinzugefügt, um dem Benutzer zu helfen, zu erkennen, welcher mit dem tschechischen bedeutet, dass er eingeschaltet ist, und der mit dem X bedeutet, dass er ausgeschaltet ist. . Selbst wenn Sie jetzt Farbblindheit haben, können Sie bestimmen, welcher Zustand ein- oder ausgeschaltet ist. Jetzt werde ich über einige Werkzeuge sprechen, die Sie verwenden können, um einen korrekten Farbkontrast zu gewährleisten. Ein Werkzeug, das ich gerne verwende, ist ein Farbkontrastanalysator. Es ist eine eigenständige App für Windows und Mac. Es ist kostenlos auf der Website der Paciello Group verfügbar, und ich werde eine kurze Demo machen, wie dieses Tool funktioniert. Es ist ziemlich einfach, also was ich tun werde, ist, dass ich es öffne und ich muss nur eine Vordergrundfarbe auswählen. In diesem Fall ist es der großartige Text, und ich werde einfach das Pipettenwerkzeug verwenden. Wählen Sie den großartigen Text und dann werde ich die Hintergrundfarbe auswählen, die ich wieder das Pipettenwerkzeug verwenden werde, und das ist blass grün. Und dann werde ich sehen, dass ich alle Ebenen des Farbkontrasts versagt habe. Ich kann dieses Tool auch verwenden, um herauszufinden, welche Farben ich verwenden kann, um den entsprechenden Farbkontrast zu erzielen. Also geh weiter und wähle dieses Blau und ich ändere den Text in einen schwarzen Text. Und hier heißt es, dass ich alle verschiedenen Ebenen der Farbkontrastanforderungen bestanden habe. Ein weiteres Werkzeug, das ich gerne verwende, ist der Stark Plug In , der für Sketch und Adobe X'd verfügbar ist. Es ist kostenlos bei Get Stark dot Co. Ich werde eine kurze Demo machen, wie Stark in der Skizze für den Stark Plug in funktioniert. Alles, was Sie tun müssen, ist zwei Ebenen auszuwählen, also wähle ich den Text im Hintergrund aus. Wir gehen weiter und gehen zu Plug Ins, stark und überprüfen Kontrast, und es wird mir die Ergebnisse des Farbkontrast geben, und in diesem Beispiel habe ich alle Ebenen des Farbkontrast versagt, es ist, was ich kann hier tun, passen Sie einfach die Farben an, bis ich die gewünschten Farben bekomme und die Kontraststufen übergebe, die ich für Ihr Projekt brauche. Verwenden Sie den Farbkontrastanalysator und überprüfen Sie die Farbkontraste von Elementen in Ihrem Design. Erfüllen sie die Mindestanforderungen? Ziel für eine Passing-Bewertung für Arbeit AG 2.1 Ebene Doppel A Wenn die Farbe nicht passieren, was würden Sie tun, um sie zu ändern Wenn Sie fertig sind, teilen Sie Ihre Vorher- und Nachher-Designs und teilen Sie uns Ihre Vorgehensweise zur Änderung der Farben. 7. Umstand von visuellen Elementen ohne Vision: in dieser Lektion werde ich diskutieren, wie eine partielle oder keine Vision die Fähigkeit einer Person beeinflussen kann, visuelle Elemente zu verstehen. Ich werde auch auf Hilfstechnologie gehen, die zur Verfügung steht, um diesen Beeinträchtigungen gerecht zu werden, und ich werde Sie durch einige Techniken führen, die Sie verwenden können, um ein zugängliches Erlebnis zu bieten. Wenn Sie teilweise gesehen haben, können Sie nicht sicher sein, was auf dem Bildschirm angezeigt wird. Sie können sich Onley auf ein Bildschirmlesegerät verlassen. Wenn der Inhalt vom Bildschirmlesegerät erkannt werden kann, verpassen Sie möglicherweise wichtige Informationen. Als nächstes versuchen wir diese neue Vision Simulation. Ich werde einen schwarzen Bildschirm anzeigen, um zu simulieren, dass Sie keine Vision haben. Oh, so gut. Das war urkomisch. Das war großartig, nicht wahr? Hat dir gefallen, was ich in der Simulation gesehen habe, die du nicht sehen kannst, also hast du nicht erlebt, was ich getan habe. Und so ist es. Wenn eine Website keine Alternativen für den Zugriff auf Inhalte bietet, nur damit Sie sich nicht ausgelassen fühlen , zeige ich Ihnen, was ich lustig fand. Hier ist, worüber ich gelacht habe. Es war ein Geschenk, dass ein Faultier umfällt. Jetzt werden wir über die verfügbare Hilfstechnologie sprechen, um visuelle Elemente für Menschen mit teilweiser oder gar keiner Vision in Kombination mit Bildschirmlesegeräten zugänglich zu machen . Alternativer Text für alle Texte für kurz ist die wichtigste unterstützende Technik zur Verfügung. Der gesamte Text ist einfach eine Textbeschreibung von Nichttextinhalt. Bildschirmlesegeräte lesen den gesamten Text an die Benutzer, damit sie verstehen können, was angezeigt wird. Ich werde diesen Videoclip von einem Bildschirmlesegerät spielen, der alle Texte von Bildern liest. Link Bild BMO Drea M. O. Sie befinden sich derzeit auf einem Link innerhalb des Leadinhalts um diesen Link zu klicken Linkbild. Mein Teamalter schwert ich doppelte Schwierigkeiten in Mirror Castle. Kein Bildschirmlesegerät ist nicht 100% perfekt. Zum Beispiel liest es Modry MoaS BMO Drea M O. Aber der Zuhörer kann zumindest nur bekommen, was los ist. Lassen Sie uns über einige Techniken gehen, um hilfreiche Text für alle Texte zu schreiben. Sie möchten es auf 60 bis 80 Zeichen und Link zu halten. Sie können auch das Bild von in Ihrem gesamten Text-Bildschirm auslassen. Leser können erkennen, wenn ein Bild präsentiert wird, und sie enthalten bereits Bild von Wenn Sie Bild in den gesamten Text einfügen, wird es überflüssig, wenn alle Texte zu schreiben. Es ist wichtig, nur zu beschreiben, was notwendig ist. Fragen Sie sich immer, was die Absicht dieses Bildes ist? Und bedenken Sie, dass die Absicht nicht immer die wörtliche Bedeutung ist. Zum Beispiel, Feind zu geben oder Faultier. Wenn Sie kompliziertere Bilder haben, können Sie die langen Beschreibungsattribute verwenden oder eine Textalternative in voller Länge bereitstellen . Jetzt zeige ich Ihnen ein Beispiel für eine Volltextalternative. Hier ist eine Infografik von Dick Use Website. Do que auch passiert Unzugänglichkeit Unternehmen sein. Oben sehen Sie die vollständige Infografik. Dieses Bild hat eine Menge Inhalt, die zu viel in Ofen setzen alle Text. Wenn Sie also ganz nach unten scrollen, können Sie eine Volltextalternative sehen. Auf diese Weise. Jeder, der sich auf eine Bildschirmanzeige verlässt, kann die gleichen Informationen erhalten wie jemand, der zitiert wird. Manchmal ist es einfacher zu verstehen, wie man den ganzen Text schreibt, indem man gute und schlechte Beispiele sieht. In diesem Beispiel haben wir eine Website für Anfänger Yoga-Klasse, und das Bild der Faultier braucht, um, ganzen Text. Ein gutes Beispiel ist die Animation eines Faultieres, das versucht, Yoga zu machen, aber umfallen, obwohl es nicht 100% genau ist, trägt es. Die Absicht des Bildes über Beispiel ist nur Faultier. Obwohl es wahr ist, fehlt es an Kontext, ein anderes schlechtes Beispiel ist nur animiertes GIF. Dies ist auch wahr, aber es gibt keinen wertvollen Kontext und schließlich ein weiteres schlechtes Beispiel. Auf der Straße ist ein Faultier mit Algen bedeckt. Er dehnt sich aus, aber er fällt um. Hinter ihm steht ein Auto. Es gibt ein Etikett, das sagt: Machen Sie ein Geschenk Punkt com. Obwohl dies sehr genau ist, gibt es immer noch nicht die relevanten Informationen an den Zuhörer. Darüber hinaus handelt es sich bei all diesen Informationen um Rauschen, die zu kognitiver Überlastung für komplizierte Bilder beitragen können. Es ist am besten, die Absicht des Bildes zusammenzufassen und nicht in komplizierte Details in diesem Screenshot von der Bitcoin-Site über den Wert von Bitcoin zu gehen . Ah, gute alternative Beschreibung wäre. Der Wert von Bitcoin ist seit Juni 2017 stetig gestiegen, hat aber Dezember mit jeweils über $19.000 abgeholt . Sie sank im Februar 2018 drastisch auf etwa die Hälfte dieses Wertes. Dies erfasst die Essenz dessen, was Sie wollen, dass der Leser von diesem Bild über das Beispiel einer Beschreibung zu erhalten wäre so etwas wie am 1. Juni, der Wert war 2100am 2. Juni, der Wert ist 2101 Am 3. der Wert war 2100am 2. Juni, der Wert ist 2101 Am 3. -Wert 2200 war. Ich werde nicht weitermachen, aber ich denke, du verstehst den Punkt. Wenn sie beabsichtigen, uns den Kern dessen zu zeigen, was passiert ist, ist es nicht notwendig, super körnig zu werden. In Fällen, in denen Bilder nur für dekorative Zwecke ausgestrahlt werden, können Sie den gesamten Text weglassen, um die Dinge ein wenig zu optimieren. Wenn Sie über ein Konstruktionssystem oder eine Komponentenbibliothek verfügen, müssen Sie den gesamten Text dort dokumentieren. Auf diese Weise. Sie kommentieren Ihre Entwürfe nicht immer mit dem gesamten Text für jedes wiederverwendete Bild. Ein weiterer Hinweis S P G kann den ganzen Text zu haben, und Emojis können von einigen Bildschirmlesegeräten gelesen werden. Also nicht das Gefühl, dass Sie begrenzt sind oder keinen Spaß haben können, Dinge zugänglich zu machen. Lassen Sie uns darüber nachgehen, wie Sie einige dieser Techniken auf Ihr Projekt anwenden können. Für Ihr Projekt. Versuchen Sie Ihre Hand, den gesamten Text für Ihre Bilder zu schreiben, wenn Sie fertig sind, Ihre Arbeit mit anderen zu teilen, manchmal zu verstehen, wie gut schreiben alle Text kommt mit der Betrachtung von vielen Beispielen 8. Comprehension von Text mit kognitiven Impairments: in dieser Lektion werde ich darüber sprechen, wie kognitive Beeinträchtigungen das Leseverständnis beeinflussen können. Sie führen Sie nicht durch einige Schreibbeispiele sowie Techniken und Tools, die Sie verwenden können , um Ihr Schreiben für die Barrierefreiheit zu verbessern. Am Ende der Lektion werde ich darüber sprechen, was Sie für den Text in Ihrem Projekt tun werden. Einige Beispiele für kognitive Beeinträchtigungen sind traumatische Hirnverletzungen, Nebenwirkungen von Chemo-Behandlungen und Lesen in einer zweiten Sprache. Wenn Menschen kognitive Beeinträchtigungen haben, können sie Schwierigkeiten haben, Informationen zu verstehen. Manchmal, wenn Informationen nicht leicht verständlich zur Verfügung gestellt werden, können sie unter kognitiver Überlastung leiden. Das bedeutet, dass es für die Person zu viel ist, um sie zu verarbeiten. Dies gilt auch für Leute, die Bildschirmlesegeräte verwenden, wenn zu viele Informationen zum Anhören vorhanden . Es ist schwer, durch das zu analysieren, was wichtig ist und was nicht wichtig ist. Sehen wir uns nun ein Beispiel für einige Inhalte in seinem ursprünglichen Zustand an, dem es nicht leicht zu lesen ist. Dann schauen wir uns an, wie ich den Text überarbeiten, der viel einfacher liest. Hier ist ein Beispiel für ein Pizza-Rezept, wo Sie sehen können, der Inhalt ist schwer zu lesen. Es ist in einem großen Absatz, und Sie müssen wirklich herausfinden, wie der Inhalt organisiert ist. Im Beispiel In der rechten Seite habe ich den Inhalt überarbeitet. Es ist einfacher zu lesen. Leser können leicht die Zutaten finden und den Anweisungen folgen. Schauen wir uns einige Techniken zum Schreiben einfacher zu lesender Inhalte an. Eine Technik ist das Schreiben in Klarsprache, wenn möglich. Klarsprachigkeit ist das Schreiben, wo Leser Informationen einfach, schnell und vollständig wie möglich verstehen können . Schreiben in Klarsprache reduziert die kognitive Belastung des Lesers. Es macht auch Inhalte einfacher, in eine andere Sprache zu übersetzen. Dies ist besonders wichtig, wenn Ihre Website oder Ihr Produkt beim Schreiben mehrere Sprachen unterstützen muss . Streben Sie auf ein großartiges Niveau basierend auf Ihren Benutzern an. Aber selbst wenn Ihr Publikum technisch ist, macht das Schreiben in Klarsprache die Dinge viel einfacher zu lesen, so dass es für alle hilfreich ist. Eine andere Technik ist die Organisation der Informationen in einem leicht lesbaren Format. Wenn Sie in Klarsprache schreiben, stellen Sie sicher, dass Sie Überschriften verwenden, Aufzählungen oder nummerierte Listen verwenden und ihre Sätze prägnant halten. Wenn Sie die Informationen organisieren, ist es einfacher für Benutzer, den Inhalt zu scannen und zu verwenden. Lassen Sie uns in ein paar Tools eintauchen, die Ihnen helfen, Ihr Schreiben zu vereinfachen. einfache Sprache geht nicht. Dies ist eine Website, die das Plain Writing Act von 2010 unterstützt, das Bundesbehörden verpflichtet, klare, verständliche Sprache für die öffentliche Kommunikation auf der Website zu verwenden . Sie haben Richtlinien mit Do's und Dont, sowie einige Beispiele, die Ihnen helfen, die Schreibkonzepte zu verstehen. Eine andere Ressource, die ich sehr empfehlen, ist ein Hemingway nach oben. Es ist ein leichtes Werkzeug, das Ihnen hilft, Ihre Schrift klar und prägnant zu machen. Es wird lange Sätze hervorheben, die Sie vereinfachen müssen, und ich werde einige Formulierungsempfehlungen machen. Was schön ist, ist, dass es auch Ihre Lesegeschwindigkeit zusammenfasst. Eine andere App. Die Leute benutzen Graham früh. Es ist ähnlich wie der Hemingway oben, bietet aber mehr Details. Wenn Sie mehr Unterstützung bei der Grammatik benötigen, empfehle ich diese zu verwenden. Lassen Sie uns nun darüber sprechen, wie Sie diese Werkzeuge und Techniken auf Ihr Projekt für Ihr Projekt anwenden können . Arbeiten Sie daran, den Text auf Ihrem Design leicht lesbar zu machen. Schreiben Sie den Text so, wie Sie es normalerweise gewesen wären. Kopieren Sie den Text und fügen Sie ihn frühzeitig in Hemingway oder Graham ein und sehen Sie, wie gut er Wordsmith-Angriffe liest , bis er für dieses Projekt leicht lesbar ist. Ziel für Achtklässler tiefer, wenn Sie fertig sind. Teilen Sie den Originaltext und Ihren überarbeiteten Text. Manchmal könnte es Spaß machen und sogar Augen öffnen, um zu sehen, wie viel besser, der überarbeitete Text liest. 9. Erzählung von Audio und Video: in dieser Lektion werde ich darüber nachdenken, wie Hör- und Sehstörungen die Fähigkeit einer Person beeinflussen können, Audio und Video zu verstehen. Ich werde die Hilfstechnologie überprüfen, die verfügbar ist, um diese bei den Eltern unterzubringen, und dann werden wir über die Dinge sprechen, die Sie tun können, um sicherzustellen, dass Ihre Medien zugänglich sind. Vollständige Blindheit ist eine Sehbehinderung, die die Fähigkeit einer Person beeinflussen kann, Video zu verstehen . beispielsweise Wenn die Personbeispielsweiseauf Li einen Film anhören kann, erhält sie möglicherweise nicht den vollständigen Kontext, ohne die Bilder mit Hörbehinderungen zu sehen, Menschen können den Dialog, die Klanghinweise oder die Musik, die die Ton. Andere Beeinträchtigungen, die die Fähigkeit einer Person, Video zu verstehen, beeinflussen können, sind in einer lauten Umgebung. Zum Beispiel. Du bist in einer lauten Bar und kannst nicht hören, was im Fernsehen gesagt wird. Ein weiteres Beispiel ist, dass Sie sich einen fremdsprachigen Film ansehen und die Sprache nicht verstehen , damit Sie nicht verstehen können, was los ist. Wenn Benutzer Hörgeschädigte haben, können Sie Videos mit Untertiteln versehen. Untertitel erscheinen am unteren Rand des Bildschirms und zeigen und sinken auf das, was die Leute im DieseUntertitel erscheinen am unteren Rand des Bildschirms und zeigen und sinken auf das, was die Leute im Video sagen. Lassen Sie uns diesen YouTube-Clip anhören, und Sie auch können auchdie Untertitel ein- oder ausschalten. Also, äh, lasst uns davon in Harmonie Hühner kommen. Kannst du das? Kannst du es unten halten? euch Jungs überhaupt etwas aus? Wir sehen aus wie ein Haufen Velociraptors auf Ted dot com. Sie haben interaktive Transkripte ihrer Vorträge. Während ein Sprecher spricht, das Protokoll unten die Wörter hervor, damit die Leute mitverfolgen können. Werfen wir einen kurzen Blick darauf, wie das funktioniert. Ich wohne in South Central. Dies ist South Central Spirituosengeschäft, Fast Food, leere Grundstücke. Was auch schön ist, ist, dass dies ein interaktives Transkript ist. Sie können das Transkript, Klicken oder Phrase mit der Haut versehen, und das Video wird für Menschen, die sehbehindert sind, an diese Stelle springen. Sie können Dialoge, Sounds und Videos anhören, aber sie können nicht den vollständigen Kontext bekommen. Dort kommen Audiobeschreibungen ins Spiel. Audiobeschreibungen beschreiben die Aktivität im Video, damit die Leute den Kontext dessen erhalten können was vor sich geht. Hören wir uns die Audiobeschreibung für dieses Video an. Bist du das? Er nimmt den Fahrersitz ein. Ich fahr nicht. Steve ruht seine Hände an seinen Seiten, während das Auto auf die Straße zieht. Das Lenkrad. dreht sich um sein eigenes Aussehen Priusdreht sich um sein eigenes Aussehenund rollt eine ruhige Wohnstraße hinunter. Lassen Sie uns einige Techniken und Werkzeuge, die Sie verwenden können, um Ihre Audio- und Videodaten zugänglich zu machen . Beim Umgang mit Audio und Video, Sie möchten sicherstellen, dass Sie alternative Methoden für die Menschen bieten, diese Informationen in diesem Diagramm zu verstehen , Ich habe einige Alternativen basierend auf der Art der Medien und Beeinträchtigung aufgelistet. Nur weil es ein Video gibt, bedeutet das nicht, dass Sie eine Untertitelung bereitstellen müssen. Wenn Machbarkeits- oder Budgetgründe dies verhindern, ist es in Ordnung, eine andere alternative Methode für den Zugriff auf den Inhalt bereitzustellen. Wenn es um das Erstellen von Untertiteln geht, gibt es einige Best Practices, die Sie befolgen können. zunächst sicher, dass die Transkription korrekt ist. Dazu gehört, dass der Inhalt nicht für die Länge bearbeitet oder interpretiert wird, was jemand gesagt hat. Es liegt in Ihrer Verantwortung, dass das Transkript genau ist, um das zu vermitteln, was tatsächlich im Video oder Audio gesagt wird . Als Nächstes behalten Sie die Beschriftungen zwei Zeilen. Das Beispiel. Bilder von Netflix. Wenn Sie die Beschriftungen auf zwei Zeilen halten, hilft dies aus einigen Gründen. 1. 2 Zeilen behindern die Ansicht normalerweise nicht. Zweitens ist es einfacher für Leute, kürzere Textzeilen zu lesen. Ihre Untertitel sollten synchron mit dem Dialog angezeigt werden, aber sie sollten auch lange genug angezeigt werden, damit sie gelesen werden können. Während es verlockend ist, mit einem Dialog Schritt zu bleiben, ist der Dialog zu schnell. Leser können möglicherweise nicht alles lesen. Wenn Sie eine Beschreibung des Videos bereitstellen, sollte es prägnant und relevant sein, der Person genügend Kontext zu geben. Dieselben Best Practices für das Schreiben sämtlicher Texte gelten auch hier . Ich bin nicht allzu vertraut mit Transkript-Tools und -Diensten, aber wenn Sie nach einigen schnellen, kostengünstigen Alternativen suchen , hat YouTube eine Untertitelfunktion, die die automatische Spracherkennungstechnologie von Google nutzt . Wenn du ein Video hochlädst, beginnt YouTube es automatisch mit der Beschriftung. Es ist ziemlich genau, und Sie können es leicht daran und optimieren Sie sie in dieser Lektion. Lesen Sie ein wenig darüber, wie Sehstörungen die Fähigkeit einer Person beeinflussen können, Audio und Video zu verstehen . Es gibt keine Projektaktivität mit dieser Lektion, aber ich ermutige Sie, einige der Barrierefreiheitsfunktionen in den Sehenswürdigkeiten von gezeigt zu überprüfen . Ich habe Links zu ihnen in der Ressourcenliste hinzugefügt 10. Letzte Gedanken: Sie haben es bis zur letzten Lektion geschafft. Wir haben viel Boden abgedeckt, und vom Ansehen dieser Videos und dem Projekt, ich hoffe, Sie haben gelernt, wie Sie über Zugänglichkeit von einem UFC nachzudenken. Warum Designperspektive Wenn es darum geht, Barrierefreiheit in Ihren Prozess zu bringen, muss kleine Zugänglichkeit nicht wie Öffnen sein. Die Schleusentore arbeiten phasenweise. beispielsweise darin bestehen, Der erste Schritt könntebeispielsweise darin bestehen,sicherzustellen, dass alle Ihre Bilder über die gesamte Textur verfügen. Es ist einmal die Deckung, die du kannst. Wir möchten sicherstellen, dass alle Ihre Farben die richtigen Farbkontrastverhältnisse haben. Sehen Sie sich die Lektionen an, während Sie daran arbeiten, Barrierefreiheit in Ihren Designprozess zu integrieren . Hoffentlich, diese Klasse nehmen, beginnen diese Ressource ein bisschen mehr Sinn für Sie zu machen. Wenn Sie eine Chance bekommen, überprüfen Sie bitte die Klasse und fühlen Sie sich, dass Sie mir auf Skill-Anteil folgen. Nochmals vielen Dank und achten Sie darauf