w3 Button Pattern 번역

원본 : https://www.w3.org/WAI/ARIA/apg/patterns/button/

About this Pattern

버튼은 사용자가 양식 제출, 대화 상자 열기, 작업 취소 또는 삭제 작업 수행과 같은 동작이나 이벤트를 트리거할 수 있게 해주는 위젯입니다. 버튼이 대화 상자(dialog)를 실행한다는 것을 사용자에게 알리는 일반적인 관례는 버튼 레이블에 ”…”(생략 부호)를 추가하는 것입니다. 예를 들어, “다른 이름으로 저장…”과 같은 형태입니다.

일반적인 버튼 위젯 외에도, WAI-ARIA는 다른 두 가지 유형의 버튼을 지원합니다:

• 토글 버튼

  • 꺼짐(not pressed) 또는 켜짐(pressed) 중 하나인 두 상태 버튼입니다.
  • 보조 도구에 토글 버튼임을 알리려면, aria-pressed 속성에 값을 지정합니다. 예를 들어, 오디오 플레이어에서 “음소거”라는 버튼은 음소거 상태를 나타내기 위해 pressed 상태를 true로 설정할 수 있습니다.
  • 토글 버튼의 label은 상태가 변경되어도 변하지 않는 것이 중요합니다. 위 예시에서 pressed 상태가 true일 때, 라벨은 음소거로 유지되므로 화면 판독기가 "음소거 토글 버튼이 눌렸습니다" 로 읽을 . 수있습니다. 반대로, 음소거 에서 음소거 해제 로 버튼 라벨이 변경되도록 되어 있다면, aria-pressed 속성이 필요하지 않을 것입니다.

• 메뉴 버튼

  • 메뉴 버튼 패턴에서 설명된 것처럼, 버튼은 aria-haspopup 속성을 menu 또는 true로 설정하면 보조 기술에 의해 메뉴 버튼으로 인식됩니다.

버튼이 수행하는 동작의 종류는 링크의 기능과는 명확히 다릅니다. 위젯의 외관과 역할이 제공하는 기능에 맞는 것이 중요합니다. 그러나 가끔 링크의 시각적 스타일을 갖지만 버튼의 동작을 수행하는 요소들이 있습니다. 이러한 경우, 요소에 role 속성을 button으로 부여하면 보조 기술 사용자들이 요소의 기능을 이해하는 데 도움이 됩니다. 하지만, 더 나은 해결책은 시각적 디자인을 조정하여 기능과 ARIA 역할이 일치하도록 하는 것입니다.

Keyboard Interaction

• Space : 버튼을 활성화 시킵니다.
• Enter : 버튼을 활성화 시킵니다.

버튼을 활성화 한 후에는 버튼이 수행하는 작업 유형에 따라 포커스가 설정됩니다. 에를들어

1. 버튼을 활성화 하여대화 상자(dialog)가 열리면 포커스가 대화 상자 내부로 이동합니다
2. 버튼을 활성화 하여 대화 상자가 닫히면 대화 상자 컨텍스트에서 수행한 기능이 논리적으로 다른 요소로 연결되지 않는 한 포커스는 일반적으로 대화 상자를 열었던 버튼으로 돌아갑니다. 예를 들어, 대화 상자에서 취소 버튼을 활성화하면 대화 상자를 열었던 버튼으로 포커스가 돌아갑니다. 그러나 대화 상자가 열었던 페이지를 삭제하는 작업을 확인하고 있다면, 포커스는 논리적으로 새로운 컨텍스트로 이동합니다
3. 버튼을 활성화해도 현재 컨텍스트가 무시되지 않는 경우 일반적으로 활성화 후 버튼에 포커스가 남아 있습니다(예: 적용 또는 재계산).
4. 버튼 작업이 다음 단계로 이동하거나 다른 검색 기준을 추가하는 등 컨텍스트 변경을 나타내는 경우 해당 작업의 시작점으로 포커스를 이동하는 것이 적절합니다.
5. 단축키로 버튼을 활성화하는 경우, 포커스는 일반적으로 단축키가 활성화된 컨텍스트에 유지됩니다. 예를 들어, 현재 선택된 목록 항목을 목록에서 한 위치 위로 이동하는 “위로” 버튼에 Alt + U가 지정되었다면, 목록에 포커스가 있는 상태에서 Alt + U를 눌러도 포커스는 목록에서 이동하지 않습니다.

WAI-ARIA Roles, States and Properties

• 버튼은 role=button을 가집니다.
• 버튼에는 액세스 가능한 레이블이 있습니다. 기본적으로 액세스 가능한 이름은 버튼 요소 내부의 임의의 텍스트 콘텐츠로부터 계산됩니다. 그러나 aria-label 또는 aria-labelledby 로 제공할 수도 있습니다.
• 버튼의 기능에 대한 설명이 있는 경우, 버튼 요소는 aria-describedby 에 설명을 포함하는 요소의 id를 설정해야 합니다.