alert dialog

Web Accessibility

Alert and Message Dialogs

Role & Attribute

• role="alertdialog"
• aria-modal
• aria-labelledby
• aria-describedby

Sense Reader

Role & Attribute	Sense Reader	NVDA	VoiceOver	TalkBack
role=”alertdialog”	X	O	O	X
role=”document”	O	O	O	O
aria-modal	X	X	X	X
aria-labelledby	X	O	O	O
aria-describedby	X	O	X	O

view

html

• 버튼의 data-src 와 dialog의 id 동일하게 적용 (연결하는 경우)
• aria-labelledby 와 heading 타이틀 id 동일하게 적용
• aria-describedby 와 메세지 id 동일하게 적용

<div class="l-wrap">
    <button type="button" class="o-button" data-src="#★dialog-id">dialog</button>
</div>

<!-- dialog -->
<div class="c-dialog is-active" role="alertdialog" aria-modal="true" aria-labelledby="★dialog-title" aria-describedby="★dialog-description" id="★dialog-id"> <!-- [D] 활성화시 is-active 클래스 생성 -->
    <div class="c-dialog__dim" aria-hidden="true"></div>

    <div class="c-dialog__inside" role="document" tabindex="-1">
        <h1 class="c-dialog__title" id="★dialog-title">title</h1>

        <div class="c-dialog__body">
            <p class="c-dialog__description" id="★dialog-description">유료로 구매 가능합니다. 결제하시겠습니까?</p>
        </div>

        <div class="c-dialog__foot">
            <button type="button" class="o-button c-dialog__button">취소</button>
            <button type="button" class="o-button c-dialog__button">확인</button>
        </div>
    </div>
</div>
<!-- // dialog -->

Keyboard Interaction

• esc : dialog 닫혀야함

script

• dialog 활성화 시 페이지에 스크롤 되는것을 막기위해 html에 .has-modal 클래스 추가
• dialog 활성화 시 aria-modal 미지원 스크린 리더를 위해 modal이 포함된 영역 이외의 모든 영역에
  aria-hidden="true" 적용 (모바일의 경우 가상 커서가 가둬지지 않음)
• dialog 안에 포커스 가두는 작업 필요함, 2가지 방법을 일반적으로 사용
  • 스크립트로 dialog안에 강제로 포커스를 가둠
    dialog 위치에 상관없이 사용이 가능
  • 컨텐츠를 감싼 l-wrap에 dialog가 활성화 될 경우에만 tabindex="-1" 추가
    단 l-wrap안에 modal이 있으면 안되고 밖에 위치해야함
• dialog가 닫혔을 경우 열기 버튼으로 포커스 이동

Screen Reader 음성 출력

• Sense Reader

  document title 헤딩1 링크 유료로 구매 가능합니다. 결제하시겠습니까?
  취소 버튼
  확인 버튼
  dialog 끝

• NVDA (한번에 쉬지않고 읽어줌)

  title 대화상자 유료로 구매 가능합니다. 결제하시겠습니까?
  title
  클릭 가능 헤딩 레벨 1 title 유료로 구매 가능합니다. 결제하시겠습니까?
  버튼 취소
  버튼 확인

• VoiceOver

  title, 머리말 레벨 1, title, 웹 경고 대화상자, 랜드마크
  유료로 구매 가능합니다. 결제하시겠습니까?
  취소, 버튼
  확인, 버튼, end, 알림, 웹 경고 대화상자

• TalkBack

  문서 title, 제목 1 , 유료로 구매 가능합니다. 결제하시겠습니까?
  title 제목 1
  유료로 구매 가능합니다. 결제하시겠습니까?
  취소 버튼
  확인 버튼

css

/*---------------------------------------------
  Dialog
 ----------------------------------------------*/
.c-dialog {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 901;
  width: 500px;
  max-height: 80%;
  background-color: #fff;

  &.is-active {
    display: block;
  }

  &__dim {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    background-color: #000;
    transition:opacity 0.5s ease-in;
  }
}

html.has-modal {
  overflow: hidden;
}

참고

• ARIA: alertdialog role
• ARIA: document role