디자인이 적용된 라디오버튼은 어떻게 접근성을 준수해야 할까?

최근 라디오 버튼에 디자인을 입히는 경우가 많아지고 있는데, 어떠한 디자인이 좋을까?

라디오 버튼의 속을 꽉 채운 디자인을 종종 보게 됩니다.

보통 선택되지 않은 라디오버튼의 내부에는 색상을 흐리게 채워 놓고, 선택된 라디오 버튼만 진하게 표시하는데요.

하지만 사용자에 따라 라디오 버튼을 클릭해서 선택하더라도 선택/해제 상태를 명확히 구분하기 어려운 경우가 많습니다.

특히 저시력 시각장애인의 특성상 비슷한 유형의 디자인 차이를 인식하지 못하고 오인하는 경우가 자주 발생하게 됩니다.

어려워, 어려워 ...

만약 활성화된 버튼과 비활성화된 버튼의 명도대비 차이가 적다면 더 구분하기 어려워집니다.

• + 관련지침 : 1.3.3 텍스트 컨텐츠의 명도 대비
  

명도대비 차이가 큼	명도대비 차이가 적음

종종 색상의 차이로만 버튼을 구분하는 경우도 있는데 색각장애 사용자의 경우 활성화 여부를 구분하기 어려울 수 있습니다.

• + 관련지침 : 1.3.1 색에 무관한 컨텐츠 인식

Normal	Grayscale

그럼 누구나 이용가능하도록 접근성을 높이려면 어떻게해야 할까요?

디자인을 적용한 라디오 버튼을 제공하더라도 기본적인 라디오버튼의 모습처럼 제공하는 것입니다.

기본적인 라디오 버튼처럼 선택되지 않은 라디오버튼은 내부에 채워진 색상을 제거하여 선택/해제 상태를 명확히 인지할 수 있게 합니다.

속이 꽉찬 남자 99.9~ NO NO

속이 꽉찬 디자인보다는 가끔은 속이 빈 디자인 좋습니다.

실제 적용된 검은사막 서비스 화면 - http://black.game.daum.net/

by 접근성팀 Hale & Gio