추가 맥락을 위한 aria-describedby

때로는 컨트롤에 이름만으로는 부족합니다. aria-describedby는 스크린 리더가 이름 다음에 읽을 추가 맥락을 연결합니다.

labelledby와 마찬가지로 aria-describedby에는 다른 요소의 id가 들어갑니다. 브라우저는 해당 요소의 텍스트를 설명으로 가져옵니다.

스크린 리더는 먼저 이름을 읽고, 잠시 멈춘 다음 설명을 읽습니다. 이 순서 덕분에 사용자가 컨트롤을 빠르게 파악할 수 있습니다.

형식 규칙과 같은 필드 힌트는 aria-describedby에 넣는 것이 좋습니다. 필드가 focus를 받으면 안내가 자동으로 읽힙니다.

설명은 보조 정보입니다. 요소에 aria-describedby만 있고 이름이 없다면 여전히 사실상 레이블이 없는 상태입니다.

aria-describedby에 공백으로 구분한 여러 id를 지정하면 브라우저가 해당 텍스트를 이어 붙입니다. 힌트와 오류를 함께 제공할 때 유용합니다.

aria-describedby가 유효성 검사 메시지를 가리키도록 하면 오류가 페이지의 다른 곳에 따로 남지 않고 필드와 함께 소리 내어 읽힙니다.

설명은 짧은 문장이어야 합니다. 긴 aria-describedby 텍스트는 매번 전부 읽히므로 금세 피로감을 줍니다.

숨겨진 레이블과 달리 참조된 힌트는 보통 화면에 표시된 상태로 남아 시각 사용자에게도 도움이 됩니다.

대부분의 스크린 리더는 aria-describedby를 지원하지만, 일부는 특정 모드에서만 읽습니다. 따라서 실제 스크린 리더로 힌트를 테스트하십시오.

컨트롤의 이름에는 aria-labelledby를 사용하고, 컨트롤에 대한 추가 정보에는 aria-describedby를 사용하십시오. 두 속성은 서로 다른 역할을 합니다.

aria-describedby가 id를 참조하여 이름 다음에 힌트와 오류를 읽어 주며, 이름을 절대 대신하지 않고 보완한다는 것을 배웠습니다. 💬