아티클

[WAI-ARIA] Aria-describedby 활용하기

2015-02-02 13:38:46

안녕하세요. N-Visions 입니다. 이번 글에서는 웹페이지 개발 시 스크린리더 사용자들에게 매우 유용한 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를 적용해 제공한 것 입니다.

Note:

국내에서 주로 사용되는 센스리더는 해당 WAI-ARIA속성을 지원하지 않습니다. NVDA와 JAWS for Windows로 확인하시기 바랍니다. 또한 JAWS는 Speech Verbosity를 Beginner이나 Intermediate으로 레벨이 조정되어 있어야만 해당 속성을 지원합니다.

사용 예시

테스트페이지로 바로가기

위의 예는 하나의 회원가입 양식입니다. 회원가입에 필요한 양식 중 암호 입력창에 탭키등으로 접근하면 '8-16자리의 암호를 입력하세요.영문, 숫자가 하나 이상 포함되어야하며, 영문 중 하나 이상은 반드시 대문자여야 합니다.'라는 설명이 스크린리더에서 출력되는 것을 확인할 수 있습니다. 스크린리더에서 출력한 설명은 별도로 제공한 'span' 요소의 내용입니다. 'input' 요소와 'span'요소는 'aria-describedby' 속성값과 'id' 속성값을 일치시켜 연결/참조한 것입니다. 자세한 코드 내용은 테스트 페이지에서 확인하실 수 있습니다.

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


이상으로 저희가 준비한 ARIA-describedby에 대한 글을 마치겠습니다. ARIA-describedby에 대한 더 자세한 정보는 Mozilla재단의 개발자 지원 페이지의 Using the aria-describedby attribute - Accessibility 를 참고하세요.

벌써 2015년 새해가 밝은지도 한 달이 다 되어 갑니다. 늦었지만 이 글을 읽으시는 모든 분들 새해 복 많이 받으시고 저희도 이번 해에 더 알찬 내용으로 찾아 뵐 것을 약속드립니다. 감사합니다.

댓글 0
댓글을 작성하려면 해주세요.