Synonyme: Registerkarte, Reiter, Karteireiter, Tab

Siehe auch: Akkordeon, Karussell

Registerkartengruppen dienen der Gruppierung und alternierenden Anzeige von Seitenbereichen (siehe DIN EN ISO 9241-161: 8.43).

Eine Registerkartengruppe besteht aus mehreren Registerkarten, deren Inhalt alternierend angezeigt werden. Jede Registerkarte besitzt einen Karteireiter mit Beschriftung, welcher dauerhaft angezeigt wird. Die Auswahl der einzelnen Registerkarten erfolgt über die Karteireiter. Die Karteireiter sind meist horizontal oberhalb der Registerkarten angeordnet. Karteireiter können interaktive Elemente enthalten, z. B. Schalter zum Entfernen des Karteireiters und der zugehörigen Registerkarte.

Abbildung: Registerkartengruppe
Nr.EigenschaftBeschreibungKlassifizierungReferenz
560KontrastDie Beschriftung des Karteireiters muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.MussEN 301 549: 9.1.4.3, 11.1.4.3
561KontrastDie Kennzeichnung des ausgewählten Karteireiters muss zum Hintergrund bzw. zur Darstellung der nicht ausgewählten Karteireiter ein Kontrastverhältnis von mindestens 3:1 aufweisen.MussEN 301 549: 9.1.4.1, 11.1.4.1, 9.1.4.11, 11.1.4.11
562KontrastSind die Karteireiter und die Registerkarten ausschließlich aufgrund ihrer farblichen Gestaltung als solche zu erkennen, müssen diese Farben zu benachbarten Farben ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Hinweis 1: Eine Registerkarte kann z. B. aufgrund ihres Rahmens oder ihrer Hintergrundfarbe als interaktives Element erkennbar sein.

Hinweis 2: Die Anforderung gilt nicht, wenn die Registerkarte oder der Karteireiter z. B. aufgrund ihrer Position eindeutig als solche zu erkennen sind.

Muss

EN 301 549: 9.1.4.11, 11.1.4.11
563BeschriftungJeder Karteireiter muss eine sichtbare Beschriftung besitzen (siehe Beschriftung).MussEN 301 549 9.3.3.2, 11.3.3.2
564FokussichtbarkeitErhält ein Karteireiter den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator).MussEN 301 549: 9.2.4.7, 11.2.4.7
565VergrößerungAlle Karteireiter müssen bei einer Schriftgrößenanpassung bis 400% (und einer resultierenden Anzeigebreite von 320px) wahrnehmbar und bedienbar sein (siehe Zoom).

Hinweis: Die Karteireiter können z. B.

  • umbrechen (in mehreren Zeilen untereinander angezeigt werden),
  • über einen Menü-Schalter aufrufbar sein,
  • horizontal scrollbar gestaltet werden (z. B. per Scrollbalken oder zwei Schalter).

MussEN 301 549: 9.1.4.10, 11.1.4.10
Nr.EigenschaftBeschreibungKlassifizierungReferenz
566TastaturbedienungDie Karteireiter müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung).MussEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
567TastaturbedienungEnthalten die Karteireiter weitere interaktive Elemente, müssen diese mit der Tastatur bedient werden können.MussEN 301 549: 9.2.1.2, 11.2.1.2
568TastaturbedienungDie ausgeblendeten Registerkarten und deren Inhalte dürfen nicht den Tastaturfokus erhalten.MussEN 301 549: 9.1.3.1, 11.1.3.1, 9.2.4.3, 11.2.4.3
569AktualisierungenBei Fokussierung der Karteireiter und Navigation durch diese darf keine Kontextänderung erfolgen.

Hinweis: So darf bei Fokussierung des Karteireiters der Fokus nicht automatisch in die Registerkarte gesetzt werden.
Zulässig wäre jedoch, dass bei Fokussierung eines Karteireiters die entsprechende Registerkarte automatisch eingeblendet wird.

MussEN 301 549: 9.3.2.1, 11.3.2.1
570KlickbereichDer Klickbereich der Karteireiter soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung).SollWCAG 2.2
571KlickbereichEnthalten die Karteireiter weitere interaktive Elemente, soll deren Klickbereich mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung).SollWCAG 2.2

Tastaturbedienung Registerkartengruppe

Permalink zu "Tastaturbedienung Registerkartengruppe"
AktionTasteKlassifizierung
Fokussieren des gewählten KarteireitersTABErforderlich
Verlassen des Karteireiters und Navigation zum ersten Element der ausgewählten RegisterkarteTABErforderlich
Navigation innerhalb der Liste der KarteireiterDesktop:
  • PFEIL AUF/AB/RECHTS/LINKS
  • STRG+TAB

Web:
PFEIL AUF/AB/RECHTS/LINKS
Erforderlich
Schnellnavigation zum ersten bzw. letzten KarteireiterPOS1, ENDEEmpfohlen
Wechsel zwischen den Registerkarten (wenn sich der Fokus in einer Registerkarte befindet)STRG+TABEmpfohlen
Einblenden der gewählten RegisterkarteEINGABE, LEER oder automatisch bei Navigation durch die Liste der KarteireiterErforderlich
Bedienung interaktiver Elemente innerhalb des KarteireitersDie interaktiven Elemente innerhalb Karteireiter erhalten nicht separat den Tastaturfokus. Die Bedienung erfolgt
  • entweder per Kontextmenü, welches mit UMSCHALT+F10 bzw. mit KONTEXTMENÜ aufgerufen werden kann,
  • oder über ein in der Anwendung und Hilfe dokumentiertes Tastaturkürzel, z. B. ENTF für das Entfernen von Karteireiter und zugehöriger Registerkarte.
Erforderlich

Zeigeinstrumentbedienung Registerkartengruppe

Permalink zu "Zeigeinstrumentbedienung Registerkartengruppe"
AktionTasteKlassifizierung
Einblenden einer RegisterkarteLinksklick auf den entsprechenden KarteireiterErforderlich
Aktivierung interaktiver Elemente innerhalb der KarteireiterLinksklick auf das ElementErforderlich
Nr.EigenschaftBeschreibungKlassifizierungReferenz
572RolleDie Rolle Karteireiter und Registerkarte muss an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
573RolleEnthalten die Karteireiter weitere interaktive Elemente, muss ein Hinweis bezüglich deren Bedienbarkeit (z. B. per Kontextmenü oder Tastaturkürzel) an die Accessibility API übermittelt werden.MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
575Desktop: ElementhierarchieDie Eltern-Kind-Beziehungen der Karteireiter innerhalb der Registerkartengruppe müssen an die Accessibility API übermittelt werden.MussEN 301 549: 11.5.2.9
576StatusDer Status der Karteireiter und Registerkarten muss an die Accessibility API übermittelt werden (siehe Elementstatus).

Hinweis: Dies bezieht sich auch auf den Karteireiter-Status „gewählt“ oder „nicht gewählt“, sofern bei Navigation zu einem Karteireiter nicht automatisch die entsprechender Registerkarte eingeblendet wird.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
577NameDie Karteireiter müssen einen knappen und aussagekräftigen Accessible Name besitzen.

Hinweis 1: Es wird empfohlen, die Registerkarte mit dem gleichen Accessible Name zu versehen wie den zugehörigen Karteireiter.

Hinweis 2: Sofern die Karteireiter und Registerkarten eine übergeordnete Beschriftung besitzen, muss dies ebenfalls an die Accessibility API übermittelt werden.

MussEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
578NameSofern der Karteireiter eine Beschreibung besitzt, muss diese als Accessible Description übermittelt werden.MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
579BedienungDie Karteireiter müssen mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
580BedienungEnthalten die Karteireiter weitere interaktive Elemente, müssen diese mit Assistenztechnologie bedient werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
581AktualisierungAktualisierungen hinsichtlich des Accessible Names oder Status der Karteireiter müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
582Desktop: PositionGröße und Position der Karteireiter und Registerkarten müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 11.5.2.5, 11.5.2.13

Praxistipp Registerkartengruppe in Web-Anwendungen

Permalink zu "Praxistipp Registerkartengruppe in Web-Anwendungen"

Screenreader-Ausgabe für Karteireiter

Permalink zu "Screenreader-Ausgabe für Karteireiter"
  • JAWS: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkarte [ | gewählt] [Position] von [Anzahl]
  • NVDA: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkarte [ | ausgewählt] [Position] von [Anzahl]
  • Windows Sprachausgabe: [Beschriftung der Registerkartenleiste] Registerkarte [Beschriftung des Karteireiters] Registerkartenelement [Position] von [Anzahl] [ | ausgewählt]

Hinweis: Durch JAWS und NVDA erfolgt zwei Mal die Ausgabe „Registerkarte“, zuerst für die Rolle tablist und dann für die Rolle tab. Lediglich die Windows-Sprachausgabe unterscheidet zwischen den beiden Rollen. Die Ausgabe für die Rolle tab wäre ausreichend.

Screenreader-Ausgabe für Registerkarten

Permalink zu "Screenreader-Ausgabe für Registerkarten"
  • JAWS: -
  • NVDA: -
  • Windows Sprachausgabe: [Beschriftung] RegisterkartenpanelBeende [Beschriftung] Registerkartenpanel

Hinweis: Mit JAWS und NVDA ist Beginn und Ende der Registerkarte nicht wahrnehmbar. Die Registerkarten oder Inhalte nach dieser sollten als Regionen ausgezeichnet werden, damit mit dem Screenreader wahrnehmbar ist, welche Inhalte sich innerhalb und außerhalb der Registerkarten befinden.

In HTML existiert kein Element für Registerkartengruppen. Stattdessen kann Folgendes verwendet werden:

  • Aufteilung der Informationen auf verschiedene Seiten, die untereinander verlinkt werden,
  • Akkordeon,
  • Nutzung der entsprechenden ARIA-Rollen.

Bei Registerkartengruppen sollte Folgendes beachtet werden:

  • Die Leiste der Karteireiter wird mit role=tablist ausgezeichnet, die einzelnen Karteireiter, die sich als Kindelemente innerhalb der Leiste befinden, mit role=tab.
  • Die Leiste der Karteireiter darf außer den Karteireitern keine anderen Elemente enthalten.
  • Enthalten die Karteireiter außer ihrer Beschriftung weitere Bedienelemente, so sollte beachtet werden, dass diese mit Assistenztechnologie nicht wahrnehmbar und bedienbar sind. Diese Elemente sollten nicht den Tastaturfokus erhalten können. Stattdessen sollte eine Bedienalternative implementiert und dokumentiert werden. Wenn die Karteireiter z. B. einen Schalter zum Entfernen einer Registerkarte enthalten, so kann z. B. das Entfernen über die ENTF-Taste ermöglicht werden.
  • Die Registerkarten werden mit role=tabpanel ausgezeichnet. Die Registerkarten befinden sich im Quellcode unmittelbar nach dem Bereich, der mit role=tablist ausgezeichnet ist. Aus diesem und dem vorhergehenden Grund darf eine Registerkartengruppe nicht für Akkordeons verwendet werden.
  • Der aktive Karteireiter, dessen Registerkarte sichtbar ist und der mit TAB den Fokus erhält, wird mit aria-selected=true ausgezeichnet. Alle anderen Karteireiter werden mit aria-selected=false ausgezeichnet. Per aria-controls kann vom Karteireiter auf die ID der Registerkarte verwiesen werden.
  • Die Beschriftung der Karteireiter sollte per Textinhalt erfolgen. Die Leiste der Karteireiter und die Registerkarten können mit aria-label oder aria-labelledby beschriftet werden.
  • Eine vom Standard abweichende vertikale Ausrichtung der Registerkartenleiste kann mit aria-orientation=vertical angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass bei einer vertikal ausgerichteten Registerkartenleiste die Bedienung mit allen Pfeiltasten möglich sein sollte.
  • Die Registerkartenleiste sollte auch visuell als solche erkennbar sein, damit sehende Tastaturnutzende die Bedienung mit den Pfeiltasten erkennen können.
  • Die Registerkartengruppe sollte mindestens zwei Registerkarten enthalten.
  • Karteireiter können mit aria-disabled als deaktiviert ausgezeichnet werden. Es wird empfohlen, deaktivierte Karteireiter in der Tastaturerreichbarkeit mit den Pfeiltasten zu belassen.
  • Die gewählte Registerkarte (role=tabpanel) kann mit tabindex=0 ausgezeichnet werden, damit sie nach dem aktiven Karteireiter den Fokus erhält, selbst wenn es sich bei einer Registerkarte nicht um ein Bedienelement handelt.
  • Die Darstellung der Registerkartengruppe sollte im Hochkontrast-Modus von Windows überprüft werden. So sollten die Karteireiter und die Registerkarten einen Rahmen besitzen und der visuelle Indikator für den aktiven Karteireiter nicht nur per Farbe vermittelt werden.
  • Die sichtbaren Karteireiter und die programmatisch fokussierten Elemente sollten die gleiche Position und Größe besitzen.

Weitere Informationen: tab role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), tablist role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), tabpanel role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Tabs Pattern | APG | WAI | W3C

Informationen zu diesem Artikel