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
<div id="★radio-title">title</div>
<!-- 명시적 : title 있는 경우 -->
<div class="input-group" role="group" aria-labelledby="★radio-title">
<!-- 명시적 : title 없는 경우 -->
<!-- <div class="input-group" role="group" aria-label="★title"> -->
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" id="★radio1-1" name="★radio1" checked>
<label class="label-radio" for="★radio1-1">on</label>
</span>
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" id="★radio1-2" name="★radio1">
<label class="label-radio" for="★radio1-2">off</label>
</span>
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" id="★radio1-3" name="★radio1" disabled>
<label class="label-radio" for="★radio1-3">disabled</label>
</span>
</div>
<!-- 암시적 -->
<div class="input-group" role="group" aria-label="★title">
<label class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio2" aria-label="★on" checked>
<span class="label-radio" aria-hidden="true">on</span>
</label>
<label class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio2" aria-label="★off">
<span class="label-radio" aria-hidden="true">off</span>
</label>
<label class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio2" aria-label="★disabled" disabled>
<span class="label-radio" aria-hidden="true">disabled</span>
</label>
</div>
<!-- label 없는 경우 -->
<div class="input-group" role="group" aria-label="★title">
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio3" aria-label="★on" checked>
</span>
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio3" aria-label="★off">
</span>
<span class="input-group__item">
<input type="radio" class="o-input o-input--radio" name="★radio3" aria-label="★disabled" disabled>
</span>
</div>
Screen Reader 음성 출력
- Sense Reader (테스트 결과 동일)
선택 on 라디오버튼
해제 off 라디오버튼
해제 사용 불가 disabled 라디오버튼 - NVDA (테스트 결과 동일)
title 그룹
on 라디오 버튼 선택됨 3개 중 1번째 - VoiceOver (테스트 결과 동일)
on, 선택 버튼, 선택 됨, 총 3개 중 1번째
off 선택 버튼, 선택 해제됨, 총 3개 중 2번째
disaabled, 흐리게 표시됨, 선택 버튼, 선택 해제됨, 총 3개 중 3번째 - TalkBack (테스트 결과 동일)
선택됨 on 라디오 버튼
선택안됨 off 라디오 버튼
선택안됨 disabled 라디오 버튼 사용할 수 없음
css
- ie에서는 radio 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// radio
.o-input--radio {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
margin: 0;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
vertical-align: top;
&:after {
display: block;
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #009cff;
opacity: 0;
content: "";
}
&:checked {
border-color: #009cff;
&:after {
opacity: 1;
}
}
&:disabled {
border-color: #ccc;
background-color: #f4f4f4;
&:after {
background-color: #ccc;
}
}
}
.label-radio {
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
80
81
// radio
.o-input--radio {
display: inline-block;
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
&:focus + .label-radio {
outline: 1px dotted #767676;
}
& + .label-radio {
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;
border-radius: 50%;
background-color: #fff;
content: "";
}
&::after {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #009cff;
opacity: 0;
content: "";
}
}
&:checked + .label-radio {
&::before {
border-color: #009cff;
}
&::after {
opacity: 1;
}
}
&:disabled + .label-radio {
&::before {
border-color: #ccc;
background-color: #f4f4f4;
}
&::after {
background-color: #ccc;
}
}
}
// 기타
.input-group {
margin: -10px 0 0 -20px;
&__item {
display: inline-block;
margin: 10px 0 0 20px;
}
}