Toggle button VS A11y
HCI Today가 핵심 내용을 정리했어요
- •이 글은 기업용 SaaS 디자인 시스템에서 토글 버튼의 접근성(a11y)과 WCAG 해석을 어떻게 해야 하는지 묻는 글입니다.
- •작성자는 음소거 버튼처럼 상태에 따라 라벨을 Mute와 Unmute로 바꾸는 설계가 허용되는지, 아니면 금지되는지 혼란스러워합니다.
- •한 의견은 aria-pressed가 있는 진짜 토글 버튼은 라벨을 고정해야 하며, 라벨이 바뀌면 일반 버튼으로 봐야 한다고 설명합니다.
- •다른 의견은 인용된 지침의 'Alternatively' 문구를 근거로, 라벨 변경도 가능하되 이때는 aria-pressed가 필요 없다고 해석합니다.
- •전반적으로 댓글들은 토글과 상태 표시를 혼동하지 말아야 하며, 라벨은 행동명보다 상태나 맥락을 안정적으로 전달해야 한다고 정리합니다.
HCI 전문가들의 생각을 바탕으로 AI 에디터가 생성한 요약입니다.
HCI 관점에서 읽을 만한 이유
이 글은 토글 버튼(toggle button)에서 라벨 변경과 상태 표기를 어떻게 분리해야 하는지 보여줘서, HCI/UX 실무자에게 매우 유의미합니다. 특히 WCAG와 ARIA 해석이 겹칠 때 생기는 혼선을 실제 설계 의사결정으로 연결해주는데요, 접근성(a11y) 준수 여부만이 아니라 사용자의 인지 부하, 예측 가능성, 피드백 일관성까지 함께 보게 합니다. 디자인 시스템 관점에서도 재사용 가능한 패턴 정의에 직접적인 힌트를 줍니다.
CIT의 코멘트
CIT 관점에서는 이 논쟁을 ‘라벨이 바뀌어도 되는가’의 문제가 아니라, ‘무엇이 이름이고 무엇이 상태인가’를 분리해 모델링했는가의 문제로 봅니다. 토글은 보통 하나의 지속 상태를 드러내는 인터랙션인데, Mute/Unmute처럼 행동 중심 문구를 쓰면 상태와 행위가 뒤섞이기 쉽습니다. 그래서 우리는 가능한 한 라벨은 안정적으로 유지하고, 상태는 aria-pressed 같은 기계 판독 정보와 시각적 보조 요소로 전달하는 쪽을 권합니다. 다만 제품 맥락에 따라 ‘상태 전환형 버튼’으로 설계하는 것이 더 적절할 수도 있는데요, 이때는 명시적 피드백과 키보드/스크린리더 일관성을 함께 검증해야 합니다. 결국 디자인 시스템의 역할은 단일 정답을 강제하는 것이 아니라, 패턴별 해석 조건과 금지 조건을 문서화해 팀의 오해를 줄이는 데 있습니다.
원문을 읽으면서 던질만한 질문
- Q.토글 버튼에서 라벨을 상태형으로 바꾸는 경우와 고정 라벨로 두는 경우를 디자인 시스템 차원에서 어떤 기준으로 구분하고 계신가요?
- Q.현재 팀에서는 aria-pressed, 체크박스, 스위치 등 상태 표현 방식을 어떤 원칙으로 선택하고 있나요?
- Q.스크린리더 사용자와 키보드 사용자 테스트에서 이 패턴의 혼선이 실제로 관찰된 적이 있나요?
HCI 전문가들의 생각을 바탕으로 AI 에디터가 생성한 코멘터리입니다.
정확한 내용은 반드시 원문을 참고해주세요.
뉴스레터 구독
매주 금요일, 주간 HCI 하이라이트를 이메일로 받아보세요.