Die Konzentration auf Schwerpunkt-Stile

0
53

Nicht jeder verwendet eine Maus, um im internet zu surfen. Wenn Sie Lesen diesen Beitrag auf einem smartphone, das ist offensichtlich! Was auch erwähnenswert, ist, dass es andere Formen der Eingabe, die Menschen benutzen, um Dinge zu erledigen. Mit diesen Formen der Eingabe kommt die Notwendigkeit für focus styles.

Menschen

Menschen sind kompliziert. Wir wollen nicht unbedingt ausführen die gleichen Verhaltensweisen konsequent, noch haben wir stets Entscheidungen zu treffen, die Sinn machen, aus einer Außenperspektive. Manchmal haben wir selbst etwas tun, nur um… etwas zu tun. Wir bekommen leicht gelangweilt: basteln, Stossen und drängen die Dinge, um Sie besser an unsere Bedürfnisse an, unabhängig von Ihrer ursprünglichen Absicht.

Auch die Menschen sind sterblich. Wir werden krank und verletzt. Manchmal auch beides auf einmal. Manchmal ist es für eine kleine Weile, manchmal ist es permanent. Unabhängig, bedeutet es, dass wir manchmal nicht in der Lage bist zu tun, was wir wollen oder tun müssen, wie wir das gewohnt sind.

Menschen Leben auch in der Welt. Manchmal sind wir in eine Umgebung, wo externe Faktoren verschwören, uns daran zu hindern, etwas zu tun die Art und Weise, die wir gewohnt sind, es zu tun. Jemals wurde stecken in Ihrem Elternhaus während der Ferien und zu nutzen hatten, Ihre alten-aber-noch-wartenden desktop-computer? Es ist wie es ist.

Eingang

Sowohl Maus-und touch-Eingabe bieten ein Indikator für die Interaktion. Für touch, es liegt auf der Hand: Ihre finger fungiert als Brücke, die verbindet Sie Ihren Geist auf das Objekt auf dem Bildschirm, die es will, zu aktivieren. Für Mäuse, die ein cursor-dient als proxy für Ihre finger.

Jedoch, diese sind nicht die einzigen Formen der input-zur Verfügung zu uns. Keyboards sind allgegenwärtig und kann einfach über alles mit einer Maus oder touch-Eingabe erreichen kann, vorausgesetzt, Sie wissen, die richtigen Tasten in der richtigen Reihenfolge. Manchmal ist es sogar einfacher und schneller als mit einer Maus!

Denken Sie das Letzte mal mit Ausschneiden, Kopieren, Einfügen und Speichern Funktionen. Vielleicht war es das Letzte mal, Sie arbeiten an einer Tabelle? Waren Sie Umschalten zwischen Maus-und Tastatureingaben, um Dinge zu erledigen, so effizient wie möglich? Sie wahrscheinlich gar nicht geben, dass das Verhalten einen zweiten Gedanken, aber es ist ein großartiges Beispiel für die Umschaltung Eingang “on the fly” am besten, ein Ziel zu erreichen. Heck, vielleicht haben Sie nahm sogar einige “me time”, während diese undankbare Aufgabe zu stecken “Like-button” auf Ihrem smartphone.

Wenn Sie Probleme mit Ihren Händen, andere Optionen stehen zur Verfügung: Stäbe, Stöcke, switches, sip und puff-Geräte, Spracherkennung und eye-tracking-Technologie können alle erstellen, die Eingang in ein digitales system. Diese Geräte identifizieren, die einen content-Bereich und aktivieren Sie es. Dies ist ähnlich wie die, die Sie können drücken Sie die tab-Taste auf einer Tastatur und die nächste Zelle in einer Tabelle wird hervorgehoben, was darauf hinweist, dass es verschoben wurde und nun bearbeitet werden.

In diesem video, video-editor und accessibility consultant Christopher Hills demonstriert die Fähigkeiten der Schalter-Steuerung, – software, die hilft, Menschen zu erleben, motor control Beeinträchtigungen die Nutzung von hardware-Schalter, um den Betrieb Ihrer EDV-Geräte.

Es ist darauf hinzuweisen, dass man sich auf diese Technologie eines Tages, auch wenn es nur für ein wenig. Vielleicht haben Sie brach sich beide Arme in einer unglücklichen Mountainbike-Unfall, und Sie möchten, um einige Selbstmitleid imbiss, während Sie sich erholen. Vielleicht sind Sie unterwegs sind und wollen Sie text Ihre Familie sicher. Oder vielleicht wirst du einfach alt. Es ist nicht schwer, denken Sie an andere Beispiele, es ist eben nicht ein Konzept, wie Menschen zu wohnen.

Wenn es das interaktive, braucht es einen Fokus Stil

Wir können nicht immer wissen, wer die beim Besuch unserer Webseiten und web-apps, warum Sie zu besuchen sind, was Sie tun, wenn Sie es bekommen, was die Bedingungen, die Sie erleben, welche Emotionen Sie fühlen, oder welche Eingabe Sie verwenden können. Analytics kann Ihnen einige Einblicke, aber nicht malen ein vollständiges Bild. Es wäre töricht, den Schwanz zu wedeln die Hund und optimieren die gesamte Erfahrung basierend auf dieser Momentaufnahme der Informationen begrenzt.

Es ist auch wichtig zu wissen, dass nicht jeder, der verwendet assistive Technologie will identifiziert werden, die als assistive technology user. Noch sollte Sie gezwungen werden, offen zu legen. Power-user—Menschen, die nutzen Tastenkürzel, spezielle software und browser-Erweiterungen angezeigt zu navigieren, wie ein Benutzer von Hilfstechnologien, kann doch nicht sein, das erleben einer Behinderung Bedingungen. Wieder, Menschen sind kompliziert!

Was wir tun können, ist vorsorglich eine Erfahrung liefern, die funktioniert für alle, unabhängig von der Fähigkeit oder Umstand.

Identifizieren und aktivieren
:focus

Mit diesen alternativen Formen der Eingabe, wie identifizieren wir etwas zu zeigen, dass es aktiviert werden kann? Zum Glück, CSS ist das problem erledigt—wir verwenden die :focus und :active-Selektoren.

Die Grammatik ist einfach. Wollen, zu skizzieren, einen link in orange, wenn ein Benutzer den Fokus auf? Hier ist, wie um es zu beschreiben:

a:focus {
outline: 3px solid orange;
}

Dieser Entwurf wird angezeigt, wenn jemand navigiert zu dem link, sei es, indem Sie auf oder Tippen Sie auf, berühren, um es über Tastatur eingeben, oder über den Schalter input, um es zu markieren.

Ein häufiges Missverständnis ist, dass der Fokus Stil kann nur die outline-Eigenschaft. Es ist erwähnenswert, dass :Fokus ist ein Selektor wie jede andere, was bedeutet, dass er akzeptiert die volle Palette von CSS-Eigenschaften. Ich Spiele gerne mit hintergrund-Farbe, Unterstreichungen und andere Techniken, die nicht einstellen, dass die Komponente die aktuelle Größe, damit nicht die shift-page-layout, wenn der Auswahlbereich aktiviert ist.

Dann sagen wir, wir möchten zu entfernen, der link ist Unterstrichen, wenn aktiviert, zu kommunizieren, eine Verschiebung in den Staat. Denken Sie daran: links Unterstreichungen verwenden!

a:active {
text-decoration: none;
}

Es ist wichtig, um sicherzustellen, dass der Zustand ändert, aus der Ruhe zu fokussieren, um aktiviert, sind Verschieden. Dies bedeutet, dass jeder übergang eindeutig sein sollte, wenn im Vergleich zu der Komponente die anderen Staaten, die dem Benutzer ermöglicht, zu verstehen, dass eine änderung stattgefunden hat.

Wir wollen auch sicherstellen, dass diese änderungen verlassen Sie sich nicht auf Farbe allein, nicht der beste Platz für Menschen mit Farbenblindheit und/oder low-vision. Hier ist, wie eine Farbe-nur der Staat ändern könnten schauen zu einer person mit Deuteranopie, allgemein bekannt als Rot-Grün colorblindness:

Ich habe absichtlich entfernt die Unterstreichung und der browser nativen Fokus-ring aus dem link im video zu besseren Veranschaulichung der Frage der Auffindbarkeit. Wenn Sie versuchen, um die Registerkarte auf der Seite, um zu bestimmen, was interaktiv ist, ist es nicht sofort offensichtlich ist, dass es ist ein link vorhanden. Wenn colorblindness ist auch ein Faktor, den Zustand zu ändern, wenn schwebte nicht ersichtlich—dies wird noch deutlicher, mit dem Zusatz von grauem Star.

:focus-in

:focus-in—Fokus-bezogene pseudo-Klassen-Selektor mit einer sehr Zen-klingenden Namen—anwenden können styling zu einem übergeordneten element, wenn eines seiner Kinder den Fokus erhält. Das focus-Ereignis Blasen aus, bis es auf eine CSS-Regel nur zu Fragen, seine styling-Anleitung.

Ein üblicher Anwendungsfall für diese Auswahl wäre die Anwendung styling, um eine komplette form, wenn eines seiner input-Elemente den Fokus erhält. In dem Beispiel unten, ich bin Skalierung wird die Größe der gesamten form leicht, es sei denn, der Benutzer hat den Wunsch geäußert, für eine reduzierte animation Erfahrung:

Siehe Stift :focus-innerhalb Demo von Eric Bailey (@ericwbailey) auf CodePen.

Der selector ist noch relativ neu, so dass ich bin sicher, wir bekommen noch weitere intelligente Anwendungen wie die Zeit vergeht.

Politik

Die Menschen haben auch Meinungen. Leider, manchmal sind diese Meinungen sind unwissend. Außerhalb der Praxis der Barrierefreiheit es gibt die weit verbreitete Vorstellung, dass Fokus Stile sind “hässlich” und viele Designer und Entwickler entfernen Sie Sie aus Gründen der wahrgenommenen ästhetik. Manchmal sind Sie nicht einmal bewusst, Sie sind der Propagierung einer anderen Meinung—viele CSS-resets gehören eine Decke zum entfernen von focus-styles und fließen als grundlegende Projekt-Abhängigkeit mit keine Fragen gestellt.

Diese Entscheidung schließt die Menschen. Websites und web-apps sind nicht kurzgeschnittenen Trophäen angezeigt werden, ohne Kontext auf ein dribbble-Profil, noch sind Sie statische screenshots auf eine glatte corporate sales deck. Sie existieren, um gelesen werden und danach gehandelt hat, und es gibt Regeln, die sicherstellen, dass die größtmögliche Menge von Menschen kann genau das tun.

:focus-sichtbar

Die Tatsache der Angelegenheit ist, dass manchmal Leute bestehen auf entfernen konzentrieren Stilen, und über genügend Schlagkraft zu zwingen, Ihre Kohorten, die zur Erfüllung Ihrer vision. Dieser fliegt in das Gesicht von Regeln, die vorschreiben, dass die Fokus-Mechanismen müssen sichtbar sein, für websites, um wirklich zugänglich. Um dies zu umgehen, haben wir die :focus-sichtbar pseudo-Selektor.

:focus-sichtbar pseudo-selector styling-kicks in, wenn der browser feststellt, dass ein focus-Ereignis aufgetreten ist, und die User-Agent-Heuristiken informieren Sie, dass nicht-Zeiger-Eingang verwendet wird. Das ist eine ausgefallene Art zu sagen, es zeigt focus styling, wenn Sie aktiviert über Eingang, über andere als Mauszeiger oder finger-Tippen.

Das video von diesem CodePen zeigt, wie verschiedene styling angewendet wird, basierend auf der Art der Eingabe den link erhält. Wenn ein link schwebte und klickt per Maus-Eingang, dessen Unterstreichung entfernt und verschiebt sich leicht nach unten. Wenn die Registerkarten, um über Tastatur-Eingabe :Fokus-sichtbar gilt eine stark Hintergrundfarbe, um den link statt.

Chrom hat vor kurzem angekündigt, seine Absicht umzusetzen :Fokus-sichtbar. Obwohl die browser-Unterstützung ist derzeit sehr begrenzt, ein polyfill ist verfügbar. Und :der Fokus-Rahmen sind in der Selektoren Stufe 4 Editor ‘ s Draft, und deshalb wahrscheinlich, um die native Unterstützung in den gängigen Browsern eher früher als später.

Sie wissen vielleicht :focus-sichtbar durch seinen anderen Namen, :-moz-Fokusring. Das vendor-Präfix pseudo-Selektor ist Mozillas Implementierung der Idee, vor den :focus-sichtbar Vorschlag von sieben Jahren. Im Gegensatz zu anderen vendor-Präfix für CSS -, dass wir nicht haben, um über sorgen autoprefixing Unterstützung! Firefox Ehrungen ein :focus-sichtbar Erklärung sowie :-moz-Fokusring, der die Gewährleistung gibt, wird die Parität für unsere Selektor-Namen zwischen den beiden Browsern.

Ein Schritt vorwärts, ein Schritt zurück

Browser-Unterstützung ist ein bisschen reiben—das web ist mehr als nur Chrome und Firefox. Während der polyfill Hilfe anbieten, wo es keine nativ, es ist extra-Daten zum download, zusätzliche Komplexität zu erhalten, und extra zerbrechlichkeit Hinzugefügt, um Ihre Nutzlast.

Es gibt auch die Tatsache, dass die Geräte weit weniger binäre über Ihre input-Typen als früher. Die Oberfläche ist Microsofts Flaggschiff-computer, bietet eine Tastatur, trackpad, stylus, Kamera, Sprach-und touch-Fähigkeit out of the box. WebAIM – 2017 Screen-Reader-Umfrage ergab, dass mobile Geräte können ergänzt werden durch Tastatur-Eingabe-mehr als Sie vielleicht denken. Heuristiken sind nett, aber wie analytics, kann nicht malen ein vollständiges Bild.

Ein weiterer Punkt zu beachten ist, dass der Fokus Stile wünschenswert sein kann, für Maus-Nutzer. Ihre Anwesenheit ist eine klare und eindeutige Anzeige der Interaktivität, die eine große affordance für Menschen mit geringem Sehvermögen, Bedingungen, kognitive betrifft, und Menschen, die weniger technisch versiert. Außerordentlich technisch versierten Menschen, diejenigen, die Begriffen hat, dass Screenreader und Tastatur-shortcuts sind im wesentlichen Vim für eine GUI, wollen Sie den Fokus-Zustand zu deutlich, als Sie mit der Tastatur über den Bildschirm tanzen.

Teil der Aufbau einer tragfähigen, belastbaren web beinhaltet den Aufbau eines starken Kern-Erfahrung, die funktioniert in jedem browser. Die Vanille :focus selector genießt Breite und Tiefe Unterstützung in dem Maß, wie es ist eine sichere Wette, dass auch exotische Browser werden es in Ehren.

Die Welt ist voll von Dingen, die manche Menschen als hässlich, während andere finden Sie schön. Ich persönlich sehe nicht den Fokus Stile als ein Dorn im Auge. Als designer, denke ich, dass es sich um einen fundamentalen Teil der Schaffung eines Reifen-design-system. Als Entwickler beschreiben Staat ist nur business as usual. Als eine person, ich genieße Sie dazu beitragen, dass das web offen und zugänglich, wie es gedacht war.

Wenn Sie mehr erfahren möchten über das Thema, UX-Designer Caitlin Geier hat einen großen Kommentar auf focus-Indikatoren.