aria-describedby와 aria-description
aria-describedby와 aria-description은 이름 그대로, 설명(힌트)를 제공하는 속성입니다. title과 비슷하다고 보시면 됩니다.
aria-label과 다르게 설명을 제공하는 속성은 ID를 참조하는 형태는 aria-describedby="IDREFS"가 먼저 나왔습니다. aria-description은 비교적 최근에 공식화되었기 때문에 aria-describedby는 지원하지만 aria-description을 제대로 지원하지 않는 스크린 리더가 있을 수도 있습니다.
사용 방법은 aria-label이나 aria-labelledby와 유사합니다. aria-describedby는 아이디 한개 또는 여러 개를 참조하여 설명을 제공하는 속성이며, aria-description은 aria-label처럼 직접 텍스트를 값에 입력하여 설명을 제공합니다.
사용 방법 및 특징과 사용 패턴
ARIA 기술을 사용하기 전에
WAI-ARIA 기술을 사용할 때는 특히 다른 웹표준 지침보다도 명세를 엄격하게 적용해야 합니다. 사용 할 때는 반드시 WAI-ARIA의 명세를 확인하여야 합니다.
WAi-ARIA를 통해 얻을 수 있는 이점만큼, WAI-ARIA를 잘못 사용했을 때의 위험성 리스크 또한 매우 높으므로,
WAI-ARIA 기술의 접근성 자유도에는 그만한 리스크가 있음을 항상 유의해야 합니다.
aria-description은 aria-label과 별 다른 부분이 없으니 넘어가도록 하겠습니다. 기본적으로 aria-describedby는 마우스를 올리면 나타나는 말풍선(툴팁)을 스크린 리더 사용자에게도 동등하게 제공할 때 사용합니다.
aria-label과는 다르게 aria-title속성과 컨셉이 겹치지만 서로 공유되는 속성은 아닙니다. 즉, 동시에 같이 제공이 가능합니다.
title로 설명을 제공하게 되면, 브라우저에서 마우스를 올렸을 때 기본으로 표시되는 툴팁이 있습니다. 디자이너나 기획자 등, 이를 마음에 들어하지 않을 때, 힌트 정보나 추가 정보를 제공할 때 이 aria-describedby나 aria-description을 사용합니다.
알려진 이슈
aria-description과 aria-describedby는 다음과 같은 호환성 문제를 일으킬 수 있습니다.
- aria-description은 WAI-ARIA 1.3에 추가된 명세로, 정식 명세로서 추가된 지 얼마 안 된 속성입니다. 그렇기 때문에 일부 스크린 리더에서 여전히 지원하지 못 할 가능성이 높습니다.
- Sense Reader는 aria-description을 지원하지 않습니다.
- aria-describedby 속성을
display:none으로 숨긴 요소에 참조 했을 때, 특정 스크린 리더는 설명을 잘 가져오지만, 그렇지 못한 스크린 리더도 있습니다.- NVDA는 display:none으로 숨긴 설명 요소를 읽지 못합니다.
- aria-describedby나 aria-description 속성은 iOS VoiceOver에서 다소 불편할 수 있습니다. 보통, 설명은 요소 유형 뒤에 읽으나, VoiceOver는 설명을 요소 레이블과 유형 사이에 읽기 때문에, 요소 유형을 파악하는 데, 오랜 시간이 걸릴 수 있습니다.
- aria-describedby나 aria-description 속성을 컨테이너(<div> 등)에 제공했을 때 스크린 리더에 따라 예측한 것과 다르게 동작할 수 있습니다.
대표적으로 iOS VoiceOver에서 <table>에 aria-describedby나 aria-description을 적용하게 되면, 표에 접근했을 때 뿐만 아니라, 모든 표에 접근했을 때 설명을 읽는 문제가 생깁니다.
호환성 문제를 위해서라도 컨테이너보다는 직접 초점을 보낼 수 있는 컨트롤에 제공하는 것이 바람직해 보입니다.