-
2020.10.19 #TILTIL(today I learned) 2020. 10. 20. 13:19
오늘은 웹접근성 지침 중 초점이동, 조작가능, 정지기능 제공 지침을 배우고 CSS3 animation을 활용하여 햄버거 메뉴와 막대그래프를 만들었다.
1. 웹 접근성 지침(Web Accessibility)
한국형 웹콘텐츠 접근성 지침 2.1
1) 초점이동
- 초점의 이동 순서가 논리적이지 않으며 일관성이 없으면 안됨
* 대표적으로 로그인 화면에서 tab키를 눌러서 초점이동을 할때 조심해야함
- 초점 또는 키보드의 위치를 나타내는 요소가 시각적으로 표현되어야 함
* 초점이동시 디자인의 변화를 주거나 점선으로 표시되게끔 해야함
- 텍스트 등 운용할 수 없는 요소에는 초점이 되면 안됨
* 클릭 가능한 요소가 포커스 되어야 함(불필요한 초점 지양)
- 좌, 우 쓸기 동작을 할 경우 초점의 이동 순서가 논리적이로 일관성이 있어야함
* 주로 슬라이드형 배너에서 이전, 다음을 움직이는 제어버튼에서 목록 단추로 이동하고 세부 이미지로 초점이 넘어 가는 것이 바람직함
- 화면에 보이지 않거나 의미없는 개체에 초점이 되면 안됨
* 특히 의미없는 빈 링크가 초점되지 않도록 조심
* 주의사항 *
1. 초점은 순방향(tab)과 역방향(shift+tab) 모두 이동될 수 있어야 하나 역방향 이동 방식이 순방향과 완전히 일치하지 않더라도 이동에 무리가 없는 경우 준수한 것으로 인정
2. 페이지 로딩시, 제공되는 화면을 가리는 레이어 팝업 또는 모달창은 가장 먼저 초점이 접근되고 닫을 수 있도록 구현한 경우에 준수한 것으로 인정
3. 초점은 점선(outline-style: dotted;) 형태가 아니더라도 롤오버, 반전, 실선, 및줄 등 시각적으로 구분할 수 있으면 준수한 것으로 인정
4. 초기 초점이 검색 사이트의 검색창, 로그인페이지의 아이디 입력창 등 주 목적에 부합되는 영역으로 해당 사이트에서 일관되게 이동하는 경우는 준수한 것으로 둠(예외사항으로 둠)
2) 조작가능
- 2.1버전 신설, 모바일에 해당되는 기준
- 컨트롤의 크기가 대각선으로 6.0mm 이상 제공해야함
* 정사각이 아닌 형태일때 기준이 애매해짐
- 링크, 사용자입력, 기타 컨트롤의 테두리 안쪽으로 1px 이상의 여백을 제공해야함
* 링크, 버튼 등 터치나 클릭할 수 있는 요소는 터치영역(링크범위)를 적당하게 제공해야함
3) 정지 기능 제공
- 시간에 따라 변화하는 콘텐츠에 정지, 이전, 다음 기능을 제공해야함
* 대표적으로 슬라이드 되는 배너에 정지, 이전, 다음 버튼을 제공해야함
- 시간에 따라 변화하는 콘텐츠가 마우스와 키보드로 제어가 가능해야함
* 마우스 오버, 클릭 또는 키보드 tab키 초점시 등
* 주의사항 *
1. 변경되는 콘텐츠의 전체 내용을 한 번에 볼 수 있는 대체 수단을 제공한 경우 준수한 것으로 인정함
2. 키보드 포커스 및 마우스 오버시 콘텐츠의 변화가 멈춰지면 정지기능이 제공된 것으로 인정함
3. 검사 대상을 자동적으로 스크롤되는 배너, 자동 변경되는 실시간 검색 순위 등이 해당됨
2. 햄버거 메뉴 버튼 만들기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>햄버거 버튼</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn_all">
<a href="#">열기닫기</a>
</div>
</body>
</html>
CSS
body{
margin: 50px;
}
.btn_all{
width: 200px;
height: 200px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.btn_all a{
display: block;
width: 100%;
height: 40px;
background-color: rgba(51,51,51,1);
color: transparent;
text-decoration: none;
position: absolute; left: 0; top: 50%;
transform: translate(0, -50%);
transition: all .3s;
}
.btn_all a:before{
content: "";
width: 100%;
height: 40px;
background-color: rgba(51,51,51,1);
position: absolute; left: 0; bottom: 80px;
transition: all .3s;
}
.btn_all a:after{
content: "";
width: 100%;
height: 40px;
background-color: rgba(51,51,51,1);
position: absolute; left: 0; top: 80px;
transition: all .3s;
}
.btn_all:hover a{
background-color: rgba(51,51,51,0);
}
.btn_all:hover a:before{
position: absolute; left: 0; bottom: 0;
transform: rotate(45deg);
background-color:rgba(181, 144, 241,1);
}
.btn_all:hover a:after{
position: absolute; left: 0; top: 0;
transform: rotate(-45deg);
background-color: rgba(181, 144, 241,1);
}
결과
<hover 전>
<hover 후>3. 막대그래프 만들기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>막대그래프</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stack">
<span class="stack1" style="width: 75%;">75%</span>
<span class="stack2" style="width: 50%;">50%</span>
<span class="stack3" style="width: 25%;">25%</span>
</div>
</body>
</html>
CSS
body{
margin: 50px;
}
.stack{
width: 100%;
height: 40px;
border-radius: 20px;
}
.stack span{
margin: 0 0 20px;
padding: 0 20px 0 0;
display: block;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: right;
color: #fff;
box-sizing: border-box;
transition: all 2s;
animation: stack 2s 1;
}
.stack .stack1{
background-color: purple;
animation: stack 2s 1;
}
@keyframes stack{
0% {
width: 0;
color: rgba(255,255,255,0);
}
40% {
color: rgba(255,255,255,1);
}
100% {
width: 75%;
}
}
.stack .stack2{
background-color: skyblue;
animation: stack2 2s 1;
}
@keyframes stack2{
0% {
width: 0;
color: rgba(255,255,255,0);
}
40% {
color: rgba(255,255,255,1);
}
100% {
width: 50%;
}
}
.stack .stack3{
background-color: orange;
animation: stack3 2s 1;
}
@keyframes stack3{
0% {
width: 0;
color: rgba(255,255,255,0);
}
40% {
color: rgba(255,255,255,1);
}
100% {
width: 25%;
}
}
결과
- 창 새로고침하면 그래프가 0에서부터 각 width 값만큼 늘어나는 애니메이션
'TIL(today I learned)' 카테고리의 다른 글
2020.10.22 #TIL (0) 2020.10.22 2020.10.21 #TIL (0) 2020.10.22 2020.10.16 #TIL (0) 2020.10.16 2020.10.15 #TIL (0) 2020.10.16 2020.10.14 #TIL (0) 2020.10.15