[WAI-ARIA] Aria-describedby

Aria-describedby 활용하기

이번 글에서는 웹페이지 개발 시 스크린리더 사용자들에게 매우 유용한 WAI-ARIA속성 하나를 간략하게 소개하려 합니다. 

스크린리더사용자들이 복잡한 구조의 페이지를 탐색할 때 또는 어떤 요소에 대한 상세 설명을 제공해야 할 필요가 있을 때가 있습니다. 

복잡한 구조의 캘린더로 예를 들자면, 화면을 시각적으로 인지하는 사용자는 구조를 한 눈에 확인하고 전체적인 내용와 기능을 쉽게 파악할 수 있습니다. 

하지만 음성출력으로만 웹페이지를 활용하는 스크린리더 사용자가 복잡한 콘텐츠의 전체적인 내용과 기능을 파악하는 것은 퍽 어려운 일입니다.  

또한 암호입력과 같은 폼 요소에서 특정 입력 양식(예를 들어, 최소 한 자리 이상의 문자와 숫자 그리고 대문자가 반드시 포함된 8-16자리의 암호)을 요구할 때가 있습니다. 

기존에는 스크린리더 사용자가 이와 같은 정보들을 파악하기 위해서 복잡한 화면 레이아웃을 탐색하는데에 많은 시간을 소비하거나, 스크린리더 사용자를 위해 복잡한 IR기법등을 통해 문제를 해결해 왔습니다. 

그러나 오늘 소개하려고하는 ARIA-describedby를 적절히 활용한다면 이런 문제가 어느정도 해결됩니다.

ARIA-describedby

ARIA-describedby는 지난 NVDA를 활용한 WAI-ARIA 살펴보기(#2) 에서 잠시 언급한 ARIA-labelledby와 유사합니다. 

다만 ARIA-describedby는 모든 HTML요소에 사용 가능하며, ARIA-labelledby보다 더 상세한 설명이 제공되어야 할 때 사용할 수 있습니다. 

아래의 간단한 예를 통해 ARIA-describedby의 실재 적용사례를 살펴 보도록 하겠습니다. 

아래의 예는 위에 잠시 언급한 암호입력 양식에 상세한 설명을 ARIA-describedby를 적용해 제공한 것 입니다.

국내에서 주로 사용되는 센스리더는 해당 WAI-ARIA속성을 지원하지 않습니다. 

NVDA와 JAWS for Windows로 확인하시기 바랍니다. 

또한 JAWS는 Speech Verbosity를 Beginner이나 Intermediate으로 레벨이 조정되어 있어야만 해당 속성을 지원합니다.

사용 예시

DEMO VIEW

위의 예는 하나의 회원가입 양식입니다. 

회원가입에 필요한 양식 중 암호 입력창에 탭키등으로 접근하면 '8-16자리의 암호를 입력하세요.영문, 숫자가 하나 이상 포함되어야하며, 영문 중 하나 이상은 반드시 대문자여야 합니다.'라는 설명이 스크린리더에서 출력되는 것을 확인할 수 있습니다. 

스크린리더에서 출력한 설명은 별도로 제공한 'span' 요소의 내용입니다. 'input' 요소와 'span'요소는 'aria-describedby' 속성값과 'id' 속성값을 일치시켜 연결/참조한 것입니다. 

자세한 코드 내용은 테스트 페이지에서 확인하실 수 있습니다. 

이와 같이 ARIA-discribedby는 스크린리더 사용자에게 특정 요소의 상세 설명을 제공하거나, 기타 복잡하게 그룹화 된 레이아웃을 설명하는 용도로 사용할 수 있습니다.

Related links

1. Using the aria-describedby attribute - Accessibility

Jaehee's WebClub

[출처] NULI(널리)