Radio Group Example Using aria-activedescendant

This example implements the features of the Radio Group 설계 패턴 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.

유사한 예는 다음과 같습니다:

Example

Pizza Crust

Pizza Delivery

접근성 특성

키보드 지원

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 Using aria-activedescendant to Manage Focus.

기능
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, Tabindex 어트리뷰트

역할(role) Attributes 엘리먼트 사용법
radiogroup ul Identifies the element as a container for a group of radio buttons.
aria-labelledby="[IDREF]" ul Refers 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 Using aria-activedescendant to Manage Focus.
radio li
  • 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.

Javascript와 CSS 소스 코드

HTML Source Code