From 48504266ca32602186fef5820f9fb83e2bc378ca Mon Sep 17 00:00:00 2001 From: Matt King Date: Thu, 9 Feb 2017 11:31:35 -0800 Subject: [PATCH] Editorial, Template, and Functional Updates to Example of Tabs With Automatic Activation modified examples/tabs/tabs-1/tabs.html: 1. Move script elements to head so HTML source will display. 2. Editorial revisions to introduction. 3. Added link to section that provides guidance on selection follows focus. 4. Per example template, Removed region around example and replaced with screen reader sepearator elements. 5. Added `aria-label="Entertainment"` to the tablist. 6. Added `tabindex="0"` to the tabpanel elements 7. Editorial revisions to the keyboard table. 8. Remove delete from keyboard table since it is not supported. 9. In roles, states and properties table: * added scope attribute and TH elements per template. * Added row for aria-label on tablist * Added rows for aria-selected true and false on tab * Added row for aria-labelledby on tabpanel * Added row for tabindex on tabpanel. 10. Per template, Added screen reader separators around HTML source display and removed role region from the source code display div. 11. Added link to review issue #278. --- examples/tabs/tabs-1/tabs.html | 243 +++++++++++++++++++++++++-------- 1 file changed, 186 insertions(+), 57 deletions(-) diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html index 3ed2d23484..e1b3fe2401 100644 --- a/examples/tabs/tabs-1/tabs.html +++ b/examples/tabs/tabs-1/tabs.html @@ -7,48 +7,57 @@ + + +

Tabs With Automatic Activation

+

+ Provide feedback on updates to this page in + issue 278. +

This example section demonstrates a tabs widget that implements the design pattern for tabs. - In this example panels are automatically activated when its tab receives focus. + In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. + Tabs should only be automatically activated 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

-
-
-
-
- - - -
+ +
+
+
+ + + +
-
-

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

-
+
+

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

+
- + - +
+
-

ARIA Roles, Properties, and States

- +

Role, Property, State, and Tabindex Attributes

- - - - + + + + - + + + + + + + + + + + + + + + + + + + - + + + + + + + - + + + + + + + + + + + + + - - + + @@ -159,7 +293,6 @@

ARIA Roles, Properties, and States

Javascript and CSS Source Code

-
  • CSS: tabs.css
  • Javascript: tabs.js
    • @@ -168,12 +301,9 @@

    Javascript and CSS Source Code

    HTML Source Code

    -
    - + +
    + + +
RoleProperty/StateElementUsageRoleAttributeElementUsage
tablist + tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-label=Entertainment + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
    • +
  • + When focused, is automatically activated, causing its associated tabpanel + to be displayed. +
    • +
  • + Provides a title for its associated tabpanel. +
    • +
+
+ aria-selected=true + + button +
    -
  • Serves as the container for the set of tabs.
    • +
  • Indicates the tab control is activated and its associated panel is displayed.
    • +
  • Set when a tab receives focus.
tab + aria-selected=false + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
    • +
  • Set for all tab elements in the tab set except the focused tab.
    • +
+
+ tabindex=-1 + + button +
    -
  • Contains title for tab panel, activates tab panel when activated.
    • +
  • Removes the element from the page Tab sequence.
    • +
  • Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
    • +
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
    • +
  • This approach to managing focus is described in the section on roving tabindex.
tabpanel + aria-controls=IDREF + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
    • +
  • + Is hidden unless its associated tab control is activated. +
    • +
+
+ aria-labelledby=IDREF + + div +
    -
  • Contains the tab’s associated content.
    • +
  • + Refers to the tab element that controls the panel. +
    • +
  • Provides an accessible name for the tab panel.
aria-controlselement with role of tab + tabindex=0 + + div +
    -
  • +
  • Puts the tabpanel in the page Tab sequence.
    • +
  • Facilitates movement to panel content for assistive technology users.
    • +
  • Especially helpful if there are panels that do not contain a focusable element.