aria-describedby와 title은 둘 다 웹 요소에 대한 추가 정보를 제공하는 데 사용되지만, 몇 가지 차이점이 있습니다.
1. 사용목적
- title: title 속성은 요소에 대한 간단한 툴팁을 제공하는 데 사용됩니다. 마우스를 해당 요소 위에 올리면 툴팁이 표시됩니다. title은 주로 비교적 간단한 정보를 제공하거나 요소에 대한 간단한 설명을 제공하는 데 사용됩니다.
- aria-describedby: aria-describedby 속성은 웹 요소에 대한 상세한 설명이나 오류 메시지, 추가 정보 등과 같은 복잡한 내용을 제공하는 데 사용됩니다. 주로 스크린리더를 사용하는 사용자에게 추가 정보를 전달하는 데 활용됩니다.
2. 접근성
- title: title 속성의 툴팁은 일반적으로 마우스 호버에 의존하며, 스크린리더 사용자에게는 쉽게 접근할 수 없을 수 있습니다. 따라서 title 속성은 주로 시각적인 사용자를 위해 제공됩니다.
- aria-describedby: aria-describedby 속성은 스크린리더 사용자에게 추가 정보를 전달하기 위해 사용되며, 보다 접근성을 높일 수 있는 방법입니다. 스크린리더는 aria-describedby 속성을 사용하여 연결된 요소의 내용을 읽어줄 수 있습니다.
3. 사용 방식
- title: title 속성은 주로 HTML 요소에 직접 포함되어 사용됩니다.
- aria-describedby: aria-describedby 속성은 주로 <input>, <button>, <img> 등의 요소에 사용되며, 연결된 요소를 통해 추가 정보를 제공합니다.
따라서, title 속성은 간단한 툴팁과 요소에 대한 간단한 설명을 제공하는 데 주로 사용되며, aria-describedby 속성은 상세한 설명이나 오류 메시지와 같은 복잡한 내용을 스크린리더 사용자에게 제공하기 위해 사용됩니다.
'HTML&CSS' 카테고리의 다른 글
[번역] 최신 Reset CSS (1) | 2023.12.18 |
---|---|
100vh했을 때 스크롤 생기는 거 방지하기 (0) | 2023.10.03 |
[CSS] 이미지 스프라이트(Image Sprite) (0) | 2022.07.18 |
[HTML] 블록(block)을 감싸는 a태그 (0) | 2022.07.18 |
[CSS] 상대 단위 & 절대 단위 & 기타 단위 (0) | 2022.07.18 |