Eine zugängliche Website erstellen: Barrierefreiheit und Inclusive Design | Chris Worfolk | Skillshare
Suchen

Playback-Geschwindigkeit


1.0x


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

Eine zugängliche Website erstellen: Barrierefreiheit und Inclusive Design

teacher avatar Chris Worfolk

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:23

    • 2.

      Schnellstartanleitung

      3:47

    • 3.

      Barrierefreiheit Tools

      0:22

    • 4.

      Leuchtturm

      2:53

    • 5.

      Voiceover

      3:54

    • 6.

      KIEFERN

      5:47

    • 7.

      Wave

      2:45

    • 8.

      W3C-Validator

      2:20

    • 9.

      Behinderungen

      0:17

    • 10.

      Blick

      5:14

    • 11.

      Hören

      0:45

    • 12.

      Motor

      1:36

    • 13.

      Kognitiv

      1:55

    • 14.

      Inklusives Design

      1:07

    • 15.

      Semantischer HTML

      2:48

    • 16.

      TEXT

      4:11

    • 17.

      Links

      3:24

    • 18.

      Farbe

      4:54

    • 19.

      Bilder

      2:19

    • 20.

      Audio und Video

      4:37

    • 21.

      Formulare

      4:22

    • 22.

      ARIA

      9:17

  • --
  • 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.

174

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Lerne die Erstellung von zugänglichen und inklusiven Websites Wenn du Designer, Entwickler, Programmierer, Ingenieur oder Web-Enthusiast bist, ist dieser Kurs genau das Richtige für dich.

Wir lernen:

  • Alles über eine Reihe von Behinderungen einschließlich Sehen, Gehören, Motor und kognitiv

  • Tools, die uns helfen können und sogar einige der Arbeiten für uns erledigen

  • Inklusive Designprinzipien

  • WCAG Compliance

  • So verwenden Sie die ARIA

Am Ende des Kurses hast du die Möglichkeit gehabt, mögliche Probleme mit deiner Website zu erkennen und zu wissen, wie du sie beheben kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Chris Worfolk

Kursleiter:in

Chris Worfolk is a psychologist and software consultant. He is the author of How To Exit VIM and Do More, Worry Less.

Vollständiges Profil ansehen

Skills dieses Kurses

Entwicklung Webentwicklung
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: Willkommen zu diesem Kurs zur Barrierefreiheit von Web-Design. Dies ist ein wunderbares Thema, mit dem man sich beschäftigen muss , denn dadurch machen wir nicht nur das Internet zu einem besseren, faireren Ort, sondern wir bieten auch eine Menge Vorteile, wie die Öffnung unserer Websites für ganze neue Märkte und ganz neue Kunden zu machen, die Erfahrung für alle besser zu verbessern. Unsere Konversionsraten verbessern unsere Benutzerfreundlichkeit. Egal, ob Sie sich diese Quintessenz ansehen oder ob Sie nur auf der Suche nach einer wirklich wertvollen Fähigkeit für Ihren Lebenslauf sind, das ist auch wichtig , denn die Mitarbeiter wollen heutzutage wissen, dass die Dinge zugänglich machen, weil sie wissen, wie wichtig das ist. Und sie suchen danach. Und das fragen sie in Interviews. Ich bin Chris Ich bin ein Software-Berater auf Nicht seit 10 15 Jahren arbeitete jetzt für viele internationale Marken, ihnen helfen, ihre Websites zugänglicher zu machen. Und ich bin auch ein qualifizierter Psychologe. Also könnte denken, das ist ein bisschen wie eine Nicken Kombination. Aber ich liebe es herauszufinden, wie Computer funktionieren, ich liebe es herauszufinden, wie Menschen daran arbeiten, alles zusammenzubringen , so dass es wirklich aufregend ist, also kann ich es kaum erwarten, Ihnen all das Material beizubringen, das sich in diesem Kurs erholt. Vergessen Sie nicht, das Kostenhandbuch herunterzuladen, damit Sie zusammen mit den Video-Lektionen auf lesen können . Ich sehe dich in der ersten Lektion. 2. Quick: Lassen Sie uns einige der Möglichkeiten, die Sie wirklich schnell mit Barrierefreiheit beginnen können auf der ersten ist nur ein Bildschirmlesegerät zu aktivieren und zu versuchen, Ihre Website zu verwenden. Wenn Sie dies tun, viel Zeit, erkennen Sie wirklich schnell die Probleme, die sie sind. Also, wenn Sie unter Windows sind, können Sie Jaws verwenden, das ist Ah, kostenpflichtige Stück Software. Aber Sie können eine kostenlose Testversion bekommen, oder Sie können die etwas weniger beliebt verwenden, definitiv an Popularität gewinnt. Neid das A, das ist völlig kostenlos. Und wenn Sie auf der neueren Version von Windows sind, kommt es jetzt mit einem integrierten Bildschirmlesegerät namens Sprachausgabe. Wenn Sie auf Mac sind, dann hat das eine integrierte Bildschirmlesegerät namens Voice Over You auf Lenox Areas Walker und Lennon Screen Reader. Und wenn Sie Android wollen, gibt es eine eingebaute Bildschirmlesegerät namens Rate genannt Talk Back. Also diese wirklich einfach zu bekommen, halten Sie sich im nächsten Modul auf einen tiefen Sprung in einige von ihnen und wie sie funktionieren. Aber Sie können sie herunterladen, installieren und einfach anfangen, ein Spiel mit ihnen oder einigen von ihnen in nur eingebaut, so ist es eine gute Möglichkeit, um loszulegen. Zweitens können Sie auch eine ähnliche Sache mit einer Reihe von Online-Tools tun, einschließlich Welle, die nur ermöglicht es Ihnen, in einer Website setzen Sie l auf. Es wird Ihnen dann zeigen, dass Website auf all die Dinge, die Dinge möglicherweise ein Problem sein könnten. Und so wirklich, ohne Teoh alles über Barrierefreiheit lernen zu lassen, können Sie einfach anfangen, Dinge zu reparieren, weil ich Ihnen sagen werde, was kommt, haben auch eine kurze Liste von Dingen gemacht , die ich viel sehe, die mit der Verbesserung tun könnte, Also würde es ein Top für Hoffnung sein. Aber es gibt definitiv sechs. Nummer eins ist die Überschrift der Hierarchie. Sie wollen ein Ziel hassen oben auf der Seite und dann will es kaskadieren. Sie können mehrere Hitch zwei haben, aber dann wollen Sie frei hassen und hassen für auf all diese. Wenn Sie semantische Meetings haben wollen, gehen Sie in all diese in mehr Details in der inklusiven Design-Modul. Aber nur um Ihnen einen schnellen Kopf nach oben Ihre Überschriften zu geben, eine Kaskade schön hinunter Unzureichender Farbkontrast zwischen Ihrem Vordergrund im Hintergrund, so dass Text schwer zu lesen Fokusprobleme, wenn es ein Motil oder ein interaktives Element gibt. Wenn Sie ein Bildschirmlesegerät verwenden oder auf der Website über Tastatur und nicht mit der Maus navigieren , können Sie diese Modelle ein- und aussteigen? Nummer vier ist Formulareingaben zu Beschriftungen, auch wenn Sie die Beschriftungen ausgeblendet haben. Es ist wirklich wichtig, diese Etikettenluft zu haben, um den Leuten zu sagen, was los ist, weil es offensichtlich ist, wenn aus einem visuellen Kontext, aber es ist nicht offensichtlich, wenn Sie nicht sehen können. Daher ist es wirklich wichtig, diese Etiketten in ihren Tasten der Nummer fünf zu nahe beieinander zu haben . Wir denken oft an Barrierefreiheit als ein Problem von Menschen, die nicht sehen können, weil Bildschirmlesegeräte der vorherrschenden Art und Weise, wie wir Computer zugänglicher machen. Aber es gibt auch motorische Beeinträchtigungen oder einfach nur im Allgemeinen, Menschen mit großen Finger versuchen, für mobile Geräte zu tippen. Also müssen wir diese Klickbereiche schön und groß machen, so dass, wenn Sie keine perfekten motorischen Fähigkeiten haben, können Sie immer noch diese Tasten drücken, ohne auf die daneben zu drücken. Dann schließlich ist Nummer sechs Videoinhalte ohne Untertitel . Idealerweise wir jedes Mal, wenn wir Videoinhalte bereitstellen möchtenwir jedes Mal, wenn wir Videoinhalte bereitstellen, es für Menschen, die Hörschwierigkeiten haben, auch Dinge wie Podcasts oder einfach Audio-Streams können auch ein Transkript haben, so dass Menschen, die nicht hören können, oder Menschen , die nicht hören wollen, können stattdessen einfach das Transkript lesen. Und wir werden in all diesen Themen im inklusiven Designmodul näher eingehen. Aber es gibt ein paar Ideen, nur um dich anzufangen. 3. Accessibility: in diesem Modul werden einige der Tools, die Sie verwenden können, um Ihnen helfen, Probleme mit der Barrierefreiheit auf erfüllt Ihre Entwürfe besser zugänglich zu identifizieren . Wir fangen damit an, weil es Ihnen wirklich helfen wird, schnell loszulegen. Wenn Sie diese Tools in bekommen, werden sie Ihnen zeigen, wie Sie Dinge sofort beheben können, damit Sie beginnen können, Ihre Website heute besser zu machen . 4. Leuchtturm: Licht wird sich Life House ansehen, das ein in den Google Chrome Web-Browser eingebautes Tool ist. Lassen Sie uns beginnen, indem Sie zu einer Website navigieren, die wir bestellen möchten, und die Knoten, um darauf zuzugreifen . Wir müssen Chrome-Entwickler-Tools öffnen, um dies zu tun. Wir können nicht einmal schreiben lecken Hit spect oder wenn wir nur F 12 auf der Tastatur passen und dann wahrscheinlich starten diese Elemente Tablet und werden so. Aber wenn wir zur Bestellung gehen, ist es hier. Es wird diesen Auditschrei eines kleinen Lichthauses hervorrufen, und wir können wählen, wo wir es als mobiles oder Desktop-Gerät bestellen möchten. Wir können wählen, was wir bestellen wollen und wie wir die Verbindung auch simulieren wollen . Also in diesem Fall können wir es auf ein Telefon von für G simulieren, und dann, wenn wir Pete von all seinen Optionen haben, können wir einfach diese Bandreihenfolge treffen. Es ist eine Schaltfläche, und dies ist nicht speziell für die Barrierefreiheit. Auch Leistung und ASIO und gibt uns viele wirklich nützliche Informationen. Jets dauert eine Minute zu laufen, während es verschiedene Verbindungen simuliert, und dann wird es Ihnen eine Punktzahl von 100 für jedes dieser Elemente geben. So Leistung nicht so gut, aber Zugänglichkeit fto läuft wirklich gut. Also lassen Sie uns nach unten scrollen und sehen, was der Bericht Saiz. Hier sind wir in überschüssiger Fähigkeit, also ist es besonders dieses Problem gekennzeichnet. Es sagt, dass wir nicht genug Kontrast zwischen Vordergrund und Hintergrund haben, und wenn wir das öffnen, wird es sogar zu den Elementen nehmen und uns hier sagen, dass dies die Telefonnummer ist. Dies wird also unten unten auf der Seite hier sein, wo es sagt, dass es genug Kontrast gab . Gerade fair genug, Sie gehen zurück zu der Reihenfolge es und es gibt auch eine Liste von all den Dingen, die es in der Vergangenheit betrachtet . Zum Beispiel schreibt der Bereich die Rolle, Attribute, Attribute, Ideen sind einzigartig, wir können all die guten Dinge sehen, die wir getan haben, und auch alle Funktionen sind nur bekannt zugänglich, nicht relevant für diese Website, weil es einfach keine auf dieser Seite angezeigt wird auch hier. So ist dies eine wirklich nützliche Kinder, um einen schnellen Überblick über alle Probleme zu bekommen, und es wird Sie zu den Problemen als auch, und es gibt Ihnen auch, dass Performance-Tipps, wenn wir zur Leistung bekommen, gibt uns all diese Ratschläge, wie Zehe auch die Leistung steigern. Es ist also ein wirklich nützliches Werkzeug. Es gibt nur eine Menge Informationen. Freut mich schnell. 5. Voiceover: in dieser Lektion werden wir uns ansehen, wie man Voice-Over verwendet, das ist der eingebaute Reiter, der mit Mac OS geliefert wird. Andi. Es spricht mit viel, sagte. Es könnte ein paar Reden geben, während ich rede und über Gespräche lebe. Aber um loszulegen, müssen wir nur den Befehl drücken. Fünf auf alternative Stimme von auf Voiceover auf Chrome New Tab, Google Chrome Fenster Adresse und Suchleiste Bearbeiten Text hat Tastaturfokus und dann können wir Lincoln Address beigetreten sagen. Blei sank. City Clinic Co. UK hat keine Web-Inhalte und nie umgehen, wir müssen die Stimme eines modifizierenden Schlüssels standardmäßig verwenden, ihre Steuerungsoption. Also halten wir die fest, dann tun, was wir wollen. Manchmal müssen wir uns auch hier bewegen. Es ist nicht so, als würde JoJos Löhne nach oben und unten drücken. Das sind ziemlich viele Schlüssel, die man halten muss. Aber für einen Anfang, wir können nur halten die Stimme der Tasten ändern und dann scrollen Chris Quote führt, Angstklinik, private Therapie und l s ein, wo Inhalte Sie derzeit auf. Ob komisch Verschiebung ging in den Webbereich. Drücken Sie die Steuerungsoption. Verschieben Sie nach unten. Pfeil Stimme über ist ziemlich gut, wie Sie sehen können, dass, um Ihnen die Richtung der Dinge, die Sie jetzt brauchen, haben wir in den Web-Inhalt fallen gelassen, und wir vermittelten durch die Seite führt Angstklinik Crume hat Neues Fenster Weniger überspringen Hauptinhalt, ganz ein paar unbequem auf den Link, um diesen Link zu klicken. Drücken Sie die Steuerungsoption Raum, den Sie sehen, dass Websites tun, ist sie haben einen versteckten Sprung zum Hauptinhaltslink in der Nähe der Spitze. Der wird nur angezeigt, wenn Sie ihm den Fokus geben, sodass er sofort angezeigt wird, wenn Sie mit der Tastatur oder mit einem Bildschirmlesegerätblättern , wenn Sie mit der Tastatur oder mit einem Bildschirmlesegerät . Aber zitierte Verwendungen brauchen diesen Link nicht. Ich werde es nicht sagen. Link nennt ein Buch einen Termin. Sie befinden sich im Moment in der Navigation. Sie sind ein besuchtes Link-Buch online besucht, verlinkt , besucht, Link unsere Therapie und was ist derzeit auf dem Link Klicken Sie auf diesen Link Drücken Sie Steueroption Raum A erhalten Beispiel aus, wo Sie Layout Seite semantisch, aber Sie könnten es visuell anders aussehen lassen. Ein Buch online, dass wahrscheinlich der Hauptaufruf zum Handeln dieser Seite, so dass tatsächlich kommt zuerst in der Navigation auf den über Links kommen nach, dass jetzt, wenn sie schreien, durch die Seite zu gehen. Logischerweise sieht es ein Buch online, dass, obwohl visuell, wir es angelegt haben, um die Vermeidung herum zu sein. Das war also ein Witz dafür. Besuchen Sie mein Link-Buch online, drücken Sie besucht Vorname Bearbeiten Text Haupt anpassen und steuern. Google Chrome Update ist verfügbar. Sie befinden sich derzeit auf einer Schaltfläche, um auf diese Schaltfläche zu klicken, drücken Sie die Steuerungsoption Leerzeichen. Und mit Voiceover ist es ziemlich einfach, Farmen zu machen. Könntest du einfach geradeaus gehen? H n Crume hat einen neuen Window Customer. Chris Knopf. Sie sind aktuelle Chromebook Online führt Angst Klinik besucht Link Link Überspringen zum Hauptinhalt hat derzeit konzentriert. Springen Sie zum Hauptinhalt. Überschriftenebene ein Buch online. Du bist Johnson. Legen Sie Telefon für E-Mail ein. Ein sanftes enthalten komplementär. Sie möchten das Ende aus Überschriftenebene mit Verknüpfungsüberschrift verknüpfen, klicken Sie auf Hyperlink Überschrift. Es wurde schwach, aber besucht. Link besucht Presse besucht Link häufig gestellte Fragen, Leads, Angst, Klinik Web-Inhalte, Kompromiss und Kontrolle. Google Chrome-Update ist verfügbar. Sie befinden sich derzeit auf einer Schaltfläche, um auf diese Schaltfläche zu klicken. Drücken Sie die Steuerungsoption Leertaste. Ganz einfach zu testen, wie zugänglich Kugeln Likes sind, nur durch Einschalten der Voiceover. Wenn Sie einen Mac haben, Andi, Andi, fangen Sie an, für Ihre Website zu gehen und zu sehen, ob Sie die Dinge tun können, die Sie tun möchten. Und wenn nicht, dann ist es vielleicht an der Zeit, die Art zu überdenken, wie Sie es entworfen haben. Voiceover aus. 6. JAWS: auf diesem Laptop haben wir Jaws installiert, das ist das beliebteste Bildschirmlesegerät für Windows. Lassen Sie uns einen kurzen Blick darauf werfen. Hör auf, es aufzumachen, John für Windows, BBC. Das ist zu Hause. Das ist brutal. Crow BBC Das ist zu Hause. Typischerweise wird es das Farbschema ändern. Infusion in den erweiterten Farbschemata auf Ich habe bereits eine Webseite geladen hier oben auf der Hauptweg, wie Sie in Jaws navigieren ist nur durch die Verwendung der Pfeile nach oben und unten besucht Link über Seite spielen Überschrift Ebene Zugänglichkeit Lease-Liste von zwei Elementen. Gleiche Seite Link. Überspringen Sie zu Inhalten wie eine Menge von Websites zu BBC. Setzen Sie einige versteckte Barrierefreiheitslinks hinein. Wenn wir direkt zum Hauptinhalt überspringen wollen genießt, können wir Q drücken, die von den Schock-Tasten und wieder nach unten gehen. Überschrift Ebene, um die BBC Sonntag 2 Februar willkommen. Im Gegensatz zu Voiceover, das einen visuellen Indikator dafür setzt, wo Sie auf dem Bildschirm sind, tut George nicht, was offensichtlich kein Problem ist, wenn Sie blind sind, möglicherweise ein Problem für partielle, aufgeregte Menschen, aber das Feedback von Jobs im Allgemeinen gut, so dass Sie es wahrscheinlich nicht benötigen, wenn Sie ein Bildschirmlesegerät verwenden. Es ist mehr, wenn Sie als visuell sehende Person testen, dass Sie diese Art von Voice-over-Stil möchten . Indikator. Leere Streichelungsebene drei Link Australian Open Herren Titel im Link von Tennis Blank Streicheln Level drei Link von Rugby Union sind jetzt. Wenn wir es ein wenig weiter zerlegen wollen, können wir die linken und rechten Pfeile verwenden, und das wird einzelne Zeichen O r lesen und es gibt eine Menge Uhr Rolle. Genießen Sie Ihre, damit Sie es auf Satzebene lesen und es auf Zeilenebene lesen . Sie können es auf einer Charakterebene essen. Es gibt eine Reihe von verschiedenen Pralinen für diejenigen, die auf der Seite navigieren wollen. In der Regel möchten Sie es durch Überschriften tun, hoffentlich die Überschriften oder so richtig auf der Website, die Sie suchen. Also, zum Beispiel, wenn ich für die Level zwei Überschriften gehen möchte, kann ich einfach die beiden Schlüssel oder Top-Geschichten Überschrift Ebene bis Nachrichten Schlagzeilen Ebene zu leben Sport Überschriften Überschrift Ebene zu Lick an diesem Wochenende Sport Überschrift Ebene zwei drei Dinge, die wir heute lieben, Überschrift Ebene zwei auf Wenn Sie durch die Hass-freie Überschriften wieder bekommen wollen. Verwenden Sie einfach die kostenlose Kuchen-Text-Farben Capture semantische Dschungelkultur Überschrift Ebene 3. Antikes Schiff Wiederaufbau seiner weltweit größten drei D Puzzle Überschrift Ebene. Die 400 nationale Sicherheit, die Legenden über Level drei Link inspiriert. Das ist eine schnelle Demo der grundlegenden Navigation. Nun schauen wir uns an, etwas zu tun, und das wird uns eine Chance geben, Jaws ist auch für Modi zu sehen. Also, das ist laden Sie diese Website für Bleiangst dort. Wir werden nur die Startseite Neustart gegen Angstklinik Leckte verlässt Angstklinik besucht. Live Page hat vier Region Zustand Kopfschmerzen und 22 am wenigsten führt. Angstklinik. Nationale Gewehr-Therapie Sie wissen, dass ein besuchte Bein führt und Wunsch Blätter Angst besucht Link Blätter, Angst Cliff. Gleiche Seite Link Erneut zum Hauptinhalt überspringen. Ein Zugänglichkeits-Link an der Spitze, der die Menschen nicht dazu führt, genannt ein Buch und Termin Link 0113 zur Navigationsregion. Gute Verwendung der NAFTA-Tags, die Buch Godlike Link. Lassen Sie uns dieses Buch online getroffen, so dass wir auf dem Link Spaceflight zu wählen Godlike national entschieden die Klinik Dash Google Crow Book up wie nationale isst und beschlossen, die Klinik Schrägstrich Google Krähe. Aber Gott, wie nationale isst und Verlangen, bleibt die Klinik. Region Artikel Region Vorname Bearbeiten Nachrichten John People ist alt Spiele sind, um das Skript der Textbuchungsformular zu lesen . Schritt eins von drei Arten von Textformularen. Stimmen Sie ab. Vielleicht haben Sie diesen kleinen Peep gehört, als wir die Seite geladen haben, und das ist, um anzuzeigen, dass George in den Formular-Modus gegangen ist, in dem Sie die Dinge ausfüllen können . Es hat tatsächlich gesagt, Formular-Modus in diesem Fall auch. Es ist auf einer sehr für beide Einstellung, also lasst uns versuchen, etwas auszufüllen. Unser I in Jaws Wochenende drücken Sie einfach Enter, um das Formular einzureichen. Es gibt viel weiter unten, aber mal sehen, was passiert, wenn wir es jetzt treffen. Alarmieren Sie jemals Air Hollow Square Bullet, bitte. Sie diese Warnung nach Ihrer Telefonnummer SchließenSie diese Warnung nach Ihrer Telefonnummer. Vorname Bearbeiten Nachrichten John Keep Lessel Spiele sind, um das Skript von Text Chris Buchungsformular Schritt eine von drei Art von Text zu lesen . Also nicht perfekt unsere Handhabung hier, aber es hat die Warnung gelesen, also das ist großartig. Wir auch wie in einem regelmäßigen Bögen, schwächen tippen durch den interaktiven Elementtyp Text. kannst du auch tun. Genießt was? Drei. Was? Was, was? Was? Was? Was? Inhalt zitieren. Schreist du? Was? Jeter Kombibox. Bitte wählen Sie, bitte per E-Mail. Hey mit dir, scrollen Sie in der Kiste nach oben und unten. Möglichkeit, so etwas einzureichen. Schritt, um das Blätter und wünschen die Klinik, die Google Krähe Aber Gott wie dieser Schritt zu nationalen führt und wünschen die Klinik, dass Google Chrome weiter Button. Also, das ist ein kurzer Blick auf die Verwendung der Jaws Bildschirmlesegerät. Das sind Milligramm Spickzettel da draußen, die dir eine vollständige Aufschlüsselung aller verschiedenen verfügbaren Befehle geben , also empfehle ich, das auszuchecken. 7. WAVE: in dieser Lektion wird sich die Web Barrierefreiheit Bewertung auch bekannt diese Welle und dies wird von Web Ziel zur Verfügung gestellt. Also, wenn wir es die Web-Ziel-Website bekommen und wir wollen, um die Welle zu finden. Sobald wir hier sind, können wir keine Website eingeben. In diesem Fall sind wir es gewohnt. Wir sehen es los, und das wird die BBC-Website auf einer Seite laden und uns diesen Bericht geben. Es sieht ziemlich gut aus. Ein paar Kontrastfehler, keine großen Pfeile, viele Warnungen. Und wenn wir hinuntergehen, um die Details in Ihrer Wurst zu sehen, ist es auf der Registerkarte „Details“. Es wird uns durch jedes der Elemente führen. So, zum Beispiel, sehr niedriger Kontrast, können wir einfach klicken. Diese wird es nehmen, ist auf das spezifische Stück Text. Das geht viel detaillierter als Leuchtturm. Also, zum Beispiel, wir haben verdächtige Text-Warnung, weil hier haben wir mehr Link und hier haben wir mehr Link gelesen , der wirklich keinen Kontext bietet. Also, wenn Sie sich vorstellen, durchzugehen mit Screen Reader und es nur lesen mawr, nicht ein sehr hilfreicher Link können wir durch Dinge wie Texas gehen, zum Beispiel, zu klein, um zu lesen führt uns auch durch all die guten Sachen und jeder der Strukturelemente. So die Meere Zehenhelfer vorstellen, wie man Seite als Schrei Redwood navigieren, wo man durch die Überschriften ging. Es markiert jeden dieser Helfer. Verstehen? Zum Beispiel, hier ist ein H zwei und hier ist der Hass Einfrieren darunter, so dass wir überprüfen können. Wir haben alles in Ordnung. Und wenn wir keine hierarchischen Überschriften als die Welle hätten, bis würde das markiert und es induziert auch ist die Verwendung von allen. Der Bereich wird später mehr von unserem Bereich erfahren, aber dies ist eine Möglichkeit, Screenreader zusätzlichen Kontext zu geben. Und Sie können mehr Informationen erhalten, einschließlich eines eingebauten Kontrastwerkzeugs, und wir werden später auch wieder über Kontrast sprechen. Aber wieder, dies ist ziemlich detaillierter Bericht auf unserer Website, so dass Sie Ihre U R L in die Adressleiste setzen können. Es wird dies einen detaillierten Bericht über all die Dinge, die gut über Ihre Website sind und Dinge, die Sie verbessern könnten, als auch 8. W3C Validator: in dieser Lektion wird sich die W drei c Validierung ansehen, zu der ein Werkzeug ist, das unsere Hasen Mel validiert . Nun, das ist nicht wirklich direkt mit der Barrierefreiheit verbunden. Aber eines der wichtigsten Dinge, die wir tun können, um unsere Website zugänglich zu machen, ist semantic html verwendet und diejenigen validieren html, so dass der Browser Composite richtig gesagt alle Bildschirmleser zusammengesetzt richtig auf wir keine größeren Probleme wie das haben. Es gibt Autobahnen, die dieses Tool funktionieren kann. Sie können einfach die u R L in oder wenn Sie noch lokal entwickeln, können Sie eine flache Hass-weibliche Datei hochladen, wenn Sie eine hatten, oder Sie können einfach kopieren und einfügen Hasen, um hier zu mailen und drücken. Überprüfen Sie dieses Beispiel, das wir validieren werden. Auf der Grundlage, dass Sie draußen sind. Also lasst uns einfach die BBC-Website benutzen. Ich werde nach Dhere überprüfen. Wir haben den Bericht. Es hat also einen abgenutzten Fehler bei vielen Warnungen gefunden, um nicht so zu sehen, als ob hier etwas überhaupt nicht stimmt, möchte, dass wir ein Meta-Tag bei vielen Arten von alten Schulsachen höher bewegen. So zum Beispiel haben wir zum Beispielbei einem Attribut verwendet, das Text eingegeben wurde. Jarvis crypto erlauben JavaScript-Ressourcen, die ab html fünf nicht mehr benötigt werden. Setzen Sie eine Menge Code hat es immer noch in. In der Tat haben wir hier unten auch noch einige Fehler. Dies ist ein wirklich nettes Tool, weil wir alle eine Menge der Zeit denken, dass wir große HTML schreiben aber tatsächlich erstaunt Veränderung. Oder vielleicht machen wir nur einen Fehler. Vielleicht sind die Dinge einfach nicht ganz so gut, wie wir denken, und so können wir zum Validator gehen, überprüfen Sie es, beheben Sie Fehler und die bessere Qualität hasst morgen, die wir produzieren können, dann desto weniger wahrscheinlich ist es, dass ein Durchsuchen oder Screenreader wird verwirrt, wenn es sich um etwas handelt, das Sie nicht verstehen. 9. Inverkehrbringen: in diesem Modul wird auf die Palette der Barrierefreiheit Probleme, die Benutzer Ihrer Website konfrontiert sein, so dass, wenn es darum geht, es zu entwerfen, schwächen, gehen, um ein ganzes Spektrum von verschiedenen Bedingungen zu tun und stellen Sie sicher, dass wir ''re Catering für so viele wie möglich. 10. Sichtweise: in dieser Lektion wird auf der Website zu suchen. Das Royal National Institute for Blind People legt nahe, dass zwei Millionen Menschen in Großbritannien mit Sehverlust leben, was bedeutsam genug ist, um ihr tägliches Leben zu beeinflussen. Es muss also nicht vollständig sein, aber genug, dass es als Behinderung eingestuft , was ungefähr 3%unterder Bevölkerung liegt unter wird, was ungefähr 3%unterder Bevölkerung liegt. Und wenn die Länder über ein weniger gut entwickeltes Gesundheitssystem verfügen, könnte das Vereinigte Königreich sogar höher sein. Also haben wir es mit einer beträchtlichen Menge von der Bevölkerung zu tun, und das ist über eine breite Palette von Bedingungen in Bezug auf Schwere verteilt, so dass jemand keinen Ort haben könnte alles. In diesem Fall wird normalerweise Screen Reader verwenden, weil das die einzigen Optionen ist, es sei denn, sie verwenden eine Art Braille-System. Regel auf dem Desktop könnte dies Kiefer oder Neid D A oder Voice Over sein. Wenn Sie auf einem Mac und auch auf einem mobilen Gerät sind, sprechen Sie auf Android von beiden. So waren die auf dem iPhone auch sehr beliebt, zumal die mobilen dazu neigen, dann in die Software eingebaut zu kommen und völlig blind zu sein . Wir könnten auch sehbehinderte Menschen haben, also haben sie nur Sehstörungen und sie sind niedrig. Die Zeit auch Bildschirmlesegeräte verwenden, weil es einfach macht es einfacher. Aber sie können auch Dinge wie Zigeuner verwenden, um die Dinge größer zu machen. Es ist eine Menge zu bauen in Kassen dort. Es gibt die Browser-Zoom-Funktion, und Sie können Drittanbieter-Eingabehilfen Software erhalten, die ihnen hilft. Oder sie können einfach kämpfen. Ich habe Freunde, die Teilsichtigkeit auf dem Heiligen Do haben, ist einfach ihr Gesicht direkt neben den Bildschirm, so dass sie es sehen können. Es ist also auch eine Überlegung wert, dass die Leute, die große versuchen, dafür zu kämpfen. Und so wollen wir es ihnen so einfach wie möglich machen. Und dies könnte durch eine Vielzahl von Bedingungen geschaffen werden und wird einige der Auswirkungen, die später in dieser Lektion folgen. Eine andere Sache auch, wirklich seine Farbenblindheit betrachten. Dies beeinflusst etwa 5% der Menschen wollen 20 auf, wie viel Farbenblindheit, die variiert. Aber es neigt dazu, dass Menschen spezifische haben spezifische Sensoren in ihren Augen fehlen , so dass sie neigen dazu, von einer bestimmten Kombination von Farben betroffen sein, von denen die häufigste Rotgrün ist. Aber es gibt viele verschiedene Beispiele, und es gibt einen großen Geschlechterunterschied in Colorblind sagte Nun, Männer viel eher mit Farbblindheit und Frauen zu kämpfen. Und es kann auch Grady atiert werden. So, wie farbblind Sie sind, ist auch auf einer Skala. Also, selbst wenn Sie rote grüne Farbenblindheit haben, könnte es sehr schwerwiegend sein, und Sie könnten nicht in der Lage sein, immer noch zu unterscheiden, wenn die beiden oder es könnte nicht sein, nicht schwerwiegend auf die meiste Zeit. Wenn Sie die Dinge ziemlich deutlich machen, werden die Menschen in der Lage, sie auseinander zu unterscheiden ist eine große Auswahl dort. Einige der Auswirkungen, die wir finden, ist offensichtlich einfach nicht in der Lage zu sein, alles zu sehen. Aber auch die Dinge könnten verschwommen sein. Oder vielleicht haben Menschen blinde Flecken, die ziemlich häufig sind. Und sie sind sich dieser blinden Flecken vielleicht gar nicht bewusst, weil, es sei denn , du bist sehr hyperfokussiert auf sie. Es ist wirklich leicht zu vergessen, weil unsere Vision Witze kompensiert. So zum Beispiel haben wir zum Beispielalle einen toten Fleck in jedem unserer Augen, wo der Sehnerv herauskommt. Die Rückseite des Augapfels. Es gibt keine Sensoren dort, um das Licht zu erkennen und sagte die Reserve Spot Weg. Wenn du ein Auge schließt, kannst du das. Das ist nur ein Ort in der Übersee. Ich wir können einfach nichts sehen, aber wir sehen nie, dass, weil unsere Vision, unser Gehirn, einfach nahtlos kompliziert Ring füllt in den Rest der Welt, weil was wir sagen ist keine direkte Bilder, während unser Gehirn denkt gibt es basierend auf den Informationen, die aus meinen Augen bekommen. Jetzt sind wir die Sinne. Das bedeutet also, dass wir alle blinde Flecken haben und sie nicht bemerken. Also, selbst wenn Sie einen Zustand haben, der größere, bedeutendere blinde Flecken erzeugt , Chancen, dass ich Ihr Gehirn wird Zigeuner Dinge in so blinden Flecken wirklich wichtig füllen. Außerdem können Leute nur einen kleinen Teil des Bildschirms auf einmal einen Bericht sehen. Wenn sie heranzoomen oder sie wirklich ihr Gesicht gegen den Bildschirm drücken müssen, dann werden sie nicht in der Lage sein, das Ganze auf einmal aufzunehmen. Deshalb wollen wir das und wie die Dinge in unseren Designs skalieren. Außerdem können die Menschen möglicherweise nicht in der Lage sein, Farbe zu unterscheiden, daher möchten wir sicherstellen, dass im Durchschnitt Farbe als Indikator verwendet 11. Hören: in dieser Lektion werden wir über das Hören sprechen. Die Anhörung ist nie abgestuft Zustand. Manche Menschen haben überhaupt kein Gehör. Manche Menschen haben nur eingeschränktes Gehör. Auf eine andere häufige Bedingung ist Tinnitus, wo Sie haben ah, Ton ständig gehen in den Ohren, Regel Klingeln oder Summen so etwas, was wieder macht es schwieriger zu hören. Andi kann ziemlich unangenehm sein, mit in Bezug auf das relevante Teoh Web Design zu leben. Es ist eine ziemlich kurze Liste, weil wir hier über Audio- und Video-Inhalte sprechen, solange Sie Factoring dort. Das ist der Hauptanliegen, und wir schauen uns an, wie das später in diesem Kurs zu tun ist. 12. Motor: in dieser Lektion werden motorische Beeinträchtigungen untersucht, so dass einige Benutzer Schwierigkeiten haben, die Maus zu steuern. Sie können eine Schlüsselstation verwenden, um nie statt zu bekommen, oder sie können einfach die Maus verwenden, aber finden es wirklich schwierig, auf Dinge zu klicken, so dass sie zwei Hände haben, die eine Hand haben können, die sie möglicherweise keine Hände haben. Sie können eine Reihe verschiedener Eingabehilfen verwenden. Manche Leute müssen den Computer mit dem Mund kontrollieren, weil sie keine Korruption bis zum weniger schweren Ende haben , wo vielleicht jemand so etwas wie die Parkinson-Krankheit hat , wo sie wirklich kämpfen, ihren Mund zu bewegen wo sie wollten. Theo und das Klicken auf kleine Ziele ist wirklich schwierig, oder sie können Sprachsteuerung verwenden, um diesen Computer zu steuern. Die Effekte bedeuten also, dass, wenn Sie zum Beispiel viele Links oder Schaltflächen in der Nähe haben, einige Benutzer wirklich kämpfen können. Oder wenn Sie eine riesige Liste von Links haben und jemand die Tastatur benutzt, blättern Sie durch die Seite, dann wird das wirklich irritierend sein, weil es lange dauern wird, um durch diese Liste zu gelangen . Und so wollen wir Tastatur, Navigation und Navigation auf der Seite mit etwas über als eine Maus in Betracht ziehen. Wir wollen auch die Größe eines unserer Tap-Ziele oder Links berücksichtigen, und wir werden uns das im inklusiven Design-Modul ansehen. 13. Kognitiv: in dieser Lektion werden kognitive Einschränkungen untersucht. Nein, alle Behinderungen sind körperlich, und Menschen können auch Lernschwierigkeiten und spezifische Probleme mit ihrem Gedächtnis haben. Ihre Aufmerksamkeit. Es könnte auf dem autistischen Spektrum sein. Sie könnten Legasthenie oder Ablenkungen haben, was der Mathematik entspricht Legasthenie. Es gibt also alle Dinge. Selbst wenn die physischen Körper der Menschen gut funktionieren, könnten sie immer noch Probleme haben, die Dinge zu verwenden, die wir entwerfen. Und es ist wichtig, dass wir, um inklusiv zu sein, diejenigen in einem Schwung zu berücksichtigen, und dies bedeutet in der Regel eine Vereinfachung. Wir wollen also sicherstellen, dass wir einfache, zugängliche Sprache verwenden . Das wollen wir auf sehr lesbare Weise präsentieren. Das bedeutet also, Dinge wie Zeilenabstand zu betrachten und mit Chunking-Informationen sicher . Also geben wir den Menschen keine riesigen, unlesbaren Absätze. Wir wollen, dass das Design auf dem Aufruf zum Handeln klar ist, was Sie von ihnen wollen. Klicken Sie auf eine Schaltfläche, füllen Sie Formulare aus, lesen Sie Artikel, was auch immer es ist, ist wirklich klar. Wir wollen ein konsistentes Aussehen und Gefühl Wenn wir also ein Farbschema in einer bestimmten Schaltfläche für die nächste Aktion haben, möchten wir sicherstellen, dass dies auf der gesamten Website konsistent ist, so dass es wirklich offensichtlich jemanden ist, der versucht, mit unseren Designs, was los ist. Und natürlich machen all diese Dinge einfach unsere Website für alle besser. Das ist das Schöne an Inklusive-Design ist, wenn Sie es besser für jemanden kämpft, machen Sie es auch besser für Menschen, die keine körperlichen oder kognitiven Beeinträchtigungen haben, und Sie haben Conversion-Raten sind wahrscheinlich höher für alle, nicht nur für die Menschen. Wir haben spezifische Probleme, auf die Sie reagieren wollen. 14. Inklusives Design: in diesem Modul erhalten technische, wird in die hasst ihn aus gehen, und schauen Sie sich an, wie wir unsere Websites strukturieren können, um sie für jeden zugänglich zu machen, immer direkt in die Details und die Arbeit an den Web-Inhalten. Barrierefreiheitsrichtlinien bieten uns eine Menge Anleitungen, wie wir dies tun können und welches Maß Compliance Sie erreichen möchten, liegt bei Ihnen. Die meisten kommerziellen Unternehmen neigen dazu, für Double A zu gehen, was ein großes Maß an Zugänglichkeit ist und Ihnen immer noch die Flexibilität gibt, dies zu tun. Schöne Spaß Design-Arbeit Wenn Sie extra streng sein wollen, zum Beispiel, Sie sind eine Regierungsbehörde, waren eine Aufgabe, alle in der Bevölkerung zu erreichen und nicht zu viel Spaß zu haben. Sparky kommerziell basierte Designs. Dann können Sie für Triple A gehen, das ist ein extra harter Standard zu erreichen. Um zu genießen. Ihre Websites sind super zugänglich Wie wir gehen, Obst wird auf diese berühren und wir gehen für jeden Bereich aus wurden entworfen, um zu sehen, was wir tun können . Was ist Best Practice 15. Semantischer HTML: in dieser Lektion wird auf semantische aussehen. Html. Hoffentlich sind Sie bereits mit dem Begriff vertraut, aber wenn nicht, dann bezieht er sich auf die Bedeutung von Tags. Also in Hates Tomorrow vier tendierten wir dazu, alles in DIV zu wickeln. Auf span Tags und thes haben fast keine Bedeutung von. Und dann ist das standardmäßig blockiert man. Wenn es ein In-Line-Element gibt, sagen sie uns nichts über Page. Also, wenn ein Computer den HTML verarbeitet, er weiß nicht, was etwas ist, wenn es eine devora-Spanne ist und dann hasst ihn oder fünf kam auf wollte dieses Problem adressieren und mehr aussagekräftige Tanks beantworten. Also, jetzt haben wir Dinge wie die Header und Fußzeile Tank haben wir im Hauptartikel Tank die beiseite. Tag, um zu gewinnen. Um die Sidebar zu erhalten, haben wir Zahlen, um Diagramme und Diagramme in einzufügen. Wir haben Knaves, um die Navigation in Andi zu bringen. Nun, wenn Sie sich eine bezahlte geschrieben und hoffen auf meine fünf, es macht nur viel mehr Sinn, weil es für einen Computer sehr einfach ist zu sehen Was ist die Kopfzeile? Was ist die Navigation? Wo sind die Artikel? Was ist in der Fußzeile? Und es macht alles viel mehr Sinn, jetzt ist das wirklich wichtig, weil es nicht nur Browser und Suchmaschinen sind, die in der Lage sein müssen, dies zu verstehen. Aber wenn ein Bildschirmlesegerät kommt, um herauszufinden, was in einer 60 Meilen Seite ist, muss es die Seite verstehen, damit es dem Benutzer helfen kann. Jetzt vergiss die Gegend. Wenn ein Benutzer zur Menüleiste zur Navigation gelangen möchte, wo ist das, wenn er alle Links im Kopf überspringen und zum Hauptinhalt gelangen ? Wie? Es ist einfach für jemanden, der nur visuell aufgeregt ist, das zu tun, weil sie nach unten scrollen können . Aber wenn dein Bildschirmlesegerät das tun will, wie bekommst du dann diesen arbeitenden Wolf? Wir verwenden semantische Tags. Wir können das meiste davon kostenlos bekommen, weil wir dem Screenreader sofort mitteilen, wie die Seite funktioniert, während wir durchgehen. Der Rest dieses Moduls wird sich das genauer ansehen, aber es gibt so viele semantische Informationen zur Verfügung, wenn wir die pflanzlichen fünf Tanks verwenden, aber auch wenn wir einfach das Zeug benutzen, das eingebaut wurde, um ihn zu hassen l von den frühen Tagen. Wenn wir beispielsweise Formulare verwenden,stellen Sie sicher, dass die Eingaben der richtigen Typen und stellen Sie sicher, dass sie Etiketten auf ihnen haben. beispielsweise Formulare verwenden, Wenn wir beispielsweise Formulare verwenden,stellen Sie sicher, dass die Eingaben der richtigen Typen und stellen Sie sicher, All die Dinge wie diese, die einen Computer sagen, die dem Browser sagen, wie die Seite funktioniert super nützlich für Bildschirmlesegeräte, weil es ihnen geholfen hat, es zu erarbeiten und die Informationen in einer wirklich kohärenten Art und Weise in den Laboren verwendet, um durch unsere navigieren viel einfacher. 16. Text: in dieser Lektion wird den Yusof-Text in Designs sehen, und eines der großen Probleme hier sind Überschriften, die CSS verwenden. Wir können Überschriften aussehen lassen, was auch immer wir wollen, damit wir eine Hitze haben können, die wirklich klein ist. Wir können einen Hass sechs haben, der massiv ist und die Seite über DSO dominiert. Was wir tun möchten, ist das richtige Tag für die semantische Bedeutung zu verwenden und alles andere wird über CSS gemacht. Also wollen wir nicht daran denken, dass Tags einen bestimmten Look oder Stil darstellen. Setzen Sie die richtigen Tags ein, um semantischen Sinn für die Seite zu machen. Dann werden wir sie einfach stylen, wie wir wollen. Also, was das bedeutet, ist, dass jeder Wilderer getragen hat und Witz getragen hat Hass. Ein Tag auf dieser Seite ist Ihr Titel für die Seite. Das ist also eine Sache, die Sie lesen, und es sagt Ihnen, worum es auf dieser ganzen Seite unten geht, dass wir mehrere Hates zu Tags haben können. Wenn es also mehrere wichtige Themen auf der Seite gibt, könnte jeder sein eigenes Alter haben, und dann unterhalb dieser würden wir jedes von dem unteren Down-Tag haben . Also, wenn Sie Unterabschnitt in ihnen haben , dann werden Sie anfangen, Hass frei zu verwenden und vier zu hassen und alles in ihm sollte hierarchisch sein . Wir wollen nichts überspringen, damit wir nicht für meinen Hass auf eine riesige Vier gehen wollen. Denn wenn das passiert ist und Sie einen Screenreader verwenden, der durch die Überschriften blättert , könnten Sie denken, dass Sie den Hassbaum vermasselt haben. Oder wenn es liest, auf Ebene für etwas zu gehen , wirst du denken, du hättest den Hass frei verpasst. Und in der Tat, wenn es einfach nicht auf dem Design war, dass super verwirrt so typischerweise könnte man sagen, Hass eines der oben auf der Seite. Und dann, wenn Sie Siris von Artikeln haben, die hassen zwei oder wenn es eine Artikelseite selbst ist, könnte der Hass sein der Artikelname und dann der Körper darunter. Und wenn Sie Dinge wie Seitenleisten oder Fußzeilen haben, die auch Überschrift benötigen, dann ist Ihr Bestes, diejenigen zu machen, die ich hasse, zu einem Schwellen zu machen und dann alle Unterüberschriften darunter , dass dieser Aufschlüsselungsteil dieses Lehren dann auf den Hass frei gehen würde. Vier Textlayout ist auch wichtig, so dass wir wollen, dass starke Farbkontrast in der Lektion über Farbe wird darüber sprechen , was , genau ist eine zugängliche Ebene des Kontrastes. Aber wie wir bereits erwähnt haben, können Sie Werkzeuge verwenden, um den Kontrast zu messen, um sicherzustellen, dass er ausreichend ist. Wir wollen Text schön und groß, um es lesbar zu machen. Wir wollen Absatz-Tags so wieder verwenden, so dass das semantische HMR vorwärts funktioniert. Und anstelle der Zeilenumbruch-Tags wollen wir alles. Dieser Absatz will es innerhalb eines Absatzes Tank auf sein. Wir möchten auch Zeilenabstand und Schriftauswahl berücksichtigen. Traditionell haben Serifen-Schriftarten, die mit den kleinen Dekorationen auf, für die meisten Menschen ihre leichter zu lesen. Aber es ist nicht viel drin. Und es gibt Hinweise, dass, wenn man Bedingungen wie Autismus hat, es eigentlich schwieriger zu lesen ist. Also San Serif Schriftarten sind eine gute Wahl und vielleicht speichern Sie die Sarah Telefone vier Überschriften. Schauen wir uns ein Beispiel aus einem gut angelegt Rückseite des Textes versus und nicht so gut angelegt Buch der besteuerten. Also hier haben wir einige Beispiele, wo auf der linken Seite alles in einen riesigen Absatz gesetzt würde nicht viel Zeilenabstand zwischen ihnen auf der rechten Seite haben wir zwei Absätze auf viel Zeilenabstand auf. Ich denke, die meisten von uns würden zustimmen, dass der Text auf der rechten Seite besser lesbar ist als der besteuerte auf der linken Seite und wieder nur durch diese Verbesserungen half allen. Es ist inklusive Design. Es ist nicht nur für bestimmte Bedingungen, aber tatsächlich unsere Website wird besser für alle auf das ist, was wir wollen. 17. Links: in dieser Lektion wird sich Links ansehen. Also eines der Dinge, die wir tun wollen, ist sicherzustellen, dass wir die Tag Hyperlinks und Schaltflächen für ihren beabsichtigten Zweck verwenden , so dass ein Link sollte Sie zu einer anderen Webseite einem Bulletin führen sollte eine Art von Funktionalität zu tun. Also wollen wir diese Idee vermeiden, wo es ein Link-Tag und Entführung nimmt. Es war eine Art von On Click-Ereignis, etwas zu tun, wenn es tatsächlich nie beabsichtigt war, ein Link zu sein . Also haben wir die A, Tag sagte sendet Benutzer auf eine andere Web-Seiten. Also wollen wir nicht diese falschen Bührle's, wo wir einfach ein wenig Hash reinlegen, dann entführen Sie es mit dem On Click. In solchen Fällen möchten wir sicherstellen, dass wir eine Schaltfläche verwenden. In ähnlicher Weise sollte der umgekehrte Weg um Ah, Button uns nicht zu einer anderen Webseite führen. Es sollte eine Art von Aktion durchführen, wenn wir das verwendete auf eine andere Webseite nehmen müssen , als wir einen Link verwenden sollten. In Bezug auf das Styling dieser können wir CSS verwenden, um sie aussehen zu lassen, wie wir wollen. Das bedeutet also, dass Sie ein Link-Tag wie eine Schaltfläche aussehen lassen können, die Sie machen können, dass eine Schaltfläche wie ein Link aussieht, also denken Sie zuerst semantisch. Was macht es und benutzt den entsprechenden Tank? Und dann können Sie Stil der Macht, die Sie jetzt in Bezug auf die Links wollen. Wie wir bereits besprochen haben, sollten wir niemals nur Farbe verwenden, um etwas anzuzeigen. Also wollen wir einen anderen Indikator, weshalb Links traditionell Bohne in blau und unterstrichen haben, um dort einen Link anzuzeigen. Aber es gibt noch andere Dinge, die wir tun können, aber das war's. Gute Strategie, denn das ist traditionell, was auf hasst Jemele verwendet wurde. Andi ist das, was weiterhin von vielen Websites verwendet wird, daher ist es sehr verständlich, wenn wir besuchten Links in einem Screenreader etwas anders aussehen lassen können . Sie werden dazu neigen, ausgelesen wurde Link trotzdem besucht, so dass Sie vielleicht nur diese Informationen für visuell sehende Benutzer zur Verfügung stellen möchten. So gibt es zumindest so viele Informationen zu bekommen, ist ein Bildschirmleser von Weißen. Ein Bildschirmlesegerät bekommt einen Vorteil. Vielleicht ist das schön, dass sie nicht immer zurücklaufen, und wir wollen auch über den beschreibenden Text nachdenken. Also wollen wir das vermeiden. Klicken Sie hier, um einen Artikel zu sehen, der sagt Der Klick hier ist der Link. Schwierigkeit damit ist in einem Screenreader readapt Abschnitt zu einem Zeitpunkt, so dass wir nur sagen Link. Klicken Sie hier, und das gibt Ihnen nicht wirklich Informationen darüber, worum es bei dem Link geht. Wenn Sie also denken, stellen Sie sich vor, wenn der Bildschirmleser die Steuer ausliest, die ein Lincoln ist, heißt es Link. Und dann liest es sich aus. Die besteuerten, die besteuert sollte dem Benutzer sagen, gehen. Die Verbindung ist wegen Verbündeter. Alles, was wir bekommen, ist eine Reihe von Dingen, die sagen Klicken Sie hier, klicken Sie hier. Klicken Sie hier auf. Das macht keinen Sinn für Seo-Zwecke, weil es den Suchmaschinen nicht sagt, worum es bei dem Link geht. Auf das gleiche Problem, es sind Bildschirmlesegeräte. Sie können sehen, dass es ein Link ist, aber sie wissen nicht wirklich, worum es bei der Verbindung geht. So stellen Sie sicher, dass wir beschreibend in unseren Links besteuert haben, fügt eine Menge Kontext 18. Farbe: in dieser Lektion wird sich die Rolle ansehen, die Farbe in unserem Design spielt. Eines der wichtigsten Dinge ist, sicherzustellen, dass es genügend Kontrast zwischen dem Vordergrund auf dem Hintergrund gibt , denn wenn wir Text auf, sagen wir, weißen Hintergrund, schwarze Steuer, super leicht zu lesen. Aber eine Menge Zeit für populäre zu setzen, sagen wir, Steuern über Bilder auf es gibt nicht immer so viel Kontrast in MX-Angriffen wirklich schwer zu lesen. In Bezug auf Barrierefreiheit waren also klare Kontraststandards, die erreicht werden sollten , um diesen Text lesbar zu machen. Also ein konformer, was die meisten kommerziellen Unternehmen nach normalem Text streben würde, will 4,5 zu 1 bei großen Angriffen sein , weil es leicht zu lesen ist, kann ein bisschen weniger Kontrast haben. So schön, einem frei zu sein. Wenn Sie, sagen wir, eine Regierungsabteilung oder jemand sind sagen wir, , der eine Organisation, die wirklich hohe Zugänglichkeit Standards hat , möchten Sie wahrscheinlich die Triple A Compliance geben, was Ihre normale Steuer bedeutet will einen Kontrast von 7 zu 1 auf Ihre große Steuer haben will einen Kontrast von 4,5 zu 1 haben. Woher wissen Sie, wie viel Kontrast ist? Nun, Sie können eines von den vielen Kontrastwerkzeugen verwenden. Zum Beispiel Zum Beispiel wird diese von Web Aim zur Verfügung gestellt, und Sie nehmen die Hex-Werte Ihrer Farben und Sie schlagen sie ein, und es wird Ihnen sagen, was Ihr Kontrastverhältnis ist. Es gibt auch eine Vielzahl von Over-Tools. Solch ein Browser-Plug-ins, die dies für Sie tun wird, vielleicht sogar Pipettenabschnitt auf Ihnen sagen, was der Kontrast gibt es, um es viel einfacher zu machen . Cedar müssen die Farbwerte herausziehen und an ein unabhängiges Werkzeug gebracht. In diesem Beispiel verwenden wir, ah, ah, weißer Hintergrund, einige schöne blaue Text, und das schafft einen großen Farbkontrast geeignet für alles. Aber sagen wir, wenn wir eine Art rot besteuert machen, als wenn es nicht stark genug wäre, sagen Sie noch einmal, wir haben ein mittleres Rot auf weißem Hintergrund verwendet, das nicht unbedingt die Barrierefreiheitsrichtlinien erreichen würde , denn wenn Sie Blick auf, sagen wir, den normalen Text dort, es ist viel schwieriger, im schwarzen Text zu lesen. Nun, wenn wir zu großen Text bewegen, dann ist es ein bisschen einfacher zu lesen, die dann doppelt ein erreicht würde, weil Sie nicht so viel Kontrast auf den großen besteuerten benötigen . Aber es würde immer noch nicht die Trip Lay Standards erreichen, weil Sie wirklich starken Kontrast brauchen , um es leicht zu lesen. Ich hasse es, nur auf das Beispiel zu schauen und das zu vergleichen, um zu sagen, den Titel der Folie. Es gibt einen deutlichen Unterschied darin, wie leicht sie zu lesen sind. Die andere Sache zu beachten ist, dass Farbe nicht als Indikator verwendet werden sollte. Also haben wir darüber in Links gesprochen. Sie können Links nicht einfach in einer anderen Farbe machen. Sie wollen etwas über Indikator haben, denn wenn der Benutzer farbblind ist, als sie nicht unbedingt in der Lage sein, zu sehen. So zum Beispiel wird zum Beispiel eine Menge Zeit Erfolgsmeldungen grün sein und Fehlermeldungen werden rot oder Schaltflächen und Links zeigen Dinge gut an. Es ist nichts falsch daran, eine grüne Erfolgsmeldung und eine rote Pfeil-Nachricht zu haben, denn für die meisten Menschen zeigen diese Farben den glücklichen Pfad bei einem Fehler an. Aber wir können das nicht nur verwenden, denn wenn wir das tun, wenn diese Benutzer farbblind sind, würden sie nicht in der Lage sein zu sagen, was los ist. Schauen wir uns also ein Beispiel dafür auf einer echten Website an. Also auf der Leeds Angst klirrt nach Finale, wenn das Top-Beispiel einer Fehlermeldung, die nicht sehr zugänglich wäre , denn wenn Sie rot, grün colorblind sind, können Sie möglicherweise nicht in der Lage sein, dass rot zu sehen. Und es würde nicht unbedingt darauf hinweisen, dass das ein Fehler war. Während im unteren Beispiel haben wir dann ein kleines Fehlerdreieck mit der entsprechenden Steuer hinzugefügt, um den Benutzer wissen zu lassen , ihre Bildschirmlesegerät dort in einer Luftlinie, so dass, wenn sie es verwenden, sieht dies, sie können Schau dir die Farbe an. Sie können sich das kleine Symbol ansehen, das auf die beschreibende schauen kann, besteuert im Symbol auf all diesen verschiedenen Funktionen. Sagen Sie ihnen, dass es ein Fehler ist. Also, wenn sie mit irgendeinem dieser Dinge zu kämpfen haben, dass viele Informationen, um ihnen Kontext Toe zu geben, lassen Sie sie wissen, dass es ein Fehler ist. Wir verlassen uns nicht nur darauf, dass sie eine perfekte Farbsicht haben, um das herausfinden zu können. Es macht es auch semantischer, weil wir davon ausgehen, dass die Menschen wissen, dass Rot Ära bedeutet. Aber das könnte eine kulturelle Sache sein, also geben Sie ihnen nur einen viel Kontext und es gibt viel semantische Bedeutung wie möglich macht es klarer 19. Bilder: in dieser Lektion wird sich die Verwendung von Bildern ansehen, und dies beginnt mit den Out-Attributen. Dies ist eine alternative Beschreibung, die Bildschirmlesegeräte einen Kontext darüber gibt, worum es geht . Sie kleben also Ihr Bild ein und beschreiben dann im Out-Tag, was sich auf dem Bild befindet. Wenn Sie also ein Bildschirmlesegerät verwenden, wissen Sie, was los ist. Und wir müssen die Out-Attribute nur verwenden, wenn es etwas zu beschreiben gibt. Irgendwas ist also rein dekorativ, dann brauchen wir nicht da drin. Was wir wollen, ist ein leeres Tag, zum Beispiel, zum Beispiel, auf diesen Buttons hier haben wir ein kleines Newsletter-Symbol, um zu sagen, Join unserem Newsletter Keine Person Icon, um einen Rückruf anzufordern, der, offensichtlich aus dem Link-Text. Was ist da los in den Symbolen Ziffern? Dekorativ, um mehr Bedeutung zu verleihen. In diesem Fall, anstatt das Bild zu beschreiben, weil das niemandem einen Wert geben würde, der einen Screenreader verwendet , würden wir immer noch das out Attribut enthalten. Aber es wäre einfach leer und jemand, der es einschließt, so dass ein Bildschirm, den wir wussten, dass es leer sein soll, denn wenn Sie es einfach auslassen, wird der Bildschirmleser auf beschriftetem Bild auslesen, während wenn wir nur legen Sie ein leeres Tagging heraus, das der Bildschirmleser weiß, um dies nur zu ignorieren , weil es dekorativ ist. Andi, es sei denn, du siehst es an, du wirst zitiert. Du brauchst nichts darüber zu sehen. Wir müssen auch in Bildern besteuert betrachten. Und generell wollen wir dies möglichst vermeiden. Da Bildschirmlesegeräte nichts dagegen tun können und einige Eingabehilfen, die den Text zum Beispiel ändernkönnten , die den Text zum Beispiel ändern , könnten sie mehr Kontrast dazu hinzufügen. Oder sie könnten die Schriftgröße gut ändern. Sie können nichts dagegen tun, wenn es in ein Bild eingebettet ist, damit sie nicht daran arbeiten können . Aber wenn Sie es verwenden müssen, dann stellen Sie sicher, dass es der Barrierefreiheit entspricht. Standard bedeutet dies, einen Kontrast von mindestens frei zu haben, auch wenn es sich um einen großen Text handelt. Und selbst wenn Sie nur eine doppelte Compliance wünschen, wenn Sie für Triple A oder seinen kleineren regulären Textkörper gehen , als der Kontrast noch höher sein möchte, um den Menschen die beste Chance zu geben , ihn lesen zu können 20. Audio und Video: in dieser Lektion wird sich die Verwendung von Multimedia innerhalb unserer Entwürfe ansehen. Für die Videoproduktion ist es ein guter Ausgangspunkt, blinkende Bilder zu vermeiden. Dies verursacht echte Probleme. Menschen. Wir haben Bedingungen wie Epilepsie, aber auch Dinge sind Alternativen gut auf. Um ehrlich zu sein, blinkend, Andrea ist einfach nur ärgerlich über das Brett. Viele Menschen finden ärgerlich, und deshalb, wenn wir es vermeiden können, ist das ein guter Anfang. Überlegen Sie, eine Audiobeschreibungen darüber zu erstellen, was vor sich geht. Tun Sie das während der Aufnahme des Videos, weil es wirklich schwer ist, zurück zu gehen und es später zu tun , dann ging Bearbeiten der Videos. Wenn Sie besteuert verwenden müssen. Idealerweise wollen wir das nicht. Aber wo, wo wir es verwenden müssen, lassen Sie uns einfach sicherstellen, dass es den Barrierefreiheitsrichtlinien entspricht. Also wollen wir viel hohen Kontrast auf ihre auf. Wir wollen einen schönen, großen Text. Wenn wir dann nehmen, dass und legen Sie es in eine Webseite. Wir wollen die nativen Tags von möglich verwenden, um ihm diese semantische Kontrolle zu geben, so dass das Video und die Audio-Tags, anstatt die alten School-Flash-Player und solche Dinge, wenn wir viel besser, um die Blumen der Kontrolle über dass, denn wieder, das ist etwas, in das ein Eingabehilfe-Tool gehen kann. Kann die Hoffnungen überprüfen, die TML verstehen kann, was vor sich geht und dem Benutzer die Kontrolle über diese Probleme geben kann. Wenn wir ein proprietäres System benutzen, haben sie nicht notwendigerweise wieder Zugriff darauf. Vermeidung von Auto-Play ist großartig, die Menschen finden nicht wirklich ärgerlich wieder. Das ist nicht etwas nur für bestimmte Barrierefreiheitsprobleme, die es eine Barrierefreiheit Richtlinien ist, um letztlich nicht zu verwenden, sondern auch alle anderen werden Ihnen danken, weil fast jeder findet Auto-Spiel ärgerlich als auch auf. Wir möchten sicherstellen, dass diese Video-Steuerelemente zugänglich sind. Um benutzerdefinierte Steuerelemente zu implementieren, möchten wir diejenigen mit der Tastaturnavigation testen, um sicherzustellen, dass sie gut funktionieren und dass Sie sie durchlaufen können. Wir haben gesagt, Screenreader oder ohne eine Maus zu verwenden, nur um sicherzustellen, dass jeder zu diesen Kontrollen, wo möglich, können wir immer eine Abschrift von dem, was los ist Andi wieder. Dies ist nur etwas, das es für alle besser macht, denn selbst Menschen ohne Behinderungen ziehen es oft vor, das Protokoll zu lesen, zum Beispiel, Sie sind mit öffentlichen Verkehrsmitteln. Vielleicht hast du deine Kopfhörer vergessen oder du liest einfach nur mit dem Video zusammen. Ich kenne auf einer Menge die FedEx Kurse. Sie stellen das Video auf einer Seite des Bildschirms, und sie setzen das Protokoll auf der anderen Seite des Bildschirms, so dass Sie buchstäblich das Video hören und lesen Sie auf seine offensichtlich großartig, wenn Sie hören und Eltern haben. Aber viele Leute, die gut hören können, tun das gerne auch. Also, wieder macht es einfach besser für alle auf. Sie können leicht diese Transkriptionen und Untertitel von Anbietern gemacht bekommen, so dass Sie gehen und jemanden auf einen Dienst wie fünf Jahre einstellen können. Sie können zu Transkriptionsdiensten wie Rev auf den Ägyptens gehen. Geben Sie ihnen Ihre Audiodaten in Ihrem Video und sie kämpfen mit Untertiteln oder Transkript oder was immer es ist, das Sie wieder wollen. Beschriftungen, die einem Transkript ähneln, werden zu einer schriftlichen, polierten Version. Untertitel sind die Untertitel. Es wird tatsächlich in das Video wieder auf bekommen. Wir können leicht rasten. Gehen Sie und erhalten Sie diese aus Werkzeugen wie rev oder fiver. Wir können auch Ihre Videos auf YouTube hochladen, und YouTube wird jetzt automatisch einige Untertitel für Sie erstellen, oder wir können sie manuell mit Software wie subs Factory erstellen, die lassen haben diese Untertitel in. Es hängt also davon ab, woran du arbeitest. Wenn Sie die Dinge kostengünstig halten möchten, dann können Sie sich mit Sub-Fabrik tun. Wenn du es nur erledigen willst, kannst du uns irgendwohin bringen. Bezahlen Sie einfach jemand anderen, um es für Sie zu tun. Und dann könnten wir diese einfach auf das Video auf diese Weise kleben, Auch wenn Sie nicht hören können, können Sie mit lesen, was passiert. 21. Formulare: in dieser Lektion betrachten wir die Verwendung von Formularen in unseren Entwürfen. Es ist eine der mächtigsten Funktionen, die wir verwenden können. Hier ist das Etikett. Jede Eingabe sollte mit dem Label vorbereitet werden, so dass, wenn ein Bildschirm wirklich zu diesem Formularfeld kommt , es identifizieren kann, was in dieses Feld eingegeben werden soll, indem er dem Benutzer aus dem Etikett ausliest . Jedes Mal, wenn Sie auf Eingabe gehen, sollten sie unangemessene Beschriftung sein, die dem Benutzer mitteilt, was los war, ist ziemlich gängige Praxis geworden , die Platzhalterattribute auch für Felder zu verwenden. Dies wird nicht empfohlen, da dies viel besser als zusätzlicher Hinweis dient, anstatt die gleichen Informationen wie ein Label zu präsentieren. beispielsweise ein Geburtsdatumsfeld hatten, Wenn Sie beispielsweiseein Geburtsdatumsfeld hatten,möchten Sie, dass das Etikett das Geburtsdatum angeben soll. Sie würden das Geburtsdatum nicht in den Platzhalter einfügen, da dies Informationen duplizieren würde . Stattdessen möchten Sie zum Beispiel ein ausgeblendetes Format bereitstellen , das Sie möchten, dass das Datum sowohl in den möchten Sie zum Beispiel ein ausgeblendetes Format bereitstellen, das Sie möchten, dass das Datum sowohl in den Daten als auch einen Schrägstrich aus dem gleichen Jahr einfügen. Sie wollte in diesem Format, das auf angemessene Sache wäre, um in den Platzhalter zu setzen. Oder Sie könnten auch einfach vermeiden, Platzhalter ganz zu verwenden, weil sie tendenziell verwirrend sind . Eines der Dinge, die ich mir angeschaut habe, als ich meine Masterarbeit und Psychologiekriege machte, genau welchen Effekt der Platzhalter auf einen Großteil der Zeit hatte. Es verwirrte die Leute, denn obwohl es im Browser großartig ist, ist es nicht klar, besonders wenn Ihre Vision nicht großartig ist, wie es aussieht, als wäre es irgendwie abgeschlossen. Andi. Manchmal überspringen die Leute einfach die Eingabe alle zusammen und denken, dass ich bereits den Wert habe oder nicht wusste, warum dieser Wert dort drin war. So können Platzhalter nützlich sein, um Hinweise zu geben. Aber sie alle zusammen zu überspringen, ist oft eine bessere Option. Wir deaktivieren oft Schaltflächen, besonders wenn wir möchten, dass sich das Formular in einem gültigen Zustand befindet. jedoch, Wir empfehlen Ihnenjedoch,die Deaktivierung zu vermeiden. Die Bücher waren möglich, weil, wenn Sie dies tun, es nimmt den Tab-Index. Die Registerkarte indiziert also, wo, wenn Sie durch die Seite springen, indem Sie Tamp drücken, Sie zu der gesamten Aktion führen. Welche Elemente auf der Seite, wie Links, Importe, Importe, Schaltflächen und wenn Sie eine Schaltfläche deaktivieren, nimmt es heraus, dass. Also nochmal, wenn Sie ein Bildschirmlesegerät und Ihre Tabs durch die Seite verwenden, werden Sie diese Schaltfläche nicht sehen, und Sie werden verwirrt sein und sich fragen, wo sie ist. Eine bessere Option besteht also darin, dem Benutzer zu erlauben, das Formular in einem gültigen Zustand zu senden, indem er auf die Schaltfläche geht und darauf klickt, ihnen dann mitteilt, was er falsch gemacht hat, was er beheben muss, bevor er es senden kann und fortfahren kann, wenn die schwierigste Teile oder Formen zugänglich zu machen ist der Umgang mit Fehlern Wenn möglich, dann wollen wir sie an die Quelle der Ära zu nehmen. Aber das Wichtigste ist, dass es wirklich klar ist, dass das Formular ungültig ist und was noch wichtiger ist, was sie brauchen, um zu beheben, welche Felder defekt sind. Also viel Zeit, die Sie Formular absenden, und es steht nur, füllen Sie bitte alle Formularfelder aus. Einige von ihnen sind optional, einige von ihnen und nicht Sie wissen nicht, welche wirklich ärgerlich. Daher möchten wir dem Benutzer wirklich klar machen, welche Felder das Problem verursachen, und was wir brauchen, um eine gute Möglichkeit zu beheben, ist, sie auf den Fehler zu bringen, sondern auch einige jede Beschreibung zur Verfügung zu stellen, die wir den Bereich verwenden können, der von Zehe identifizieren eine Fehlermeldung für dieses Feld wird später ein wenig mehr über Bereich sprechen. Aber in diesem Beispiel zum Beispiel haben wir zum BeispielE-Mail-Adresseingabe gegangen. Andi, vielleicht haben sie es nichts in das importiert. Also melden wir die MANERA in diesem Fall, dass die E-Mail-Adresse bereits registrierte Weber ist . Also haben wir das Label, das beschreibt, was die Eingabe ist. Aber wir haben auch diesen Bereich beschrieben, durch die ihnen sagt, dass E-Mail-Kleider bereits registriert und so bedeutet, dass böse einloggen oder eine andere E-Mail-Adresse verwenden. 22. ARIA: in dieser Lektion wird über Bereich zu sprechen und wir werden mit einer Einführung beginnen. Es ist also Tonnen für zugängliche, reichhaltige Internetanwendungen. Und es kam vorbei, weil wir anfangen, auf diesem coolen Web aufzubauen, um zu stopfen, wo wir Desktop-Computer-Stil Funktionalität in einem Browser implementieren. Onda Liebe. Die Zeit ist wirklich schwierig, die semantische Bedeutung dem Browser der Hilfstechnologie zu vermitteln . Und so ging die W Free See auf der Kim Bereich integriert, in die HTML auf es uns erlaubt , all diese coole Funktionalität, die in gebaut wurden Diese Dinge sind nur, wo Seiten ihre Anwendungen, um diese Bedeutung zu vermitteln Hilfstechnologie im Browser, damit jeder herausfinden kann, was los ist. Unser erster Stopp wurde aus dem Netz mit semantischem HTML zurückgerufen. Also, wenn wir das benutzen können, machen wir Onda. Wir sind nur irgendwie zurück in die Gegend, wenn wir einfach nicht in der Lage, die Bedeutung zu kommunizieren, die wir in Vanille hasst E-Mail wollen, aber es gibt Zeiten, die Sie vielleicht wollen, um es zu verwenden, aber proaktiver. Zum Beispiel haben wir in den weniger Nicht-Formularen darüber gesprochen, wie wir die Schaltfläche „Senden“ nicht deaktivieren wollen, zum Beispiel, weil das aus dem Tab-Index genommen wird. Jetzt ist es in Ordnung, das untere Aussehen deaktiviert zu machen, also könnten wir CSS verwenden, um es so zu stylen, dass es gut aussieht und eine kleine Axt auf dem Cursor hat . Jemand bewegt sich darüber, aber wir wollen nicht wirklich eine behinderte After-Sicht verwenden, weil das macht es unsichtbar unterstützende Technologie. die gleiche Weise, dass wir einfach großartig mit CSS und es aussehen lassen, als wäre es deaktiviert ,könnten wir auch etwas wie , die deaktivierten Attribute verwenden, um Bildschirmlesegeräte zu sagen, was sie sehen würden, wie eine visuelle aufgeregte Person sehen würde. Es würde eine große Out-Taste in der gleichen Weise sehen, wie die Bildschirmlesegerät würde immer noch in der Lage sein, um es zu tippen. Aber es würde diesen Bereich behindert sehen. Eines der Attribute, die wir Harris-Rollen verwenden können. Andi Rolls erzählen der Hilfstechnologie, welche Art von Elementnamen. Wenn Sie zum Beispielein benutzerdefiniertes Menü pflanzen, können Sie ihm eine Rolle der Navigation geben Nun, zum Beispiel, wenn Sie Styling von Kontrollkästchen an, die einzige Möglichkeit, zum Beispiel Wenn Sie zum Beispielein benutzerdefiniertes Menü pflanzen, können Sie ihm eine Rolle der Navigation geben Nun, zum Beispiel, wenn Sie Styling von Kontrollkästchen an, Arbeit ist mit einer Reihe von verschachtelten Spannweiten ziemlich üblich. Wenn Sie ausgefallene Formulare machen, möchten Sie dem anklickbaren Element dort ein Kontrollkästchen geben, damit die unterstützende Technologie verstanden hat, dass eine Implementierung von einem Kontrollkästchen abwehrt, das nicht den Eingabetyp verwendet. Überprüfen Sie, was das Standardmodell und auch gerollten Text, die ein wenig umstritten ist, weil es nicht Teil der offiziellen Norm oder Spezifikationen ist. Aber viele Browser haben es implementiert. Also, wenn Sie etwas haben, wo ein Bildschirmlesegerät wegen der eingebetteten Tags Aaron ist , die es in sehr seltsame Sätze aufteilt, könnten Sie Roll-Text auf das übergeordnete Element in die meiste Zeit setzen, das den Bildschirm bekommen würde Leser, um es auszulesen. Nun, nein, alle greifen auf Billy Consultant so zu. Viele Leute mögen es, sich an Standard zu halten, und ich kann völlig verstehen, dass ich ein bisschen Pragmatiker bin, und ich möchte die beste Erfahrung, die für jemanden mit einem Bildschirmlesegerät möglich ist, also habe ich nichts dagegen es zu benutzen. Ich denke, manchmal kann es das Problem lösen. Das ist eine Entscheidung für Sie und wie groß ein Problem Sie es finden. Was wir nicht brauchen, sind redundante Rollen beispielsweise Wenn Siebeispielsweisedas Now-of-Tag verwenden, um die Navigation anzuzeigen, müssen Sie dann nicht die Rolle der Navigation hinzufügen, da dies bereits von der NAFTA AG und der durchsuchen kann es bereits herausgefunden. Nur wenn wir einen Ersatz mit verschiedenen Panzern durchführen, müssen wir diese zusätzliche Bedeutung haben . Ein gutes Beispiel dafür ist vom W drei C, wo sie einige Registerkarten aufbauen. Sie haben diese Tab-Liste, die die oberen Kopfzeilen ist, und darin haben sie Schaltflächen, die jeweils eine Rolle von Tab hatten. Und es verwendet den ausgewählten Bereich, um anzuzeigen, ob diese Schaltfläche ausgewählt ist oder nicht. Auf auch, was es steuert, sind unten. Wir haben die Tabs, die aus Dibs gemacht haben, weil es kein Tamp-Tag an ist. Sie werden entsprechende Etiketten auf. Sie verwenden einen Tab-Index von Null. also eine positive Zahl verwenden, Wenn wiralso eine positive Zahl verwenden,die dem Browser richtig sagt, sollte dies das fünfte Element sein, das wir ihm geben. Tabin sieht fünf aus, wenn sie durch sie fallen für dich Null. Das setzt in den Tab-Index, fällt aber in den normalen Fluss der Seite, so dass die Browns herausgefunden haben, und es gibt auch minus eins, was bedeutet, dass es normalerweise nicht im Tub-Index sein würde. Aber wir können ihn manuell mit JavaScript so zuweisen, was dort mit dem TAM-Index vor sich geht. Also hier können wir nur viele gute Beispiele sehen oder wo Sie alle Bereichs-Tags verwenden würden und wie man sie benutzt. Wir verwenden auch Etiketten Teoh Add Kontext. Also, zum Beispiel, wenn Sie ein kleines Hamburger-Symbol machen, was für einen sehenden Benutzer offensichtlich sein könnte, wie würden wir das ohne Ende kommunizieren? Wir könnten einige versteckte Steuern hinzufügen. Aber wir können auch einfach die Bereichsbeschriftung verwenden und sagen, dass dies in der Menü-Taste ist. Und dann haben wir einen Bereich versteckt , wo wir alles aus dem Dom entfernen wollen, das rein präsentativ ist. Also alles Wichtige, über das der Browser wissen muss, würden wir uns nicht verstecken. Aber zum Beispiel, in diesem Beispiel, das ich hier habe, haben wir einen Artikel und es ist nur ein Bild in einem Titel, und dann klicken Sie durch die Hauptstory. Nun, das Bild speichert genau das Gleiche ist die Überschrift. Wenn Sie also durch die Seite auf scrollen, verwenden Sie ein Bildschirmlesegerät, das Sie nicht sehen konnten. Sie müssten nicht wissen, dass dieses Bild da war, weil es ragt, kommuniziert die gleiche Information war Überschrift. Sie erhalten keinen Wert mehr, wenn Sie das Bild selbst nicht sehen können. Und so konnten wir das einfach verbergen, obwohl es in diesem Fall erwähnenswert ist, dass wir einfach einen leeren Tank benutzen könnten. Aber Sie könnten dieses Bild auch in ein Link-Tag umschließen, in diesem Fall könnten Sie einfach den gesamten Link ausblenden, weil Sie wieder die Informationen und Überschrift darunter in Form von Formularen erhalten haben . Dann wollen wir Teoh benutzen. Beschriftungen, die mit beschriftet sind, stellen eine Verknüpfung zwischen einem Element und Beschriftungen her. Wenn Sie also nicht nur die Standard-Etiketten verwenden, können Sie dasselbe tun, indem Sie den Bereich mit Requisite beschriftet haben. Und dann haben wir eine Reihe von Funktionen, zum Beispiel zum Neuerstellen von Kontrollkästchen, über die wir gesprochen haben. Möglicherweise verwenden Sie eine Spanne und Sie können keine Dinge wie Bereich überprüft, um es auf Aria anzuzeigen deaktiviert, wenn Sie die Böden machen, die Sie nicht möchten, um den Tab in der nächsten entfernen. Aber Sie möchten den Benutzern mitteilen, dass es dieses Formular nicht einen Moment senden sollte, weil es kaputt ist. Also schauen wir uns auch ein Beispiel an, wie wir das nutzen können. Also hier haben wir ein kleines, das ein Kontrollkästchen ist. Wir werden zeigen, dass dieses Kontrollkästchen über das Abonnieren eines Newsletters. Also werden wir den mit beschrifteten Bereich verwenden und ihm das I D des Elements geben, das wir wollen. Aber auch, sagen wir, wir wollen ein bisschen mehr Informationen hinzufügen, sagen wir einen kleinen Text darunter. Dann können wir den Bereich auf dem Weg beschrieben nutzen, um über zwei nachzudenken. Ist der von Es beschriftete Bereich gleich am Anfang ausgelesen, wenn er erklärt, worum es bei der Eingabe geht und wirklich beschrieben wird, kommt später, es spart bis zum Ende. Es ist irgendwie wie zusätzliche Informationen. Es ist nicht so wichtig, dass wir später warten können, die in das Gebiet von Endlich beschrieben gehen will , haben wir Live-Regionen. Also verliebt, Web zwei tat dynamische Updates auf der Seite. Andi, wenn du nur durch die Seite ziehst, siehst du nicht auf die Seite. Sie verwenden ein Bildschirmlesegerät. Sie werden nicht unbedingt wissen, dass Einige Inhalte oben an der Spitze aktualisiert hat. Wenn Sie weiter unten auf der Seite sind, so, um dem Benutzer zu sagen, was hier los ist, können wir Ari lebendig auf diesem verwenden, sagt der Bildschirmleser, um auszulesen. Alle Änderungen sind im Gange. Es gibt zwei Arten. Es gibt also die höfliche Einstellung, was bedeutet, dass ein Bildschirmlesegerät ausliest, wenn es Zeit hat. Wenn es also etwas anderes durchliest, wird es das zuerst lesen und es dann vielleicht später ankündigen. Assertive bedeutet, dass Sie diese Änderungen ankündigen sollten, sobald sie jetzt für Evers und Alerts geschehen , dann haben wir bereits eine Abkürzung, um Region zu leben, die wir verwenden können und ihn in einer Rolle der Warnung fragen und das wird die Bildschirmlesegerät zu lesen die Alarmbereitschaft auch gerade Weg aus.