Web Accessibility
Role & Attribute
view
html
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
<!-- label 요소가 있는 경우 -->
<span class="listbox-label" id="★list-label">★label</span>
<div class="listbox"> <!-- [D] 활성화시 is-active, 비활성화시 is-disabled, 에러시 has-error 클래스 추가 -->
<!--[D] select의 id, title 값과 option의 id, selected 값이 listbox에 적용되어야함
<select class="listbox__select" id="★list-button" title="★옵션을 선택하세요" aria-hidden="true">
<option id="★option-1-1" selected>★option 1-1</option>
<option id="★option-1-2">★option 1-2</option>
<option id="★option-1-3">★option 1-3</option>
</select>
-->
<button type="button" class="listbox__button" id="★list-button" aria-haspopup="listbox" aria-labelledby="★list-label ★list-button" aria-expanded="★false">★option 1</button>
<ul class="listbox__panel" role="listbox" aria-labelledby="★list-label" aria-activedescendant="★option-1-1" tabindex="-1">
<li class="listbox__item" id="★option-1-1" role="option" tabindex="0" aria-selected="true">★option 1-1</li> <!-- [D] 활성화시 is-active 클래스 생성 -->
<li class="listbox__item" id="★option-1-2" role="option" tabindex="0">★option 1-2</li>
<li class="listbox__item" id="★option-1-3" role="option" tabindex="0">★option 1-3</li>
</ul>
</div>
<!-- label 요소가 없는 경우 -->
<div class="listbox"> <!-- [D] 활성화시 is-active, 비활성화시 is-disabled, 에러시 has-error 클래스 추가 -->
<!-- [D] select의 id, title 값과 option의 id, selected 값이 listbox에 적용되어야함
<select class="hidden" id="★list-button2" title="★옵션을 선택하세요" aria-hidden="true">
<option id="★option-2-1" selected>★option 2-1</option>
<option id="★option-2-2">★option 2-2</option>
<option id="★option-2-3">★option 2-3</option>
</select>
-->
<button type="button" class="listbox__button" id="★list-button2" aria-haspopup="listbox" aria-labelledby="★list-button2" aria-expanded="★false">★option 2-1</button>
<ul class="listbox__panel" role="listbox" aria-label="★옵션을 선택하세요" aria-activedescendant="★option-2-1" tabindex="-1">
<li class="listbox__item" id="★option-2-1" role="option" tabindex="0" aria-selected="true">★option 2-1</li> <!-- [D] 활성화시 is-active 클래스 생성 -->
<li class="listbox__item" id="★option-2-2" role="option" tabindex="0">★option 2-2</li>
<li class="listbox__item" id="★option-2-3" role="option" tabindex="0">★option 2-3</li>
</ul>
</div>
Keyboard Interaction
- button : listbox__button
- enter, space, ALT + 방향키 : 리스트 열림/닫힘
- 방향키 : 위아래로 이동, 닫혔을 경우에도 이동
- home : 첫번째 옵션으로 이동
- end : 마지막 옵션으로 이동
- page up, page down : 옵션 3개씩 이동, 닫힌상태에서도 옵션 3개씩 이동
- esc : 리스트 닫히고 버튼으로 포커스 이동
script
- button : listbox__button
- aria-expanded : 활성화 true, 비활성화 false
- list : listbox__panel
- 버튼 선택시 list에 포커스 이동 및 방향키 포커스 갇힘
- li의 선택된 옵션 id값이 ul의 aria-activedescendant에 반영
- li 선택된 곳에 aria-selected=”true” 생성 및 이전 제거
- 리스트 열렸을때 현재 활성화된 option에 포커스
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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// listbox
.listbox {
$root : ".listbox";
position: relative;
&__select {
opacity: 0;
}
&__button {
overflow: hidden;
width: 100%;
height: 50px;
padding: 0 40px 0 20px;
border: 1px solid #d8d8d8;
border-radius: 6px;
background-color: #fff;
font-size: 15px;
color: #000;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
&::after {
display: block;
position: absolute;
top: 48%;
right: 20px;
transform: translateY(-50%) rotate(45deg);
border-width: 3px;
border-style: solid;
border-color: transparent #000 #000 transparent;
transition-property: transform;
transition-duration: 200ms;
content: "";
}
&:hover:not(:disabled),
&:focus {
border-color: #0076c0;
}
}
&__panel {
display: none;
overflow-y: auto;
position: absolute;
top: calc(100% - 1px);
left: 0;
z-index: 1;
width: 100%;
padding: 15px 20px;
border: 1px solid #0076c0;
border-top: none;
border-radius: 0 0 6px 6px;
background-color: #fff;
}
&__item {
padding: 9px 0;
font-weight: 700;
font-size: 15px;
line-height: 24px;
color: #000;
&:hover,
&:focus {
color: #0076c0;
}
}
&.is-active {
#{$root}__button {
border-color: #0076c0;
border-bottom: none;
border-radius: 6px 6px 0 0;
&::after {
top: 52%;
transform: translateY(-50%) rotate(225deg);
border-color: transparent #0076c0 #0076c0 transparent;
}
}
#{$root}__panel {
display: block;
}
}
&.is-disabled {
#{$root}__button {
border-color: #d8d8d8 !important;
background-color: #f8f8f8;
color: #555;
cursor: default;
}
}
&.has-error {
#{$root}__button {
border-color: #ff3c50 !important;
}
#{$root}__panel {
border-color: #ff3c50 !important;
}
}
}