Tabs: It’s Complicated™

Ich habe schon einmal gesagt, dass eine schnelle und wirkungsvolle Sache, die Sie als angehender Front-End-Entwickler lernen können, wenn Sie gerade mit JavaScript beginnen, das Ändern von Klassen ist.

const button = document.querySelector(".my-button");
const element = document.querySelector(".content");

button.addEventListener("click", function() {
  element.classList.toggle("sparkles");
});

Wir könnten diese Fähigkeit nutzen, um Tabs zu erstellen, oder? Richtig.

Wir haben das.

Nehmen wir an, wir haben diese Fähigkeit zum Ändern von Klassen jetzt in unserem Repertoire und müssen eine Tab-Oberfläche erstellen. Wenn wir nur ein wenig mehr Code hinzufügen, der sich mit Click-Handlern befasst, könnten wir wahrscheinlich einige einfache Tabs verdrahten, so etwas wie das

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

Voll funktionsfähige Tabs. Ich könnte mir hier ein bisschen auf die Schulter klopfen. Sehen Sie, wie ich diese Anker-Links verwendet habe, um Sprunglinks zwischen dem Link und dem Tab-Bereich zu erstellen? Das ist ziemlich semantisch, finden Sie nicht? Die Tabs sind mit einer Tastatur zugänglich, haben Fokusstile und können mit der Eingabetaste aktiviert werden.

Haben wir gewonnen? Fall geschlossen? Perfekte Tabs?

Nichts ist jemals so einfach, oder?

Ein Problem hier ist, dass wir nichts Besonderes mit der Tastaturbehandlung gemacht haben, was bei Tab-Oberflächen erforderlich sein kann. Heydon Pickering hat darüber geschrieben

Im Gegensatz zu einem Link auf derselben Seite bewegt ein Tab den Benutzer nicht zum zugehörigen Inhaltsbereich/Panel. Er macht den Inhalt nur visuell sichtbar. Das ist vorteilhaft für sehende Benutzer (einschließlich sehender Screenreader-Benutzer), die zwischen verschiedenen Abschnitten wechseln möchten, ohne jedes Mal wieder nach oben auf der Seite scrollen zu müssen, wenn sie einen neuen auswählen möchten.

Dies hat eine unglückliche Nebenwirkung: Wenn der Benutzer per Tastatur zu einem Abschnitt navigieren und mit dessen internem Inhalt interagieren möchte, muss er alle Tabs rechts vom aktuellen Tab durchlaufen, die sich in der Fokusreihenfolge befinden.

Es stellt sich heraus, dass es eine ganze Checkliste mit anderen Verhaltensweisen gibt, die Tab-Oberflächen haben können und sollten. In Heydons Erklärung wirkt die Tabulatortaste tatsächlich als Mittel, um vom Tab selbst zum zugehörigen Inhalt zu springen und den Fokus zu verschieben. Umschalttaste+Tabulatortaste bringt sie zurück. Dann werden die Pfeiltasten zum Wechseln der Tabs verwendet. All dies erfordert mehr JavaScript und sogar etwas HTML, um den Fokusstatus zu ermöglichen... plus eine Prise aria-*-Attribute, bei denen mir die Expertise fehlt, um zu erklären, warum sie überhaupt wichtig sind.

Am Ende, so

Siehe den Stift
Tab Interface (PE) von Heydon (@heydon)
auf CodePen.

Die Frage ist also: Sind unsere Fähigkeiten zum Ändern von Klassen tatsächlich ein Nachteil für das Web, weil sie Dinge wie diese nicht berücksichtigen? Ist es ein Nettoverlust für die Webzugänglichkeit, Dinge mit den vorhandenen einfachen Werkzeugen zu tun? Ich weiß nicht. Zu große Frage für mein kleines Gehirn. Es ist aber interessant, darüber nachzudenken.

Ein Teil davon ist Muskelgedächtnis.

Wenn wir lernen, Tabs wie in der ersten Demo zu codieren, werden wir dazu neigen, diese immer wieder zu verwenden, solange uns niemand die Finger abbeißt, weil wir es tun. Ich habe diese Demo in etwa drei Minuten codiert, weil ich sie so oft gemacht habe. Das Erstellen dieser Tabs ist sicherlich Teil meines Muskelgedächtnisses.

Es gibt viel Gerede darüber, dass JavaScript-Frameworks eine Plage für das Web sind, da sie anscheinend eine Ära der schlechtesten Barrierefreiheit einläuten. Aber was ist, wenn Ihr Muskelgedächtnis für die Erstellung von Tabs dazu neigt, eine vorgefertigte Tabs UI zu verwenden, die all die richtige Funktionalität mitbringt und das Styling weitgehend Ihnen überlässt?

Das sind die Reach UI Tabs (was voraussetzt, dass wir mit React arbeiten...).

Ich sage Ihnen nicht, dass Sie Ihre Projekte auf React umstellen sollen, damit Sie ein paar kostenlose Tabs erhalten, aber React ist bereits *riesig*. Wenn sich gute Muster wie dieses zum De-facto-Standard entwickeln, dann ist es möglich, dass sich dies positiv auf die Zugänglichkeit auswirkt. Das scheint mir zumindest möglich. Es könnte mich davon abhalten, zum 359. Mal eine Tab-Oberfläche schlecht von Hand zu codieren.