체크리스트
| 웹표준 | -- | -- |
|---|---|---|
| 해당서비스의 Doctype을 따르고 있는가? | html5 Doctype | |
| (필수) HTML validator 통과했는가? | ||
| (필수) CSS validator 통과했는가? | ||
| (필수) Cross Browsing 되는가? | Web(Window) | FF/Chrome/Safari/Opera (최신) |
| Web(Mac) | FF/Chrome/Safari/Opera (최신) | |
| Mobile(Android) | Android 14 (현재 버전) | |
| Android 13 | ||
| Android 12 | ||
| Android 11 | ||
| Android 10 (2021년 기준 점유율 1위) | ||
| Mobile(iOS) | iOS 15(현재 버전) | |
| iOS 14 (2021년 기준 점유율 1위) |
| 웹접근성 | |
|---|---|
| (필수) title 태그에 서브페이지 제목을 제공하였는가? | 블로그 : 네이버 |
| (필수) 페이지 내용을 유추할 수 있는 적절한 제목을 제공하였는가? | section, article 태그엔 h2, h3 태그 제공 |
| (필수) 본문바로가기 및 스킵네비게이션을 제공하는가? | 주메뉴 바로가기, 본문 바로가기 |
| (필수) 텍스트가 아닌 콘텐츠에 적절한 대체 콘텐츠가 제공이 되어 있는가? | |
| (필수) 새창링크에 target="_blank" title="새창 열림" 속성이 있는가? | |
| (필수) 링크 및 마우스이벤트요소가 키보드컨트롤로 모두 접근이 가능한가? | tab으로 링크 이동 |
| (필수) 온라인 서식요소(form, input...)가 접근성인 구조로 마크업되어 있는가? | label, title 제공 |
| table요소가 데이터테이블로서 사용되며 접근성에 맞게 마크업되어 있는가? | scope="col", scope="row" |
| (필수) frame, iframe에 title제공을 해주는가? | |
| (필수) slide에 이전, 다음, 일시정지 버튼을 제공해 주었는가? | |
| 이밖에 네이버 널리의 지침을 참고하여 체크하였는가? |
웹표준
웹 표준은 World Wide Web Consortium(W3C)에서 정한 웹 기술 사양으로, 모든 브라우저에서 웹사이트가 동일하게 보이고 작동하도록 하는 규칙입니다.
크로스 브라우징 보장
- Chrome, Safari, Firefox 등 다양한 브라우저에서 동일한 사용자 경험 제공
- 모바일과 데스크톱 모두에서 일관된 화면 구현 가능
점유율 확인
validator 확인
html : http://validator.kldp.org
css : http://css-validator.kldp.org
웹접근성
웹접근성이란?
웹 접근성은 모든 사람들이 인터넷을 사용할 수 있는 환경을 말합니다. 이는 신체적, 인지적, 시각적, 청각적 장애를 가진 사람들을 포함하여 모든 사용자들이 웹 사이트나 애플리케이션을 이해하고 상호작용할 수 있도록 제공할 수 있어야 합니다.
지침
체험
자가진단 체크리스트
-
지침 확인
-
명도대비 확인 (4.5 : 1)
명도대비 분석기 프로그램 사용
https://nuli.navercorp.com/guideline/s01/g05Chrome에서 바로 확인하기
https://nuli.navercorp.com/community/article/1133201
-
웹 접근성 진단 서비스
-
Web Developer
-
위 링크의 프로그램 설치 후 Disable All Styles를 선택하여 CSS가 보이지 않도록 한다.
-
html만으로 컨텐츠를 읽을 수 있는지 확인한다.
