Barrierefreie Styleguides: Schrift, Farbe, Symbolik

1. Einführung: Hallo, ich bin Tatiana Mac, und ich bin eine interaktive Art Director und Designerin, derzeit in Portland, Oregon lebt. Ich bin wirklich leidenschaftlich daran, die verschiedenen Gemeinschaften, in denen wir leben, durch meine Arbeit zu reflektieren , was bedeutet, Designs zu schaffen, die sowohl inklusiv als auch zugänglich sind. Ich war schon immer sehr fasziniert von der Rolle, die Kunst dabei spielen kann, unsere soziale Landschaft zu reflektieren . Mir wurde klar, dass ich Mauras Designer machen könnte, um dieser Ethik zu folgen, also fing ich an, über Web zu lesen. Es ist die Möglichkeit sowie die Bedingungen, die von einem unzugänglichen Web betroffen sind, und ich erkannte, dass viele Style-Guides die Zugänglichkeit nicht betrachten oder sie gänzlich brechen. Ich bin wirklich aufgeregt, heute über Barrierefreiheit zu sprechen, aber ich möchte erwähnen, aber ich bin keineswegs ein Experte für Barrierefreiheit. Aber ich hoffe, dass meine Arbeit und Dutzende von interaktiven Styleguides, um verschiedene Erfahrungen zu schaffen , Ihnen die einzigartige Anfängerperspektive bieten, so dass Sie lernen können , Ihre Designs auf verdauliche Weise zugänglicher zu machen. Die heutige Klasse wird einige Grundlagen rund um die Barrierefreiheit im Web abdecken. Sie verlassen die heutige Klasse mit dem Grundverständnis der Richtlinien für die Barrierefreiheit im Web , wie Sie innerhalb restriktiver, unvollständiger oder unzugänglicher Richtlinien zu den üblichen Fehlern arbeiten und wie sie behoben werden können. Insbesondere werden wir besprechen, warum Sie sich um Barrierefreiheit kümmern sollten, wie Sie einen Business Case für die Barrierefreiheit in Ihrem Unternehmen machen, die wichtigsten Kategorien von Behinderungen, sowie Aufschlüsselung eines Stils in seine Bestandteile der Typografie, Farbe und Fotografie und Bildsprache. Dann das Grundwissen. Wir werden uns die häufigsten Fehler ansehen, die das Web unzugänglich machen. Dann besprechen wir, wie Sie diese Fehler beheben können, damit Sie beginnen können, Ihren nächsten Styleguide oder Website-Projekt zu beeinflussen . Ich habe auch eine Checkliste, gegen die Sie für Ihr nächstes Projekt in der Ressource des Abschnitts ausführen können , Also bin ich aufgeregt, dass Sie hier sind und lasst uns anfangen. 2. Der Fall für die Barrierefreiheit: Also könnten Sie hier sein, weil Sie etwas Summen um Hashtag Verbündeten gehört haben oder eine 11 Warum? Welches ist ein Neuron imm für die Zugänglichkeit? Oder Sie möchten einfach mehr tun, um zugängliche Designs in Ihrem Team zu erstellen. Unabhängig vom Grund bin ich nur aufgeregt, dass du hier bist und hoffe, dich mit einigen wichtigen Möglichkeiten ausstatten zu können, um die Zugänglichkeit in deinen Designs zu verbessern und dich mit Gründen zu ermutigen, warum X Fähigkeit wichtig ist. Vernunft. Eine Zugänglichkeit ist für jedermann, nicht nur für behinderte Menschen. In der Tat, zugängliches Design verbessert die Erfahrung für alle. Für diejenigen, die keine besonderen Bedürfnisse benötigen, macht es nur die Erfahrung einfacher zu bedienen. Es ist also von einem universellen Nutzen. Barrierefreies Design wird oft mit dem Begriff Universal Design verwechselt, und sie sind nicht gleichwertig. Universal Design drückt aus, dass ein Design so universell wie möglich sein sollte und für so viele Menschen wie möglich funktionieren sollte, und erkennt an, dass einige Designs nicht für jedermann funktionieren. Barrierefreiheit, auf der anderen Seite, beginnt mit einer spezifischen speziellen Bedürfnisse der verschiedenen Leute, und Designs aus ihrem ersten zugänglichen Design ist oft Synonym für inklusives Design und effektiv. Beide Begriffe bedeuten, dass Sie mit speziellen Bedürfnissen beginnen und von dort aus bauen, so dass Sie alle einbeziehen. Das Endziel besteht also darin, sicherzustellen, dass alle Designs zugänglich und schließlich zugänglich sind. Design und universelles Design werden eins in der gleichen sein. Aber bis wir diesen Grad der Sättigung erreichen, ist es wichtig, die einzigartigen Bedürfnisse der Menschen zu berücksichtigen, um ihre Erfahrungen zu maximieren . Es gibt dieses Missverständnis, dass Menschen, die barrierefreies Design benötigen, eine kleine Teilmenge oder in jeder Population sind . Das ist nicht wahr. Von den sieben Milliarden Menschen auf der Welt benötigen rund 15% der Menschen irgendeine Art von Zugänglichkeit, weil sie eine Art von Beeinträchtigung erleiden . Das entspricht etwa 1,14 Milliarden Benutzer, die betroffen sind und die eine negative Benutzererfahrung haben könnten . Weil Sie kein barrierefreies Design in Betracht ziehen, ist das eine große Anzahl. Reason Teoh zugängliches Design kann enorme wirtschaftliche Gewinne zu wenig oder ohne zusätzliche Kosten bieten . Barrierefreie Web-Standards überschneiden sich mit vielen anderen Standards, wie ein CEO oder Suchmaschinenoptimierung, rechtliche Überlegungen, technische Überlegungen, um Ihre Website mehr Leistung und Responsive Web am besten zu machen Praktiken. Wenn Sie also Verbesserungen an Ihrem S. E O vornehmen , die zugänglich sind erhalten Sie den Vorteil beider ohne zusätzliche Kosten. Ich denke, das nennen wir ein Bogo. Accessible Design erhöht auch die Anzahl der Benutzer insgesamt, was zu einer Steigerung der Interaktion und einer erhöhten Conversion führen kann, was letztlich zu mehr Umsatz führt. Ich denke, das ist es, was Geschäftsleute eine gute Return on Investment Grund nennen. Drei. Leider, weil viele Marken Barrierefreiheit vernachlässigen, sind die Marken, die Zugänglichkeit betrachten, auseinander gesetzt. Also, zum Beispiel, wenn Sie eine E-Commerce-Website mit einem reibungslosen Einkaufserlebnis für Menschen, die Barrierefreiheit benötigen , werden sie feststellen, dass Sie eine Marke sind, die genug zu kümmern scheint, um sie zu bieten mit einer positiven Erfahrung. Und letztendlich kümmern sich die Menschen um Marken, die sich zuerst um sie kümmern. Grund für Als moderne Designer müssen wir die entscheidende Rolle verstehen, die wir bei der Beeinflussung des positiven sozialen Wandels in unserem Kern spielen können . Was Designer tun sollen, ist, das Leben und die Erfahrungen unserer Nutzer, all unserer Nutzer, zu verbessern . Deshalb müssen wir unser Privileg als Designer anerkennen und verstehen, wo unsere Nutzer fliegen. Von einem Teil eines Verbündeten zu sein, ist nicht Knee Shing, eine bestimmte Gruppe von Menschen, egal wie klein die Gruppe ein Aspekt unserer Branche den Begriff Benutzer oder Marktanteil verwendet , um eine Gruppe von Menschen zu beschreiben, die einen bestimmten Browser verwendet -Gerät oder Betriebssystem . Wir verwenden diesen Begriff, um verschiedene Probleme zu priorisieren und zu de priorisieren, die auftreten, weil es so viele geben kann. Es ist ein notwendiger und pragmatischer Ansatz, wenn man über Geräte und Browser und Clients spricht weil all die Permutationen, die auftreten können. Aber wenn wir über Menschen sprechen, wird das sehr problematisch. Während Benutzer normalerweise auswählen können, welches Gerät oder welcher Browser sie verwenden, können sie nicht wählen, dass sie von ihren Bedingungen nicht betroffen sind. Deshalb müssen wir sicherstellen, dass wir uns um sie kümmern und ihnen gute Erfahrungen bieten. Also die vier Gründe, die wir gerade abgedeckt oder vier der größten. Aber es gibt zahlreiche weitere Vorteile, um barrierefreie Designs bereitzustellen. Wenn Sie nach einem bestimmten suchen, um einen Geschäftsfall für Ihre Stakeholder enthalten haben, ist eine Liste von Ressourcen in der Beschreibung der Klasse 3. Barrierefreiheit verstehen: bevor wir in den Stil tauchen, werden Führer wollen, um eine grundlegende Grundlage der Zugänglichkeit zu spät. Wir beginnen mit den Kategorien von Behinderungen, Modi von Behinderungen, den Arten von Hilfstechnologien oder 80, auf die sich die Leute verlassen, sowie den Web-Standards, an denen die Zugänglichkeit gemessen wird. Schaffung dieses Fundaments wird dazu beitragen, dass wir innerhalb unserer Projekte so früh wie möglich die richtigen Fragen stellen . Beginnen wir mit den wichtigsten sechs Kategorien von Behinderung visuell. Hörisch, motorisch, physisch, neurologisch, kognitiv und Sprache. Benutzer, die von Sehbehinderungen betroffen sind, verlassen sich in der Regel auf Bildschirmlesegeräte oder Bildschirmvergrößerung IRS oder passen ihre Browsereinstellungen an. Hörende Benutzer sind hörgeschädigt verlassen sich daher in der Regel auf Visualisierungen von Audioinhalten, wie z. B. Untertitel. Benutzer mit motorischen oder körperlichen Behinderungen sind in der Regel auf Hilfstechnologien oder achtziger Jahre angewiesen , die es ihnen ermöglichen, mit eingeschränkter Mobilität im Internet zu navigieren, wie z.B. Mundstöcke oder Eyetracking-Software oder alternative Tastaturen. Neurologische Zustände vermitteln sehr stark auf der Grundlage der spezifischen Bedingung, die Ihr Benutzer hat, aber eine gemeinsame in Bezug auf die Zugänglichkeit zu berücksichtigen ist Anfälle. Leute, die Anfälle erleben können, können durch Zugangsbewegungen ausgelöst werden, so dass Gesetze oft auf reduzierte Bewegungen auf ihren Geräten angewiesen sind, was eine Einstellung ist, um diese Instanzen zu verhindern. Kognitive Störungen wie Autismus oder Down-Syndrom können stark variieren, wie neurologische Störungen, daher ist es wichtig zu verstehen, wie diese Benutzer durch den Fluss von Inhalten beeinflusst werden. Zum Beispiel. Schließlich ist es wichtig zu beachten, dass diese Liste von Behinderungen nicht erschöpfend ist und dass Benutzer von mehr als einer betroffen sein können . Diese Bedingungen schließen sich nicht gegenseitig aus, so dass Benutzer sehr kompromittierte Erfahrungen haben können. Als Designer sollten wir sicherstellen, dass wir diese Empathie und Verständnis bewahren und immer versuchen, bessere und zugänglichere Wege zu lernen, um unsere Designs zu verbessern. Also sind die Bedingungen, die ich gerade beschrieben habe, alle dauerhaft, was bedeutet, dass sie die Benutzer für den Rest ihres Lebens beeinflussen werden. Aber wie bereits erwähnt, hilft es jedem nicht nur behinderten Menschen, Designs zugänglich zu machen, so dass es Menschen helfen kann, die vorübergehend oder situativ e von dieser Behinderung betroffen sind. Zum Beispiel, wenn wir ein Design erstellen, das von einer Hand navigierbar ist, das jemandem helfen kann, der Situation Lee ist, die diese Hilfe benötigt, wie jemand, der ein Baby hält, oder es kann jemandem helfen, der vorübergehend helfen, wie jemand, der vor kurzem den Arm gebrochen hat und, natürlich, jemand, der dauerhaft betroffen ist. Also jemand, der jetzt nur einen Arm für Leute hat, die Zugang zu beiden Armen haben, die diese Seite benutzen , wird einfach schneller und einfacher sein, und sie werden wahrscheinlich keinen Unterschied bemerken. Und ich bin mir ziemlich sicher, dass wir das Privileg nennen. 4. Einen Stilleitfaden aufbauen: hier möchte ich erwähnen, dass es Richtlinien gibt, mit denen wir unsere Barrierefreiheitsstandards messen können. Das World Wide Web Consortium oder W drei C veröffentlicht die Web-Inhalte, Barrierefreiheitsrichtlinien oder W C. A. G, und es ist eine wirklich robuste Reihe von Richtlinien, die eine ganze Klasse füllen könnte. Aber für heute müssen Sie wissen, dass sie existieren, dass sie der North Star für Barrierefreiheit sind, und sie sind letztlich das, was wir heute in unseren Empfehlungen übergehen werden. Nun, da wir Ihr Grundlagenverständnis für Barrierefreiheit, das Was und das Warum etabliert haben , lassen Sie uns darüber sprechen, wie wir Barrierefreiheit in unsere Designs mithilfe von Styleguides implementieren können . Etwas Wichtiges zu erwähnen ist, dass ich ein Glaube an Design als Teil von Designsystemen bin. Und was das bedeutet, ist, dass Design meines Erachtens wie ein Rahmen behandelt werden sollte, anstatt eine Reihe von Regeln und Vorschriften, die einzuhalten sind. Und ich glaube an die Aufrechterhaltung des Geistes des Stilleitfadens im Gegensatz zum Briefgesetz. Der Styleguide. Dieser Typ hält sich nicht, vor allem im Namen der Zugänglichkeit bei der Gestaltung für Web-Zugänglichkeit und digitales Design im Allgemeinen, ist es unmöglich, die Kontrolle über alle verschiedenen Kombinationen von Geräten und -Browser, daher werden wir wahrscheinlich einige Regeln im folgenden Abschnitt brechen. Und das ist in Ordnung. Styleguides können ziemlich viel in Bezug auf, wie viel sie abdecken. Große Corporate Style Guides können 200 Seiten Töne sein, die wirklich großartig sind, um zu hohe Regale zu bekommen , während Ihre lokale Bodega möglicherweise nur einen fünfseitigen Styleguide hat. Oder vielleicht ist das nur hier in Portland. Unabhängig davon, Stil-Guides decken die gleichen Arten von Abschnitten heute werden durch Typografie, Farbe und Fotografie und Bilder gehen . Wir besprechen die häufigsten Arten von Fehlern, die in diesen drei Abschnitten gemacht wurden, sowie Möglichkeiten, sie zu beheben und Ihre Entwürfe leichter zugänglich zu machen. 5. Style-Leitfaden für Typografie: Typ ist in der Regel der erste Abschnitt eines Styleguides gut nach den 17 oder 18 Seiten der entsprechenden Logoverwendung und seine Wichtigkeit und Priorität macht viel Sinn. Typ ist die Art und Weise, wie wir unsere Inhalte und Foncier wie das Ende unserer Inhalte erhalten. Aber Typ einberufen kompliziert, weil seine Ursprünge aus dem Druck kommen. So viele der Nuancen, die für den Druck erstellt wurden, kommen digital nicht sehr gut auf und können Probleme mit der Barrierefreiheit verursachen. Der Hauptzweck des Typs ist es, Ihnen den Inhalt zur Verfügung zu stellen, so dass er lesbar und klar sein muss . Das W drei c W C A. G nennt ihren Typ wahrnehmbar und verständlich. Das ist die wichtigste Messung, an der wir messen werden, sind Beispiele heute. Beispiel. Eins. Ihr Styleguide verlangt, dass Ihr Absatztyp die Größe 12 hat, die zu klein ist. Das erste, was zu tun ist, um das zu beheben, ist, Ihren Absatz zu erhöhen. Text bis 16 oder besser noch 20. Sie dann von dort aus MachenSie dann von dort ausIhre Header-Tags proportional zu erhöhen. Basierend auf den im Styleguide beschriebenen Kriterien ist es wichtig, sich an dieser Stelle zu erinnern, dass Ihre Benutzer letztendlich die Kontrolle darüber haben, wie groß die Steuer auf ihrem Gerät gerendert wird. Sie möchten also nicht den Erfolg Ihres Designs basierend auf einer bestimmten Schriftgröße scharnieren , da es bricht, wenn sie das Schriftgrößenbeispiel auf Ihren Stil erhöhen. Leitfaden fordert Spaß wartet Letter to Ding, die schwer zu lesen sein kann, insbesondere für Nicht-Retina-Displays. Meine erste Empfehlung wäre, die Verwendung von Thin Type-Einstellungen innerhalb des Styleguides zu vermeiden . Nun ist das nicht möglich, vor allem bei Marken, die eine Affinität haben, alle dünnen Gewichte auf ihrem gesamten Fahnestock zu verwenden . Können wir hier nicht einfach ein bisschen mehr Schriftgewicht positiv sein und alle Schriftgewichte einschließen? Unabhängig davon, Wenn Sie Finn-Schriftarten verwenden müssen, stellen Sie sicher, dass Sie die Schriftstärke von erhöhen 100. Sagen Sie zu 200 Urban 300. Der visuelle Unterschied ist etwas vernachlässigbar, auch für Marken-Teams, und Sie werden die Lesbarkeit erhöhen tonnenweise zu falten. Zweite. Wenn Sie das nicht können, dann würde ich empfehlen, sich auf den Fallback-Fonds zu verlassen. Ich fand, dass viele Styleguides von Druckdesignern oder Umweltdesignern geschrieben werden , deren Lösung für den digitalen Typ nur verwendet wird. Helvetica, die, obwohl keine sehr interessante Wahl ist, zumindest dafür sorgt, dass Ihre Inhalte lesbar sind und das ist letztlich das Wichtigste. Beispiel drei Stil-Guide-Aufrufe für zentrierten, textzentrierten Text ist schwer zu lesen, da der Startpunkt jeder Zeile geändert wird. Dies verursacht eine große kognitive Belastung und ist nicht zugänglich. Eine Möglichkeit, den Geist des zentrierten Textes zu erfassen, besteht also darin, den Container zu zentrieren und den Text innerhalb des Containers auszurichten. Auf diese Weise erhalten Sie den Geist des zentrierten Textes, ohne Probleme mit der Barrierefreiheit zu verursachen. Zentriertext ist nicht die einzige problematische Art von Text, und in der Tat ist es jeder Text, wo sich der Startpunkt ändert. Also für Sprachen von links nach rechts, die die rechte Ausrichtung für Sprachen der rechten Zehe links wie Arabisch enthält, die die linke Ausrichtung enthält. Es tut mir auch leid, Ihnen Zeitungsfans. Aber gerechtfertigter Text ist auch problematisch, weil er im Druck gut funktioniert, ändert er den Abstand zwischen Wörtern, was viele Probleme und reaktionsfähiges Design verursacht. Für Menschen, die kognitive Störungen haben, kann es etwas verursachen, das Unschärfen genannt wird, was es sehr unzugänglich und schwierig für sie zu lesen macht. So können Sie den Geist des gerechtfertigten Textes erfassen, besteht darin, Ihren Text in einen Container und aus der Hintergrundfarbe oder einem Umriss zu wickeln , so dass Sie den Geist des gerechtfertigten Textes erfassen können , ohne Probleme mit der Barrierefreiheit zu verursachen. Beispiel. Für Stil Guide fordert eine Menge von allen Kappen. Text alle Kappen Text ist vor allem schwer für Menschen mit kognitiven Störungen zu lesen. Zweitens von allen Bildschirmlesegeräten lesen Sie jeden Text, der als Großbuchstaben eingegeben wurde. Wenn Sie also Ihre Feststelltaste als Abkürzung aktivieren, so dass Respekt als R E s P E C T gelesen wird. Wenn Sie Text aus irgendeinem so dass Respekt als R E s P E C T gelesen wird. Grund alle Großbuchstaben machen müssen, achten Sie darauf, dass Sie die Satzhülle oder das Titelgehäuse respektieren, wenn Sie es ausgeben und dann verlassen Sie sich auf den Text. Transformieren Sie Großbuchstaben Eigenschaft. Aber verwenden Sie es sparsam, weil, denken Sie daran, es ist schwer zu lesen. Beispiel. Header-Tags werden verwendet, um Onley zu vermitteln, visuelle Unterschiede zu vermitteln und nicht um die Inhalthierarchie zu vermitteln. Menschen mit kognitiven Störungen verlassen sich auf Überschriften-Tags, um ihnen dabei zu helfen, die Inhaltsarchitektur Ihrer Seite zu verstehen . Menschen mit Aufmerksamkeitsdefizitstörung oder Speicherproblemen verlassen sich auf Header-Tags, um die Seite schnell zu überspringen oder sie daran zu erinnern, wo sie sich befinden Wenn Sie sie also nur verwenden, um visuelle Unterschiede zu vermitteln. Dies kann zu einer wirklich verwirrenden Benutzererfahrung für diese Benutzer führen. Vermeiden Sie also auf jeden Fall die Verwendung von Header-Tags, nur um visuelle Unterschiede zu vermitteln. Stellen Sie sicher, dass Ihre Inhalte in der Reihenfolge sind und alle Überschriften-Tags in der Reihenfolge verwendet werden. Darüber hinaus enthielt HTML five einige sehr hilfreiche HTML-Attribute, die dazu beigetragen haben, verschiedene Arten von Abschnitten zu klären . Dies ist sehr hilfreich für Bildschirmlesegeräte, da es zusätzliche Kontakte für den Typ von Abschnitt bietet , in dem sich der Benutzer befindet. Beispielsweise kann Artikel oder Abschnitt dazu beitragen, zusätzliche Hierarchie zu den Überschriften-Tags hinzuzufügen. So werden beispielsweise Ling-Stylings nur nach Farbe unterschieden. Nun gibt es eine kleine Untermenge von Farben, die Sie verwenden können, um Ihre Link-Stylings von Ihrer Körperkopie und vom Hintergrund zu unterscheiden . Aber dieses Farbfenster ist sehr schmal, und es ist wahrscheinlich, dass Ihr Styleguide diese Farben nicht enthält. Stattdessen würde ich Ihnen empfehlen, das alles zusammen zu vermeiden und sicherzustellen, dass Sie ein zusätzliches Styling hinzufügen, um Links von der Textkopie zu unterscheiden. Die gebräuchlichste und weit verbreitete ist die zugrunde liegende. Die Unterstreichung wird sicherstellen, dass Ihr Benutzer weiß, dass es sich um einen Aufruf zur Aktion handelt, der dazu beiträgt , ihn von der Textkopie zu unterscheiden. Zweitens möchten Sie sicherstellen, dass Sie die Unterstreichungseigenschaft für nichts anderes verwenden, da dies eine Menge Verwirrung für Ihren Benutzer verursachen kann. Aus Inhaltsperspektive möchten Sie sicherstellen, dass Sie einen geeigneten Teil der Phrase verknüpfen. Der Grund dafür liegt darin, dass Benutzer die Bildschirmlesegerät verwenden können, um alle Links von der Seite zu sammeln , um einen schnellen Überblick über alle Links zu erhalten, die Sie hinzugefügt haben. Was das tut, ist, dass es Links aus ihrem Kontext entfernt. Es ist also sehr wichtig, dass isoliert diese Sätze zwei Dinge beschreiben können. Eins, Was ist es und wohin nimmst du mich? 6. Guide: zum Stil: Farbe: Farbe ist wunderbar, weil es helfen kann, Informationen zu differenzieren oder zu klassifizieren und insgesamt eine Menge Persönlichkeit zu Ihrem Design. Aber für jemanden, der unter Farbenblindheit leidet, wird er diese Differenzierung nicht erkennen können. Daher ist es wichtig, dass Sie Farbe in einer additiven Weise verwenden, um Ihre Geschichte zu verbessern. Es gibt auch Farbkontrastbetrachtung, So enthält die W drei C W C a. G Farbstufen. Kontrastierende Zugänglichkeit Sie werden diese Eingabehilfen berücksichtigen für Ihr Design zu nehmen, und eine wirklich hilfreiche Möglichkeit, dies zu tun, ist das Stark Plug in für Skizze herunterladen. Es ist ein sehr einfaches, aber effektives Tool, das Ihre Entwürfe auf Barrierefreiheit überprüft und Ihnen sagt, wie Sie sich fühlen. Adobe Creative Cloud enthält auch integrierte Eingabehilfen. Stellen Sie daher sicher, dass Sie Ihre Entwürfe überprüfen, da dies viel zu einfach ist. Nicht zum Beispiel. Eins. Der Styleguide fordert Lichttyp auf hellem Hintergrund oder dunklem Typ auf einem dunklen Hintergrund , im Grunde jede Instanz, in der kein ausreichender Kontrast vorhanden ist. Wie ich bereits erwähnt habe, gibt es viele Werkzeuge, um Ihnen mit Kontrastverhältnis zu helfen, aber eine lustige Tatsache, weil ich weiß, dass Designer lieben großen Typ auf Weiß ist, dass Hex-Code 767676 die leichteste Form von Grau ist , die Sie gegen eine weiße Hintergrund und immer noch Ebene eine Verschneidung bei Größe 16 Text zu gewinnen. Also, wenn du dich von vorher erinnern wirst, das ist das kleinste, solltest du deine Körperkopie machen, damit du immer noch diese sexy Grasen haben kannst. Tun Sie es einfach auf eine zugängliche Weise. Beispiel für „Aber style Guide“ fordert Farbkombinationen auf, die Farbvibrationen oder Chroma vibrieren . Steri Op Sys tritt auf, um Farben, die gegenübereinander auf dem Farbrad fallen und effektiv, die beiden Farben Luft nur konkurrieren, was eine visuelle Vibration verursacht. Einige Beispiele sind Blau und Rot, Rot und Grün, Blau und Orange. Sie sollten Farbvibrationen vermeiden, da es kognitive Überlastung verursachen kann und schwindelerregend sein kann, was für alle Benutzer ein wirklich negatives Erlebnis ist. 7. Style-Leitfaden für Fotografie & Bilder: Bilder wie Fotografie Illustration und Ikonographie kann wirklich helfen, Ihre Geschichte zu verbessern . Sie können Emotionen, Persönlichkeit und helfen, Ihre Marke über den Inhalt hinaus zu artikulieren. Es gibt hier ein altes Journalistik-Prinzip, das für die Zugänglichkeit gilt . Das ist das Bild, das weiteren Kontext und zusätzliche Geschichte darüber liefert, was bereits da ist ? Wenn nicht, sollten Sie es nicht einschließen. Aber wenn ja, stellen wir sicher, dass wir dies auf zugängliche Weise tun. Beispiel. In einem Stil-Guides fehlen Kriterien für den Haltetext für Bilder. Ganz Texas. Die Kopie, die gerendert wird, wenn ein Bild noch geladen wird, konnte nicht geladen werden. Und was ein Screenreader anstelle des Bildes liest. Der gesamte Text kann helfen, den Kontext, den das Bild enthält, bereitzustellen. Wenn wir also beurteilen, ob ein Bild hilft, unsere Geschichte zu artikulieren, müssen wir sicherstellen, dass unser Text beschreibt, wie es hilft, die Geschichte zu artikulieren obwohl es einer der bekanntesten Aspekte für eine Web-Zugänglichkeit aufgrund seiner Intersektionalität mit einem CEO oder Suchmaschinenoptimierung, alle Texte angemessen umzusetzen kann tatsächlich sehr schwierig sein. Es gibt enorme Literatur rund um die entsprechenden Nuancen, und ich schlage vor, dass Sie lesen über diese, weil es viele, und sie sind alle sehr wichtig für heute wird ein paar Grundlagen abdecken. Zuerst müssen Sie bestimmen, ob Ihr Bild Inhalte oder eine Funktion bereitstellt. Wenn es Inhalte bereitstellt, sollten Sie beurteilen, ob das Bild neben einer Beschreibung ist, die helfen kann, es bereits zu beschreiben . So, zum Beispiel, auf einer Museums-Website, die ein Gemälde mit einer langen Beschreibung umfasst, die das Bild beschreibt Der Künstler in dem Jahr, in dem es gemalt wurde, dann brauchen Sie nicht alle Texte in diesem Fall enthalten weil es überflüssig wäre. Aber in den meisten Fällen ist dies nicht der Fall. Bilder erfordern diesen Inhalt. Also, wenn das der Fall ist, stellen Sie sicher, dass Sie so prägnant wie möglich sind, weil Benutzer Luft versuchen, schnell den Inhalt mit ihrem Bildschirmlesegerät und lange blumige Beschreibungen wird diese Erfahrung zu unterbrechen . Zweitens, wenn Ihr Bild als Funktion dient, sollten Sie immer den gesamten Text einschließen. Es würde eine verwirrende Benutzererfahrung bieten, wenn Sie es weglassen. Also immer, immer, immer, wenn es irgendwo verknüpft ist, was die wichtigste Funktion ist, die ein Bild dient, stellen Sie sicher, dass Sie den gesamten Text einschließen. Wenn Sie feststellen, dass ein Bild sehr komplex ist, sagen Sie eine Grafik, in der es viele Aspekte zu beschreiben gibt und der Text möglicherweise nicht angemessen ist, weil wir möchten, dass es kurz ist. In diesen Fällen kann es daher besser sein, die HTML-Attribute von long desk oder long description zu verwenden . Wir werden später ein wenig mehr darüber reden, so dass einige der grundlegendsten Aspekte des gesamten Textes abdeckt. Bevor wir weitermachen, denke ich, es ist wichtig zu erwähnen, dass jeder Text häufig etwas ist, das auf die Hände der letzten Person fällt , die ihn berührt, was in der Regel ein Entwickler oder NSE Oh Spezialist ist ist. Und das ist problematisch, weil es in der Regel ein Ansturm zum Ende Ihrer in Q. Und sie bemerkten, dass der gesamte Text fehlt statt. Dies ist eine großartige Gelegenheit, Ihre Teams zu ermutigen, den gesamten Text als Teil Ihrer übergreifenden Informationsarchitektur zu integrieren , denn mit Barrierefreiheit können Sie nicht die einzige Person in Ihrem Team sein, die auf diese . Daher ist jeder Text eine gute Möglichkeit, andere Mitglieder Ihres Teams in Betracht zu ziehen. Früher, z. B. während der Inhaltshierarchiephase, denn wenn sie richtig gemacht werden, kann Mikrokopie wie alle Texte die Story wirklich verbessern. Sie erzählen, ähm, und bieten eine Menge zusätzlichen Kontext. Beispiel für Raster. Bilder werden verwendet, wenn S. P. Gs oder skalierbare Vektorgrafiken verwendet werden könnten. S P G sind wirklich genial, weil sie so viel mehr bieten als das, was Rasterbilder können. So beispielsweise SV Gs für Benutzer, können Siebeispielsweise SV Gs für Benutzer,die Sehbehindert sind, kneifen und zoomen, um mehr Details zu erhalten ohne dass große Rasterbilder aufgebläht werden müssen. SPG können Sie auch bestimmte CSS-Eigenschaften anpassen, um Ihr Bild leichter zugänglich zu machen . Und es gibt enorme Mengen an Animation und andere additive Eigenschaften, die Sie tun können , die wirklich cool sind. Also werden wir ein paar Grundlagen für heute abdecken. Zunächst sollten Sie sicherstellen, dass Ihre SPG Titel- und Beschreibungsattribute ähnlich wie alle Tags enthält . Dies hilft dem Benutzer, den Inhalt Ihrer SPG zu verstehen, insbesondere für Bildschirmlesegeräte. Zweitens möchten Sie sicherstellen, dass für komplexere Suggs, wie z. B. solche, die eine Landschaft oder ein Diagramm enthalten, die Sie wie Attribute gruppieren und ihnen ihre eigenen Titel zur Verfügung stellen. So, zum Beispiel, ah Landschaftsbild mit Haus und ein Auto und ein Corgi sollte alle ihre individuellen Titel haben . Dies hilft dem Benutzer, sich einen Überblick über diese komplexen Layouts zu verschaffen. Und wie bei Fotos, Sie sicherstellen, dass Sie jetzt den gesamten Text einschließen. Eine Ausnahme für S P G ist, dass, wenn sie dekorativ sind, das heißt, sie es nicht wirklich tun. Sie sind für Ihren Inhaltsfluss nicht notwendig. Sie müssen keinen ganzen Text einschließen, aber Sie sollten sicherstellen, dass Sie alle Texte, die als leere Bezeichnung bezeichnet werden, einschließen, um sicherzustellen , dass die SPG ordnungsgemäß gerendert wird. Dies sind nur ein paar Grundlagen. Es gibt eine Menge Literatur über S P G, und ich empfehle Ihnen, dass Sie sich etwas Zeit nehmen, um viel Literatur zu lesen. Und eine meiner liebsten SVG-Experten, Sarah Sweden, hat Dutzende von Artikeln geschrieben und viele Vorträge über Suggs und Barrierefreiheit geführt. Außerdem liebt sie Vögel, so dass Sie einen SVG-Vogel darauf legen können. Beispiel. Drei. Ein Markenführer setzt sich stark auf Datenvisualisierung, um seine Geschichte zu erzählen. Jetzt ist das in sich selbst keine schlechte Sache. Ich weiß nicht, ob Sie es bemerkt haben, aber wir sind gerade im Zeitalter der Daten. Und viele Unternehmen, vor allem Tech-Unternehmen, verlassen sich auf Datenvisualisierung, um ihren hochkomplexen Informationen einen visuellen Kontext zu bieten . Ohne sie hätten sie nicht viel zu visualisieren. Es ist also wunderbar, dass die Datenvisualisierung jetzt volljährig wird. Aber wir wollen sicherstellen, dass wir Datenvisualisierungen auf sehr zugängliche Weise einbeziehen . Datenvisualisierung ist hervorragend, da sie hochkomplexe Daten aufnehmen und in ein verdauliches visuelles Format umwandeln kann. Aber möchten Sie daran denken, dass für diejenigen, die keinen Zugriff darauf haben, es visuell zu sehen und sicherzustellen , dass wir ihnen auf dem Weg mit hilfreichen Beschreibungen zur Verfügung stellen. Es gibt also zwei Hauptwege, wie Sie das tun können. Die erste ist, eine klare und präzise Beschreibung in Ihrem SPG oder Bild zu beschreiben. Wenn Ihre Daten sehr komplex sind, z. B. , es viele Balkendiagramme oder komplexe Systeme gibt,die schwer zu beschreiben sind, empfehle ich die Verwendung eines HTML-Attributs namens Long Desk und Was das effektiv tut, ist es Links Sie zu einer separaten Seite, Sie das Bild vollständig artikulieren und alle kontextuellen Hinweise zur Verfügung stellen können, damit jemand, der Sehbehinderte immer noch den gesamten Kontext von jemandem gewinnen kann, der die Daten sehen kann Visualisierungsbeispiel für einen Stil Guy schrieb Lügen stark oder ausschließlich auf Bewegung um zu helfen, artikulieren oder seine Geschichten zu verbessern, Ich habe einige Style-Guides gesehen, die Bewegung in jedem Fall möglich verwenden. Ich bin sicher, dass Sie Websites gesehen haben, die stark auf Parallax angewiesen sind, und das ist problematisch, weil es eine Menge Reisekrankheit für Menschen verursachen kann, die für Togo haben . Oder es kann kognitive Probleme für Menschen verursachen, die Störungen wie Autismus haben. Aber Bewegung, wenn in Maßen verwendet, kann wirklich eine Menge zu Ihrer Geschichte und und ein wenig Laune. Es gibt also zwei Grundregeln, die Sie in Bezug auf Emotion betrachten möchten. Erstens, verbessert es die Geschichte, die Sie erzählen wollen? Und zweitens Kann sich die Geschichte ohne sie alleine halten? Wenn Sie beide Fragen mit Ja beantwortet haben, Sie mit allen Mitteln fort. Aber der Grund, warum es wichtig ist, sicherzustellen, dass die Geschichte ohne sie immer noch kohärent ist , ist , dass Benutzer Zugang zum Ausschalten der Bewegung in der sogenannten reduzierten Bewegung haben. Effektiv. Was das tut, ist, dass es Interaktionen wie Parallaxe entfernt oder all jene Interaktionen, die wir heute so vertraut sind, um einige dieser Reisekrankheit zu reduzieren , die auftreten können. So möchten Sie sicherstellen, dass Ihre Erfahrung auch ohne die Bewegung immer noch wahr . Wir haben gerade eine Menge Informationen behandelt, von denen sie sind, aber wir haben uns wirklich nur auf drei Hauptaspekte von Styleguides konzentriert, die Fonds, Farben und Fotografie und Bilder sind . Es gibt eine Fülle von Informationen, die wir heute nicht behandelt haben, und ich würde Ihnen empfehlen, dass Sie tief in sie eintauchen. Ich habe ein paar meiner Lieblings-Links in The Resource is Section aufgenommen, aber bitte lesen Sie evangelisieren, stellen Sie Fragen, Barrierefreiheit Communities sehr einladend und begeistert von jedem, der begeistert von Zugänglichkeit ist . So weiter 8. Die Regelungsöffnung: Also haben Sie Ihr Design gegen diese Barrierefreiheitsstandards besessen, und jetzt sind Sie bereit für den nächsten Schritt, besteht, Ihr Design an die Kräfte zu schicken, die für Agenturseite stehen. Das kann bedeuten, es an das Markenteam Ihres Kunden zu senden. Wenn Ihre Software-Marke Seite senden Sie es an Ihre Meeresspiegel Stakeholder Unabhängig, Sie sind wahrscheinlich ein wenig nervös, weil Sie technisch einige Regeln gebrochen haben. Es gibt zwei Szenarien, die passieren können, und ich werde Sie durch beide Szenarien eins führen. Du schickst es ab und es wird genehmigt. Schön. Du steckst es nur an das Männer-Szenario fest. Zwei. Du wirst geschnappt. Glücklicherweise habe ich einen Großteil meines Lebens damit verbracht, Lee alte Verfahrensschritte zu beobachten, und das wird sich hier als nützlich erweisen, weil du das wie ein Rechtsgeschäft behandeln wirst . Bewerten Sie zunächst die Regel des Stilleitfadens. Vergewissern Sie sich, dass Sie die Regel tatsächlich gebrochen haben. Wenn Sie dies getan haben, dann stellen Sie die W drei c W. C. A G Barrierefreiheitsrichtlinien, die durch den Stil Guide Express gebrochen wurden Wie dies sich negativ auf Ihren Benutzer auswirkt. Ich finde, dass es hier sehr hilfreich ist, wenn Sie den Zugang zu den spezifischen Daten für das Unternehmen finanzieren können, weil Sie damit den Benutzer in eine tatsächliche konkrete Zahl verwandeln können. Und wenn Sie diese Zahl mit Engagement oder besser noch, Umsatz verknüpfen können, dann können Sie einen bestimmten Dollarbetrag zuordnen. Manchmal muss man ihnen nur das verlorene Geld zeigen. Und wenn Sie immer noch feststellen, dass Sie eine Menge Pushback bekommen, finde ich, dass es hilfreich ist, einen Kompromiss zu treffen und mit dem Markenteam ans Telefon zu gehen . Zum Beispiel. Es ist wichtig, hier zu beachten, dass es mit Zugänglichkeit nicht um die Suche nach Level A eine Perfektion geht, obwohl das großartig wäre. Also, wenn das Marken-Team stark auf einen bestimmten Grauton zurückdrängt, von dem Sie wissen, dass es nicht zugänglich ist , als versuchen Sie, es so zugänglich wie möglich zu machen, während Sie es durchbekommen. Da es beim Zugriff darum geht, sicherzustellen, dass der Benutzer die Informationen erhält, und wenn er nie live geht, werden sie die Informationen überhaupt nicht erhalten. Dieser Prozess kann wie eine Menge erscheinen, besonders wenn Sie die einzige Person in Ihrem Team sind, die sich um die Barrierefreiheit zu kümmern scheint. Aber ich verspreche, dass bei jedem Gespräch, das Sie in jeder Regel haben, die Sie Ihrem Team beschreiben , es jedes Mal ein bisschen einfacher wird, also weiter 9. Gestalten mit Barrierefreiheit im Kopf: so viel von dem, was wir heute diskutiert haben, war im Kontext der Arbeit in einem bestehenden Styleguide. Aber wenn sich die Gelegenheit bietet, einen Styleguide von Grund auf neu zu erstellen oder Website von Grund auf neu zu erstellen, ist das genial. Ich empfehle dringend, dass Sie den folgenden Ansatz zuerst mit einem klaren Skelettdrahtrahmen beginnen . Ihr Drahtrahmen sollte eine klare Inhaltshierarchie aufweisen. Drücken Sie Ihre Inhalte in einer kohärenten Art und Weise aus und seien Sie sehr zugänglich. Jetzt wäre ein wenig besorgniserregend, wenn jede einzelne Website wie eine College-Arbeit aussah. Paper Times New Roman Größe 12 Doppelabstand. So ein Top, das wir fühlen uns frei, Farbe und Bilder und Typ zu verwenden, um unsere Erfahrung zu verbessern und geben Persönlichkeit Tour Marken. Wir müssen nur sicherstellen, dass, wenn wir jede dieser additiven Eigenschaften hinzufügen, dass der Drahtrahmen und der Erfolg der Benutzererfahrung jeden einzelnen Schritt des Weges beibehalten wird. Auf diese Weise erhält jeder eine klare Benutzererfahrung, und für diejenigen, die Zugriff auf diese Verbesserungen haben, sie immer noch eine großartige Benutzererfahrung als auch. Wenn und wenn diese Extras es lieben, extra zu sein, werden durch assistive Technologien ausgeräumt. Ihre Benutzer lüften immer noch mit einer kohärenten Benutzererfahrung, und Ihr Design wird nicht gebrochen. Und das sind Asse. Ich ermutige Sie sehr, mit Ihrem nächsten Styleguide in der Wildnis zu beginnen. Das kann für Ihre eigenen Marken, interne Styleguide oder Ihr nächstes Kundenprojekt sein. Aber egal, ich habe eine Checkliste für Sie aufgenommen, die das gesamte Material von heute in der Ressource abdeckt ist Abschnitt. Bitte teilen Sie Ihre Arbeit und ich freue mich auf Ihren Prozess und was Sie gelernt haben, ich kann es kaum erwarten, zu sehen. 10. Conclusion: Die Zukunft der Barrierefreiheit: Ich möchte erwähnen, dass die meisten Aspekte der Zugänglichkeit, die wir gemacht haben, heute in erster Linie für körperliche und geistige Behinderungen waren. Aber es gibt eine ganze Reihe anderer Überlegungen, die im Namen der sozialen Inklusivität gemacht werden müssen . Soziale Inklusivität kann alles umfassen, von der Aufnahme nicht binärer Geschlechteroptionen in Ihren Formularfeldern über das Reflektieren unterrepräsentierter Rassen in Ihrer Aktienfotografie bis hin zur Schaffung einer leistungsstärkeren Website, die auf zwei G-Internetgeschwindigkeiten funktioniert. Es kann leicht sein, von der Anzahl der zu treffenden Überlegungen überwältigt zu werden, aber ich erinnere mich daran, dass es nicht um Perfektion geht. Stattdessen geht es darum, jeden Tag kleine, inkrementelle Schritte zu unternehmen, sodass es so einfach sein kann, wie ein Formular auf Ihrer Website zu verbessern oder ein Gespräch darüber zu beginnen , wie Sie mit Ihrem Team besser zugänglich sein können. Jedes Zeug, das wir mitnehmen, bewegt uns in diesem Kampf um ein zugänglicheres Web, und mit der Technologie, die sich ständig weiterentwickelt, müssen wir dieses Streben nach Perfektion wirklich im Auge behalten. Und in der Tat, die W drei, c W. C. A. G, wird seine 2.1 Veröffentlichung später in diesem Jahr veröffentlichen. Es ist ungefähr 10 Jahre her, seit das letzte veröffentlicht wurde, so dass es viele neue Informationen geben wird, die wir lernen und neue Wege zur Innovation in unserem Raum geben werden. Andere Wege, die für Spaß innovieren, die zugänglich sind, sind CSS-Raster der Arbeit, die sie tun, um redaktionelle und dynamische Designs zu schaffen, wird es uns ermöglichen, unseren Kuchen zu haben und zu essen . Designs werden interessant sein, aber noch wichtiger ist, ihre Zugänglichkeit durch ihre Inhalthierarchie beibehalten. Und das ist eine wirklich tolle Sache. Ein guter Verbündeter zu sein bedeutet, widerstandsfähig zu sein, während wir dieses Streben nach einem zugänglicheren und schließlich universellen Web fortsetzen . Da sich die Rolle der Technologie in unseren Anwendern ausdehnt, ist es wichtig, dass wir alle unsere Nutzer in einer Weise mitbringen, die gleichermaßen gerecht und verantwortungsvoll ist . Vielen Dank, dass Sie meine Fähigkeiten Share-Klasse beobachten und Glückwunsch, ein Verbündeter zu werden