모든 패턴
Button
사용자가 액션을 트리거하는 기본 인터랙티브 요소
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (HTML)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must5
키보드 접근 가능
Tab으로 포커스 이동, Enter/Space로 활성화 가능해야 합니다.
명확한 레이블
버튼 목적을 설명하는 텍스트 또는 aria-label이 있어야 합니다.
포커스 표시
키보드 포커스 시 명확한 시각적 표시(focus ring)가 있어야 합니다.
색상 대비 4.5:1
텍스트와 배경 사이 최소 4.5:1 대비율을 충족해야 합니다.
disabled 상태 전달
aria-disabled 또는 disabled 속성으로 비활성 상태를 명시해야 합니다.
Should3
로딩 상태 안내
aria-busy="true"와 스크린리더용 로딩 메시지를 제공하세요.
아이콘 버튼 레이블
아이콘만 있는 버튼에는 반드시 aria-label을 추가하세요.
터치 타겟 44×44px
모바일 환경에서 최소 44×44px 터치 타겟을 확보하세요.
Avoid2
div/span으로 버튼 구현 금지
<div onClick>는 키보드 접근성이 없습니다. <button>을 사용하세요.
색상만으로 상태 구분 금지
활성/비활성 상태를 색상만으로 나타내지 마세요.
디자인 시스템별 구현
추가 체크포인트
Ripple 효과 접근성
MUI의 TouchRipple은 시각적 피드백만 제공하므로 추가적인 aria 피드백이 필요합니다.
variant별 대비 검증
outlined variant는 border 색상까지 대비 3:1을 충족해야 합니다.
코드 샘플
MUI Buttontsx
Loading...
구현 노트
- –MUI Button은 기본적으로 <button> 요소를 렌더링합니다.
- –component prop으로 <a>로 변경 시 href와 role을 명시적으로 관리하세요.
- –disableRipple prop은 접근성에 영향 없이 사용 가능합니다.