사용하기 적합한 경우

사용하기 적합하지 않은 경우

1. 1. 그룹 레이블(선택): 옵션 목록의 카테고리에 대한 설명 또는 옵션 선택에 대한 도움말을 제공함
2. 2. 버튼 양식: 버튼의 현재 선택 상태를 보여줌
3. 3. 버튼 레이블: 선택하거나 선택 해제할 정보를 나타냄
4. 4. 도움말(선택): 입력 내용, 입력 방식에 대한 도움말 또는 오류 메시지를 제공함

• 기본적으로 라디오 버튼의 옵션은 가나다순으로 정렬한다.

  사용자가 가장 많이 선택하는 옵션을 먼저 배치할 경우 옵션을 빠르게 선택하는 데 도움이 될 수 있다. 그러나 특정한 기준에 따른 옵션 정렬이 편견이나 차별을 강화할 수 있으므로 유의해서 사용해야 한다. 정렬 기준에 대한 명확한 근거나 이유가 없는 경우에는 가나다순으로 정렬하는 것이 가장 안전하다.

• 라디오 버튼은 수직으로, 라디오 버튼의 레이블은 양식의 오른쪽에 배치한다.

  가독성과 옵션 간 명확한 구분을 위하여 라디오 버튼은 수직으로 배치하는 것이 좋다. 이때, 레이블은 양식의 오른쪽에 배치해 일관된 위치에서 텍스트를 읽을 수 있도록 해야 한다. 만약 라디오 버튼을 수평으로 배치해야 한다면 레이블의 텍스트 길이가 지나치게 길지 않아야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  
• 라디오 버튼을 수평으로 배치하는 경우 버튼 간 간격을 충분히 제공한다.

  각 라디오 버튼의 간격을 양식과 레이블 간 간격과 동일하게 제공하는 경우 사용자에게 혼동을 줄 수 있으므로 유의해야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  
• 라디오 버튼의 레이블은 분명하고 정확하게 제공한다.

  사용자가 어떤 옵션을 선택하는 것인지 이해할 수 있도록 라디오 버튼의 레이블은 분명하고 정확하게 제공해야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  
• 사용자가 정확한 값을 입력하는 것이 중요한 경우 라디오 버튼의 특정 옵션을 기본 선택값으로 제공하지 않아야 한다.

  사용자가 어떤 질문이나 선택을 해야 하는지를 놓치거나 잘못된 옵션값을 제출하는 실수를 할 수 있으므로 유의해야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  
• ‘해당 없음’, ‘잘 모름’ 옵션 제공을 고려한다.

  일단 라디오 버튼 옵션 목록에서 하나의 옵션을 선택하고 나면 화면을 새로 고침하기 전까지 선택을 되돌릴 수 없다. 필수 입력 항목이 아닌 경우와 같이 아무 값도 선택하지 않아도 되는 상황을 고려하여 ‘해당 없음’, 잘 모름’, ‘선택 안 함’과 같은 옵션을 제공하는 것이 좋다.

  [모범 사례]

  

  [피해야 할 사례]

  

• 버튼 양식과 인접 배경 간 명도대비를 3:1 이상으로 표현한다.

  원형의 라디오 버튼 양식은 라디오 버튼의 선택 상태와 해당 요소가 라디오 버튼 컴포넌트임을 인지할 수 있게 도와주는 중요한 시각적 정보이므로 인접 배경과의 명도대비를 최소 3:1 이상으로 제공해야 한다.

  • KWCAG 2.2 텍스트 콘텐츠의 명도 대비
  • WCAG 2.1 Non-text Contrast (AA)
• 버튼 양식의 선택 상태를 색상으로만 구분하지 않는다.

  버튼 양식의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공해야 한다.

  • KWCAG 2.2 색에 무관한 콘텐츠 인식
  • WCAG 2.1 Use of Color (A)

  [모범 사례]

  

  [피해야 할 사례]

  
• 라디오 버튼을 키보드로 탐색하고 실행할 수 있도록 한다.

  사용자 에이전트에서 제공되는 기본 버튼 양식이 아니라 커스텀 양식 디자인을 사용하는 경우에 기본 버튼 양식에 display:none, visibility:hidden, opacity:0과 같은 스타일을 하면 스크린 리더에서 라디오 버튼의 역할을 인지할 수 없으며 키보드로 옵션을 선택할 수 없게 된다.

  • KWCAG 2.2 키보드 사용 보장
  • WCAG 2.1 Keyboard (A)
  • WCAG 2.1 No Keyboard Trap (A)
• 라디오 버튼에 키보드 초점이 명확하게 표시되도록 한다.

  사용자 에이전트에서 제공되는 기본 버튼 양식이 아니라 커스텀 양식 디자인을 사용하는 경우 키보드 초점이 시각적으로 표시되도록 스타일을 제공해야 한다. 라디오 버튼 요소를 시각적으로 숨기는 경우, 시각적으로 표시되고 있는 버튼 양식과 숨겨진 요소의 크기와 위치를 일치시켜 포커스링이 적절하게 표시되도록 구현해야 한다.

  • KWCAG 2.2 초점 이동
  • WCAG 2.1 Focus Visible (AA)
  • WCAG 2.1 Non-text Contrast (AA)
• 라디오 버튼에 접근 가능한 이름을 제공한다.

  스크린 리더 사용자가 라디오 버튼의 용도를 확인할 수 있도록 <label>, title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공해야 한다. 이때, 가능하면 <label>을 이용하여 사용자가 레이블을 클릭하였을 때에도 값을 선택할 수 있도록 구현하는 것이 좋다.

  • KWCAG 2.2 키보드 사용 보장
  • WCAG 2.1 Keyboard (A)
  • WCAG 2.1 No Keyboard Trap (A)
• 스크린 리더에서 그룹 레이블과 라디오 버튼 그룹의 관계를 확인할 수 있도록 한다.

  <fieldset>, <legend>를 사용하여 스크린 리더 사용자에게 라디오 버튼 그룹에서 값을 선택하는 목적을 보다 명확하게 전달할 수 있다.

  • WCAG 2.1 Info and Relationships (A)
  • WCAG 2.1 Labels or Instructions (A)

탐색

실행