Tabs: Es ist Kompliziert™

0
46

Ich habe gesagt, bevor man schnelle und kraftvolle Sache, die Sie lernen können, wie ein front-end-Entwickler gerade erst angefangen mit JavaScript ändern von Klassen.

const button = document.querySelector(“.mein-button”);
const Elements = document.querySelector(“.Inhalte”);

– Taste.addEventListener(“click”, function() {
element.classList.toggle(“Funken”);
});

Wir verwenden könnten, die Fähigkeit zu bauen, einige tabs, richtig? Recht.

Wir haben in diesem.

Sagen wir, wir haben diese ändern von Klassen-Fähigkeit in unserem skillset jetzt und müssen wir bauen, eine Oberfläche mit Registerkarten. Wenn wir nur ein bisschen mehr code, der sich mit den Klick-Handler, könnten wir wahrscheinlich Draht, einige einfache Registerkarten, wie diese:

Siehe Stift
XQpqZV von Chris Coyier (@chriscoyier)
auf CodePen.

Total funktionale Registerkarten. Ich könnte pat mich auf den Rücken noch ein wenig hier. Sehen Sie, wie ich diesen Anker-links zu erstellen, die Sprung-links zwischen dem link und dem tabbed-Abschnitt? Das mächtige semantische, meinst du nicht? Die tabs sind barrierefrei mit einer Tastatur, die den Fokus besitzen, Stile und kann aktiviert werden mit der Return-Taste.

Haben wir gewonnen? Fall geschlossen? Perfect tabs?

Nichts ist jemals so einfach, ist es?

Ein Problem hier ist, dass wir nicht etwas besonderes tun mit dem handling der Tastatur, die tabbed-Schnittstellen erfordern. Heydon Pickering schrieb dazu:

Im Gegensatz zu einer gleichen-Seite-link, eine Registerkarte nicht bewegt der Benutzer die zugehörigen section/panel-Inhalte. Es zeigt nur den Inhalt visuell. Dies ist vorteilhaft, Sehbehinderung (einschließlich gesichtet screen-reader-Benutzer), der Wunsch zu flitzen zwischen verschiedenen Abschnitten, ohne wade zurück, bis die Seite jedes mal, wenn Sie wollen, um ein neues zu wählen.

Dieser kommt mit einem unglücklichen Nebeneffekt: Wenn der Benutzer wünscht, zu bewegen, um einen Abschnitt über die Tastatur und die Interaktion mit seinen inneren Gehalt, müssen Sie Schritt für Schritt durch alle tabs rechts vom aktuellen tab, die im Fokus stehen, um.

Stellt sich heraus es gibt eine ganze Checkliste von anderen Verhaltens-Dinge, die Registerkarten interfaces können und tun sollten. In Heydon ‘ s Erklärung, die Tab-Taste tatsächlich wirkt wie ein Weg, um zu springen aus dem Register selbst, um die Inhalte auf die Registerkarte bezieht, tatsächlich verschieben des Fokus. Shift+Tab bringt Sie zurück. Dann die Pfeil-Tasten werden verwendet, um Registerkarten ändern. All dies erfordert mehr JavaScript-und auch HTML für den Fokus-Zustand… plus einer Prise von aria -* – Attribute, die ich nicht über das Fachwissen verfügen, um zu erklären, warum Sie sind wichtig.

Am Ende, wie diese:

Siehe Stift
Tab-Schnittstelle (PE) von Heydon (@heydon)
auf CodePen.

So stellt sich die Frage: sind unsere-Klasse-Wechsel-Fähigkeiten eigentlich ein Nachteil für das web, weil Sie nicht für Dinge wie diese? Ist, Dinge zu tun mit dem, was die grundlegenden Werkzeuge haben wir einen Netto-Verlust für die Barrierefreiheit im web? Ich weiß nicht. Zu groß ist eine Frage für mein kleines Gehirn. Es ist interessant zu denken, obwohl.

Teil geht es um die Muskel-Speicher.

Wenn wir lernen, code tabs wie das erste demo dort sind, werden wir neigen dazu, zu erreichen, dass für immer und immer, so lange wie niemand beißt uns die Finger vor, es zu tun. Ich codiert, dass die demo in etwa drei Minuten, weil ich habe es getan, so viele Male. Erstellen von Registerkarten ist sicherlich Teil meiner Muskel-Speicher.

Es gibt viel Gerede über JavaScript-frameworks wird eine Geißel über das web, weil Sie scheinen zu sein, leitete in einer Zeit der worst-in-class-Zugänglichkeit. Aber was, wenn Sie Ihre Muskel-Speicher für Gebäude-Tabletten wurde nach einer pre-built-tabs UI-das bringt zusammen alle die Funktionalität und Links styling, weitgehend auf Sie?

Das ist es, was Erreichen UI-tabs sind (die meint, mit der wir arbeiten, Reagieren,…).

Ich bin nicht sagen, Sie gehen aus, und schalten Sie Ihren Projekten zu Reagieren, so können Sie einige freie Tabletten, sondern Reagieren bereits Massiv. Wenn gutes Muster, wie dies die de-facto-Wahl, dann ist es möglich, dass der Effekt ein Netto-Gewinn auf Barrierefreiheit. Möglich scheint mir jedenfalls. Es könnte einfach aufhören mich schlecht von hand-Codierung ein tabbed interface für die 359th Zeit.