2020.10.16 #TIL

TIL(today I learned)

2020.10.16 #TIL

노랑세희 2020. 10. 16. 23:07

오늘은 웹접근성 지침 중 자동재생 금지, 콘텐츠간 구분, 키보드사용 보장, 누르기 동작 지원을 공부했고 어제 배운 counter 명령어를 이용해서 간단한 약관을 만들어보았다. 약관은 form 요소 없이 간단하게 명령어를 사용해서 만들었다.

1. 웹 접근성 지침(Web Accessibility)

한국형 웹콘텐츠 접근성 지침 2.1

1) 자동재생 금지

- 자동적으로 재생되는 3초 이상의 배경음 콘텐츠를 제공하는 것은 부적절함

* 화면낭독기가 페이지를 읽는 음성과 자동 재생 배경음이 겹쳐서 낭독기 음성을 방해하기 때문에.

* autostart= "false"

- 마우스 오버나 키보드 초점을 받아 자동으로 배경음이 3초 이상 재생되는 경우도 부적절함

* 주의사항 *

1. 3초 미만의 배경음은 예외

2. 자동 재생 배경음의 제어수단이 페이지의 가장 첫 부분에 제공되는 경우 인정( 예. esc키를 눌러 바로 멈추는 등의 제어 기능을 제공해야함)

2) 콘텐츠 간의 구분

- 2.1버전부터 신살

- 콘텐츠의 가독성이 떨어지는 것을 방지

- 테두리를 이용하여 콘텐츠를 구분할 수 있음

* 성격이 다른 콘텐츠를 테두리로 분리하는 것

- 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분할 수 있음

* 명확한 선을 사용하여 시각적으로 표현해야함

- 서로 다른 무늬를 이용하여 영역을 구분할 수 있음

- 콘텐츠 배경색 간의 명도 대비(채도)를 달리하여 구분할 수 있음

- 테두리는 배경색과의 명도 대비를 4.5:1 이상으로 제공해야 인정함

- 줄간격 및 글자 간격을 조정하여 구분하는 경우에 확실한 간격(여백)을 제공해야함

- 기타 콘텐츠를 시각적으로 구분할 수 있도록 제공해야함

3) 키보드 사용 보장

- 주로 시각, 지체 장애인 등 마우스 사용이 어려운 사람을 대상으로 함

- 키보드로 접근 및 운용이 가능하도록 제공해야 함

* 주로 키보드의 tab키를 사용하는데, tab하면 선택영역이 생성되어야 함 이 초점이 시각적으로 안보이면 오류임

- 스크롤 되는 콘텐츠는 키보드로도 운용이 가능해야 함

* 블럭요소에 스크롤을 생성하는 overflow: auto;는 기본적으로 키보드로 스크롤을 제어할 수 없음 따라서 tabindex="0" 을 주어서 강제 초점을 맞춰줘야 함

4) 누르기 동작 지원

- 2.1 버전에서 신설

- 다중 누르기 동작을 대체할 수 있는 방법을 제공해야함

* 다중 누르기 = 양손 터치

* 예를 들어 지도 화면에서 양손가락으로 오므리고 피면서 확대 축소가 가능한 것이 일반적인데 손이 없거나 불편한 장애인은 팔꿈치를 사용하기 때문에 양손터치를 대체할 방법(이를테면 +,- 버튼 제공)을 제공해야함

- 슬라이드, 끌기, 놓기 등의 복잡한 동작을 단순한 누르기 동작으로 대체할 수 있는 방법을 제공해야함

* 슬라이드, 드래그 앤 드롭으로 이용하는 것은 반드시 단순 클릭으로도 가능하도록 제공해야함

- 블루투스 키보드 등을 이용할 경우를 위해 pc웹과 같이 모든 기능을 키보드로 접근 및 운용할 수 있도록 제공해야함

* 블루투스 키보드는 주로 모바일 기기와 함께 사용하기 때문에 이 지침은 모바일 웹 앱에서 키보드 사용이 가능해야함을 의미함

2. counter로 약관 만들기

HTML

<!DOCTYPE html>

<head>

<title>counter</title>

</head>

<body>

<p>위치정보 이용약관에 동의하시면, 위치를 활용한 광고 정보 수신 등을 포함하는 네이버 위치기반 서비스를 이용할 수 있습니다.</p>

<P>

이 약관은 네이버 주식회사 (이하 “회사”)가 제공하는 위치정보사업 또는 위치기반서비스사업과 관련하여 회사와 개인위치정보주체와의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로

합니다.

</P>

<P>

이 약관에 명시되지 않은 사항은 위치정보의 보호 및 이용 등에 관한 법률, 정보통신망 이용촉진 및 정보보호 등에 관한 법률, 전기통신기본법, 전기통신사업법 등 관계법령과 회사의 이용약관 및

개인정보처리방침, 회사가 별도로 정한 지침 등에 의합니다.

</P>

<ol>

<li>회사는 직접 위치정보를 수집하거나 위치정보사업자인 이동통신사로부터 위치정보를 전달받아 아래와 같은 위치기반서비스를 제공합니다.

<ol>

<li>Geo Tagging 서비스: 게시물에 포함된 개인위치정보주체 또는 이동성 있는 기기의 위치정보가 게시물과 함께 저장됩니다.</li>

<li>위치정보를 활용한 검색결과 제공 서비스: 정보 검색을 요청하거나 개인위치정보주체 또는 이동성 있는 기기의 위치정보를 제공 시 본 위치정보를 이용한 검색결과 및 주변결과(맛집,

주변업체, 교통수단 등)를 제시합니다.</li>

<li>위치정보를 활용한 친구찾기 및 친구맺기: 현재 위치를 활용하여 친구를 찾아주거나 친구를 추천하여 줍니다.</li>

<li>연락처 교환하기: 위치정보를 활용하여 친구와 연락처를 교환할 수 있습니다.</li>

<li>이용자 위치를 활용한 광고정보 제공: 검색결과 또는 기타 서비스 이용 과정에서 개인위치정보주체 또는 이동성 있는 기기의 위치를 이용하여 광고소재를 제시합니다.</li>

<li>이용자 보호 및 부정 이용 방지: 개인위치정보주체 또는 이동성 있는 기기의 위치를 이용하여 권한없는 자의 비정상적인 서비스 이용 시도 등을 차단합니다.</li>

<li>위치정보 공유: 개인위치정보주체 또는 이동성 있는 기기의 위치정보를 안심귀가 등을 목적으로 지인 또는 개인위치정보주체가 지정한 제3자에게 공유합니다.</li>

<li>길 안내 등 생활편의 서비스 제공: 교통정보와 길 안내 등 최적의 경로를 지도로 제공하며, 주변 시설물 찾기, 뉴스/날씨 등 생활정보, 긴급구조 서비스 등 다양한 운전 및

생활 편의 서비스를 제공합니다.</li>

</ol>

</li>

<li>제1항 위치기반서비스의 이용요금은 무료입니다.</li>

</ol>

<h3>(개인위치정보주체의 권리)</h3>

<ol>

<li>개인위치정보주체는 개인위치정보 수집 범위 및 이용약관의 내용 중 일부 또는 개인위치정보의 이용ㆍ제공 목적, 제공받는 자의 범위 및 위치기반서비스의 일부에 대하여 동의를 유보할 수

있습니다.</li>

<li>개인위치정보주체는 개인위치정보의 수집ㆍ이용ㆍ제공에 대한 동의의 전부 또는 일부를 철회할 수 있습니다.</li>

<li>개인위치정보주체는 언제든지 개인위치정보의 수집ㆍ이용ㆍ제공의 일시적인 중지를 요구할 수 있습니다. 이 경우 회사는 요구를 거절하지 아니하며, 이를 위한 기술적 수단을 갖추고 있습니다.</li>

<li>개인위치정보주체는 회사에 대하여 아래 자료의 열람 또는 고지를 요구할 수 있고, 당해 자료에 오류가 있는 경우에는 그 정정을 요구할 수 있습니다. 이 경우 회사는 정당한 이유 없이

요구를 거절하지 아니합니다.

<ol>

<li>개인위치정보주체에 대한 위치정보 수집ㆍ이용ㆍ제공사실 확인자료</li>

<li>개인위치정보주체의 개인위치정보가 위치정보의 보호 및 이용 등에 관한 법률 또는 다른 법령의 규정에 의하여 제3자에게 제공된 이유 및 내용</li>

</ol>

</li>

<li>회사는 개인위치정보주체가 동의의 전부 또는 일부를 철회한 경우에는 지체 없이 수집된 개인위치정보 및 위치정보 수집ㆍ이용ㆍ제공사실 확인자료를 파기합니다. 단, 동의의 일부를 철회하는

경우에는 철회하는 부분의 개인위치정보 및 위치정보 수집ㆍ이용ㆍ제공사실 확인자료에 한합니다.</li>

<li>개인위치정보주체는 제1항 내지 제4항 의 권리행사를 위하여 이 약관 제13조의 연락처를 이용하여 회사에 요구할 수 있습니다.</li>

</ol>

<h3>(법정대리인의 권리)</h3>

<ol>

<li>회사는 만14세 미만 아동으로부터 개인위치정보를 수집ㆍ이용 또는 제공하고자 하는 경우에는 만14세 미만 아동과 그 법정대리인의 동의를 받아야 합니다.</li>

<li>법정대리인은 만14세 미만 아동의 개인위치정보를 수집ㆍ이용ㆍ제공에 동의하는 경우 동의유보권, 동의철회권 및 일시중지권, 열람ㆍ고지요구권을 행사할 수 있습니다.</li>

</ol>

<h3>(위치정보 이용ㆍ제공사실 확인자료 보유근거 및 보유기간)</h3>

<P>

회사는 위치정보의 보호 및 이용 등에 관한 법률 제16조 제2항에 근거하여 개인위치정보주체에 대한 위치정보 수집ㆍ이용ㆍ제공사실 확인자료를 위치정보시스템에 자동으로 기록하며, 6개월 이상

보관합니다.

</P>

<ol>

<li>회사는 위치정보사업자의 정책변경 등과 같이 회사의 제반 사정 또는 법률상의 장애 등으로 서비스를 유지할 수 없는 경우, 서비스의 전부 또는 일부를 제한, 변경하거나 중지할 수 있습니다.</li>

<li>제1항에 의한 서비스 중단의 경우에는 회사는 사전에 인터넷 등에 공지하거나 개인위치정보주체에게 통지합니다.</li>

</ol>

<h3>(개인위치정보 제3자 제공시 즉시 통보)</h3>

<ol>

<li>회사는 개인위치정보주체의 동의 없이 당해 개인위치정보주체의 개인위치정보를 제3자에게 제공하지 아니하며, 제3자 제공 서비스를 제공하는 경우에는 제공 받는 자 및 제공목적을 사전에

개인위치정보주체에게 고지하고 동의를 받습니다.</li>

<li>회사는 개인위치정보를 개인위치정보주체가 지정하는 제3자에게 제공하는 경우에는 개인위치정보를 수집한 당해 통신단말장치로 매회 개인위치정보주체에게 제공받는 자, 제공일시 및 제공목적을 즉시

통보합니다.</li>

<li>다만, 아래에 해당하는 경우에는 개인위치정보주체가 미리 특정하여 지정한 통신단말장치 또는 전자우편주소 등으로 통보합니다.

<ol>

<li>개인위치정보를 수집한 당해 통신단말장치가 문자, 음성 또는 영상의 수신기능을 갖추지 아니한 경우</li>

<li>개인위치정보주체가 개인위치정보를 수집한 당해 통신단말장치 외의 통신단말장치 또는 전자우편주소 등으로 통보할 것을 미리 요청한 경우</li>

</ol>

</li>

</ol>

<h3>(8세 이하의 아동 등의 보호의무자의 권리)</h3>

<ol>

<li>회사는 아래의 경우에 해당하는 자(이하 “8세 이하의 아동”등이라 한다)의 보호의무자가 8세 이하의 아동 등의 생명 또는 신체보호를 위하여 개인위치정보의 이용 또는 제공에 동의하는

경우에는 본인의 동의가 있는 것으로 봅니다.

<ol>

<li>장애인복지법제2조제2항제2호의 규정에 의한 정신적 장애를 가진 자로서 장애인고용촉진및직업재활법 제2조제2호의 규정에 의한 중증장애인에 해당하는 자(장애인복지법 제29조의

규정에 의하여 장애인등록을 한 자에 한한다)</li>

</ol>

</li>

<li>8세 이하의 아동 등의 생명 또는 신체의 보호를 위하여 개인위치정보의 이용 또는 제공에 동의를 하고자 하는 보호의무자는 서면동의서에 보호의무자임을 증명하는 서면을 첨부하여 회사에

제출하여야 합니다.</li>

<li>보호의무자는 8세 이하의 아동 등의 개인위치정보 이용 또는 제공에 동의하는 경우 개인위치정보주체 권리의 전부를 행사할 수 있습니다.</li>

</ol>

<P>

개인위치정보주체는 회사의 위치정보의 보호 및 이용 등에 관한 법률 제15조 내지 26조의 규정을 위반한 행위로 손해를 입은 경우에 회사에 대하여 손해배상을 청구할 수 있습니다. 이 경우 회사는

고의 또는 과실이 없음을 입증하지 아니하면 책임을 면할 수 없습니다.

</P>

<ol>

<li>회사는 위치정보와 관련된 분쟁에 대하여 개인위치정보주체와 협의가 이루어지지 아니하거나 협의를 할 수 없는 경우에는 방송통신위원회에 재정을 신청할 수 있습니다.</li>

<li>회사 또는 개인정보위치 주체는 위치정보와 관련된 분쟁에 대해 당사자간 협의가 이루어지지 아니하거나 협의를 할 수 없는 경우에는 개인정보보호법에 따라 개인정보분쟁조정위원회에 조정을

신청할 수 있습니다.</li>

</ol>

<P>

회사의 상호, 주소, 전화번호 그 밖의 연락처는 다음과 같습니다.

</P>

</div>

</body>

</html>

CSS

margin: 0;

padding: 0;

list-style: none;

}

.agree{

margin: 0 auto;

padding: 0 50px 50px;

width: 1000px;

background: #eee;

}

.agree h2{

padding: 30px 0;

font-size: 18px;

counter-reset: h3;

}

.agree h3:before{

content: "제 "counter(h3) " 조 "; counter-increment: h3 1;

}

.agree h3{

margin: 20px 0;

counter-reset: ol;

}

.agree> ol{

margin: 30px 0 30px 30px;

}

.agree> ol> li:before{

content: counter(ol);

counter-increment: ol 1;

margin: 0 10px 0 0;

display: inline-block;

width: 12px;

height: 12px;

line-height: 12px;

text-align: center;

border: 1px solid #222;

border-radius: 100%;

color: #222;

font-size: 11px;

}

.agree> ol> li {

counter-reset: ol2;

}

.agree> ol> li> ol> li:before{

content: counter(ol2)". ";

counter-increment: ol2 1;

}

.agree> ol> li> ol> li{

padding: 0 0 0 30px;

text-align: justify;

}

* counter를 이용해서 h3, 1dep의 li, 2dep의 li 앞에 순번이 자동 카운팅 되도록 만들었음

* counter-reset 적용 요소에 대하여 좀 더 깊은 공부가 필요함

결과