레진 WAI-ARIA 가이드라인 소개.

레진 웹 접근성 가이드라인에 이어 레진 WAI-ARIA 가이드라인을 소개합니다. WAI는 ‘Web Accessibility Initiative’의 약자로 W3C에서 웹 접근성을 담당하는 조직이고요. ARIA는 ‘Accessible Rich Internet Applications’의 약자로 리치 인터넷을 위한 W3C 접근성 명세입니다. 쉽게 말해 Ajax 같은 새로운(?) 기술에 대응하는 접근성 명세라고 이해할 수 있습니다. 레진에서 WAI-ARIA 명세를 실무에 적용하게 된 배경은 다음과 같아요.

페이지를 새로고침하지 않고 콘텐츠를 Ajax 방식으로 갱신했을 때 전맹 시각장애인은 어떤 응답을 받을 수 있을까? 갱신 사실을 보조기기에 즉시 알려줄 수 있으면 좋겠다. 비장애인이 화면에 등장하는 툴팁을 보면서 비밀번호를 바르게 생성(입력)하는 동안 시각 장애인은 아무런 안내도 받지 못한 상태로 잘못된 비밀번호를 계속해서 입력하고 있다.

그동안 우리가 익히고 사용해왔던 HTML 명세 만으로는 더 이상 충분하지 않다고 판단했기 때문에 WAI-ARIA가 필요했습니다. WAI-ARIA는 HTML 5.2에서 이미 참조하고 있는 명세예요.

HTML 5.2

4.3.3. The section element

Allowed ARIA role attribute values:
region role (default - do not set), alert, alertdialog, application, contentinfo , dialog, document, feed, log, main, marquee, presentation, region, search, status or tabpanel.
Allowed ARIA state and property attributes:
Global aria-* attributes
Any aria-* attributes applicable to the allowed roles.

레진 WAI-ARIA 가이드라인은 W3C WAI-ARIA 명세를 기반으로 즉시 응용할 수 있도록 예제 중심으로 작성했고요. 레진코믹스 웹 서비스에서 실제로 사용하고 있는 속성을 기준으로 만들었습니다. 가이드라인의 목차는 다음과 같아요.

  1. HTML을 의미 있게 작성한다.
  2. 탭 목록, 탭, 탭 패널(role="tablist|tab|tabpanel").
  3. 툴팁(role="tooltip").
  4. 알럿(role="alert").
  5. 알럿 대화상자(role="alertdialog").
  6. 대화상자(role="dialog").
  7. 탐색(nav, role="navigation").
  8. 보충(aside, role="complementary").
  9. 의미 없음(role="none presentation").
  10. 현재 상태(aria-current="token").
  11. 선택 상태(aria-selected="true|false|undefined").
  12. 팝업 상태(aria-haspopup="token")
  13. 확장 상태(aria-expanded="true|false|undefined")
  14. 눌림 상태(aria-pressed="tristate")
  15. 숨김 상태(aria-hidden="true|false|undefined")
  16. 제어 대상(aria-controls="ID reference list")
  17. 실시간(aria-live="token")
  18. 간결한 설명 참조(aria-labelledby="ID reference list")
  19. 간결한 설명(aria-label="string")
  20. 자세한 설명 참조(aria-describedby="ID reference list")
  21. 모달(aria-modal="true|false")
  22. 참고 문서

레진 WAI-ARIA 가이드라인 중 aria-live 라는 속성을 잠깐 자세히 들여다 볼까요?

aria-live 속성은 실시간으로 내용을 갱신하는 영역을 의미합니다. 값으로 polite, assertive, off(default)를 설정할 수 있으며 갱신하는 내용의 중요도에 따라 선택합니다. 갱신 영역에 polite, assertive값을 사용하면 갱신하는 순간 보조기기는 사용자에게 내용을 전달합니다. polite값은 중요도가 낮은 내용에 사용하여 현재 진행중인 음성 또는 타이핑을 방해하지 않고 뒤늦게 전달합니다. assertive값은 중요도가 높은 내용에 사용하여 현재 진행중인 보조기기 작업을 중단하고 갱신 내용을 즉시 사용자에게 전달합니다.

일반적으로 role 속성의 값이 alert, alertdialog, dialog인 경우 사용하면 적절합니다. 그 밖에 Ajax 기법을 이용하여 실시간으로 내용을 갱신하는 모든 영역(채팅, 오류, 로그, 상태 표시)에 사용할 수 있습니다.

<!-- O: 대화상자 -->
<section role="dialog" aria-live="polite" aria-modal="true" aria-labelledby="TITLE">
    <h2 id="TITLE">로그인</h2>
    <form>
        <label for="ID">아이디</label>
        <input id="ID">
        <label for="PW">비밀번호</label>
        <input id="PW" type="password">
        <button>로그인</button>
    </form>
</section>

<!-- O: 알럿 -->
<div role="alert" aria-live="assertive">
    <p>로그인 후 이용할 수 있습니다.</p>
</div>

assertive값은 사용자의 현재 작업을 방해할 수 있기 때문에 중요도가 높은 내용을 선별하여 신중하게 적용해야 합니다.

웹 개발자가 잠깐 이 가이드라인을 읽는 것만으로 웹 접근성을 실무에 바로 적용할 수 있겠죠? 아무쪼록 이 포스팅과 레진 WAI-ARIA 가이드라인이 웹 접근성 개선을 위해 노력하는 웹 개발자 여러분께 도움이 됐으면 좋겠습니다.

"Design for all, amuse everyone!"