웹 프론트엔드/접근성 a11y

[번역] ARIA role=dialog를 사용하여 모달 다이얼로그 박스 구현하기

아로리(arori) 2018. 1. 24. 15:36
반응형

원문: Using ARIA role=dialog to implement a modal dialog box

 

Using ARIA role=dialog to implement a modal dialog box - WCAG WG

Status Editorial note The title of this technique is just a draft - it may become just an example in a more encompassing technique (e.g., Using ARIA role=dialog). Marc and Loretta changed the title to "Using ARIA role=dialog to implement a model dialog box

www.w3.org


설명

제작자는 종종 새 브라우저 창을 켜는 것 대신 JavaScript로 커스텀 모달 다이얼로그(주로 div로)를 삽입합니다. ARIA role dialog는 다이얼로그의 컨테이너로 사용되는 요소에서 스크린 리더 사용자들에게 커스텀 다이얼로그가 삽입되었다는 것을(혹은 CSS로 노출되도록 만들었다는 것을) 안내하기 위해서 사용할 수 있습니다.

모바일 디바이스에서 적절한 포커스 처리를 보장하려면, 다이얼로그가 표시될 때 페이지의 배경(즉, 모달 커스텀 다이얼로그의 콘텐츠를 제외한 페이지의 모든 요소)을 마스킹하는 것이 좋습니다. 페이지의 배경의 aria-hidden 속성을 true로 셋팅해서 마스킹할 수 있습니다(다이얼로그가 닫힐 때는 다시 false로 되돌립니다). 스크립트가 다이얼로그로 포커스를 옮긴 이후에 마스킹을 해야합니다.

포커스(초점) 관리에 대한 참고

커스텀 다이얼로그를 사용할 때에 작성자가 스크립트를 사용하여 표시된 다이얼로그로 초점을 옮기는 것(그리고 닫힌 후에 다이얼로그를 열었던 트리거로 되돌아가는 것)이 생명입니다. 대부분의 다이얼로그는 소스코드상에서 트리거하는 지점으로부터 멀리 떨어져있기 때문에 특히 중요합니다. 예를 들면, 다이얼로그 코드는 페이지의 소스코드의 맨 끝에 추가 될 수 있습니다. 스크립트를 통해서 적절한 포커스 관리가 이루어지지 않으면, 키보드 유저들은 커스텀 다이얼로그를 찾기 힘들거나 식별하고 인터렉션하는 것이 불가능할 수 있습니다.

따라서 스크립트로 포커스 관리는

  1. 트리거 요소(링크 혹은 버튼)에서 커스텀 다이얼로그(혹은 그 안에 있는 포커스 가능한 요소)로 키보드 포커스를 이동해야 합니다.
  2. 커스텀 다이얼로그가 닫힐 때 까지 포커스를 다이얼로그 내에 있도록 유지해야 합니다.(이것이 다이얼로그가 효과적인 모달이 되도록 합니다)
  3. 제공된 여러가지 선택 사항 중 하나를 사용자가 활성화해서 대화상자를 닫으면 트리거 요소로 포커스를 이동해야합니다.

예제

예제 1: 버튼으로 커스텀 다이얼로그 열기

페이지에 있는 버튼("다이얼로그 표시")은 텍스트("그냥 예제입니다")와 "확인", "취소" 두개의 버튼이 있는 작은 커스텀 다이얼로그를 표시합니다. 아래 예제에서는, 스크립트는 숨겨진 div를 보여주기만 합니다. AJAX/DOM 스크립트를 통해서 다이얼로그가 페이지에 삽입될 것입니다.

<p><a onclick="toggleDialog('show');" href="#">다이얼로그 표시</a></p>

<div tabindex="-1" style="display: none;" role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden">
    <h3 id="myDialog">그냥 예제입니다</h3>
    <button onclick="toggleDialog('hide');" class="close-button">확인</button>
    <button onclick="toggleDialog('hide');" class="close-button">취소</button>        
</div>

페이지의섹션의 스타일과 스크립트:

<style>
.box-hidden {
    display: none;
    position: absolute;
    top: 19em; left:15em; width:20em; height:5em;
    border: 2px solid black;
    padding:0 1em 1em 1em;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
    }        
</style>

<script>
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;

function showDialog(el) {
    lastFocus = el || document.activeElement;
    toggleDialog('show');
}
function hideDialog(el) {
    toggleDialog('hide');
}

function toggleDialog(sh) {
    dialog = document.getElementById("box");
    okbutton = document.getElementById("ok");
    pagebackground = document.getElementById("bg");

    if (sh == "show") {
        dialogOpen = true;

        // 다이얼로그 표시
        dialog.style.display = 'block';

        // 다이얼로그 표시 이후, 그 안의 요소에 포커스하기
        okbutton.focus();

        // "숨겨질" 콘텐츠로에서 포커스가 나간 *후에* 배경을 숨깁니다.
        pagebackground.setAttribute("aria-hidden","true");

    } else {
        dialogOpen = false;
        dialog.style.display = 'none';
        pagebackground.setAttribute("aria-hidden","false");
        lastFocus.focus(); 
    }
}


document.addEventListener("focus", function(event) {

    var d = document.getElementById("box");

    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }

}, true);


document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);

</script>

커스텀 다이얼로그의 스크립트(코드만 있음)를 링크에서 볼 수 있습니다.

리소스

테스트

절차

ARIA role=dialog를 이용하여 모달 다이얼로그를 구현한 엘리먼트의 경우:

  1. 커스텀 다이얼로그로 사용되는 (div 같은) 컨테이너가 role=dialog를 속성으로 가지고 있는지 체크하세요.
  2. 사용자 인터렉션이나 다른 이벤트에 따라서 JavaScript를 통해 컨테이너가 삽입(혹은 노출)되는지 체크하세요.
  3. 다이얼로그가 활성화되면, 컨테이너 안의 요소가 포커스되는지 체크하세요.
  4. 다이얼로그가 활성화되면, 컨테이너에 없는 요소에 포커스가 설정되지 않았는지 체크하세요.
  5. 다이얼로그가 비활성화되면, 다이얼로그를 활성화시켰던 컨트롤요소에 포커스가 설정되어있는지 체크하세요.

예상 결과

  • 모든 체크사항에 통과해야합니다.

 

반응형