기본 코드 예시
공통 베이스라인
키보드 접근 가능
Tab으로 포커스 이동, Enter/Space로 활성화 가능해야 합니다.
명확한 레이블
버튼 목적을 설명하는 텍스트 또는 aria-label이 있어야 합니다.
포커스 표시
키보드 포커스 시 명확한 시각적 표시(focus ring)가 있어야 합니다.
색상 대비 4.5:1
텍스트와 배경 사이 최소 4.5:1 대비율을 충족해야 합니다.
disabled 상태 전달
aria-disabled 또는 disabled 속성으로 비활성 상태를 명시해야 합니다.
로딩 상태 안내
aria-busy="true"와 스크린리더용 로딩 메시지를 제공하세요.
아이콘 버튼 레이블
아이콘만 있는 버튼에는 반드시 aria-label을 추가하세요.
터치 타겟 44×44px
모바일 환경에서 최소 44×44px 터치 타겟을 확보하세요.
div/span으로 버튼 구현 금지
<div onClick>는 키보드 접근성이 없습니다. <button>을 사용하세요.
색상만으로 상태 구분 금지
활성/비활성 상태를 색상만으로 나타내지 마세요.
디자인 시스템별 구현
추가 체크포인트
loading 상태 aria-busy 처리
로딩 중인 버튼에 aria-busy="true"를 추가하고 CircularProgress에 aria-hidden을 적용해 스크린리더에 스피너가 노출되지 않도록 하세요.
outlined variant 대비 검증
outlined variant의 border 색상은 배경과 최소 3:1 대비를 충족해야 합니다. 기본 테마에서 확인이 필요합니다.
component="a"로 변경 시 role 확인
component prop으로 <a>를 사용하면 버튼이 아닌 링크가 됩니다. 탐색 목적이 아닌 액션에는 <button>을 유지하세요.
코드 샘플
구현 노트
- –MUI Button은 기본적으로 <button type="button">을 렌더링합니다.
- –disabled prop은 aria-disabled와 포커스 제거를 동시에 처리합니다. 포커스 유지가 필요한 경우 aria-disabled만 사용하세요.
- –component prop으로 <a>로 변경 시 버튼 의미가 사라지므로 탐색 목적에만 사용하세요.
- –sx={{ minHeight: 44 }}로 WCAG 2.5.5 터치 타겟 크기를 확보하세요.