모달 다이얼로그 적용 사례

논모달 다이얼로그 vs 모달 다이얼로그

논모달과 모달은 목적이 다른 다이얼로그이다.

모달은 다이얼로그를 제외한 나머지 부분은 컨트롤을 할 수 없게 하기 위해 배경 콘텐츠는 어두워지며 컨트롤을 할 수 없게 제작된다. 논모달은 이 와는 반대로 다이얼로그와 함께 배경 콘텐츠도 컨트롤 할 수 있을 때 사용한다.

로그인 모달 다이얼로그

모달 다이얼로그의 대표적 예제로 로그인 모달 다이얼로그를 보면 로그인 기능에만 집중시키기 위해 배경 콘텐츠는 스크롤을 포함하여 컨트롤을 할 수 없으며 배경도 어두워지게 된다.

이런 시각적인 표현을 스크린리더 사용자에게 알리기 위해 모달 다이얼로그의 컨테이너 role="dialog"를 삽입하고 모달 다이얼로그를 제외한 배경 콘텐츠에는 모두 aria-hidden="true" 속성을 삽입하여 스크린리더에서 읽지 않게 한다.

role="dialog"와 함께 aria-modal 속성을 사용하면 배경 콘텐츠에 삽입된 aria-hidden 속성을 대체할 수도 있으나 스크린리더 호환문제로 아직 사용하지 않았다.

기본 모달 다이얼로그 소스는 아래와 같이 전체 컨테이너에 role="dialog"가 삽입하고 제목은 시각적으로 보여지는 헤딩 요소와 aria-labelledby와 연결한다. 그리고 제목 아래 Dialog 사용에 필요한 짧은 문장은 aria-describedby 속성을 사용하여 연결하면 사용성에 큰 도움이 된다.

<div role="dialog" aria-labelledby="title-dialog" aria-describedby="desc-txt">
    <div role="document" tabindex="-1">
        <h2 id="title-dialog">로그인</h2>
        <p id="desc-txt">아이디 또는 스카이패스 번호로 로그인이 가능합니다.</p>
        <fieldset>
            <legend>로그인 방법 선택</legend>
            <input id="login-user-id" type="radio">
            <label for="login-user-id">회원 아이디</label>
            <input id="login-skypass" type="radio">
            <label for="login-skypass">스카이패스 회원 번호</label>
        </fieldset>
         ...
     </div>
</div>

모달 다이얼로그 기본 포커스의 이동

모달 다이얼로그가 열리게 되면 기본적으로 dialog 안의 role="document" 를 갖고 있는 요소에 tabindex="-1"을 삽입하고 포커스가 이동된다. role="document"를 사용한 이유는 다이얼로그 내에 가상모드로 탐색할 수 있는 콘텐츠가 있다는 것을 알리기 위함이다.

Tab키를 누르면 키보드의 포커스는 포커서블한 요소로 계속 이동하며 사용자가 닫지 않는 한 모달 다이얼로그 안에서만 계속 순환된다.

입력박스와 같은 폼 요소가 있는 모달 다이얼로그의 포커스 이동

로그인과 같이 폼 요소가 주 콘텐츠인 모달 다이얼로그가 열리면 포커스는 첫번째 포커서블한 요소로 이동시키는 것이 좋다. 그렇게 되면 스크린리더 사용자나 키보드 포커스 사용자는 모달 다이얼로그의 목적을 바로 알 수 있고 쉽게 폼 요소 입력이 가능해 진다.

로그인 모달 다이얼로그가 열리면 첫번째 포커서블한 요소인 회원아이디 라디오 버튼으로 포커스가 이동되며 스크린리더에서는 아래와 같이 읽게 된다.

로그인 Dialog 아이디 또는 스카이패스 번호로 로그인이 가능합니다. document 로그인방법 선택 그룹 회원 아이디 radio button 선택 1/2

포커서블한 첫번째 요소가 많은 문장 아래에 있을 때, 포커스를 보내면 화면 스크롤을 변화시키게 되므로 제목과 짧은 문장(1~2문장)정도가 있을 경우에만 첫번째 포커서블한 요소로 보내는 것이 좋다.

닫기 버튼 외에 포커서블한 요소가 없는 짧은 모달 다이얼로그의 포커스 이동

위 예제와 같이 작은 모달 다이얼로그에 닫기 버튼 외에 포커서블한 요소가 없는 경우에는 role="document"를 갖고 있는 요소에 첫번째 포커스를 보내는데 이는 닫기 버튼에 포커스가 갇혀있는 것처럼 보여지지 않게 하기 위함과 사용자가 내용을 읽기 위해 역순으로 탐색하게 하지 않기 위함이다.

AOA동영상 강의