diff --git a/third_party/aria-practices/src/content/patterns/radio/examples/radio-activedescendant.html b/third_party/aria-practices/src/content/patterns/radio/examples/radio-activedescendant.html index c0402ce22f713..032060f61d911 100644 --- a/third_party/aria-practices/src/content/patterns/radio/examples/radio-activedescendant.html +++ b/third_party/aria-practices/src/content/patterns/radio/examples/radio-activedescendant.html @@ -2,50 +2,13 @@ - Radio Group Example Using aria-activedescendant - - - - - - - - - -
-

Radio Group Example Using aria-activedescendant

- -
-

About This Example

- -

- This example implements the features of the Radio Group Pattern for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method. - This implementation uses aria-activedescendant for informing assistive technologies which radio button has visual focus. -

-

Similar examples include:

- -
- -
-
-

Example

-
-

Pizza Crust

@@ -63,220 +26,5 @@
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

-

- NOTE: When visual focus is on a radio button in the radio group, DOM focus remains on the radio group container and the value of aria-activedescendant on the radio group refers to the radio button that is visually indicated as focused. - Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator, not DOM focus. - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. -

- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • Moves focus to the checked radio button in the radiogroup.
    • -
  • If a radio button is not checked, focus moves to the first radio button in the group.
    • -
-
Space -
    -
  • If the radio button with focus is not checked, changes the state to checked.
    • -
  • Otherwise, does nothing.
    • -
  • Note: The state where a radio is not checked only occurs on page load.
    • -
-
Down arrow
Right arrow		 -
    -
  • Moves focus to and checks the next radio button in the group.
    • -
  • If focus is on the last radio button, moves focus to the first radio button.
    • -
  • The state of the previously checked radio button is changed to unchecked.
    • -
-
Up arrow
Left arrow		 -
    -
  • Moves focus to and checks the previous radio button in the group.
    • -
  • If focus is on the first radio button, moves focus to and checks the last radio button.
    • -
  • The state of the previously checked radio button is changed to unchecked.
    • -
-
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributesElementUsage
radiogroupulIdentifies the element as a container for a group of radio buttons.
aria-labelledby="[IDREF]"ulRefers to the element that contains the label of the radio group.
tabindex="0"ul -
    -
  • Includes the radio group in the page Tab sequence.
    • -
  • Applied to the radio group because aria--activedescendant is used to manage focus as described below.
    • -
-
aria-activedescendant="[IDREF]"ul -
    -
  • When a radio button in the radio group is visually indicated as having keyboard focus, refers to that radio button.
    • -
  • When arrow keys are pressed, the JavaScript changes the value.
    • -
  • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the radio group element.
    • -
  • - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. -
    • -
-
radioli -
    -
  • Identifies the element as an ARIA radio button.
    • -
  • The accessible name is computed from the child text content of the element.
    • -
-
aria-checked="false"li -
    -
  • Identifies radio buttons which are not checked.
    • -
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • -
  • The CSS ::before pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.
    • -
-
aria-checked="true"li -
    -
  • Identifies the radio button which is checked.
    • -
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • -
  • The CSS ::before pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.
    • -
-
-
- -
-

Assistive Technology Support

-

Learn how to interpret and use assistive technology support data

- -
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
- -