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.
Darstellung
Permalink zu "Darstellung"Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
560 | Kontrast | Die Beschriftung des Karteireiters muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
561 | Kontrast | Die Kennzeichnung des ausgewählten Karteireiters muss zum Hintergrund bzw. zur Darstellung der nicht ausgewählten Karteireiter ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.1, 11.1.4.1, 9.1.4.11, 11.1.4.11 |
562 | Kontrast | Sind 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 |
563 | Beschriftung | Jeder Karteireiter muss eine sichtbare Beschriftung besitzen (siehe Beschriftung). | Muss | EN 301 549 9.3.3.2, 11.3.3.2 |
564 | Fokussichtbarkeit | Erhält ein Karteireiter den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7 |
565 | Vergrößerung | Alle 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.
| Muss | EN 301 549: 9.1.4.10, 11.1.4.10 |
Bedienung
Permalink zu "Bedienung"Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
566 | Tastaturbedienung | Die Karteireiter müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
567 | Tastaturbedienung | Enthalten die Karteireiter weitere interaktive Elemente, müssen diese mit der Tastatur bedient werden können. | Muss | EN 301 549: 9.2.1.2, 11.2.1.2 |
568 | Tastaturbedienung | Die ausgeblendeten Registerkarten und deren Inhalte dürfen nicht den Tastaturfokus erhalten. | Muss | EN 301 549: 9.1.3.1, 11.1.3.1, 9.2.4.3, 11.2.4.3 |
569 | Aktualisierungen | Bei 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. | Muss | EN 301 549: 9.3.2.1, 11.3.2.1 |
570 | Klickbereich | Der Klickbereich der Karteireiter soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung). | Soll | WCAG 2.2 |
571 | Klickbereich | Enthalten die Karteireiter weitere interaktive Elemente, soll deren Klickbereich mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung). | Soll | WCAG 2.2 |
Tastaturbedienung Registerkartengruppe
Permalink zu "Tastaturbedienung Registerkartengruppe"Aktion | Taste | Klassifizierung |
---|---|---|
Fokussieren des gewählten Karteireiters | TAB | Erforderlich |
Verlassen des Karteireiters und Navigation zum ersten Element der ausgewählten Registerkarte | TAB | Erforderlich |
Navigation innerhalb der Liste der Karteireiter | Desktop:
Web: PFEIL AUF/AB/RECHTS/LINKS | Erforderlich |
Schnellnavigation zum ersten bzw. letzten Karteireiter | POS1, ENDE | Empfohlen |
Wechsel zwischen den Registerkarten (wenn sich der Fokus in einer Registerkarte befindet) | STRG+TAB | Empfohlen |
Einblenden der gewählten Registerkarte | EINGABE, LEER oder automatisch bei Navigation durch die Liste der Karteireiter | Erforderlich |
Bedienung interaktiver Elemente innerhalb des Karteireiters | Die interaktiven Elemente innerhalb Karteireiter erhalten nicht separat den Tastaturfokus. Die Bedienung erfolgt
| Erforderlich |
Zeigeinstrumentbedienung Registerkartengruppe
Permalink zu "Zeigeinstrumentbedienung Registerkartengruppe"Aktion | Taste | Klassifizierung |
---|---|---|
Einblenden einer Registerkarte | Linksklick auf den entsprechenden Karteireiter | Erforderlich |
Aktivierung interaktiver Elemente innerhalb der Karteireiter | Linksklick auf das Element | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
572 | Rolle | Die Rolle Karteireiter und Registerkarte muss an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
573 | Rolle | Enthalten 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. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
575 | Desktop: Elementhierarchie | Die Eltern-Kind-Beziehungen der Karteireiter innerhalb der Registerkartengruppe müssen an die Accessibility API übermittelt werden. | Muss | EN 301 549: 11.5.2.9 |
576 | Status | Der 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. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
577 | Name | Die 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. | Muss | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5 |
578 | Name | Sofern der Karteireiter eine Beschreibung besitzt, muss diese als Accessible Description übermittelt werden. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
579 | Bedienung | Die Karteireiter müssen mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
580 | Bedienung | Enthalten die Karteireiter weitere interaktive Elemente, müssen diese mit Assistenztechnologie bedient werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
581 | Aktualisierung | Aktualisierungen hinsichtlich des Accessible Names oder Status der Karteireiter müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
582 | Desktop: Position | Größe und Position der Karteireiter und Registerkarten müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 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] Registerkartenpanel … Beende [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, mitrole=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 mitrole=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 mitaria-selected=false
ausgezeichnet. Peraria-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
oderaria-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 mittabindex=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