Web Accessibility
Role & Attribute
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| role=”dialog” | O | O | O | X |
| aria-modal | X | - | - | - |
| aria-labelledby | O | O | O | X |
| aria-describedby | X | O | X | X |
| aria-haspopup=”dialog” | O | O | O | O |
| aria-controls | X | X | X | X |
aria-haspopup="dialog" : VoiceOver, TalkBack 에서 button 태그일때만 읽어줌
view
html
- 버튼의
data-js-modal와 modal의id동일하게 적용 (연결하는 경우) - 버튼의
aria-controls와 modal의id동일하게 적용 -
aria-labelledby와 heading 타이틀id동일하게 적용 -
aria-describedby는 필요한 경우에만 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="l-wrap">
<button type="button" class="o-button" aria-haspopup="dialog" aria-controls="★modal-id" data-js-modal="#★modal-id" title="레이어 팝업 열기">modal</button>
</div>
<!-- modal -->
<div class="c-modal" role="dialog" aria-modal="true" aria-labelledby="★modal-title" id="★modal-id"> <!-- [D] 활성화시 is-active 클래스 생성 -->
<div class="c-modal__dim" aria-hidden="true"></div>
<div class="c-modal__inside" role="document" tabindex="-1">
<h1 class="c-modal__title" id="★modal-title">title</h1>
<div class="c-modal__body" tabindex="0"> <!-- 스크롤 생기려면 css height 값과 tabindex="0" 필요 -->
content
</div>
<div class="c-modal__foot">
<button type="button" class="o-button c-modal__button">확인</button>
<button type="button" class="o-button c-modal__button">취소</button>
<button type="button" class="o-button c-modal__close"><span class="sr-only">레이어 팝업 닫기</span></button>
</div>
</div>
</div>
<!-- // modal -->
Keyboard Interaction
- esc : modal 닫혀야함
script
- modal 활성화 시 페이지에 스크롤 되는것을 막기위해 html 또는 body에
.has-modal클래스 추가 - modal 활성화 시
aria-modal미지원 스크린 리더를 위해 modal이 포함된 영역 이외의 모든 영역에
aria-hidden="true"적용 (모바일의 경우 가상 커서가 가둬지지 않음) - modal 안에 포커스 가두는 작업 필요함, 2가지 방법을 일반적으로 사용
- 스크립트로 modal안에 강제로 포커스를 가둠, 위치에 상관없이 사용이 가능
- 컨텐츠를 감싼 l-wrap에 modal이 활성화 될 경우에만
tabindex="-1"추가
단 l-wrap안에 dialog이 있으면 안되고 밖에 위치해야함
- modal이 닫혔을 경우 열기 버튼으로 포커스 이동
Screen Reader 음성 출력
- Sense Reader
modal 풀다운 버튼메뉴
title dialog 시작 (2-1 / 1)
title 헤딩1
content
확인 버튼
취소 버튼
레이어 팝업 닫기 버튼
dialog 끝 - NVDA
modal 메뉴 버튼 하위 메뉴 레이어 팝업 열기
title 대화상자
헤딩 레벨 1 title
content
버튼 확인
버튼 취소
버튼 레이어 팝업 닫기 - VoiceOver
modal, 팝업 버튼, 대화 팝업, 레이어 팝업 열기
title, 머리말 레벨 1, title, 웹 대화상자, 랜드마크
content
확인 버튼
취소 버튼
레이어 팝업 닫기, 버튼, end, title, 웹 대화상자 - TalkBack
modal, 대화상자 팝업 버튼, 레이어 팝업 열기
문서 title 제목 1
title 제목 1
content
확인 버튼
취소 버튼
레이어 팝업 닫기 버튼
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*---------------------------------------------
Modal
----------------------------------------------*/
.c-modal {
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;
}
}
.has-modal {
overflow: hidden;
}