aria-describedby

aria-describedby

웹 접근성을 개선하기 위해 사용되는 WAI-ARIA 속성이다.

 

aria-describedby 속성은 문자열로 구성된 고유한 id 값을 가져야 한다.

해당 Id 값은 추가 정보를 제공하는 id 속성과 일치해야 한다.

일반적으로 aria-describedby 속성을 사용하여 스크린 리더가 해당 요소에 대한 설명을 읽을 수 있도록 한다.

 

예시

<label htmlFor="password">비밀번호:</label>
<input
  type="password"
  id="password"
  aria-describedby="password-info"
/>
<div id="password-info">
  비밀번호는 최소 8자 이상이어야 합니다. 대문자, 소문자, 숫자 및 특수문자를 포함해야 합니다.
</div>

위의 예시에서 input 태그의 aria-describedby 속성과 div태그의 id 속성은 password-info로 연결되어 있다.

이로 인해 스크린 리더는 input 태그의 aria-describedby와 password-info로 연결된 <div id = 'password-info'> 태그의 내용을 읽어준다.

 

이와 같이 aria-describedby 속성을 사용하면 웹 페이지에서 특정 요소에 대한 설명, 가이드, 오류 메시지 등의 추가 정보를 제공하여 사용자가 내용을 이해하고 상황에 맞게 작업할 수 있도록 도와준다.