Web Accessibility
Role & Attribute
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| role=”group” | X | O | X | X |
| aria-labelledby | X | O | X | X |
| aria-label(group) | X | O | X | X |
| aria-label(input) | O | O | O | O |
view
html
- TalkBack : 초점 분리 현상이 발생되어 input 또는 span에
aria-label및aria-hidden처리
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div id="★check-title">title</div>
<!-- 명시적 : title 있는 경우 -->
<div class="input-group" role="group" aria-labelledby="★check-title">
<!-- 명시적 : title 없는 경우 -->
<!-- <div class="input-group" role="group" aria-label="★title"> -->
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" id="★check1-1" name="★check1" checked>
<label class="label-check" for="★check1-1">on</label>
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" id="★check1-2" name="★check1">
<label class="label-check" for="★check1-2">off</label>
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" id="★check1-3" name="★check1" checked disabled>
<label class="label-check" for="★check1-3">on disabled</label>
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" id="★check1-4" name="★check1" disabled>
<label class="label-check" for="★check1-4">off disabled</label>
</span>
</div>
<!-- 암시적 -->
<div class="input-group" role="group" aria-label="★title">
<label class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check2" aria-label="★on" checked>
<span class="label-check" aria-hidden="true">on</span>
</label>
<label class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check2" aria-label="★off">
<span class="label-check" aria-hidden="true">off</span>
</label>
<label class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check2" aria-label="★on disabled" checked disabled>
<span class="label-check" aria-hidden="true">on disabled</span>
</label>
<label class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check2" aria-label="★off disabled" disabled>
<span class="label-check" aria-hidden="true">off disabled</span>
</label>
</div>
<!-- label 없는 경우 -->
<div class="input-group" role="group" aria-label="★title">
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name=★check3" aria-label="★on" checked>
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check3" aria-label="★off">
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check3" aria-label="★on disabled" checked disabled>
</span>
<span class="input-group__item">
<input type="checkbox" class="o-input o-input--check" name="★check3" aria-label="★off disabled" disabled>
</span>
</div>
Screen Reader 음성 출력
- Sense Reader (테스트 결과 동일)
선택 on 체크상자
해제 off 체크상자
선택 사용 불가 on disabled 체크상자
해제 사용 불가 off disabled 체크상자 - NVDA (테스트 결과 동일)
title 그룹 on 체크상자 선택됨
off 체크상자 해제됨 - VoiceOver (테스트 결과 동일)
on, 체크상자, 선택됨
off, 체크상자, 선택 해제됨
on disabled, 흐리게 표시됨, 체크상자, 선택됨
off disabled, 흐리게 표시됨, 체크상자, 선택 해제됨 - TalkBack (테스트 결과 동일)
선택됨 on 체크박스
선택안됨 off 체크박스
선택됨 on disabled 체크박스 사용할 수 없음
선택안됨 off disabled 체크박스 사용할 수 없음
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
33
34
35
36
37
38
39
// checkbox
.o-input--check {
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
border: 1px solid #ccc;
background-color: #fff;
vertical-align: top;
&:checked {
border-color: #009cff;
background: #fff url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Feedbin-Icon-check.svg/120px-Feedbin-Icon-check.svg.png") no-repeat 50% 50%/10px auto;
}
&:disabled {
border-color: #ccc;
background-color: #f4f4f4;
}
}
.label-check {
display: inline-block;
margin-left: 6px;
font-size: 13px;
line-height: 20px;
vertical-align: top;
}
// 기타
.input-group {
margin: -10px 0 0 -20px;
font-size: 0;
&__item {
display: inline-block;
margin: 10px 0 0 20px;
}
}
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// checkbox
.o-input--check {
display: inline-block;
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
&:focus + .label-check {
outline: 1px dotted #767676;
}
w
& + .label-check {
display: inline-block;
position: relative;
min-height: 20px;
padding-left: 20px;
font-size: 13px;
line-height: 20px;
text-indent: 10px;
cursor: pointer;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: #fff;
content: "";
}
&::after {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Feedbin-Icon-check.svg/120px-Feedbin-Icon-check.svg.png") no-repeat 50% 50%/10px auto;
opacity: 0;
content: "";
}
}
&:checked + .label-check {
&::before {
border-color: #009cff;
}
&::after {
opacity: 1;
}
}
&:disabled + .label-check {
&::before {
border-color: #ccc;
background-color: #f4f4f4;
}
&::after {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Feedbin-Icon-check.svg/120px-Feedbin-Icon-check.svg.png");
}
}
}
// 기타
.input-group {
margin: -10px 0 0 -20px;
&__item {
display: inline-block;
margin: 10px 0 0 20px;
}
}