From 0e2bd2f4a5fd6e674e25e4d19d4270a6d0d7f49f Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 13 Nov 2016 10:17:07 -0800 Subject: [PATCH] Toolbar Example Draft HTML for issue #126 In aria-practices.html toolbar section, added link to toolbar example page and removed link to exterrnal example. In examples/toolbar/toolbar.html: 1. Wrote an example overview and Added link to issue 126. 2. Added accessibility feature descriptions. 3. Added keyboard support description. 4. Added role, state, and property information. 5. Updated links to js and css files. 6. Updated link in nav section to toolbar design pattern. --- aria-practices.html | 7 +-- examples/toolbar/toolbar.html | 94 ++++++++++++++++++----------------- 2 files changed, 50 insertions(+), 51 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 2e053ecc3d..e0984968af 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -1557,7 +1557,6 @@

Example

Toolbar

-

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users. @@ -1572,7 +1571,6 @@

Toolbar

Keyboard Interaction

-
  • Tab: Moves focus into and out of the toolbar. @@ -1609,10 +1607,7 @@

    WAI-ARIA Roles, States, and Properties

    Example

    -

    Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section. The APG task force is developing examples for APG version 1.1 that will be directly incorporated into the guide.

    - +

    Toolbar Example: A toolbar including buttons, links, and checkboxes that uses roving tabindex to manage focus.

diff --git a/examples/toolbar/toolbar.html b/examples/toolbar/toolbar.html index 8fc474395d..25b0a12688 100644 --- a/examples/toolbar/toolbar.html +++ b/examples/toolbar/toolbar.html @@ -16,24 +16,20 @@

Toolbar Example

-

- - Replace this paragraph with an overview of the example that is something like the following. The - below example section demonstrates a simple checkbox that implements the - design pattern for checkbox - . + NOTE: This example is not yet complete. + When it is ready for review, feedback will be welcom in + issue 126. +

+

+ Following is an example implementation of the + design pattern for toolbar + that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop. + It also illustrates the roving tabindex method for managing focus in a composite component.

-

Example

-

This is the place where the reader will experience the functioning example.

@@ -53,35 +49,40 @@

Example

Accessibility Features

-

Please replace this content with a list of accessibility features - demonstrated in this implementation, such as:

    -
  1. ARIA roles
    2. -
  2. property and state information
    3. -
  3. Event handlers
    4. -
  4. tabindex values
    5. +
  5. + The focus is managed using roving tabindex. + Because the control that most recently had focus has tabindex="0", + focus returns to the control that last had focus when tabbing into the toolbar. +
    6. +
  6. Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
    7. +
  7. The menubutton can be opened with either Enter or Down Arrow since Down Arrow is not needed to navigate a horizontal toolbar.

Keyboard Support

-
    -
  • KEY_NAME: function
    • -
  • KEY_NAME: function
    • +
  • + Tab: Moves focus into and out of the toolbar. + When focus moves into the toolbar, the first enabled control receives focus. + If the toolbar has previously contained focus, the control that last had focus receives focus. +
    • +
  • + Left Arrow: Moves focus to the previous control, + wrapping from the first control to the last. +
    • +
  • + Right Arrow: Moves focus to the next control, + wrapping from the last control to the first. +
    • +
  • Home: Moves focus to the first control.
    • +
  • End: Moves focus to the last control.

Role, Property, State, and Tabindex Attributes

- @@ -92,22 +93,27 @@

Role, Property, State, and Tabindex Attributes

- - - + + + - - + + - - - + + +
role="ROLE_NAME"HTML_ELEMENTBrief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.role="toolbar"div + Identifies the toolbar container for assistive technologies. + Because focus is managed with a roving tabindex instead of aria-activedescendant, the toolbar div is not focusable. +
- - aria-labelledby="ID_REF" + aria-label="LABEL_STRING" HTML_ELEMENTBrief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.div with toolbar role + Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar. + Invisible labels are used when sighted users can derive purpose from visual context. +
And so on ... covering all relevant attributes......aria-disabled="true"buttonInforms assistive technologies of the disabled state.
@@ -115,15 +121,14 @@

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

-
@@ -136,7 +141,6 @@

HTML Source Code