Aria - Live Region

Live Region

페이지를 새로 고침하지 않고 업데이트되는 콘텐츠는 스크린 리더 사용자는 알기 힘들다. 페이지 Title이 임의로 변경 해 주지 않는 이상 알 방법이 없음... ARIA live region은 이러한 콘텐츠 업데이트 여부를 쉽게 파악할 수 있게 도와준다.

1. Aria-live (언제)

Aria-live가 업데이트된 콘텐츠를 언제 읽어 줄지 결정 업데이트 된 콘첸츠의 중요도에 따라 다른 속성을 사용 할 수 있다. off : 중요하지 않은 콘첸츠 이거나 읽을 필요가 없는 콘텐츠 polite : 엡데이트가 되었음을 알려줘야 하지만 스크린 리더가 지금 읽고 있는 것을 모두 읽을 때까지 기다린후 알려준다. assertive : 중요 업데이트가 있을 경우 사용하며 현재 읽고 있는 문장을 읽은 후 이어서 업데이트 된 콘텐츠를 읽어준다. rude : 스크린 리더가 읽고 있던것을 멈추고 업데이트 된 콘텐츠를 읽어준다. role="alert"를 주로 사용해서 잘 사용되지 않는 속성이다.

2.Aria-atomic(얼마나)

Aria-atomic는 전체를 읽을지, 변경 된 것만 읽을지 등등을 결정한다. true:해당영역 전체를 읽는다. false(기본값):변경된 영역만 읽음.

3.Aria-relevant(무엇을)

aria-relevant는 사용자에게 표시해야 할 변경 사항의 유형을 나타낸다.

additions: 라이브 영역에 추가하는 요소가 중요하다는 뜻. text: 하위 노드에 추가하는 텍스트 콘텐츠가 관련성이 있다는 뜻입니다. 예를 들어, 사용자설정 텍스트 필드의 textContent 속성을 수정하면 수정한 텍스트를 사용자에게 읽어주게 된다. removals: 텍스트나 하위 노드 제거를 사용자에게 전달해야 한다는 뜻. all: 모든 변경 사항이 관련성이 있다는 뜻.

Aria-atomic 와 Aria-relevant는 함께 사용하면 좋다

참고자료 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions http://nuli.navercorp.com/sharing/blog/post/1132671