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
<div id="★radio-title">성별</div>
<!-- 명시적 : title 있는 경우 -->
<div class="c-radio-box" role="group" aria-labelledby="★radio-title">
<!-- 명시적 : title 없는 경우 -->
<!-- <div class="c-radio-box" role="group" aria-label="★성별"> -->
<div class="c-radio-box__item">
<input type="radio" class="c-radio-box__input" name="★radio1" id="★radio1-1" checked>
<label class="c-radio-box__label" for="★radio1-1">남자</label>
</div>
<div class="c-radio-box__item">
<input type="radio" class="c-radio-box__input" name="★radio1" id="★radio1-2">
<label class="c-radio-box__label" for="★radio1-2">여자</label>
</div>
</div>
<!-- 암시적 -->
<div class="c-radio-box" role="group" aria-label="성별">
<label class="c-radio-box__item">
<input type="radio" class="c-radio-box__input" name="★radio2" aria-label="★남자" checked>
<span class="c-radio-box__label" aria-hidden="true">★남자</span>
</label>
<label class="c-radio-box__item">
<input type="radio" class="c-radio-box__input" name="★radio2" aria-label="★여자">
<span class="c-radio-box__label" aria-hidden="true">★여자</span>
</label>
</div>
Screen Reader 음성 출력
- Sense Reader (테스트 결과 동일)
선택 남자 라디오버튼
해제 여자 라디오버튼 - NVDA (테스트 결과 동일)
성별 그룹
남자 라디오 버튼 선택됨 2개 중 1번째 - VoiceOver (테스트 결과 동일)
남자, 선택 버튼, 선택됨, 총 2개 중 1번째
여자, 선택 버튼, 선택 해제됨, 총 2개 중 2번째 - TalkBack (테스트 결과 동일)
선택됨 남자 라디오 버튼
선택안됨 여자 라디오 버튼
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
35
36
37
38
39
40
41
42
43
44
45
46
// radio box
.c-radio-box {
display: flex;
&__item {
flex: 1;
}
&__input {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
&__label {
display: inline-block;
width: 100%;
height: 45px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 15px;
color: #888;
line-height: 43px;
text-align: center;
cursor: pointer;
}
&__input:checked + &__label {
position: relative;
z-index: 1;
border: 1px solid #009cff;
color: #009cff;
}
&__input:disabled + &__label {
background-color: #f4f4f4;
}
&__input:checked:disabled + &__label {
border-color: #000;
background-color: #f4f4f4;
color: #222;
}
}