Web Accessibility
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| role=”switch” | O | X | X | O |
view
html
- TalkBack : 초점 분리 현상이 발생되어 input 또는 span에
aria-label및aria-hidden처리 - 명시적 label 없는 경우 TalkBack에서 초점 분리 현상이 발생하기 때문에 ie를 지원하지 않을 경우 다른 방식으로 제공
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 명시적 : label 있는 경우 -->
<div>
<input type="checkbox" class="o-input o-input--switch" id="switch-check" role="switch">
<label class="label-switch" for="switch-check">switch</label>
</div>
<!-- 명시적 : label 없는 경우 --> <!-- TalkBack 초점 분리 현상 이슈 있음 -->
<input type="checkbox" class="o-input o-input--switch" id="switch-check2" role="switch">
<label class="label-switch" for="switch-check2"><span class="sr-only">switch</span></label>
<!-- 암시적 : label 있는 경우 -->
<label>
<input type="checkbox" class="o-input o-input--switch" aria-label="switch" role="switch">
<span aria-hidden="true">switch</span>
</label>
<!-- 암시적 : label 없는 경우 -->
<input type="checkbox" class="o-input o-input--switch" aria-label="switch" role="switch">
Screen Reader 음성 출력
- Sense Reader (테스트 결과 동일)
해제 switch 체크상자
role=”switch” 이 있는 경우 : “switch 버튼” / 다시 재 접근했을 경우 “선택, 선택 switch 버튼” 읽어줌 - NVDA (테스트 결과 동일)
switch 체크상자 해제됨
- VoiceOver (테스트 결과 동일)
switch, 체크상자, 선택 해제됨
- TalkBack (테스트 결과 동일)
선택안됨 switch 체크박스
role=”switch” 이 있는 경우 : “switch 전환” / 선택하는 순간 “켜짐, 꺼짐” 텍스트 읽어줌
css
- ie에서는 checkbox custom 불가
ie 제외
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
// checkbox switch
.o-input--switch {
display: inline-block;
position: relative;
width: 50px;
height: 30px;
border-radius: 14px;
background-color: #ccc;
cursor: pointer;
&::after {
display: block;
position: absolute;
top: 1px;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
transition: all 300ms;
transform: translateX(1px);
content: "";
}
&:checked {
background-color: #009cff;
&::after {
transform: translateX(21px);
}
}
}
ie 포함
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
35
36
37
38
39
40
41
42
// checkbox switch
.o-input--switch {
display: inline-block;
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
& + .label-switch {
display: inline-block;
position: relative;
width: 50px;
height: 30px;
border-radius: 14px;
background-color: #ccc;
vertical-align: middle;
cursor: pointer;
&::after {
display: block;
position: absolute;
top: 1px;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
transition: all 300ms;
transform: translateX(1px);
content: "";
}
}
&:checked + .label-switch {
background-color: #009cff;
&::after {
transform: translateX(21px);
}
}
}