diff --git a/examples/listbox/listbox.html b/examples/listbox/listbox.html index ef9e09bcfd..9fe69e3abc 100644 --- a/examples/listbox/listbox.html +++ b/examples/listbox/listbox.html @@ -223,7 +223,7 @@

Notes

-

Other Accessibility Features

+

Accessibility Features

  1. Keyboard shortcuts for action buttons:
      @@ -256,115 +256,158 @@

      Other Accessibility Features

      Keyboard Support

      -
        -
      • - Down Arrow: Moves focus to the next option. -
        • -
      • - Up Arrow: Moves focus to the previous option. -
        • -
      • - Home: Moves focus to first option. -
        • -
      • - End: Moves focus to last option. -
        • -
      -

      Multiple selection keys supported in example 2:

      -
        -
      • - Space: changes the selection state of the focused option . -
        • -
      • - Shift + Down Arrow: Moves focus to and selects the next option. -
        • -
      • - Shift + Up Arrow: Moves focus to and selects the previous option. -
        • -
      • - Control + Shift + Home: Selects from the focused option to the beginning of the list. -
        • -
      • - Control + Shift + End: Selects from the focused option to the end of the list. -
        • -
      • - Control + A: selects all options in the list. - If all options are selected, unselects all options. -
        • -
      + + + + + + + + + + + + + + + + + + + + + + + + + +
      KeyFunction
      Down ArrowMoves focus to the next option.
      Up ArrowMoves focus to the previous option.
      HomeMoves focus to first option.
      EndMoves focus to last option.
      +

      Multiple selection keys supported in example 2

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      KeyFunction
      Spacechanges the selection state of the focused option .
      Shift + Down ArrowMoves focus to and selects the next option.
      Shift + Up ArrowMoves focus to and selects the previous option.
      Control + Shift + HomeSelects from the focused option to the beginning of the list.
      Control + Shift + EndSelects from the focused option to the end of the list.
      Control + Aselects all options in the list. If all options are selected, unselects all options.

      Role, Property, State, and Tabindex Attributes

      - + - - - + + + + - + + - + + - + + - + + - + + - + + - + + +
      AttributeApplied to ElementUsageRoleAttributeElementUsage
      role="listbox"listbox ul Identifies the focusable element that has listbox behaviors and contains the listbox options.
      aria-labelledby="ID_REF"aria-labelledby="ID_REF" ul Applied to the element with the listbox role, it refers to the span containing its label.
      tabindex="0"tabindex="0" ul Applied to the element with the listbox role, it puts the listbox in the tab sequence.
      aria-multiselectable="true"aria-multiselectable="true" ul - Example 2 only: - Applied to the element with the listbox role, tells assistive technologies that the list supports multiple selection. - The default value is false so it is not specified in example 1. +
        +
      • Used only in example 2.
        • +
      • Applied to the element with the listbox role, tells assistive technologies that the list supports multiple selection.
        • +
      • The default value is false so it is not specified in example 1.
        • +
      aria-activedescendant="ID_REF"aria-activedescendant="ID_REF" ul - Applied to the element with the listbox role, tells assistive technologies which of the options, if any, is visually indicated as having keyboard focus. - DOM focus remains on the ul element and the idref specified for aria-activedescendant refers to the li element that is visually styled as focused. - When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value. - When the listbox is empty, aria-activedescendant="". +
        +
      • Applied to the element with the listbox role, tells assistive technologies which of the options, if any, is visually indicated as having keyboard focus.
        • +
      • DOM focus remains on the ul element and the idref specified for aria-activedescendant refers to the li element that is visually styled as focused.
        • +
      • When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
        • +
      • When the listbox is empty, aria-activedescendant="".
        • +
      role="option"role="option" li Identifies each selectable element containing the name of an option.
      aria-selected="true"aria-selected="true" li - Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected. - In example 1, this is always the same option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus. - In example 2, more than one option may be selected so the user can move focus among options without effecting which options are selected. - Thus in example 2, the focus style and selection styles are distinctly different and independent. +
        +
      • Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected.
        • +
      • In example 1, the option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.
        • +
      • In example 2, more than one option may be selected so the user can move focus among options without effecting which options have this attribute.
        • +
      • Note that in example 2, the focus style and selection styles are distinctly different and independent.
        • +
      aria-selected="false" li - Example 2 only: - Applied to elements with role option that are not visually styled as selected to inform assistive technologies that the options are selectable but not selected. - In example 1, this is not necessary because the focus cannot move to an unselected option. +
        +
      • Used only in example 2.
        • +
      • Applied to elements with role option that are not visually styled as selected to inform assistive technologies that the options are selectable but not selected.
        • +
      • In example 1, this is unnecessary because the selection moves every time the focus moves.
        • +
      +

      Note>

      The following attributes are commonly useful when implementing the listbox design pattern but are not used in these examples.

      • aria-setsize and aria-posinset: Since all option elements are present in the DOM, the browser is able to calculate these values automatically and provide them to assistive technologies.