UX 측면의 한국형 웹 콘텐츠 지침

사용자 측면의 웹 콘텐츠 지침

국내 환경의 웹 접근성 지침과 변경 사항에 대해 알아봅니다.

사용성 측면의 접근성 지침 자료

[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침 from Nts Nuli

KWCAG 2.1 기존 항목 + 추가된 항목(2개)

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

 2. 자막 제공 

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

 4. 명확한 지시사항 제공 

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

 6. 자동 재생 금지 

 7. 콘텐츠 간의 구분 

 8. 키보드 사용 보장 

 9. 초점 이동 

 10. 조작 가능 

 11. 응답시간 조절 

 12. 정지 기능 제공 

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

 14. 반복 영역 건너뛰기 

 15. 제목 제공 

 16. 적절한 링크 텍스트 

 17. 기본 언어 표시 

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

 19. 콘텐츠의 선형 구조 

 20. 표의 구성 

 21. 레이블 제공 

 22. 오류 정정 

 23. 마크업 오류 방지 

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

KWCAG 2.1 주요 개정 내용

소형 디스플레이와 터치기반 디바이스를 고려한 2개 검사항목이 추가되어 기존 22개 검사항목에서 24개 검사 항목으로 늘어남

1. IR(Image Replacement) 기법 사용시 display: none; visibility:hidden; 사용 금지

• W3C 표준에 부합되도록 스크린리더에서 display: none; visibility:hidden; 의 속성,값을 인식하지 않도록 개선되었음
• 해결 1 : text-indent, positon 등에 음수를 사용하거나 Box 요소의 크기를 작게하여 overflow: hidden; 을 사용
• 해결 2 : longdesc 사용(html5 제외)

2. '조작 가능' 검사 항목 추가

• 링크, 버튼 등 컨트롤(개체)의 크기를 6mm 이상으로 할 것을 권장하는 내용
• 사실상 모바일 웹을 고려하여 추가된 검사 항목임
• 디스플레이 크기 및 해상도에 따라 달라질 수 있는 내용으로 국가 표준 제안 시 디바이스 기준이 제시될 예정임

3. '콘텐츠 간의 구분' 검사 항목 추가

• 고정 간격, 테두리, 줄 맞춤, 무늬 등으로 구분하는 내용
• 디자인 상 거의 발생되지 않는 내용으로 권고(shall) 수준의 검사 항목

4. 확대 가능한 뷰일 경우 텍스트 콘텐츠 명도대비 3:1 도 충분

• PC 웹은 모두 해당되기 때문에 사실상 3:1 이 기준이 됨
• 모바일 웹은 <meta name=viewport ...> 등으로 확대를 막게되면 기존 원칙 적용이 가능

5. 반복 영역의 건너뛰기 링크를 시각화하기

• 화면에 링크가 디자인 되어 있거나 키보드로 링크에 접근할 시 시각적으로 나타나도록 함

6. 팝업창 제목 제공시 [팝업] 임을 명시(표시)해야 함

• <title>주소 찾기[팝업]</title>

7. 링크 텍스트는 context(문맥)을 통해 이해된다면 충분

• 리스트 항목, 탭메뉴 등에 '공지사항 더 보기' 와 같은 링크 텍스트는 논리적 순서에 따라 이해가 된다면 '더보기' 만으로 충분함
• 바로가기, 상세보기, 확인, 취소, 추가, Go 등과 같은 요소들과 형평성을 맞추기 위함

8. 자동 새 창[팝업]은 1개까지 공식적으로 허용

9. 시스템, 플랫폼 오류는 오류정정에 대한 기능 제공을 하는 것에 예외이다.

• ex) 계좌번호 오류 내용, 계좌 이체 시 은행등...  

참고 문헌

1. 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드

Jaehee's WebClub