두 번째 팝업에 집중하는 방법 angle-ui-bootstrap 모달 지시문의 첫 번째 팝업에서 두 ​​번째 팝업을 열 때

Question

시나리오에 있는데, 팝업에 접근성 문제로 팝업을 표시하고 싶습니다.

첫 번째 팝업에서 두 ​​번째 팝업을 연 경우 여전히 첫 번째 팝업이 잘 작동하고 있습니다. 포커스가 첫 번째 팝업에 남아 있고 두 번째 팝업으로 이동하지 않으면 그 위에 도움을주십시오.

jquery 부트 스트랩을 사용하는 참조가 거의 없지만 angular-ui-bootstrap을 사용하고 있습니다.

미리 감사드립니다.

Answer 1

포커스는 주로 HTML에 표시된 순서대로 포커스 가능 항목 (예 : 버튼, 링크 및 입력)을 통해 이동합니다. 예외는 Javascript를 사용하여 포커스를 이동할 때입니다.

설치 프로그램에서 특히 모달에 포커스를 보내는 것처럼 보이지 않습니다. 그것은 HTML에서 다음이기 때문에 처음에 도달합니다. 그러나 두 번째 모달은 다르게 생성되므로 포커스가 HTML에 추가되지 않기 때문에 포커스를 찾을 수 없습니다 (모달 작성시 Plunker가 index.html을 업데이트하지 않을 수도 있음). 이 예제에서 CSS를 해제하면 작동하는 것이 더 쉬워집니다.

그래서 1 단계는 내용이 HTML에 있는지 확인하여 초점을 맞출 수있게하는 것입니다. 일반적으로 자바 스크립트에서 append()를 사용합니다. 다음 단계는 HTML 순서를 제어하는 ​​대신 원하는 HTML 부분에 포커스를 보내는 것입니다.

필요한 위치로 포커스를 보내는 가장 쉬운 방법은 링크를 사용하는 것입니다.

<a href="#myModal">open popup window</a> 
<a href="#my2ndModal">open me</a> 

그런 다음 div가 tabindex 속성을 사용하여 포커스를받을 수 있는지 확인하십시오.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="#modalHeading" id="myModal"> 
    <h4 id="modalHeading>Dialog Title</h4> 
    ... content... 
</div> 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal2Heading" id="my2ndModal"> 
    <h4 id="modal2Heading>2nd Dialog Title</h4> 
    ...content... 
</div> 

다음 단계는이 열려있는 동안 초점은 현재 모달 내부에 남아 있는지 확인하는 것입니다, 그래서 당신의 "부트 스트랩 팝업을 열고"버튼을 누르거나 할 수없는 다른 포커스 항목을 다시 루프를하지 않습니다 본. 일반적으로 keyPress handler을 사용합니다.

첫 번째 모달 div 안에 "document"라는 ARIA 역할은 필요하지 않습니다. 나는 그것이 무엇이든 깨지 않는다고 생각하지 않는다. 단지 화면 판독기 소프트웨어에게 당신이 앱 브라우징에서 페이지 브라우징으로 바뀌 었음을 알려주기 때문에 오도 된 것이다. 그리고 role = "dialog"를 사용하면 aria-labelledby 속성도 가져야합니다.