웹접근성 고려 시 aria-label와 title를 언제 어떻게 쓰는지 비슷해서 헷갈릴 수 있어 차이점과 쓰임새를 알아보도록 하겠습니다.
aria-label과 title은 추가정보를 제공하지만 사용 방법과 목적성이 다릅니다.
title 속성
title은 추가 정보를 제공하는 툴팁(도구 설명)이라고 보시면 됩니다.
예를 들어 '바로가기'란 버튼이 있을경우 클릭하면 어디로 가는 버튼인지에 대한 추가 설명을 제공할 때 사용합니다.
도움말 개념입니다.
<button title="홈페이지 메인화면으로 이동합니다.">홈으로</button>
위처럼 버튼 텍스트에 대한 추가 설명을 제공하기 위해 사용되는것이 title 속성입니다.
button 태그에만 해당되는것은 아니고, 이해하기 쉽게 button 태그를 예시로 했습니다.
aria-label 속성
aria-label은 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 요소의 의미를 명확하게 설명합니다.
비주얼적으로는 표시되지 않지만, 스크린 리더가 읽을 수 있도록 대체 텍스트를 제공하기 위해 사용됩니다.
예를 들어 팝업창 닫기 버튼이 X로 만들어진 이미지라고 했을 때 텍스트가 없으면 X 버튼이 닫기 버튼인지 열기 버튼인지 명확하지가 않습니다.
물론 일반인들은 학습이 되어있고 시각적으로 알 수는 있지만, 시각장애인은 모를 수 있기 때문에 명확하게 X 이미지가 어떤 용도인지 알려주기 위함입니다.
<button aria-label="팝업창 닫기">❌</button>
동일한 정보를 title과 aria-label 두 곳에 모두 제공하는 것은 중복될 수 있으며, 각각의 목적에 맞게 사용하는 것이 좋습니다.
title과 aria-label을 같은 제공 한다면 같은 내용을 중복으로 읽히게 되니 각각의 목적에 맞게 제공해야 합니다.
