Experimental Example of Tabs with Remove Buttons
+ +About This Experimental Example
+
+
+ This is an experimental implementation of the draft specification of the aria-actions attribute.
+ The aria-actions property enables an element to reference another interactive element that can be activated to perform an action on the referencing element.
+ In this example, a tab element is associated with a button that removes a tab from the tablist.
+ This association enables an assistive technology to both communicate the availability of the action button and provide a command for activating the button while focus is on the tab.
+
+ The below example demonstrates a tabs widget that implements the Tabs Pattern. + In this example, a panel is displayed when users activate its tab with either Space, Enter, or a mouse click. + So, for keyboard users, activating a tab requires two steps: 1) focus the tab, and 2) activate the tab. + This two-step process is referred to as manual activation. + Manual activation of tabs is recommended unless panels can be displayed instantly, i.e., all the panel content is present in the DOM. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. +
+
+ This example also demonstrates how to provide buttons that provide contextual actions for the tab.
+ Each tab has a remove icon.
+ The remove icon is referenced by aria-actions, which enables it to be activated by an assistive technology user while focus is on the tab.
+
Similar examples include:
+-
+
- Example of Tabs with Manual Activation: A tabs widget where users activate a tab and display its panel by pressing Space or Enter. +
- Example of Tabs with Automatic Activation: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus. +
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 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. +
+
+ -
+ Note that since the first element in every
tabpanelis a focusable element (i.e., a link), thetabpanelis not included in the page Tab sequence. + To make it easy for screen reader users to navigate from a tab to the beginning of content in the activetabpanel, 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 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 | +
+
|
+
| Enter Space |
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. | +
| Right Arrow | +
+ When a tab has focus:
+
|
+
| Left Arrow | +
+ When a tab has focus:
+
|
+
| Home | +When a tab has focus, moves focus to the first tab. | +
| End | +When a tab has focus, moves focus to the last tab. | +
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 tabpanel element associated with the tab. |
+
+ tabpanel
+ |
+ + |
+ div
+ |
+
+
|
+
| + |
+ aria-labelledby="ID_REFERENCE"
+ |
+
+ div
+ |
+
+
|
+
JavaScript and CSS Source Code
+-
+
- CSS: tabs.css +
- Javascript: tabs-manual.js +
HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ +