정보실

웹학교

정보실

html aria-live 사용

본문

화면판독기를 이용하는 사용자를 위한 속성입니다.

aria(Accessible Rich Internet Applications).


웹페이지에서 변경 가능성(예를 들어, 검색에 의한 검색결과 노출같은)이 있는 엘리먼트에 해당 속성을 추가하여 리더기를 사용하는 사용자를 배려합니다.

이 기능을 통해 사용자에게 변경된 정보를 사용자에게 바로 알릴 수 있습니다.


<div class="will-change">

    <!-- 바뀌는 내용 -->

</div>


과 


<div class="will-change" aria-live="polite">

    <!-- 바뀌는 내용 -->

</div>

시력이 안좋아 보조 기술을 사용하는 사용자에게 변경이 될 수 있는 엘리먼트에 aria-live 속성을 설정하여 접근성을 배려하는 것이 중요합니다.


aria-live에는 세 가지 속성값이 있습니다.

  • aria-live="off" : 보조 기술이 aria-live 인터럽트를 일시적으로 중단하도록 하는 역할을 합니다.
  • aria-live="polite" : 보조 기술이 현재 어떤 작업을 하고 있든 그 작업을 마치면 보조 기술 사용자에게 이런 변경 사항을 알리도록 하는 역할을 합니다. 중요하지만 긴급하지는 않은 변경 사항일 경우에 적합하며 aria-live는 대부분의 이런 용도로 사용됩니다.
  • aria-live="assertive" : 보조 기술이 수행 중인 작업이 무엇이든 중단하고 사용자에게 이런 변경 사항을 즉시 알리도록 하는 역할을 합니다. '서버 오류가 발생하여 변경 내용이 저장되지 않습니다. 페이지를 새로 고치세요' 같은 상태 메시지나 스테퍼 위젯에 있는 버튼처럼 사용자 작업의 직접적 결과로서 입력란이 업데이트 되는 경우와 같이 중요하고도 긴급한 업데이트에만 이 값을 사용하세요.







페이지 정보

조회 159회 ]  작성일19-01-31 10:31

웹학교