aria-label

aria-label 

span,  div 태그에 넣으면 안에 텍스트는 안읽고

aria-label 에 있는걸로 읽는다.......

 

----------------------------------------------------

title	마우스 오버 시 툴팁 표시됨	❌ 스크린 리더가 항상 읽지 않음 (접근성 보장 X)
aria-label	스크린 리더에 명확히 전달됨	❌ 시각적 툴팁 없음, 덮어쓰기 주의
.sr-only	시각적 영향 없이 스크린 리더 전달	❌ 코드가 약간 길어짐

 

--------------------------------------

•  
• 일반 태그 (<div>, <span>, <a> 등)
  → aria-label이 있으면 내부 텍스트는 완전히 덮어쓰기됨 (무시)
  → 예:
• html
  복사편집
  <span aria-label="선택됨">공지사항</span> → 스크린 리더는 "선택됨"만 읽고 "공지사항"은 무시
• 시맨틱 태그 (<h1>~<h6>, <button>, <a>, <input> 등)
  → 스크린 리더가 내부 텍스트와 aria-label을 함께 읽는 경우가 있음
  → 이유: 사용자에게 명확한 맥락 전달을 위해 일부 SR(스크린 리더)이 "합쳐서" 읽음
  → 특히 <h1>~<h6>는 문서 구조를 설명하는 핵심 요소라 특별 취급함

---

 

① <span>에 aria-label

 

<span aria-label="중요 알림">업데이트 내용</span>

✅ 스크린 리더는 "중요 알림"만 읽음 (❌ "업데이트 내용"은 무시)

---

② <h2>에 aria-label

<h2 aria-label="중요 공지">새로운 기능 안내</h2>

✋ 결론

태그 유형aria-label 사용 시 작동 방식

<span>, <div> 등 일반 태그	내부 텍스트 무시, aria-label만 읽음
<h1>~<h6>	일부 SR에서 내부 텍스트도 같이 읽음
<button>, <a> 등 상호작용 태그	일부 SR에서 둘 다 읽는 경우 있음