IT 정보공간 - front-end & publisher

웹접근성 자료

웹접근성 연구소 심사비용

최초 인증심사는 일반기관은 2백만원, 공공기관은 1백만원의 수수료가 붙습니다.

갱신심사에는 일반기관은 80만원, 공공기관은 40만원의 수수료가 붙습니다.

심사절차 과정

온라인신청 ---> 신청접수 ---> 사전심사 ---> 결과확인 ---> 수수료납부 ---> 접수완료 ---> 인증심사 ---> 이의신청 ---> 인증심의 ---> 인증완료 ---> 인증서 수령

사전심사

자가진단과 서류심사로 이루어지며 제출후 수정 보안의 기회가 없다

자가진단결과와 제출서류, 심사범위등을 검토후 최종접수여부 확정

사전심사가 결과접수대상으로 확정이되면 5일이내에 납부하여야한다.

인증심의를 거치기전에 심사에 오류나 문제가있을경우에는 이의신청을 할수있다.

※ 대메뉴 (GNB)를 공유하는 영역은 핵심컨텐츠가 바뀌면 별도사이트로 구분되어서 인증마크를 따로 신청을해야한다.

웹접근성 지침사항

1. 적절한 대체텍스트 제공

이미지등 텍스트가 아닌 콘텐츠를 이용할 경우, 적절한 대체텍스트를 제공해야한다.
오류사항 (감점사항) & 해결방안
(1) img, input type="image" 등 이미지 요소에대해 alt속성을 제공하지않거나 다른내용을 표기하고있을떄
(2) 배너등에 행사명만 간단히적을때!! 이럴떄는 행사기간 및 장소등 해당관련된 자세한 내용을 기입해준다.
(3) 지도에 관련된 이미지는 상세하게 대체텍스트를 기입한다.
(4) 긴내용은 longdesc 속성을 이용해서 대체텍스트를 알려준다.
(5) longdesc 나 area(맵)요소에 대체텍스트를 작성하여도 alt 태그에도 해당 이미지에 내용을 설명해준다.
(6) 조직도같은 이미지 파일의 경우 대체텍스트를 제공시 조직간의 관계도 설명해주어야한다.
(7) QE코드같은 경우엔 이동주소정보등 대체텍스트 또는 설명,링크등을 제공해야함
(8) 배경이미지가 의미가 있는 정보라면 대체콘텐츠를 제공해야한다.
(9) 플래시등의 웹 어플리케이션같은 경우데도 대체텍스트등 제공하고 대체콘텐츠의 접근이 가능하게 해야한다.
주의사항
(1) longdesc를 제공하는경우 조직도와 같이 구조적인 정보는 html로 제공하는것이 원칙 , 하지만 구조적인 정보가아닌경우에는 txt로 정보를 제공해줘도 된다.

2. 자막제공

멀티미디어 콘텐츠(영상,음성)는 대체콘텐츠(자막,원고,수화)로 제공해주어야한다.
오류사항 (감점사항) & 해결방안
(1) 대체콘텐츠를 제공할경우에는 내용전체를 충분히 설명한다.

3. 색에 무관한 콘텐츠 인식

색에 의해 콘텐츠를 인식해야하는 경우에는 색을 배제하여도 인식할수있는 정보를 제공한다.
오류사항 (감점사항) & 해결방안
(1) 색상만으로 내용을 분별하도록 제공된 콘텐츠(그래프,차트,지도등) 감점
(2) 페이지 네비이션이나 메뉴, 현재위치 등을 색상의 변환만으로 현재위치를 표시하면 감점
(3) 필수입력 항목을 색으로만 표시한경우 감점
※ 하지만 글자에 밑줄을 표시하거나 글씨체나 글씨크기를 변경해서 구분을 가능하게해주면 준수한것으로 해당된다.

4. 명확한 지시사항 제공

지시사항은 모양,크기,위치,방향,색 소리등에 관계없이 인식될수있어야한다.
지시사항 정보를 특정 감각에 의존하지않고 다양한 감각을통해 용도나 목적을 이해할수있게 하여야한다.
주의사항
(1) 노인이나 약시자의 경우에는 브라우저의 글자체를 확대시켜 콘텐츠를 표시하면
콘텐츠의 위치가 지시하는 위치와 달라져서 혼란을 줄수있으므로 가급적이면 위치정보를 이용하여 지시하도록 콘텐츠를 구현해야한다.

5. 텍스트 콘텐츠의 명도대비

본문 콘텐츠에 한해서 텍스트나 이미지 텍스트 정보에 대해 폰트의 크기가 4.5:1이상의 명도대비를 제공해야 한다.
※ 이부분은 디자이너와 상의해야한다.
텍스트 크기가 18pt 미만 , 굵은 14pt 미만이면 명도대비 4.5 : 1
텍스트 크기가 18pt 이상, 또는 굵은14pt 이상이면 명도대비 3 : 1 만족해야함
이미지 텍스트의 경우 폰트종류와 상관없이 14pt 크기에 해당하는 18.66px 미만인경우에는 4.5 : 1 이상이거나
18.66px 이상인 경우에는 3 :1 을 만족해야함

6. 배경음 사용 금지

자동으로 재생되는 배경음을 사용하지 않아야 한다.
주의사항
3초 미만의 배경음은 상관이없다.
자동적으로 재생되는 배경음이 지속시간이 3초이상이지만 제어수단이 페이지의 가장 첫부분에 제공되는 경우에는 준수한것으로 인정한다.

7. 키보드 사용 보장

모든 기능은 키보드만으로 사용할 수 있어야 한다.
오류사항 (감점사항) & 해결방안
(1) 마우스로 제어할 수 있는 요소를 키보드로 제어할 수 없는 경우에는 감점처리된다.
(2)플래시 등의 부가 어플리케이션의 콘텐츠의 wmode 값의 설정으로 키보드의 이용이 불가능하여도 감점처리된다.
주의사항
(1) 웹접근성 품질인증 심사에서는 os의 편의와 보조기기의 호환을 위해 ie8브라우저에서 키보드 접근가능한지 테스트하므로
타 브라우저 및 ie의 타버전은 키보드여부를 판단하지않는다. 그러므로 ie8에서 키보드를 확인해야한다.
(2) onclick 이벤트 핸드러를 사용한 요소에 동등한 기능을 수행하는 onkeypess, onkeydown, onkeyup 이벤트 핸들러를 사용하여 키보드 제어가불가능하면 안된다.
(3) 지리정보 콘텐츠나 가상현실 콘텐츠의 경우는 예외로 인정한다. 하지만,
부가적인 검색, 이동 등 기타 인터페이스는 키보드만으로 사용할 수 있어야한다.
(4) 키보드를 이용하여 탭메뉴를 작동할경우에는 탭1 -> 탭2 -> 탭3 으로 이동하는것이 아니라
탭1 -> 탭1내용 -> 탭2 -> 탭2내용 -> 탭3 -> 탭3내용 이동하면서 내용을 인지하여야 할 수 있어야 한다.
(5) onfocus="this.blur();"를 사용하는 경우 키보드 접근은 물론 초점의 시각점 구분이 불가하고,
의도하지 않은 초점 변화가 실행되므로 검사항목 7,8,16에서 동시에 감점처리된다.
(6) 플래시 콘텐츠의 wmode 값은 기본적으로 transparent 또는 opque로 지정하게되면 MSAA를 사용할수 없어서 화면낭독기에서 불가능하므로 window 모드로 작업해주어야한다.

8. 초점 이동

키보드에 의한 초점은 논리적으로 이동해야하며 시작적으로 구별할수 있어야한다.
오류사항 (감점사항) & 해결방안
(1) Tab키와 Shift+Tab 키에 의한 초점의 이동순서는 논리적이며 일관성이 있어야 한다.
(2) 초점 또는 키보드의 위치를 나타내는 요소가 시각적으로 표시되어야 한다.
(3) area요소의 진행 순서에 의미가 있으나 키보드 접근순서가 의미와 일치하여야 한다.

9. 응답시간 조절

시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
오류사항 (감점사항) & 해결방안
(1) 페이지 내 이동시 회피할 수 있는 수단을 제공하여야한다.

10. 정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
오류사항 (감점사항) & 해결방안
(1) 자동으로 변경되는 콘텐츠의 움직임을 제어할 수 있어야 한다.
(2) 시간에 따라 변하는 콘텐츠의 이전,정지,다음 기능이 있어야 한다.
(3) 시간에 따라 변화하는 콘텐츠가 마우스와 키보드로 제어가 가능해야한다.

11. 깜빡임과 번쩍임 사용 제한

초당 3회 ~ 50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 제공하면 안된다.
오류사항 (감점사항) & 해결방안
(1) 깜빡임을 중단할 수 있는 수단을 제공했더라도 깜빡임을 미리 경고하여야 한다. 단,
깜빡임이 3초 미만인 경우에는 인정된다.

12. 반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
오류사항 (감점사항) & 해결방안
(1) 대메뉴등 반복되는 영역을 건너뛸수있는 링크를 제공한다.
주의사항
(1) 지나치게 많은 건너뛰기 링크를 제공하지 말아야한다. (3개 이내 권장)
(2) 건너뛰기에 키보드 접근이 불가능하면 검사항목 7,12에서 동시 감점처리된다.
(3) 건너뛰기링크는 display:none 으로 감추지않아야하며, 화면에서 볼수있어야한다. 하지만,
디자인특성상 보이지않게했다면, 키보드 초점을 받으면 링크가 표시되도록 구현해야한다.

13. 제목 제공

페이지,프레임,콘텐츠 블록에는 적절한 제목을 제공해야 한다.
오류사항 (감점사항) & 해결방안
(1) 페이지의 tit 속성을 제공하지않거나 내용과 다른의미의 제목이라면 감점처리된다.
(2) 페이지 제목에는 반복되는 특수문자를 제공하면 안된다.
(3) 페이지 제목의 분류가 더가능함에도 불구하고, 상위범주로 제목을 제공하면 감점처리된다.
(4) iframe , frame , fareaset 요소에 tit의 속성값을 정확히 적어준다. 내용이없는경우에는 "내용없음","빈프레임"으로 적어준다.
(5) 콘텐츠 본문영역에 포함된 콘텐츠 제목은 h1~h6 으로 제목을 제공해준다.

14. 적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
주의사항
(1) 목적이나 용도를 알기 어려운 링크 텍스트를 제공한경우에는 감점된다.
(2) 링크텍스트를 단순히 URL경로로만 제공하지 않아야한다.

15. 기본 언어 표시

주로 사용하는 언어를 명시해야 한다.
html에 lang 속성을 기본언어로 명시해주어야한다.

16. 사용자 요구에 따른 실행

사용자가 의도하지않은 기능(새창,초점변화등)은 실행되지 않아야 한다.
오류사항 (감점사항) & 해결방안
(1) 사용자가 실행하지 않은 상황에서 예측하지않은 새창이 열리는 경우는 감점처리된다.
(2) 웹 사이트 초기화면(메인페이지)에 팝업창(레이어 팝업창 포함)을 제공하는 경우는 감점처리된다.
(3) 사용자가 의도하지 않은 초점변화가 발생하면 감점처리된다.
(4) 체크상자의 선택, 텍스트 입력서식의 값 변경만으로 값이 제출되어 콘텐츠가 바뀌면 감점처리된다.

17. 콘텐츠의 선형화

콘텐츠는 논리적인 순서로 제공해야 한다.
ex) 탭1 -> 탭1내용 -> 탭2 -> 탭2내용 -> 탭3 -> 탭3내용

18. 표의구성

표는 이해하기 쉽게 구성해야 한다.
오류사항 (감점사항) & 해결방안
(1) caption 요소, summary 속성을 제공해주며, 적절한 용도나 설명을 제공해주어야한다.
(2) 테이터 테이블에 제목셀과 내용셀을 구분해주어야 한다.
(3) 제목 셀 및 내용 셀의 다단, 병합 등 복잡한 표를 제공시에는 header속성을 갖는
td,th의 id를 참조 또는 scope속성으로 th요소에 td요소의 범위를 지정해주어야한다.
※ caption 요소나 summary 속성은 둘중에 한개만 적절히 제공해줘도 된다.
caption 요소는 표의제목을, summary 속성에는 표의 요약, 구조나 탐색방법을 기술해주어야 한다.
caption 요소와 summary 속성을 같은용도로 사용하면 안된다.
레이아웃의 테이블에는 th , caption 요소 , summary속성을 사용하지 말아야한다.

19. 레이블 제공

입력 서식에는 대응하는 레이블을 제공해야 한다.
오류사항 (감점사항) & 해결방안
(1) input , textarea , select 요소에 1:1 대응하는 label요소 또는 title 속성을 제공해주어야 한다.
(2) input의 id와 label의 for가 다르거나, 페이지 안에 같은 id가 있는 경우에 감점처리 된다.
(3) select 요소의 첫번째 option이 레이블 역활을 대신하는 경우에 감점처리 된다.

20. 오류 정정

입력 오류를 정정할 수 있는 방법을 제공해야 한다.
오류사항 (감점사항) & 해결방안
(1) 입력서식을 잘못 작성한경우에 서식필드로 초점을 이동할수 있는 수단을 제공하여야 한다.
(2) 오류 발생 시, 정정할 수 있는 수단을 제공하여야 한다.
(3) 입력 정정방식 또는 내용을 잘못제공하면 감점처리된다.
(4) 오류가 있는 곳에만 오류를 표시하면 전맹이나 저시력자는 오류가 난 곳에 도달하기 전까지 알수가 없으므로,
먼저 오류의 내용을 텍스트로 설명해주고, 프로그램을 통해 오류가 난 위치에 도달하도록 유도해주며,
오류의 내용을 설명해 주어야 한다.

21. 마크업 오류 방지

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
오류사항 (감점사항) & 해결방안
(1) 태그의 열고 닫음의 오류 발생하면 감점처리된다.
(2) 태그의 중첩 오류 발생하면 감점처리된다.
(3) 중복 선언된 속성 오류 발생하면 감점처리된다.
※ 표준문법 오류는 감점처리되지 않는다.
프레임워크 또는 솔루션을 사용하는 만드는 웹 사이트의 경우(자바스크립트를 통해 동적으로 마크업을 그리는 경우 등)
소스보기에서 보여지는 소스대로 평가한다.

22. 웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
오류사항 (감점사항) & 해결방안
(1) 웹 애플리케이션의 자체 접근성을 준수 하여 제공하여야 한다.
(2) 웹 애플리케이션이 자체적인 접근성이 없으며, 사용자가 선택할 수 있는 대체 콘텐츠가 존재하지 않거나,
대체콘텐츠를 제공하더라도 핵심기능을 동등하게 제공하지 못하면 감점 처리된다.

CSS

!   !important,

pa   position:absolute;,

pos:r   position:relative;,

t   top:|;,

b   bottom:|;,

l   left:|;,

r   right:|;,



z   z-index:|;,

fl:l   float:left;,

fl:r   float:right;,


d:n   display:none;,

d:b   display:block;,

d:i   display:inline;,

d:ib   display:inline-block;,



v:v   visibility:visible;,

v:h   visibility:hidden;,



ov:v   overflow:visible;,

ov:h   overflow:hidden;,



ov:s   overflow:scroll;,

ovx:s   overflow-x:scroll;,

ovy:s   overflow-y:scroll;,

zoo   zoom:1;,


m   margin:|;,

mt   margin-top:|;,

mr   margin-right:|;,

mb   margin-bottom:|;,

ml   margin-left:|;,



p   padding:|;,

pt   padding-top:|;,

pr   padding-right:|;,

pb   padding-bottom:|;,

pl   padding-left:|;,



w   width:|;,

h   height:|;,



maw   max-width:|;,

mah   max-height:|;,

miw   min-width:|;,

mih   min-height:|;,



os   outline-style:|;,



bdcl:c   border-collapse:collapse;,



bd   border:|;,

bdt   border-top:|;,

bdr   border-right:|;,

bdb   border-bottom:|;,

bdl   border-left:|;,





bdrs   border-radius:|;,

bdtrrs   border-top-right-radius:|;,

bdtlrs   border-top-left-radius:|;,

bdbrrs   border-bottom-right-radius:|;,

bdblrs   border-bottom-left-radius:|;,





bg+   background:#FFF url(|) 0 0 no-repeat;,

bg:n   background:none;,



bgc   background-color:#FFF;,



bgi   background-image:url(|);,

bgi:n   background-image:none;,





bgr:n   background-repeat:no-repeat;,

bgr:x   background-repeat:repeat-x;,

bgr:y   background-repeat:repeat-y;,





bga:f   background-attachment:fixed;,

bga:s   background-attachment:scroll;,



bgp   background-position:0 0;,



c   color:#000;,



tbl:a   table-layout:auto;,

tbl:f   table-layout:fixed;,



lisp:i   list-style-position:inside;,

lisp:o   list-style-position:outside;,





list:n   list-style-type:none;,

list:d   list-style-type:disc;,

list:c   list-style-type:circle;,

list:s   list-style-type:square;,



lisi   list-style-image:|;,

lisi:n   list-style-image:none;,



va   vertical-align:|;,

va:t   vertical-align:top;,

va:m   vertical-align:middle;,

va:b   vertical-align:bottom;,

va:sub   vertical-align:sub;,

va:sup   vertical-align:super;,





ta:l   text-align:left;,

ta:c   text-align:center;,

ta:r   text-align:right;,





td:n   text-decoration:none;,

td:u   text-decoration:underline;,

td:o   text-decoration:overline;,

td:l   text-decoration:line-through;,



ti:-   text-indent:-9999px;,

lh   line-height:|;,





whs:p   white-space:pre;,

whs:nw   white-space:nowrap;,



wob:ba   word-break:break-all;,



wos   word-spacing:|;,

lts   letter-spacing:|;,



fz   font-size:|;,

ff   font-family:|;,

fw:b   font-weight:bold;,



f+   font:1em Arial,sans-serif;,



fs:i   font-style:italic;,

fs:o   font-style:oblique;,



op   opacity:|;,

op:ie   filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);,

op:ms   -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';,



cur:p   cursor:pointer;,

HTML 단축기

html:xt  XHTML 1.0



html:5  HTML5



a:  <a href="">



a:link:  <a href="http://|">



a:mail:  <a href="mailto:|">



link:css:  <link rel="stylesheet" type="text/css" href="${1:style}.css" media="all" />



link:print: <link rel="stylesheet" type="text/css" href="|print.css" media="print" />



meta:utf:  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />



style:   <style type="text/css">



script:   <script type="text/javascript">



script:src:  <script type="text/javascript" src="">



img:   <img src="" alt="" />



iframe:   <iframe src="" frameborder="0">



embed:   <embed src="" type="" />



form:   <form action="">



label:   <label for="">



input:h:  <input type="hidden" name="" />



input:t:   <input type="text" name="" id="" />



input:p:   <input type="password" name="" id="" />



input:c:   <input type="checkbox" name="" id="" />



input:r:   <input type="radio" name="" id="" />



input:f:   <input type="file" name="" id="" />



input:s:   <input type="submit" value="" />



input:i:   <input type="image" src="" alt="" />



input:reset:  <input type="reset" value="" />



input:b:   <input type="button" value="" />



select:   <select name="" id=""></select>



option:   <option value=""></option>



textarea:  <textarea name="" id="" cols="30" rows="10">

저장소 작업물 이관 ( 커밋 히스토리 포함 )

기존의 repository remote 제거

git remote remove origin

새로 생성한 repository remote 추가

git remote add origin https://github.com/[github_id]/[repo_name].git

코드 push

git push -u origin [branch name]

코드 push 에러날때(기존 작업물이 있을경우) 강제 푸쉬

git push -u origin [branch name] --force 

저장소 작업물 이관 (fork)

git clone https://github.com/UXstrategy/KCX.git

git remote add upstream https://github.com/kcxadmin/KCXWtsPublish.git

git remote -v
git pull https://github.com/kcxadmin/KCXWtsPublish.git main
git pull upstream main

gitignore 업데이트

git rm -r --cached .  
git add .  
git commit -m ".gitignore update"  
git push -u origin \[branch name(main)\]

android 디버깅 방법

설치 - adb
android studio
(단말기를 꽂았을 경우, device를 인식을 위해 필요)
참고 URL:
adb 설치 URL: https://developer.android.com/studio/releases/platform-tools?hl=ko
android 설치 URL: https://developer.android.com/studio?hl=ko

terminal(cmd)
adb devices 입력

XSS (크로스사이트 스크립트)

1. 정의
   크로스 사이트 스크립팅 (또는 사이트 간 스크립팅) 이라고 불리며 영문명칭은 cross-site scripting 로 영문약어는 xss 이다 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 사용자가 웹페이지에 악성 스크립트를 삽입할수 있는 취약점이다.

그래서 웹개발자들은 주로 xss필터를 고려하여 개발을 한다. sanitize-html 은 이러한 공격 기법을 막기위해 나온 nodejs의 모듈이다.

2. sanitize-html (보안 라이브러리)
   html의 input 또는 textarea 또는 기타등등의 사용자 입력정보에 이란 정보를 적을시 웹브라우저에서 저게 txt가 아닌 script 기술로 받아들여서 사용자가 이를 악용하여 악성스크립트를 집어넣을 수 있다.
   이것을 방어하기 위한 node의 패키지모듈로 (script,a) 등등 기타 태그들을
   변환시켜주어 악성스크립트로 변질되는 것을 막아주는 보안 라이브러리다.
3. XSS 유형

1). stored XSS

• 공격용 악성 스크립트가 공격 대상의 DB등에 보존되어 있는 경우를 지속형 XSS 라고 한다.
• 주로 게시판이나 방명록, 회원 정보 같은 사용자의 입력 값을 저장, 열람 할 수 있는 곳에서 발생한다.
  2) Reflected XSS
  • 공격용 악성 스크립트가 공격 대상의 사이트가 아닌 다른 사이트에 있는 경우 이를 반사형 XSS라고 한다.
  • 주로 사용자 입력 값이 필터링 없이 그대로 웹 브라우저에서 파싱되는 경우 발생한다.

HAML 이란?

Haml(HTML abstraction Markdup Language)은 인라인 코드를 사용하지 않고 모든 웹 문서의 HTML을 명확하고 간단하게 설명하는 데 사용되는 마크업 언어입니다. Haml은 대부분의 Ruby on Rails 애플리케이션에 사용되는 템플릿 언어인 PHP, ASP 및 ERB와 같은 인라인 페이지 템플레이팅 시스템을 대체합니다. 그러나 Haml은 템플릿 자체에 HTML을 명시적으로 코딩 할 필요가 없습니다. 동적 콘텐트를 생성하는 코드가 있는 HTML 자체에 대한 설명이기 때문입니다.

Haml

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

Html

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>