[role, aria-*, label] 접근성 관련 속성 알아보기

1. role

요소의 "역할"을 정의

• 이 엘리먼트가 무슨 UI 컴포넌트인지 알려줌.
• 예: 메뉴, 버튼, 체크박스 같은 컴포넌트 종류를 스크린리더가 인식할 수 있음.

<div role="button">저장</div>

2. aria-*

상태/속성 정보를 보조 기술에 전달

• role이 "이건 버튼이다"라면,
• aria-*는 "지금 이 버튼은 선택됨/비활성화됨" 같은 성태를 전달.

자주 쓰는 것:

• aria-selected="true\false" > 메뉴나 탭에서 지금 선택됨 여부
• aria-disabled="true\false" > 비활성 상태
• aria-checked="true\false" > 체크박스 체크 상태
• aria-label="텍스트"" > 눈에 안 보여도 읽히는 이름 제공

<button role="menuitem" aria-selected="true">
  Home
</button>

스크린리더는 "메뉴 항목, 홈, 선택됨"이라고 읽음.

3. label

사람이 눈으로 보는 이름/텍스트

• 그냥 UI에 보이는 텍스트
• aria-label과 혼동하기 쉬움

<button>저장</button>

화면에도 "저장"이 보이고, 스크린리더도 이걸 읽음.

<button aria-label="저장하기">
  💾
</button>

눈에는 아이콘만 보이지만, 스크린리더는 "저장하기 버튼"이라고 읽음.

정리:

role → "나는 버튼이야"

aria-* → "지금 꺼져 있어"

label → "저장" (화면 텍스트)

aria-label → "저장 버튼" (보이지 않는 텍스트)