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