[웹 표준 & 웹 접근성 & 웹 호환성]
in Front & Design on Frontend
본 포스팅은 개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.
웹 표준(Web Standard) & 웹 접근성(Web Accessibility) & 웹 호환성(Cross Browsing)
웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- 특정한 운영체제나 브라우저를 사용해도 웹페이지가 정상적으로 작동해야함
웹 표준의 장점
- 소스의 통일화로 수정 및 운영관리 용이
- 다양한 브라우저, 휴대폰, PDA, 장애인 지원용 프로그램에서도 대응이 가능하기때문에 접근성이 향상
- 검색 로봇 수집을 통한 효휼적 노출과 같은 검색엔진 최적화 가능
- 효율적 소스를 통해 File size 축소 및 서버 저장 공간을 절약
CSS와HTML문서의 분리 등을 통해 페이지 로딩속도 향상과 같은 효율적인 마크업 가능마크업이란? HTML을 사용해서 문서내용을 구성하고 의미를 부여
즉 HTML(Hyper Text Markup Language) 처럼 마크로 시작해서 마크로 끝나는 언어
<head></head>- 다양한 브라우저에서의 호환이 가능
웹 접근성
- 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장
- 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로, 움직임이 느린 사용자를 위해 시간조절기능을 제공
예를 들어 화면에 ‘메뉴’라는 텍스트가 있으면 이를 인식해서 ‘메뉴’라는 음성이 나오는 방식이다. 시각장애인은 이를 이용해 눈으로 보는 대신 소리로 들으면서 웹페이지에 담긴 정보를 이해할 수 있다.
<button>메뉴</button>
<img src="images/button.jpg" alt="메뉴 버튼" />
# alt라는 속성을 추가한 뒤 이 이미지가 무슨 이미지인지 설명하는 텍스트를 추가해주어야 한다
웹 호환성
- 표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지 제작
- 웹 표준 준수를 포함하는 개념
정리
- 웹 표준, 웹 호환성, 웹 접근성 모두 웹을 사용하는 사용자가 웹사이트를 자유롭고 편리하게 이용하는 점
- 장애인, 고령자 등을 포함한 사용자층 확대, 다양한 환경, 새로운 기기에서의 이용, 개발 및 운용의 효율성 제고 등의 기대효과가 유사하지만 대상 및 종류 등의 준수 내용과 편의를 제공하는 점에서 차이가 존재
| 구분 | 목적 | 준수 내용 | 차이 |
|---|---|---|---|
| 웹 표준 | 웹의 사용성 및 접근성 보장 | HTML, CSS 등에 대한 WC3규격(문법) 준수 등 - HTML, CSS, Javascript 등 구조와 표현, 동작 분리 | 웹의 내용, 표현, 행동에 관련된 기술표준 |
| 웹 호환성 | 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근 | 웹 표준 준수를 통한 브라우저 호환성 확보 - HTML, CSS 문법 준수 - 동작, 레이아웃, 플러그인 호환성 | 웹 표준을 공통으로 포함 |
| 웹 접근성 | 인적, 환경적 요인에 제약없는 웹 정보 접근 | W3C 웹 접근성 이니셔티브(WAI) 한국형 웹 콘텐츠 접근성 지침2.0 - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 | 웹 표준을 공통으로 포함 |
