Front-end/HTML

ARIA 라벨링

mooyou 2025. 4. 7. 18:52
728x90
300x250
SMALL

1. aria-label(요소 자체에 레이블 제공)

<button aria-label="닫기">X</button>

👉 화면에는 X 아이콘만 보이지만, 스크린 리더는 "닫기"라고 읽음


2. aria-labelledby(다른 요소의 내용을 레이블로 사용)

<h2 id="title">회원가입</h2>
<input type="text" aria-labelledby="title">

👉 <input>은 title의 내용을 가져와 "회원가입"으로 인식


 

3. aria-describedby(설명 추가 제공)

<input type="text" aria-describedby="info">
<p id="info">이메일 형식으로 입력해주세요.</p>

👉 사용자가 입력 필드에 초점을 맞추면 "이메일 형식으로 입력해주세요."가 추가로 읽힘

 

728x90
반응형
LIST