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
'Front-end > HTML' 카테고리의 다른 글
웹 접근성을 위한 aria-live 속성 완벽 정리! (0) | 2025.04.08 |
---|---|
textarea placeholder 안나오는 이유 (0) | 2024.01.20 |
select 기본값 문구 선택 시에 안 보이도록 하는 방법 (0) | 2023.11.20 |
aria-hidden 사용법과 사용이유 (0) | 2023.11.16 |
[bootstrap]tooltip(툴팁) 줄바꿈 br 효과 data-tooltip (0) | 2022.09.07 |
댓글