Experimental Example of Tabs with Remove Buttons
+ +About This Experimental Example
+
+
+ This is an experimental implementation of the new aria-actions attribute.
+
+ This example demonstrates a tabs widget that implements the Tabs Pattern. + In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. + It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. +
+Similar examples include:
+-
+
- Example of Tabs with Automatic Activation: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus. +
- Example of Tabs with Manual Activation: A tabs widget where users activate a tab and display its panel by pressing Space or Enter. +
Experimental Example
+Danish Composers
++ Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. + She is known as the first female composer in Denmark. + Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. + She was given good critic as a composer and described as a “virkelig Tonekunstnerinde” ('a True Artist of Music'). +
++ Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. + Both as a virtuoso and as composer of flute music, he is considered one of the best of his time. + He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level. +
++ Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a Danish opera singer and composer. + Ida Henriette da Fonseca was the daughter of Abraham da Fonseca (1776–1849) and Marie Sofie Kiærskou (1784–1863). + She and her sister Emilie da Fonseca were students of Giuseppe Siboni, choir master of the Opera in Copenhagen. + She was given a place at the royal Opera alongside her sister the same year she debuted in 1827. +
++ Peter Erasmus Lange-Müller (1 December 1850 – 26 February 1926) was a Danish composer and pianist. + His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann. +
+Accessibility Features
+-
+
-
+ To make it easy for screen reader users to navigate from a tab to the beginning of content in the active
tabpanel, thetabpanelelement hastabindex="0"to include the panel in the page Tab sequence. + It is recommended that alltabpanelelements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable. +
+ -
+ To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
+
-
+
- + The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. + The active tab is also 4 pixels higher than the inactive tabs. + +
-
+ The focus ring is drawn with a CSS border on a child
spanelement of the tab element. + This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. + Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed. +
+ -
+ Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused
spanelement has a visible border. + Whenspanelements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus. +
+
+ - + To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab. + +
Keyboard Support
+| Key | +Function | +
|---|---|
| Tab | +
+
|
+
| Right Arrow | +
+
|
+
| Left Arrow | +
+
|
+
| Home | +Moves focus to the first tab and activates it. | +
| End | +Moves focus to the last tab and activates it. | +
Role, Property, State, and Tabindex Attributes
+| Role | +Attribute | +Element | +Usage | +
|---|---|---|---|
+ tablist
+ |
+ + |
+ div
+ |
+ Indicates that the element serves as a container for a set of tabs. | +
| + |
+ aria-labelledby="ID_REFERENCE"
+ |
+
+ div
+ |
+ Provides a label that describes the purpose of the set of tabs. | +
+ tab
+ |
+ + |
+ button
+ |
+
+
|
+
| + |
+ aria-selected="true"
+ |
+
+ button
+ |
+
+
|
+
| + |
+ aria-selected="false"
+ |
+
+ button
+ |
+
+
|
+
| + |
+ tabindex="-1"
+ |
+
+ button
+ |
+
+
|
+
| + |
+ aria-controls="ID_REFERENCE"
+ |
+
+ button
+ |
+ Refers to the element with role=tabpanel associated with the tab. |
+
+ tabpanel
+ |
+ + |
+ div
+ |
+
+
|
+
| + |
+ aria-labelledby="ID_REFERENCE"
+ |
+
+ div
+ |
+
+
|
+
| + |
+ tabindex="0"
+ |
+
+ div
+ |
+
+
|
+
JavaScript and CSS Source Code
+-
+
- CSS: tabs.css +
- Javascript: tabs-automatic.js +
HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ +