체크리스트

웹표준관련 업무수행시 체크해야하는 확인 사항들로 내부체크리스트와 외주 대행업무 전달시 함께 지켜져야 하는 CP가이드의 체크리스트가 통합적으로 정리되어 있습니다.

 

체크리스트 표

항목				CP	내부	확인	비고
웹표준	(필수) HTML validator 통과했는가?			O	O
	(필수) CSS validator 통과했는가?			O	O
코딩컨벤션	(필수) Cross Browsing 되는가?	Web(Window)	IE11	O	O
			IE10	O	O
			IE9	O	O
			IE8	O	O
			FF/Chrome/Safari/Opera (최신)	O	O
		Web(Mac)	FF/Chrome/Safari/Opera (최신)	O	O
		Mobile(Android)	Android 4.1	O	O
			Android 4.3	O	O
			Android 4.2	O	O
			Android 4.0	O	O
			Android 2.3	O	O
			Android 2.2	O	O
		Mobile(iOS)	iOS 7.x	O	O
			iOS 6.x	O	O
			iOS 5.x	O	O
	해당서비스의 Doctype을 따르고 있는가?			O	O
	레이아웃 가이드를 따르고 있는가?			권장	O
	heading룰이 지켜졌는가?			권장	O
	Link 가이드룰이 지켜졌는가?			O	O
	image 가이드룰이 지켜졌는가?			O	O
	image가 가이드맞게 Sprite 되었는가?				O
	링크영역이 올바른지 체크해보았는가?				O
	CSS 가이드룰이 지켜졌는가?			O	O
웹접근성	(필수) 본문바로가기 및 스킵네비게이션을 제공하는가?			O	O
	(필수) 텍스트가 아닌 콘텐츠에 적절한 대체 콘텐츠가 제공이 되어 있는가?			O	O
	(필수) 새창링크에 target="_blank" 속성이 있는가?			O	O
	(필수) 링크 및 마우스이벤트요소가 키보드컨트롤로 모두 접근이 가능한가?			O	O
	온라인 서식요소(form, input...)가 접근성인 구조로 마크업되어 있는가?			O	O
	table요소가 데이터테이블로서 사용되며 접근성에 맞게 마크업되어 있는가?			O	O
	(필수) frame, iframe에 title제공을 해주는가?			O	O

 

---

통합 체크리스트 세부가이드

---

HTML validator 통과했는가?

• Check Tool : W3C의 Markup Validation Service
• Check 범위
  • HTML 문법오류체크 및 콘텐츠 안의 엔티티문자(<,>,&)변환이 잘되었는지 확인
    (링크주소, image url과 같이 보이는 콘텐츠 요소가 아닌 곳에 사용되는 엔티티문자는 예외)

---

CSS validator 통과했는가?

• Check Tool : W3C의 CSS Validation Service
• Check 범위
  • CSS문법오류체크
  • 특정브라우저에서만 지원하는 CSS속성 및 CSS3속성을 사용함으로 체크되는 오류는 체크사항에서 제외됨.

---

Cross Browsing 되는가?

주 브라우저

현재 서비스이용자들의 점유율이 가장 많은 브라우저 및 OS가 그 기준 대상이 된다.

2020년 PC 브라우저 점유율

 

2020년 Smart Phone 브라우저 점유율

 

www.koreahtml5.kr/front/stats/browser/browserUseStats.do

KOREA HTML5 |

 

대응범위

• Window
  • IE9.0, IE10.0, IE11.0 (IE6.0 는 레이아웃이 깨지지 않는 범위 내로 한정)
  • Firefox, Chrome, Safari, Opera : 최신버전
• MAC : Firefox, Chrome, Safari, Opera : 최신버전
• Mobile : Android 5.0 롤리팝 /  iOS 13 : 사용자점유율에 따라 변경

 

choistory20.tistory.com/2

안드로이드 버전별 점유율 (2020년 8월)