UX-Verbesserungen für die Barrierefreiheit der Tastatur

Wie können wir eine barrierefreie Benutzererfahrung für Nur-Tastatur- und Hilfstechnologie-Benutzer bereitstellen, ohne die Erfahrung für andere Benutzer zu beeinträchtigen? Wir haben Aaron Pearlman, Principal UX Designer bei Deque Systems, gebeten, einige praktische Tools und Techniken zu teilen, um sicherzustellen, dass wir alle unseren Benutzern ein integratives und zugängliches Erlebnis bieten.

Als Teil unserer Smashing-Mitgliedschaft veranstalten wir jede Woche Smashing TV, eine Reihe von Live-Webinaren. Kein Schnickschnack – nur praktische, umsetzbare Webinare mit Live-Fragen und Antworten, die von angesehenen Praktikern aus der Branche geleitet werden. In der Tat sieht das Smashing-TV-Programm bereits ziemlich dicht aus und ist für Smashing-Mitglieder kostenlos, zusammen mit Aufnahmen – offensichtlich .

Wir hoffen, dass Sie das Webinar genauso genießen werden wie wir!

Aaron Pearlman: Sie sollten meinen Bildschirm sehen können. Okay, jetzt, lassen Sie mich einfach ... Los geht's, sehr gut. Nun, hallo alle zusammen. Wie gesagt, ich bin Aaron Pearlman, der Principal User Experience Designer für Deque. Und ich denke – Äh, lass mich bewegen – Zoom neigt dazu, ein bisschen UI in den Weg zu stellen, also entschuldige ich mich, wenn ich so aussehe, als würde ich mich hektisch bewegen und die Maus hoffentlich nicht auftaucht. Deshalb werden wir heute über die Arten von Optimierungen sprechen, die Sie für Benutzer von Nur-Tastatur und Hilfstechnologien vornehmen können. Wie ich gerade erwähnt habe, werden diese Art von Optimierungen, diese Art von Dingen niemanden daran hindern, Ihr zu verwenden … sie werden auch von anderen Personen nicht ungenutzt bleiben. Sie neigen nur dazu, Dinge zu sein, die für Benutzer vorteilhafter sind, die überwiegend ein System mit nur der Tastatur verwendender Benutzerunterstützungstechnologie verwenden.

Aaron Pearlman: Für diejenigen, die nicht wissen, was das bedeutet, was eine Assistenztechnologie für Nur-Tastatur-Benutzer ist – ein Nur-Tastatur-Benutzer wäre jemand, der normalerweise nur seine Tastatur verwendet, um ein System zu durchqueren. Sie werden also häufig die Tabulatortaste und die Umschalttaste sowie die Pfeiltasten verwenden, um Ihr System zu durchqueren, daher ist ihnen die Konzentration sehr wichtig. Sie könnten feststellen, dass diese eine Person Probleme mit motorischen Fähigkeiten hat, möglicherweise auch Sehschwächen, die Benutzer, die nur Tastaturen verwenden, und dann verwenden Benutzer von Hilfstechnologien auch eine Tastatur, um Ihr System zu durchqueren, sie können auch andere Hilfstechnologien wie den Bildschirm verwenden Meter wie VoiceOver oder ein Braille-Lesegerät oder so etwas.

Aaron Pearlman: Das ist es also, worauf wir uns konzentrieren – unsere Benutzer dieser Art, weil ein guter Teil der Menschen mit Behinderungen dazu neigen, in dieses Lager zu fallen. Damit sind nicht alle gemeint. Sicherlich gibt es unzählige verschiedene Behinderungen und Abstufungen dazwischen, aber zu diesem Zweck werden wir uns heute darauf konzentrieren.

Aaron Pearlman: Also, ein kleiner Überblick darüber, was wir abdecken werden: Wir werden ein bisschen über den Designprozess sprechen und vielleicht auch ein bisschen eine Art Übung machen, die wir machen vielleicht gehen, vielleicht auch nicht, bevor wir zu den Skip-Links gehen. Und dann werden Skip-Links eine der Funktionen sein, die wir behandeln werden, Möglichkeiten zur Optimierung Ihres Modals und wie Sie mit Fokus umgehen. Das sind also die drei großen Kategorien, die wir abdecken werden, und dann haben wir Zeit für Fragen, wenn wir fertig sind.

Aaron Pearlman: Zu Beginn dachte ich, wir könnten einen kleinen Überblick über den UX-Designprozess geben. Ich war in verschiedenen Workshops und so. Ich finde, dass es eine Vielzahl verschiedener Personen aus vielen verschiedenen Disziplinen gibt, nicht jeder ist ein User-Experience-Designer, daher sind sie möglicherweise nicht so vertraut mit dem Prozess, den viele UX-Designer anwenden. Deshalb dachte ich, wir würden es nur kurz durchgehen, wir werden nicht viel Zeit damit verbringen, aber ich finde, es lohnt sich, es nur kurz durchzugehen. Auch, weil es auch mit barrierefreiem Design verbunden sein wird. Die meisten UX-Designs durchlaufen also tendenziell einen Prozess namens Discovery, der nicht immer als Discovery bezeichnet wird, sondern manchmal als Rapid Ideation, Rapid Iteration. Viele Leute haben unterschiedliche Namen dafür, aber der Punkt ist, dass es der Teil des Designprozesses ist, in dem ein Großteil der Herstellung stattfindet.

Aaron Pearlman: Es ist oft so, dass wir auch verschiedene Ideen und Anforderungen sammeln, es ist eine Zeit, in der viel recherchiert und mit Ihren Unternehmenszielen kombiniert und mit all diesen Informationen gefiltert wird, und was dabei herauskommt Artefakte, die es uns ermöglichen, das System, das wir erstellen werden, oder die Funktionen, die wir erstellen, zu erstellen. Das sind sie in der Regel – das sind sie nicht immer – aber sie sind in der Regel Dinge wie Prototypen, manchmal sieht man auch mentale Modelle, die aus ihnen hervorgehen. Aber ein Prototyp mit einem gewissen Maß an Genauigkeit, der widerspiegelt, wie Ihr Zielbenutzer seine Ziele erreichen wird. Das TLDR ist das wiederholende Design und wir testen mit Benutzern und wiederholen, testen mit Benutzern, wiederholen, testen mit Benutzern, und am Ende wird es gebaut.

Aaron Pearlman: Sie denken, das ist wichtig, sind die Überlegungen zur Zugänglichkeit, die wir während des gesamten Designprozesses berücksichtigen und umsetzen wollen. Und verschiedene Ebenen der Treue können verdient werden, wenn man über verschiedene Arten von Dingen nachdenkt, es kommt wirklich darauf an. Ich werde nicht weiter darauf eingehen, aber im Allgemeinen möchten wir diese Heuristiken und Methoden einbeziehen, und wir werden als Designer unsere Möglichkeiten der Barrierefreiheit im Laufe der Zeit erweitern, genauso wie wir unsere Möglichkeiten, ein Gut zu sein, erweitern User Experience Designer im Laufe der Zeit. Es gibt am Anfang keine Erwartung, dass Sie gehen und WCAG 2.1 lesen, dann werden Sie die ARIA-Spezifikation lesen, und dann werden Sie fertig sein und Sie werden keine Fehler mehr machen, oder Sie werden nichts verpassen, wenn es um Ihre Designs und barrierefreies Design geht. Das ist bei weitem nicht unbedingt vernünftig.

Aaron Pearlman: Sie müssen nur wissen, dass Sie mit der Zeit dazulernen werden. Sicherlich habe ich immer noch Fehler in der Zugänglichkeit und bei allem, woran ich arbeite, und es geht nur darum, besser zu werden. Also, [unverständlich], weil ich immer barrierefrei designe. Ein kleiner Stecker, obwohl er für das, woran wir heute arbeiten werden, relevant ist, heißt Trane. Es ist unsere vollständig zugängliche Musterbibliothek bei Deque, wir verwenden sie, um unsere eigenen Produkte zu erstellen. Es ist ein HTML-, CSS- und JavaScript-Frontend-Framework, es ist Bootstrap ziemlich ähnlich, falls Sie jemals so etwas verwendet haben. Wir haben auch eine Reaktionsbibliothek, die auch eine Schwesterbibliothek ist. Unser Team entwickelt sich in Reaktion. Aber wir werden uns einige der Dinge hier heute als Beispiele ansehen. Aber das ist Open Source, es ist verfügbar, es wird einen Link dazu am Ende dieses Decks geben, den ich allen zur Verfügung stellen werde.

Aaron Pearlman: Und es ist kostenlos für Sie, Zweige zu nutzen und zu bekommen und es nach Herzenslust zu nutzen oder dazu beizutragen, wir würden uns freuen, auch einen Beitrag dazu zu sehen. Also nur ein kleiner Stecker, aber wir werden uns im weiteren Verlauf darauf beziehen. Das erste, was wir uns ansehen werden, sind Skip-Links. Und für diejenigen, die vielleicht nicht wissen, was ein Skip-Link ist, Skip-Links sind kleine Links, die dazu neigen, als allererster Tabstopp in einer Webanwendung oder Website zu erscheinen. Und was sie Ihnen ermöglichen, ist, dass Sie Teile der Website umgehen können. Warum würden Sie das tun wollen?

Aaron Pearlman: Nun, wenn Sie eine Website haben, die ein wirklich reichhaltiges Menü hat, kann das ein großes Plakatmenü sein oder einfach nur eine Menge Zeug, wenn Sie nur Tastatur oder Hilfstechnologie verwenden, wenn Sie dazu kommen Website und Ihr VoiceOver fängt an, davon abzulesen, oder auch nicht, vielleicht sogar, vielleicht sind Sie ein sehender Benutzer, Sie verwenden nur Ihre Tastatur, Sie müssen all diese verschiedenen Elemente mit der Tabulatortaste durchlaufen, um zu ihnen zu gelangen den Inhalt oder den Arbeitsbereich, den Sie beginnen möchten, was auch immer Ihre Aktivität ist, die Sie dort tun. Mit einem Skip-Link können Sie also normalerweise die Navigation umgehen, um zum Arbeitsbereich dieser Anwendung zu gelangen.

Aaron Pearlman: Es kann manchmal mehrere Links geben und normalerweise wird nur einer angezeigt, aber wir haben einige Beispiele. Ich zeige Ihnen ein Beispiel dafür, wo Sie auch mehrere Skip-Links verwenden können. Also dachte ich, wir könnten uns ein paar verschiedene Arten von Skip-Links oder ein paar verschiedene Arten von Skip-Links ansehen, und dann schauen wir uns eine andere Seite an, die keinen Skip-Link hat, und vielleicht ein bisschen darüber reden, wo einer ist könnte dort nützlich sein. Den ersten werden wir uns ansehen, hoffentlich können Sie meinen Bildschirm sehen. Das erste, das wir uns ansehen werden, ist dieser Skip-Link, den wir auf deque.com verwenden, und was es ist, ist das, was ich ein Verschiebungselement nennen würde, da es die Seite verschiebt. Wenn ich also hier hineintippe, kann ich sehen, dass der Link zum Überspringen vorhanden ist, und er wird mir sagen, dass ich zum Inhalt springen soll.

Aaron Pearlman: Und wenn ich das auswähle, wird es mich zum Inhalt unten schicken, und ich nenne es Verschiebung, weil es sich buchstäblich einfügt und versteckt und sich dort einfügt und es verschiebt. Dies war der Skip-Link, den wir für unsere Inhalte ausgewählt haben, aber es ist einer, der sehr häufig vorkommt. Sie sehen, dass es sich oben in einer Website oder Webanwendung einfügt. Das nächste, das wir uns ansehen werden, ist eines auf einer Seite, von der ich sicher bin, dass viele von Ihnen sie benutzt oder ziemlich oft benutzt haben. Es ist Amazon, wir schauen uns ihren Skip-Link an. Wenn ich dort hineintippe, wenn Sie in die obere linke Ecke schauen, sehen Sie es überlagert, dies ist ein Überlagerungsstil, dies ist sehr, sehr häufig, wo es den Inhalt überlagert, und daher wird oft übersprungen, was auch immer ist dahinter, um Ihnen dort den Sprung zum Hauptinhalt anzuzeigen.

Aaron Pearlman: Die Vor- und Nachteile zwischen Verschieben und Überlagern sind vernachlässigbar. Wenn Sie feststellen, dass Ihr Inhalt etwas ist, das Sie niemals verschleiern möchten, möchten Sie vielleicht etwas einfügen und es einfach verwenden, eins verschieben, umgekehrt, es spielt keine Rolle, das ist auch in Ordnung. Wenn Sie Inhalte entwerfen, die von rechts nach links gelesen werden, wie z. B. arabische Inhalte, können Sie Ihren Link zum Überspringen in die obere rechte Ecke setzen, das kann es wert sein. Es kommt wirklich darauf an, was angemessen ist. Aber letztendlich liegt diese Diskretion beim Designer in seinem Team. Dies ist also ein Beispiel für zwei Skip-Links, die ein einzelner Skip-Link waren, und ich dachte, ich würde Ihnen einen zeigen, bei dem es mehrere Optionen innerhalb des Skip-Links gibt.

Aaron Pearlman: Ich werde dieses Beispiel aufrufen, es stammt aus unserer Musterbibliothek. Nun, für dieses spezielle Beispiel würde ich nicht wirklich etwas entwerfen, das mehrere Skip-Links dafür hätte, weil es es nicht wirklich verdient, aber wir haben es nur zu dem Zweck gemacht, es zu demonstrieren. Also gehe ich rein und in der oberen linken Ecke verwenden wir ein Overlay, das Ihnen genau hier zwei Skip-Links zeigt. Und das sind Tabstopps hier drinnen, also wenn ich wieder Tab drücke, gehen wir zum nächsten Tab und wenn ich weg gehe, geht es. Wenn ich erneut tippe, wird es verlassen und in die Kopfzeile oben dort eingefügt. Ich schiebe den Tab zurück, schiebe den Tab zurück, damit wir sehen können, dass wir hier ein- und ausgehen können.

Aaron Pearlman: Und dann gehe ich weiter und betrete eines davon, damit Sie es sehen können. Und was an diesem Punkt passiert, wenn ich es auswähle, schickt es mich in den Arbeitsbereich und fokussiert tatsächlich diesen Arbeitsbereich. Was Sie bei vielen Webanwendungen sehen werden, ist, dass sie den Fokus selbst nicht wirklich zeigen. Wir wollten zeigen, dass dies in unseren Anwendungen sozusagen kein Fokus von Elementen ist, sondern etwas, das dauern kann Fokus. Und dann werden wir uns von hier aus konzentrieren und dann können wir zu den verschiedenen Gegenständen darin gehen, die der Fokus aller Elemente sind, die dort drin sind, die [unverständlich 00:12:28] Elemente. Das sind also Beispiele für ein paar verschiedene Möglichkeiten, wie Sie Links überspringen können.

Aaron Pearlman: Wie ich schon sagte, es gibt ein Beispiel in der Musterbibliothek, Sie können es gerne verwenden, wir haben auch eine Version davon, ich glaube hier, die Fehler enthält. Wir haben auch ein Beispiel für einen einzelnen Skip-Link, und Sie können das auch einfach verwenden. Wir haben hier also ein paar verschiedene Beispiele. Dies sind jedoch Beispiele für gängige Möglichkeiten, wie Sie Skip-Links verwenden können. Und sie sind in erster Linie für Personen von Vorteil, die ihre Tastatur nur zum Durchqueren des Systems verwenden, wenn sie daher eine Systemtechnologie verwenden.

Aaron Pearlman: Aber manchmal kann es andere Fälle geben, in denen ein Skip-Link möglicherweise von Vorteil sein könnte. Ich habe gesehen, dass es potenziell vorteilhaft sein kann. Sie können sich einen Fall vorstellen, in dem der große Arbeitsbereich Ihrer Website vielleicht aus einer Reihe von Suchergebnissen besteht und eine faule Punktzahl erstellt, bei der Sie nach unten scrollen und dann weitere Ergebnisse laden und nach unten scrollen und es ' Um mehr Ergebnisse zu laden, scrollen Sie nach unten und es werden mehr Ergebnisse geladen.

Aaron Pearlman: Nun, wie kommst du zur Fußzeile? Und ich hatte dieses Problem tatsächlich schon einmal, wo ich zu Suchmaschinen gegangen bin und nie in der Lage war, zur Fußzeile zu gelangen. Und was schön gewesen wäre, wäre der Skip-Link, der mich tatsächlich zur Fußzeile springen ließ, weil ich unten in der Fußzeile nach Informationen gesucht habe. Es gibt also Möglichkeiten, wie das Überspringen von Links dafür von Vorteil sein kann. Es ist nicht die einzige Möglichkeit, dieses Problem zu lösen. Natürlich können Sie auch Hardkeys oder Kontextmenüs verwenden. Es gibt viele verschiedene Techniken, um diese Ziele zu erreichen, aber das ist diejenige, bei der Skip-Links sehr gut sind [unverständlich 00:14:13]. Einige Dinge, die Sie beim Entwerfen eines Skip-Links beachten sollten, sind, dass es sich normalerweise um den allerersten Tabstopp in Ihrer Website-Webanwendung handelt.

Aaron Pearlman: Und dort ist es normalerweise zu finden, und wenn ich also schreie oder nur ein Tastaturbenutzer bin, kann ich sofort darauf zugreifen. Es ist das allererste, was ich tun kann, wenn ich mich betrete. Wenn ich also eine Web-App häufig verwende, kann ich direkt zu dem kommen, was ich versuche. Es sollte auch visuell dargestellt werden, wo es in den Informationen sein soll, im Grunde genommen in der KI, damit Sie auch Skip-Links und andere Teile Ihrer Anwendung einfügen können, wie ich hier einen einfügen könnte, wenn ich wollte, finde einen langen Scrolling-Stack-Site und ich wollte das tun, und ich wollte einen Skip-Link in etwas haben. Ich bin mir ziemlich sicher, dass Sie sich in verschiedene Dinge verankern können, aber es sollte visuell dargestellt werden, wo es sein sollte, innerhalb der Anwendung.

Aaron Pearlman: Im Allgemeinen ist das extrem ungewöhnlich. Die meisten Skip-Links befinden sich immer in den allerersten Tabstopps. Im Allgemeinen tun Sie das nicht. Ich denke, Sie können technisch gesehen, aber ich würde sagen, nicht. Und schließlich ist es ein interaktives Element und es ist der Farbkontrast der Vergangenheit. Stellen Sie also sicher, dass dies der Fall ist, wenn Sie sich entscheiden, ein Bild oder etwas darin zu verwenden, würde ich, aber wenn Sie dies tun, muss es vorhanden sein auch den richtigen zugänglichen Namen. Im Allgemeinen verwenden die meisten Leute Texte und Links, also wird es als Link gekennzeichnet. Stellen Sie nur sicher, dass es den Farbkontrast durchlässt, so dass es [unhörbar 00:16:07] ist. Sehr gut. Das ist also alles, was wir für Skip-Links haben.

Aaron Pearlman: Es ist ein ziemlich prägnantes, aber sehr häufiges Muster, das Sie überall sehen, und es ist etwas, das Sie ziemlich einfach hinzufügen können, es ist ziemlich einfach, es zu Ihrer Webanwendung hinzuzufügen, aber es kann einen großen Unterschied für Personen machen, die ihre Tastatur verwenden oder Systemtechnik. Lassen Sie mich also fortfahren und dies schließen und mit den modalen Optimierungen fortfahren. Ich habe mich dafür entschieden, weil Modale unter den meisten Web-Apps sehr, sehr, sehr, sehr verbreitet sind und sie in vielen verschiedenen Foren vorkommen, viele verschiedene Arten, wie Modale geformt und erstellt werden.

Aaron Pearlman: Aber einige allgemeine Dinge, die ich sehe, tauchen in mehr Dingen auf, die wir korrigieren können, bis wir einige Optimierungen vornehmen können, um es zu einem besseren Erlebnis für Nur-Tastatur- und Hilfstechnologiebenutzer zu machen. Und im Allgemeinen denke ich, dass Ihr Modal viel besser ist. Eine Sache, von der ich dachte, ich würde sie hier ganz schnell zeigen, ist, dass eine wichtige Sache, die ein Modal tun muss, in der Lage sein muss, den Fokus darin zu fangen. Ich wollte ein Beispiel zeigen für … es ist genau hier. Übrigens liebe ich Dribbeln, also ist das kein Seitenhieb gegen sie. Das ist hier wohl nur ein kleines Versehen. Ich habe sie die ganze Zeit als entzückende Seite benutzt und es gibt wundervolle Sachen darauf.

Aaron Pearlman: Also, wenn ich auf die Anmeldung drücken würde, oops, tut mir leid, die Anmeldung. Hier ist ein Modal hier und etwas, das manchmal passieren kann. Wenn Sie es genau bemerken, ich drücke Tab, Tab, Tab, Tab, Tab. Wie Sie hinter dem Bildschirm sehen können, ist es ein bisschen schwierig zu sehen. Sie können sehen, dass der Fokus nicht ganz im Modal gefangen ist, und dies kann manchmal passieren. Wenn ich also ein Benutzer wäre, der Hilfstechnologien oder Nur-Tastatur verwendet, wäre es sehr schwierig für mich, darauf zurückzukommen.

Aaron Pearlman: Das passiert sehr, sehr, sehr, sehr häufig, und es kann sicherlich passieren, wenn Sie verschiedene interessante Dinge in Modal einfügen. Wir wollen uns also vergewissern, und der Grund, warum ich das anspreche, der Grund, der eigentlich sehr, sehr wichtig ist, ist, wenn ein Modal evoziert wird, muss es sich gewissermaßen dem Individuum ankündigen, das es evoziert hat, weißt du was Sie haben sich im Grunde nur geöffnet, aber sie haben tatsächlich das Richtige geöffnet.

Aaron Pearlman: Und so kann es sich so ankündigen, dass entweder der Körper des Modals fokussiert werden muss oder möglicherweise der Header des Modals fokussiert werden kann, damit wir der Person, die das Modal hervorruft, sagen können, dass es das ist ist, was passiert. Wenn sie also eine Stimme haben, verwenden sie zum Beispiel VoiceOver darauf, es sagt ihnen, was sie sehen. Also dachte ich, ich gebe ein paar Beispiele dafür, wie der Körper fokussiert werden kann, und dann ein Beispiel, wie das Model stattdessen den Header fokussieren kann, und dann, was wir damit machen können.

Aaron Pearlman: Ich werde das hier ganz schnell eröffnen. Sehr gut. Und das Modal, das sie dafür haben, ist, glaube ich, eine Bekleidungsseite hier. Und was passiert ist, ist, dass es den Körper fokussiert hat, und das kann ich am besten zeigen, indem ich … ich werde VoiceOver ganz schnell einschalten. Ich werde es hochziehen.

VoiceOver: VoiceOver auf Chrome.] Bonobos, [unverständlich 00:20:10]-

Aaron Pearlman: Und du wirst es nicht hören können-

VoiceOver: Google Chrome, [email protected]

Aaron Pearlman: Aber Sie werden es sehen können.

VoiceOver: Schließen Sie die Karte, Ihre Karte ist leer, die Gruppe hat den Tastaturfokus. Sie befinden sich gerade in der Gruppe beim Öffnen Ihrer Karte, schließen Sie die Karte, Ihre Karte ist eine leere Gruppe. Sie befinden sich derzeit in der Gruppe innerhalb von Webinhalten, VoiceOver ist deaktiviert.

Aaron Pearlman: Genau dort, als ich es fokussierte, las es ein bisschen von allem vor, was auf Ihrer geschlossenen Karte vor sich ging, und Ihre Karte ist leer, weil der Kauf zu diesem Zeitpunkt fokussiert war. Und das ist vollkommen richtig. Das ist eine vollkommen gültige Art, Ihre Modale zu fokussieren. Es ist überhaupt kein Problem. Und von dort aus können Sie mit der Tabulatortaste durch alles blättern, was darin enthalten ist. Eine andere übliche Methode, wenn ein Modal aufgerufen wird, besteht darin, den Header zu fokussieren.

Aaron Pearlman: Und genau das tun wir bei den Modals, die wir für unsere Anwendungen verwenden, indem wir den Header fokussieren. Also werde ich das Modal hervorrufen, und wie Sie hier sehen können, ist der Fokus genau hier, wo Modal mit Form steht, der Fokus liegt genau dort auf der Kopfzeile. Wir fokussieren das tatsächlich programmatisch, anstatt es als einen Index zu bezeichnen. Und der Grund, warum wir uns programmgesteuert darauf konzentrieren, dass, wenn ich hier mit der Tabulatortaste durchgehe, es jetzt zur Schließen-Schaltfläche geht, auch in der Kopfzeile, dann zum ersten interaktiven Element, das Feld zum nächsten Feld, zum nächsten Feld, zum nächsten Felder, erneut mit der Tabulatortaste zum Speichern, erneut mit der Tabulatortaste zum Abbrechen.

Aaron Pearlman: Und von hier aus, wenn ich die Tabulatortaste drücke, würde diese Kopfzeile, wenn sie ein Tabstopp wäre, dorthin gehen, aber wir haben uns entschieden, das nicht zu tun. Stattdessen gehen wir zum Schluss und der Grund dafür ist, dass jemand Voice Over verwendet hat, da Sie vielleicht gesehen haben, was geschrieben wurde, und gleichzeitig in meine Ohren ging, es war eigentlich sehr wenig ablenkend, weil es sehr schnell spricht, es ist ein bisschen geschwätzig. Eine der Optimierungen, die wir für das Erlebnis hier vornehmen wollten, bestand also darin, es etwas weniger geschwätzig zu machen. Also ja, wir kündigen es an, wir fokussieren programmatisch Modal mit Form, wenn sie dort ankommen, damit sie wissen, dass das Modal, das sie hervorgerufen haben, tatsächlich das ist, worauf sie sich gerade konzentrieren.

Aaron Pearlman: Aber wir müssen es nicht immer und immer wieder ankündigen, wenn sie durch diese Verschiebungen radeln würden, die durch dieses Modal radeln. Es handelt sich also um eine kleine Optimierung, die für die Mehrheit der von Ihnen genannten Nur-Maus-Benutzer wahrscheinlich völlig unsichtbar wäre. Aber diese kleine Optimierung, Sie können sich vorstellen, wenn ich häufig Modale zum Ausfüllen von Formularen verwendet habe und ich ein Benutzer war, der Nur-Tastatur- oder Hilfstechnologie verwendet hat, dass sich die Optimierung im Laufe der Zeit summieren würde. Also, kleine winzige Dinge, die wir tun können, um Benutzererfahrungen zu machen, die insgesamt einen signifikanten Unterschied in der Sorgfalt machen können, die wir in unsere Designs stecken können, so dass sie die häufigste Erfahrung sind, die wir bieten können.

Aaron Pearlman: Apropos Umgang mit dem Fokus, der letzte, auf den wir eingehen werden, ist der Umgang mit dem Fokus selbst. Und wir haben ein Beispiel dafür gesehen, was kann passieren, wenn der Fokus bei bestimmten Arten der Handhabung verloren geht? Aber anstatt nur etwas zu sein, das ein bedeutendes Problem sein kann, kann die Art und Weise, wie Sie mit Fokus umgehen, die Erfahrung, die eine Person machen würde, erheblich verändern. Wirklich die Regel über den Umgang mit dem Fokus, besonders bei den beiden Beispielen, die wir uns jetzt ansehen werden, nämlich das Entfernen und Hinzufügen von Elementen zu Ihrem Arbeitsbereich oder wo auch immer Sie arbeiten, ist, dass … Es kann definitiv die Art und Weise ändern, wie jemand arbeitet interagiert damit. Und deshalb möchten wir, dass es der erwarteten Erfahrung folgt, die Sie für jemanden haben würden, der ein Nur-Maus-Benutzer oder ein sehender Benutzer ist, ein Nur-Maus-Benutzer, sollte ich sagen.

Aaron Pearlman: In diesem Fall werden wir uns ansehen … denn hier werden wir uns ansehen … Okay, lass es mich rüberziehen. Warte eine Sekunde. Ich muss das hier vorübergehend rausnehmen. Na, bitte. Sie sollten also kein Beispiel für ein von mir entworfenes Modal sehen können, es ist eigentlich ein einzelnes Modal, wir haben zwei Arten von Bildern davon und nur eines zeigt nur, was dort unter der Falte ist, anstatt wirklich eines zu machen , wirklich falsch, oder ich habe es einfach aufgeteilt, damit Sie sehen können, was unten in der Falte war. Und auf der rechten Seite, wenn Sie nachsehen, gibt es ein Mülleimer-Symbol, das gerade fokussiert wird. Wenn wir also auf das Mülleimer-Symbol klicken, vorausgesetzt, es gibt keinen Dialog, der sagt: „Sind Sie sicher, dass Sie es löschen möchten?“

Aaron Pearlman: Gehen wir mal davon aus, dass dem nicht so ist. Die eigentliche Frage lautet dann: Was passiert dort mit dem Fokus? Denn wenn dieses Mülleimer-Symbol getroffen oder ausgewählt wird, entfernt es Anweisungen, die sich hier befinden, und es entfernt sich auch selbst. Wo bleibt also der Fokus? Wir als Designer möchten also wählen, wohin der Fokus geht, weil sonst die Browser den Fokus wählen, wenn Sie eine Webanwendung innerhalb einer Webanwendung erstellen, und wir nicht möchten, dass der Browser wählt, wohin der Fokus geht, weil es so ist neigt dazu, Dinge auf den Körper zu werfen. In diesem Fall wollen wir also wirklich, dass der Fokus auf das nächste fokussierbare Element geht, nicht unbedingt auf das … was ich das Analogon dazu nennen würde, das den nächsten Mülleimer fokussieren wird, den Mülleimer für Anweisungen an Stattdessen fokussieren wir Anweisungen auf sich selbst.

Aaron Pearlman: Und der Grund, warum wir das tun möchten, ist, dass Sie sich vorstellen können, wenn jemand aus Versehen nur mit der Tastatur die Eingabetaste drückt und dann erneut die Eingabetaste drückt. Es hätte nur zwei Anweisungen anstelle von einer gelöscht. Und wir möchten, dass wir das für einen Mausbenutzer verhindern, indem wir diese Dinge buchstäblich physisch weit voneinander entfernt haben. Aber wir wollen auch in der Lage sein, das zu verhindern, denn Fokus ist das, was sie verwenden, um dies zu durchqueren. Also dachte ich, ich zeige ein weiteres Beispiel dafür, was wir tun, wenn wir hier das letzte Element im gesamten Abschnitt löschen.

Aaron Pearlman: Jetzt haben wir Kochanleitungen, die letzte Anleitung für Anleitung eins, wo geht hier der Fokus hin? Nun, für diesen speziellen wird es dem gleichen, was der vorherige war, das heißt, es wird tatsächlich bis zum nächsten Fokus gehen, aber wieder gefüllt, was die Zutat eins aus dem gleichen Grund ist, den wir nicht werfen wollen es wieder in den Papierkorb, denn wenn dann jemand noch einmal auf Auswählen oder erneut auf Zurück drücken würde, wären wir … Sie würden versehentlich zwei Dinge löschen, die sie unbeabsichtigt und nicht wollten.

Aaron Pearlman: Aus dem gleichen Grund würden wir das nicht unbedingt zu einem dieser Links hier werfen wollen, weil wir das gegenteilige Problem hätten, wo sie versehentlich auch Dinge hinzufügen würden. Und wir wollen nicht unbedingt, dass es an den Körper geht, weil wir an den Körper gehen und Ihr Voice Over-Benutzer, Ihr Benutzer der Assistententechnologie, einfach wieder anfangen wird, über das Modal zu plaudern oder Sie nicht weiter interagieren zu lassen und tun, was Sie vorhatten.

Aaron Pearlman: Und schließlich, das letzte Beispiel, das ich hier habe, ist, was wir tun, wenn wir in diesem Fall das letzte Element entfernen, in dem Modal hier, es ist nichts mehr übrig. Wohin würde ich es schicken? Und das liegt definitiv im Ermessen der Designer, wohin es gehen soll. Nein, es wird nicht unzugänglich sein, wenn Sie es an die Kleidung senden oder an den Fokus senden, vielleicht an den Abbruch. Es macht es nicht unbedingt unzugänglich, es ist nur so, es kommt wirklich darauf an, was Sie erwarten würden? Welche Informationen möchten Sie übermitteln? Welche Erzählung möchten Sie diesem Benutzer übermitteln und wohin wir sie senden möchten, wenn wir sie an den Header zurücksenden, um den Benutzer wissen zu lassen, dass er immer noch auf dem Modal ist, er ist immer noch da, wir haben' t schloss es ihnen zum Beispiel dort.

Aaron Pearlman: Und das ist eigentlich eine programmatische Verschiebung, denn wie gesagt, es ist keine schreckliche Stimme. Es ist kein so schreckliches fokussierbares Element wie dieses. Daher verlagern wir den Fokus in diesem speziellen Beispiel programmatisch darauf. Das sind also einige nette Beispiele dafür, was man vielleicht mit Fokus tun kann, wenn man Gegenstände entfernt. Also dachte ich, Sie könnten … Ich würde ein Beispiel dafür zeigen, was Sie tun, wenn Sie ein Element hinzufügen. Also habe ich hier ein Beispiel dafür, wie schnell ich den Fokus behalten kann.

Aaron Pearlman: Und genau hier werden wir auf dieses Hinzufügen einer weiteren Zutat klicken … Sie können sich einfach hier konzentrieren, eine weitere Zutat hinzufügen und sich dann in diesem Fall auf die eigentliche Zutat verlagern, das Feld, das Sie aus zwei Gründen hinzugefügt haben, einen, weil Die Annahme ist, dass wir das nächste Feld hinzufügen, mit dem wir interagieren wollten, und das wäre das erwartete Verhalten, wenn ich ein Nur-Maus-Benutzer wäre, ich würde das vermutlich hinzufügen, damit ich tatsächlich beginnen könnte, Text darin einzugeben.

Aaron Pearlman: Andererseits möchten wir uns nicht unbedingt auf eine andere Zutat konzentrieren, aus demselben Grund, aus dem wir, wenn sie erneut auf Return drücken, nicht zwei Zutaten anstelle von einer hinzufügen möchten. Es sollte das entgegengesetzte Problem des vorherigen Beispiels sein. Und das letzte, das letzte Beispiel, das ich zeigen wollte, weil ich denke, es könnte sich lohnen, es zu zeigen, ist … tatsächlich habe ich dieses Beispiel, ich kann es ein wenig nachholen. Aber ich kann es ziemlich treffend beschreiben, wenn Sie haben, was tun Sie, wenn Sie ein Modal hervorrufen? Zum Beispiel haben Sie etwas gespeichert, das Modal verschwindet, wohin geht der Fokus jetzt und was wir normalerweise tun, aber die Faustregel dafür ist, dass Sie es an ein beliebiges Element zurücksenden möchten [unverständlich 00:31:03] bekommt.

Aaron Pearlman: Wenn Sie sich also vorstellen, Sie hätten einen kleinen Bearbeitungsstift und Sie wählen ihn aus, öffnen das Modal, Sie füllen dieses Modal aus, Sie klicken auf Speichern, Sie möchten den Fokus wieder auf das interaktive Element richten, das normalerweise vorhanden ist … oder wir tun es. Es kann Fälle geben, in denen Sie es an einen anderen Ort senden möchten. Wenn es ein Zauberer ist und danach woanders hingeht, liegt es wiederum im Ermessen des Designers, was die Erzählung ist, die Sie uns zu sagen versuchen, wohin wir gehen sollen. Aber für Dinge, die wie der eine sind … Beispiel, den ich gerade beschrieben habe, was sehr häufig vorkommt. Du rufst ein Modal hervor oder machst etwas damit und es wird als Ergebnis davon verworfen und der Kontext ändert sich nicht unbedingt.

Aaron Pearlman: Und Sie wollen diesen Fokus nicht dorthin zurückschicken, wo er war. Und der Grund dafür ist, dass ein Nur-Tastatur- oder Hilfstechnologie-Benutzer dort abholen kann, wo er sich gerade befindet. Denn denken Sie daran, dass sie sich in diesem Raum befinden und dieser Raum in Bezug auf die Art und Weise, wie sie sich durchqueren, etwas linear ist, insbesondere wenn Sie die Stadt verwenden, um durch alles zu kommen. Also, ich denke, wir sind gerade bei 40 Minuten, wir sind gerade bei der Zeit für all die Beispiele und Dinge, die ich hatte. Also werde ich es an Scott weitergeben.

Scott: Danke Aaron. Das war ziemlich großartig, und wir haben viele Fragen von den Teilnehmern sowie einige von Einzelpersonen, die heute nicht kommen konnten, weil sie verreist sind. Poan, der regelmäßig an unseren Webinaren teilnimmt, fragt daher: „Wenn Sie Elemente entfernen, sollten wir dann nicht eine Bestätigung der Aktion erhalten und den Fokus dorthin und dann zum nächsten Element verschieben?“

Aaron Pearlman: Wenn Sie ein Element entfernen, sollten Sie eine … meinen Sie damit eine Benachrichtigung wie einen Toast oder sagen Sie, dass Sie eine Live-Region haben sollten, die Sie darüber informiert, was passiert? Wenn Sie den Fokus verschieben, um ein Element zu entfernen, wie zum Beispiel die, die ich gerade in diesem bestimmten Fall gezeigt habe, sollte die Hervorrufung dieser Löschung ausreichend sein, um sie wissen zu lassen, dass sie tatsächlich gelöscht wurden.

Aaron Pearlman: Es sollte weg sein. Auch wenn sie Voice Over verwenden, wird es das ebenfalls aufnehmen. Wenn Sie mit etwas interagieren und es z. B. an einer anderen Stelle Änderungen vornimmt, z. B. wie Sie etwas getan haben und dann z. B. einige Metriken geändert haben, möchten Sie wahrscheinlich eine Live-Region verwenden, die etwas höflich tut, um sie zuzulassen wissen, dass das passiert ist. Das ist etwas, das außerhalb des Zuständigkeitsbereichs dessen liegt, wo Sie speziell arbeiten. Ich hoffe, das beantwortet Ihre Frage. Es könnte sein, dass man in etwas eintaucht, das ein bisschen technischer ist. Ich muss einiges davon vielleicht noch ein bisschen weiterverfolgen, wenn wir uns mit tiefgründigen technischen Implementierungssachen befassen wollen.

Scott: Perfekt.

Aaron Pearlman: Mein Entwickler, also steuern sie dich nicht an, aber im Allgemeinen ist das eher der Fall. Das Beispiel, das ich gezeigt habe, sollte angemessen sein. Wenn Sie möchten, dass es gelöscht wird, könnten Sie einen Zwischenteil haben, in dem Sie eine Warnung ausgeben und sagen: „Sind Sie sicher, dass er das löschen soll?“ In welchem ​​​​Fall Sie es nur weiter verstärken, was passiert.

Scott: Großartig. Also, ja, versuchen Sie, die Fragen auf die Benutzererfahrung zu konzentrieren. Wie würden Sie also vom Standpunkt der Benutzererfahrung aus den Fokus für Benachrichtigungen verwalten?

Aaron Pearlman: Fokus für eine Benachrichtigung? Ich kann dir eins zeigen, wenn du es sehen möchtest.

Scott: Sicher.

Aaron Pearlman: Wir können zufällig auswählen, weil wir Toasts haben, die Benachrichtigungen sind. Also werde ich hier Toasts eröffnen. Das wird also gerade jetzt fokussiert. Dieser Trinkspruch wird hervorgerufen und er wird gerade fokussiert, und Sie können tatsächlich, wie Sie sehen können, genau hier in die Klausel einsteigen. So, it depends. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: Das ist eine Sache, die wir tun, nämlich, dass ich meine Designs ziemlich stark kommentiere. Alles von der Größe, wie bestimmte Dinge sein sollen, bis hin zu den Hex-Codes oder RGBA-Werten, wie sie aussehen und sich anfühlen sollen. Aber es gibt auch Anmerkungen zur Barrierefreiheit, die Sie hinzufügen können.

Aaron Pearlman: Und dann einfach kommunizieren, die Builds während des Durchlaufs durchsehen, sicherstellen, dass Dinge, wie z Auswahlmöglichkeiten, die Sie hatten, gibt es einige Schriftarten, die, wenn ihr Gewicht höher ist, und sie größer sind. Ihr Farbkontrast muss nicht 4,5 sein. Es kann tatsächlich ein bisschen niedriger sein, aber Sie werden diese Dinge einfach im Auge behalten wollen. Genauso wie Sie auch das Erlebnismaterial im Auge behalten würden. Sie werden ein Auge auf die Dinge haben wollen, auf die Sie geachtet und die Sie in Ihren Entwürfen kommentiert haben.

Scott: Wir haben also noch ein paar Minuten hier. Deshalb stelle ich noch eine Frage. Einige Leute sind der Meinung, dass Barrierefreiheit die Kreativität während des gesamten Designprozesses ersticken kann. Ist das etwas, auf das Sie gestoßen sind? Wie passt Ihrer Meinung nach Kreativität in barrierefreies Design?

Aaron Pearlman: Sicher. Das war eine meiner ersten Reaktionen auf die Notwendigkeit, barrierefrei zu entwerfen, dass mir jemand im Grunde die Handschellen anlegte und sagte: „Es gibt eine viel kleinere Kiste, in der man arbeiten kann.“ Es ist wahr, dass barrierefreies Design bedeutet, dass es einige weitere Herausforderungen geben kann, weil es mehr Regeln gibt, die Sie befolgen müssen. Aber am Ende stellte ich fest, dass die Erfahrung am Ende besser war und ich habe nicht … Als ich diese falsche Bezeichnung beseitigte und anfing, mehr und mehr zugängliche Designs zu machen, die WCAG 2.0 AA zugänglich waren, bemerkte ich, dass ich so ziemlich alles machen kann das ich machen wollte.

Aaron Pearlman: Manchmal müsste ich Probleme einfach etwas anders ausdrücken oder lösen als früher. Ich denke, dass viele Leute, wenn sie daran denken, barrierefrei zu gestalten … Ich gebe Ihnen ein sehr konkretes Beispiel. Wenn sie darüber nachdenken, Barrierefreiheit zu entwerfen, denken sie: „Oh, nun, ich kann zum Beispiel nicht all diese ausgefallenen Visualisierungen machen. Ich werde nicht in der Lage sein, all diese Dinge zu tun, weil sie nicht zugänglich sein werden, denn wenn eine Person sie nicht sehen kann, werde ich das nicht tun können.“

Aaron Pearlman: Ich entwarf eine einfache Visualisierung, eine Art Liniendiagramm, und darunter war ein Liniendiagramm, auf der x-Achse war, glaube ich, die Zeit und auf der y-Achse war die Nutzung oder so ähnlich das. Und da war dieser nette kleine Farbverlauf, der davon abging, und es gab eine Art dieser hellen Linien, die dahinter gingen, um die Monate und die Zeit abzugrenzen. Und als ich mit einem meiner Fachexperten darüber sprach, es barrierefrei zu machen, stellte sich heraus, dass ich mir sicher war, dass er nur „Nein“ sagen würde. Aber er sagte, dass es eigentlich nur ein paar Dinge gäbe, die ich tun müsste, um diese wirklich gut aussehende Grafik zugänglich zu machen. Erstens, diese Linie oben muss den Farbkontrast passieren, denn das ist es, was die Informationen über den Trend im Laufe der Zeit vermittelt.

Aaron Pearlman: Das graduierte Zeug darunter ist nur Dekoration und solange es den Durchgang des Farbkontrasts und der Linien der y- und x-Achse nicht unterbricht und am Ende in Ordnung ist. Die Linien dahinter waren in Ordnung, aber ich fügte am Ende dort Häkchen hinzu, um dies anzuzeigen. Und dann, als ich darüber schwebte und fokussierte, denn manchmal können Sie mit der Maus darüber fahren und es wird einen Punkt zu einem Teil des Liniendiagramms hinzufügen, nur um sicherzustellen, dass der Punkt selbst die Farbe passieren würde. Kontrast. Ich habe das gemacht, indem ich eine Art Donut-Ding gemacht habe, bei dem Sie einen weißen Punkt mit einem anderen Punkt setzen, oder ich sollte sagen, hat es auch wie einen großen Strich auf der Außenseite.

Aaron Pearlman: Und dann fügte ich ein wenig Behandlung hinzu, die die ausgeblendeten Linien wieder nach vorne bringen würde. Und alles hat den Farbkontrast bestanden und war am Ende in Ordnung. Es waren wirklich schöne Visualisierungen, die vorbeigingen. Nun zugegeben, ich komme nicht in all das zugängliche Namenszeug und kann das nicht tun. Viele Bibliotheken sind darauf eingestellt. Lassen Sie das beiseite, zumindest nennen wir einen Kontrast, weil ich denke, dass viele Designer damit zu kämpfen haben. Du kannst es schaffen.

Aaron Pearlman: Es geht nur darum, wirklich auf diese Art von Dingen zu achten und mehr Beispiele zu bekommen und einfach verschiedene Dinge auszuprobieren und auszuprobieren und andere Leute zu haben, mit denen Sie diese Ideen aufstellen und sie hin und her tauschen und erneut überprüfen können, einfach wirklich TU das. Ich glaube nicht, dass es wirklich irgendetwas hemmt. Sie müssen nur etwas klarer darüber nachdenken, wie Sie es tun werden, und sicherstellen, dass Sie durch die Linse sehen, wie eine Person damit umgeht, wenn sie eine Sehbehinderung hat oder könnte. Sie können es überhaupt nicht sehen oder nicht hören, wenn Sie eine Medienanwendung erstellen.

Scott: Noch eine Frage, aber ich denke, wir hätten sie ansprechen sollen. In welcher Phase Ihres Prozesses denken Sie über Barrierefreiheit nach? Ich werde während des gesamten Prozesses davon ausgehen.

Aaron Pearlman: Ja, es ist während des gesamten Prozesses. Ich werde eher ein bisschen mehr als … Ich weiß, wem ich das sage und es klingt ein wenig schnippisch. Wenn Sie also schon früh Dinge wie Low-Fidelity-Prototyping machen, werden Sie über Dinge wie Tab-Order-Zeug nachdenken. Sie werden vielleicht über Überschriften und Struktur nachdenken, solche Sachen. Das ist die Art von Barrierefreiheit, an die Sie denken. Später, wenn die Wiedergabetreue höher wird, werden Sie eher über Dinge nachdenken wie Farben und Ihre Paletten, die Sie ausgewählt haben, vielleicht zugängliche Namen, alternativer Text für alles, was das verdient, Sie denken vielleicht darüber nach, Wenn Sie zum Beispiel benutzerdefinierte Fokussierungen vornehmen, werden Sie wahrscheinlich damit beginnen, darüber nachzudenken.

Aaron Pearlman: Das bedeutet nicht, dass Sie nicht darüber nachdenken könnten, wenn Sie Low-Fidelity machen, es bedeutet nur im Allgemeinen, wenn ich meinen Prozess durchlaufe, fallen diese Dinge eher in diese Kategorien. Du denkst die ganze Zeit über Barrierefreiheit nach, aber du denkst dabei nicht immer an alles, weil du dich in Sachen mit geringerer Wiedergabetreue befindest, und du machst dir Gedanken, und du denkst nur über Ideen nach, und du bist einfach Wenn Sie Ideen durcharbeiten, lassen Sie diese kreativen Dinge durchgehen, wenn Sie sich mehr auf Zugänglichkeit einstellen, es wird sich nur irgendwie von selbst durchsetzen und es wird weniger bewusste Dinge geben.

Scott: Ja. Fair genug. Nun, in diesem Sinne, wir haben keine Zeit mehr, Aaron. Vielen Dank für Ihre Zeit und—

Aaron Pearlman: Das war großartig. Ich hatte eine wundervolle Zeit.

Scott: Ich denke, Sie werden bei den nächsten Smashing-Konferenzen dabei sein.

Aaron Pearlman: Ich werde bei dem in New York sein. Ich werde bei dem in New York sein.

Scott: Okay. Und machst du dort einen Workshop?

Aaron Pearlman: Ja, das sind wir.

Scott: Okay. Fantastisch. Nochmals vielen Dank für Ihre Zeit und nur um die Mitglieder zu sehen, die noch zuschauen, wir haben nächste Woche zwei Webinare. Das erste ist The Power of Digital People mit Kristina Podnar. Und dann haben wir eine Nummer drei in unserer Serie mit Andrew Clarke, Inspired Designs Decisions, Nummer drei, inspiriert von Ernest Journal. Vielen Dank an alle, die heute dabei waren. Und noch einmal, diese Aufzeichnung wird im Dispatching Membership Panel verfügbar sein, sobald wir mit der Bearbeitung fertig sind, und wir hoffen, Sie alle nächste Woche zu sehen. Nochmals vielen Dank, Erin.

Das ist ein Wrap!

Wir danken Smashing Members von ganzem Herzen für ihre kontinuierliche und freundliche Unterstützung – und wir können es kaum erwarten, in Zukunft weitere Webinare zu veranstalten.

Wir könnten nicht glücklicher sein, Aaron auf unserer bevorstehenden SmashingConf New York (15.-16. Oktober) willkommen zu heißen – wir würden uns freuen, Sie dort auch zu sehen!

Bitte lassen Sie uns wissen, ob Sie diese Reihe von Interviews nützlich finden und wen Sie gerne interviewen würden oder welche Themen wir behandeln sollen, und wir werden uns gleich darum kümmern.