Web Accessibility
Role & Attribute
view
html
1
2
3
4
5
6
<div class="c-counter" data-js="counter">
<button type="button" class="o-button c-counter__decrease" data-js="counter__decrease" aria-label="수량 감소"></button> <!-- [D] 비 활성화시 disabled -->
<input type="number" class="o-input c-counter__number" data-js="counter__number" aria-label="수량" value="1" min="1" max="10" maxlength="3" pattern="\d*" readonly> <!--[D] max값 변경 -->
<span class="sr-only" aria-live="assertive" aria-relevant="additions" aria-atomic="true"><!-- 텍스트가 추가 되었다가 사라짐, 수량 증가 2, 수량 감소 1 --></span>
<button type="button" class="o-button c-counter__increase" data-js="counter__increase" aria-label="수량 증가"></button>
</div>
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
.c-counter {
display: inline-block;
overflow: hidden;
height: 30px;
background-color: #fff;
font-size: 0;
vertical-align: top;
&__decrease,
&__increase {
position: relative;
width: 30px;
height: 100%;
border: 1px solid #ccc;
background-color: #fff;
vertical-align: top;
cursor: pointer;
&::before,
&::after {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin: -1px 0 0 -5px;
background-color: #222;
content: "";
}
&[disabled] {
background-color: #f4f4f4;
&::after,
&::before {
background-color: #ccc;
}
}
}
&__increase {
&::before {
transform: rotate(-90deg);
}
}
&__number {
width: 40px;
height: 100%;
margin: 0 -1px;
border: 1px solid #ccc;
font-size: 15px;
line-height: 28px;
text-align: center;
color: #222;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
display: none;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
}
}