[접근성] 모바일기기에서 aria-haspopup 팝업타이틀로 이동 및 읽어주기

속성값에 따른 접근성

테스트는 아이폰 환경에서 해보았으며, 3가지 aria-labelledby="dialog1Title" aria-describedby="dialog1Desc" aria-haspopup="dialog"의 속성을 넣었을때 레이어팝업을 띄우려고 하는 버튼에 읽는 순서이다.
버튼을 클릭하거나 컨트롤 하지 않더라도 버튼만으로 어떤 버튼인지를 명시 해 줄 수 있는 기능 이다.

aria-labelledby="dialog1Title"

id와 매칭해서 쓰게 되며 제일 먼저 읽어 준다.

aria-describedby="dialog1Desc"

id와 매칭해서 타이틀 제목 매칭된 내용을 읽고 읽어 준다.

aria-haspopup="dialog"

이 속성이 있는경우 레이어팝업을 만들어서 사용하는경우 tabindex="0"과 함께 포커스를 주게 되면 레이어팝업으로 이동하게 된다. 개발을 타는 경우에도 문제없이 타이틀로 이동하는걸 알수 있었다.
팝업버튼 대화팝업으로 읽어준다 (기존 레이어팝업열림 같은걸 대신해서 쓰는 것 같다)

보이스오버에서 읽히는것 테스트

aria-haspopup="dialog" 있는경우

aria-haspopup="dialog"
aria-labelledby="dialog1Title" 있는경우

aria-haspopup="dialog"
aria-labelledby="dialog1Title"
aria-describedby="dialog1Desc" 있는경우

내용이있습니다.

내용이있습니다.

내용이있습니다.

내용이있습니다2

내용이있습니다2

내용이있습니다2

내용이있습니다.3

내용이있습니다.3

내용이있습니다.3

1팝업타이틀 -

1팝업내용

닫힘

2팝업타이틀

2팝업내용

닫힘

3팝업타이틀

3팝업내용

닫힘

	여기를 클릭해보세요

내용이있습니다.

내용이있습니다.

내용이있습니다.

팝업타이틀

팝업내용

닫힘

    $('.btnsss').on('click', function(e){
        $('.ppop').show().attr('tabindex','0').focus(); // tabindex와 포커스가 있어야 팝업으로 이동
        e.preventDefault()
    })
    $('.btns_close').on('click', function(e){
        $('.ppop').hide();
        $('[aria-haspopup*="dialog"]').focus(); // 포커스가 있어야 클릭한 버튼으로 이동 
        e.preventDefault()
    })