Web Accessibility
Role & Attribute
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| role=”tablist” | O | O | O | O |
| role=”tab” | O | O | O | O |
| role=”tabpanel” | X | O | X | O |
| aria-label | O | O | X | X |
| aria-labelledby | X | O | X | O |
| aria-selected | O | O | O | O |
| aria-controls | X | X | X | X |
참고
view
html
기본
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="c-tab">
<div class="c-tab__list" role="tablist" aria-label="★tab title">
<button type="button" class="c-tab__anchor" role="tab" aria-selected="true" aria-controls="★tab-panel-1" id="★tab-list-1">★button 1</button> <!-- [D] 활성화시 is-active 클래스 생성 -->
<button type="button" class="c-tab__anchor" role="tab" aria-selected="false" aria-controls="★tab-panel-2" id="★tab-list-2" tabindex="-1">★button 2</button>
<button type="button" class="c-tab__anchor" role="tab" aria-selected="false" aria-controls="★tab-panel-3" id="★tab-list-3" tabindex="-1">★button 3</button>
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-1" id="★tab-panel-1" tabindex="0"> <!-- [D] 활성화시 is-active 클래스 생성 -->
★panel 1
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-2" id="★tab-panel-2" tabindex="0">
★panel 2
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-3" id="★tab-panel-3" tabindex="0">
★panel 3
</div>
</div>
Keyboard Interaction
- button : c-tab__anchor
- space, enter : 탭패널 활성화
- 방향키 : 탭 버튼 요소 간 이동 (처음인 경우 마지막으로, 마지막인 경우 처음으로 이동 가능)
- home : 포커스를 첫번째 탭으로 이동
- end : 포커스를 마지막 탭으로 이동
script
- button : c-tab__anchor
- aria-selected : 활성화 true, 비활성화 false
- tabindex : 활성화 없음, 비활성화 -1
Screen Reader 음성 출력
- Sense Reader
tab title 페이지 탭 목록
선택 button 1 페이지 탭
button 2 페이지 탭
button 3 페이지 탭
panel 1 - NVDA
tab title 탭 컨트롤
button 1 탭 선택됨 3개 중 1번째
button 2 탭 3개 중 2번째
button 3 탭 3개 중 3번째
button 1 속성 페이지 panel 1 - VoiceOver
선택됨, button 1, 탭, 총 3개 중 1번째
button 2, 탭, 총 3개 중 2번째
button 2, 탭, 총 3개 중 3번째
panel 1 - TalkBack
선택됨, button 1, tab
button 2, tab
button 3, tab
button 1 tab panel
panel 1 (텍스트만 있으면 다음 포커스로 접근 안됨, 앵커 요소가 있어야 포커스 접근 가능 ?)
기본 & Sense Reader
헤딩 요소만 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="c-tab">
<div class="c-tab__list" role="tablist" aria-label="★tab title">
<button type="button" class="c-tab__anchor" role="tab" aria-selected="true" aria-controls="★tab-panel-1" id="★tab-list-1">★button 1</button> <!-- [D] 활성화시 is-active 클래스 생성 -->
<button type="button" class="c-tab__anchor" role="tab" aria-selected="false" aria-controls="★tab-panel-2" id="★tab-list-2" tabindex="-1">★button 2</button>
<button type="button" class="c-tab__anchor" role="tab" aria-selected="false" aria-controls="★tab-panel-3" id="★tab-list-3" tabindex="-1">★button 3</button>
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-1" id="★tab-panel-1" tabindex="0"> <!-- [D] 활성화시 is-active 클래스 생성 -->
<h2 class="sr-only">★button 1</h2>
★panel 1
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-2" id="★tab-panel-2" tabindex="0">
<h2 class="sr-only">★button 2</h2>
★panel 2
</div>
<div class="c-tab__panel" role="tabpanel" aria-labelledby="★tab-list-3" id="★tab-panel-3" tabindex="0">
<h2 class="sr-only">★button 3</h2>
★panel 3
</div>
</div>
script
- button : c-tab__anchor
- aria-selected : 활성화 true, 비활성화 false
Screen Reader 음성 출력
- Sense Reader
tab title 페이지 탭 목록
선택 button 1 페이지 탭
button 2 페이지 탭
button 3 페이지 탭
button 1 헤딩2 링크
panel 1 - NVDA
tab title 탭 컨트롤
button 1 탭 선택됨 3개 중 1번째
button 2 탭 3개 중 2번째
button 3 탭 3개 중 3번째
button 1 속성 페이지 button 1 헤딩 레벨 2 panel1 - VoiceOver
선택됨, button 1, 탭, 총 3개 중 1번째
button 2, 탭, 총 3개 중 2번째
button 3, 탭, 총 3개 중 3번째
button 1, 머리말 레벨 2
panel 1 - TalkBack
선택됨, button 1
button 2
button 3
button 1 tab panel
button 1 제목 2, panel 1 (텍스트만 있으면 다음 포커스로 접근 안됨, 앵커 요소가 있어야 포커스 접근 가능 ?)
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
/*---------------------------------------------
Tab
----------------------------------------------*/
.c-tab {
position: relative;
&__list {
display: flex;
height: 50px;
border-bottom: 1px solid #e3e3e3;
}
&__anchor {
display: block;
flex: 1;
&.is-active {
color: #009cff;
}
}
&__panel {
display: none;
&.is-active {
display: block;
}
}
}