Web Publishing
  • WEB PUBLISHING
  • HTML5
    • HTML5란?
    • HTML5에서 추가된 것들
    • 테이블 - Checkbox Table
    • 테이블 - 상단고정
  • JavaScript ES6
    • 변수와 상수
    • 함수
  • Jquery
    • 연산자
    • Selecter
    • 기본효과
    • 페이딩
    • 슬라이딩
    • TAB
  • WAI-ARIA
    • WAI-ARIA
    • ROLE - Landmark
    • Aria - Live Region
    • Aria-관계
  • WAI-ARIA 컴포넌트(활용)
    • Error Message
Powered by GitBook
On this page

Was this helpful?

  1. WAI-ARIA

Aria - Live Region

PreviousROLE - LandmarkNextAria-관계

Last updated 5 years ago

Was this helpful?

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