Toggle button VS A11y

HCI 관점에서 읽을 만한 이유

이 글은 토글 버튼(toggle button)에서 라벨 변경과 상태 표기를 어떻게 분리해야 하는지 보여줘서, HCI/UX 실무자에게 매우 유의미합니다. 특히 WCAG와 ARIA 해석이 겹칠 때 생기는 혼선을 실제 설계 의사결정으로 연결해주는데요, 접근성(a11y) 준수 여부만이 아니라 사용자의 인지 부하, 예측 가능성, 피드백 일관성까지 함께 보게 합니다. 디자인 시스템 관점에서도 재사용 가능한 패턴 정의에 직접적인 힌트를 줍니다.

CIT의 코멘트

CIT 관점에서는 이 논쟁을 ‘라벨이 바뀌어도 되는가’의 문제가 아니라, ‘무엇이 이름이고 무엇이 상태인가’를 분리해 모델링했는가의 문제로 봅니다. 토글은 보통 하나의 지속 상태를 드러내는 인터랙션인데, Mute/Unmute처럼 행동 중심 문구를 쓰면 상태와 행위가 뒤섞이기 쉽습니다. 그래서 우리는 가능한 한 라벨은 안정적으로 유지하고, 상태는 aria-pressed 같은 기계 판독 정보와 시각적 보조 요소로 전달하는 쪽을 권합니다. 다만 제품 맥락에 따라 ‘상태 전환형 버튼’으로 설계하는 것이 더 적절할 수도 있는데요, 이때는 명시적 피드백과 키보드/스크린리더 일관성을 함께 검증해야 합니다. 결국 디자인 시스템의 역할은 단일 정답을 강제하는 것이 아니라, 패턴별 해석 조건과 금지 조건을 문서화해 팀의 오해를 줄이는 데 있습니다.

원문을 읽으면서 던질만한 질문

• Q.토글 버튼에서 라벨을 상태형으로 바꾸는 경우와 고정 라벨로 두는 경우를 디자인 시스템 차원에서 어떤 기준으로 구분하고 계신가요?
• Q.현재 팀에서는 aria-pressed, 체크박스, 스위치 등 상태 표현 방식을 어떤 원칙으로 선택하고 있나요?
• Q.스크린리더 사용자와 키보드 사용자 테스트에서 이 패턴의 혼선이 실제로 관찰된 적이 있나요?