이 글은 아래의 두 문서 내용의 요약 정리본이다.

• WAI ARIA Live Regions – MDC
• How to use ARIA Live Regions for dynamic content – CodeTalks

이 글을 통해 ARIA 개발의 감각을 끌어올릴 수 있기를 바라며 스펙(Taxonomy of WAI-ARIA States and Properties)에 더 많은 내용이 있으니 참고바란다. 예제들은 ARIA를 지원하는 스크린리더(Korean JAWS for Windows (한글용; 유료), NVDA (영어용; 무료))로 어떻게 동작하는지 테스트해볼 수 있다.

Live Region이란?: 개발자가 웹 문서의 특정 부분을 동적인 컨텐츠라고 명시할 수 있는데 그 영역을 일컬어 Live Region이라고 할 수 있다.

개요

과거에는 웹 페이지 변경은 전체를 읽어주게 하거나 거의 읽어주지 않아서 일부 혹은 전체의 정보에 접근할 수 없도록 만들어 종종 사용자를 짜증나게 했다. 최근까지는 보조기기는 이를 개선할 수 없었다. 왜냐하면 변경에 대응하여 보조기기에 경고해줄 수 있는 마크업 표준이 없었기 때문이다. Live Region은 이 차이를 메우고 보조기기에 DOM 변경을 알려줄 수 있는 설정을 제공하였다. 설정은 언제 어디서 업데이트가 발생하고 얼마나 중요한지를 포함한다. Live Region을 사용하는 목표는 가장 먼저 관련 정보를 제공하고 가능한한 사소한 정보는 제한하는 것이다. 웹 개발자는 Live Region 사용에 익숙해져야 하고 웹 사이트의 사용자 인터페이스를 설계할 때 이것을 고려해야 한다.

Live Region state

페이지를 다시 로드하지 않고 업데이트 되는 동적 컨텐츠는 반드시 Live Region을 표시해야한다. Live Region은 ARIA 가이드라인 상태의 영향을 받으며 많은 사용자 정의 설정들은 가지고 있다. 다음은 각 관련 설정의 목록과 그 설명이다.

aria-live: (aria-live=POLITENESS_SETTING)

보조기기가 live region의 업데이트를 처리하는 우선순위를 설정하는데 사용된다. 가능한 설정들은 “off/polite/assertive“이며 기본값은 off.

설정값

• aria-live="off": live region의 업데이트를 알리지 않음.

  예제: http://accessibleajax.clcworld.net/simple/live_off.htm

• aria-live="polite": live region의 업데이트를 사용자의 현재 동작이 끝날 때 알림.

  예제: http://accessibleajax.clcworld.net/simple/live_polite.htm

• aria-live="assertive": live region의 업데이트를 사용자에게 바로 알림.

  예제: http://accessibleajax.clcworld.net/simple/live_assertive.htm

aria-relevant: (aria-relevant=[LIST_OF_CHANGES])

live region이 변경될 때 보조기기로 하여금 어떤 변경을 주시하도록 할 것인가를 설정한다. 여기서의 변경은 의미있는 변경 – 예를 들어, 온라인 친구목록에서 친구 리스트 한개가 없어졌다면 이는 친구가 오프라인이 되었다는 의미 – 가능한 설정들은 “additions/removals/text/all“이고 기본값은 “additions text“.

설정값

• aria-relevant="additionals": 추가되는 요소를 감시한다.

  예제: http://accessibleajax.clcworld.net/simple/relevant_additions.htm

• aria-relevant="removals": 제거되는 요소를 감시한다.

  예제: http://accessibleajax.clcworld.net/simple/relevant_removals.htm

• aria-relevant="text": 변경되는 요소를 감시한다.

  예제: http://accessibleajax.clcworld.net/simple/relevant_text.htm

• aria-relevant="all": 위의 세가지 변화를 감시한다.

  예제: http://accessibleajax.clcworld.net/simple/relevant_all.htm

aria-atomic: (aria-atomic=BOOLEAN)

live region이 변경될 때 보조기기가 live region 중 변경된 요소만을 알려줄지, live region 전체를 알려줄지 설정한다. 가능한 설정들은 “false/true“이고 기본값은 false.

설정값

• aria-atomic="false": live region 중 변경되는 요소만 알려주도록 설정한다.

  예제: http://accessibleajax.clcworld.net/simple/atomic_false.htm

• aria-atomic="true": live region이 변경되면 영역 전체를 다시 알려주도록 설정한다.

  예제: http://accessibleajax.clcworld.net/simple/atomic_true.htm

aria-controls: (aria-controls=[IDLIST])

사용된 요소가 컨트롤하는 요소들을 나타내는데 사용된다. 값에는 컨트롤하는 요소들의 ID가 공백으로 구분되어 들어갈 수 있다. 예) aria-controls="myRegionID1 myRegionID2"

예제: http://accessibleajax.clcworld.net/simple/controls.htm

aria-labelledby: (aria-labelledby=[IDLIST])

live region에 해당하는 레이블들을 나타내는데 사용된다. live region에 사용하며 값에는 레이블 요소들의 ID가 공백으로 구분되어 들어갈 수 있다.

예제: http://accessibleajax.clcworld.net/simple/labelledby.htm

aria-describedby: (aria-describedby=[IDLIST])

live region에 해당하는 설명들을 나타내는데 사용된다. live region에 사용하며 값에는 설명이 포함된 요소들의 ID가 공백으로 구분되어 들어갈 수 있다.

예제: http://accessibleajax.clcworld.net/simple/describedby.htm