1. 웹 표준

1.1. 정의

W3C(World Wide Web Consortium, 팀 버너스 리 창시)가 지정한 표준안을 지켜 웹 사이트를 제작

1.2. 목적

어떤 운영체제나 웹브라우저 상에서도 비교적 동일한 디자인과 기능을 구현하는 데에 목적이 있음

1.3. 기술

• 구조 - (X)HTML
• 표현 - CSS
• 동작 - Script(ECMAScript)

1.4. 장점

수정 및 운영관리가 용이, 웹 접근성 향상, 검색엔진 최적화(SEO), 다양한 장치에서의 호환

1.5. 조건

• W3C 권장 표준 DTD 사용
• HTML 문법 오류가 페이지 별 평균 99개 이하
• 논리적이고 의미에 맞는 HTML 마크업 및 CSS 레이아웃 사용
• 다양한 브라우저에서 키보드만으로 대부분의 콘텐츠를 탐색, 조작할 수 있음
• 최신 버전의 디바이스, 브라우저에서도 콘텐츠 호환성 유지
• 부가 애플리케이션(ActiveX, Flash 등)이 존재하더라도 핵심 기능의 사용에 지장이 없음
  

2. 웹 접근성

2.1. 정의

어떤 기술 환경에서든 전문적인 능력 없이도 웹사이트에서 제공하는 모든 정보에 접근하고 이용할 수 있도록 보장
장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다.

2.2. 4대원칙

- 2.2.1. 인식의 용이성 (Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

• (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
• (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
• (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
• (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
• (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
• (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
• (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

- 2.2.2. 운용의 용이성(Operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
• (누르기 동작 지원) 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
• (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
• (조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
• (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
• (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
• (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
• (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
• (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
• (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

- 2.2.3. 이해의 용이성(Understandable)

콘텐츠는 이해할 수 있어야 한다.

• (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
• (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
• (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
• (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
• (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
• (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

- 2.2.4. 견고성(Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

• (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
• (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

2.3. 장점

• 웹 사용성 증가
• 기업이미지 홍보효과
• 정부정책 부응에 따른 이미지 제고 효과
• 정보접근 취약 계층에 정보제공 기회를 균등하게 보장
• 누구나 이용가능한 소프트웨어를 개발해 모두가 동등한 업무처리가 가능하게 하여 생산성 향상
• 누구나 쉽게 인터넷을 이용해 정보 광장에 참여할 수 있는 환경을 제공하여 사회간접비용 절감
• 구조와 표현의 분리로 HTML코드 양이 줄어들어 경량의 로딩속도로 빠른 서비스 제공
• 디자인/UI개발/개발 작업의 분리로 병행 작업이 가능하여 웹사이트 제작 기간 단축
• 코드의 재활용성이 높아 유지보수 비용이 절감되고 재생산성이 확대
• 다양한 환경, 디바이스에서의 이용확대
• 신기술, 새로운 운영체제 및 브라우저에서의 높은 호환성 및 운영비용 절감
• 의미있는 태그의 사용으로 검색엔진 최적화

2.4. 예시

• 모든 컨텐츠는 키보드로 이동가능해야 함
• 컨텐츠는 위에서 아래로 읽을 수 있는 선형구조이어야 함
  - ex) 명확한 헤딩구조(h1~h6)
• 이미지에 alt, IR기법을 사용하여 대체텍스트를 제공
• 동영상은 대본이나 자막을 제공하고 자동재생 금지
• 색을 인지하지 못하는 사용자를 위해 명도차이가 뚜렷(4.5:1)하게 디자인 되어야 함
• 움직이는 컨텐츠에는 정지기능이 들어가야 함
  - ex) Slider
• 과도하게 깜빡거리거나 번쩍이는 컨텐츠가 들어가면 안됨
• 페이지 제목을 지정해야 하고 반복영역을 건너뛰는 기능이 제공되어야 함
  - ex) Skip Navigation
• title을 사용해 a 태그에 대한 정보를 적절히 제공해야 함
• input태그에는 적절한 label이 제공되어야 함
• table에는 caption, summary, thead, tbody, th 등을 사용