[Web] 웹 표준 & 웹 접근성 & 웹 호환성(크로스 브라우징) 정리하기

 

웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 다음과 같이 말했습니다.

 

"웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것은 중요한 측면이다."

 

이번 포스팅에서는 웹의 보편성을 지키기 위한 핵심 개념인 웹 표준, 웹 접근성, 웹 호환성에 대해 알아봅시다.

1. 웹 표준(Web Standards)

1-1. 웹 표준이란?

웹 표준이란 간단히 말해 "웹에서 표준적으로 사용되는 기술이나 규칙"을 말합니다.

 

국제 표준화 기구인 W3C(World Wide Consortium)가 권고한 표준안에 따라 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다.

 

1-2. 웹 표준을 준수하는 이유

웹 표준의 궁극적인 목적은 어떠한 운영체제나 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고, 정상적으로 작동하는 것입니다.

 

웹 표준을 준수한 웹 사이트는 다양한 환경과 기기에서 일관되고 효율적인 동작을 보장하게 됩니다.

2. 웹 호환성(크로스 브라우징, Cross Browsing)

크로스 브라우징은 웹 페이지 제작 시에 모든 브라우저에서 의도한 대로 올바르게 보여지게 하는 작업입니다.

 

여기서 중요한 점은 모든 브라우저가 동일하게 보이는 것이 아니라, 동등한 수준의 정보와 기능을 구현하는 것에 초점을 맞춘다는 것입니다.

 

웹 표준을 준수하고, Polyfill 코드를 작성하거나 Babel 등의 도구를 이용하여 브라우저 호환성을 확보할 수 있습니다.

3. 웹 접근성(Web Accessibility)

3-1. 웹 접근성이란?

웹 접근성이란, 모든 사용자가 특정 환경이나 장애에 상관없이 웹 사이트에서 제공하는 정보와 기능에 동등하게 접근할 수 있도록 보장하는 것을 말합니다.

 

간단히 말해 웹 접근성이란 "모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것"입니다.

 

2007년 장애인차별금지법이 제정되면서 "웹 정보를 장애 환경에 상관없이 동등한 수준으로 제공해야 한다는" 법이 시행되었습니다. 이에 국가에서는 웹 접근성 지침(KWCAG)을 발표하여 모든 웹 사이트가 웹 접근성을 준수하도록 권고하고 있습니다.

 

3-2. 웹 접근성의 대상

웹 접근성의 대상은 장애인뿐만 아니라 고령자, 비장애인도 해당됩니다.

 

전맹 사용자, 색각이상 사용자, 고령자와 약시자, 청각장애 사용자, 뇌병변 장애 및 지체장애 사용자, 일시적 장애를 겪고 있는 사용자, 일반 사용자 등이 접근성의 대상이 되며, 이렇게 다양한 사용자들의 접근성을 고려하는 것이 중요합니다.

 

3-3. 웹 접근성의 핵심 원리

1. 인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
2. 운용의 용이성(Operable): 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션할 수 있어야 한다.
3. 이해의 용이성(Understandable): 콘텐츠는 장애유무에 관계없이 이해할 수 있게 구성되어야 한다.
4. 견고성(Robust): 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

 

3-4. 웹접근성 심사 항목

웹 접근성 지침(KWCAG)은 총 24개의 항목으로 구성되어 있습니다.

 

- 인식의 용이성

1. 적절한 대체 텍스트 제공: 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
   1. img 요소에 alt 속성에 대체 텍스트 제공
2. 자막 제공: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
3. 색에 무관한 콘텐츠 인식: 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
   1. 그래프라면 모양, 무늬, 패턴 등 이용
4. 명확한 지시사항 제공: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
   1. e.g. '나의 정보 확인하기' 버튼을 클릭하세요.
   2. e.g. * 표시된 아이디와 비밀번호는 필수 입력 항목입니다.
5. 텍스트 콘텐츠의 명도 대비: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
6. 자동 재생 금지: 자동으로 소리가 재생되지 않아야 한다.
7. 콘텐츠 간의 구분: 이웃한 콘텐츠는 구별될 수 있어야 한다.
   1. 테두리, 구분선, 밑줄, 무늬, 명도/채도 대비, 줄/글자 간격 등 이용

 

- 운용의 용이성

8. 키보드 사용 보장: 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
9. 초점 이동: 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
   1. 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동하는 것이 원칙(논리적인 순서로 마크업)
   2. 키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동)키로 확인
   3. 화면을 가리는 레이어 팝업 또는 모달창의 경우 가장 먼저 초점
10. 조작 가능: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
    1. 웹 페이지에서 모든 컨트롤은 대각선 방향의 길이를 6mm 이상으로 제공
    2. 모바일 화면에서 컨트롤 크기는 가로와 세로가 9mm x 9mm 이상
    3. 링크, 사용자 입력, 기타 컨트롤 등이 안쪽 여백은 1px 이상의 여백
    4. 모바일에서 컨트롤의 중심 간의 간격은 13mm x 13mm 이상
11. 응답시간 조절: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
12. 정지 기능 제공: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
    1. 정지, 이전, 다음 기능 제공
13. 깜빡임과 번쩍임 사용 제한: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
    1. ESC로 정지할 수 있도록 기능을 제공
14. 반복 영역 건너뛰기: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
15. 제목 제공: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
16. 적절한 링크 텍스트: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

 

- 이해의 용이성

17. 기본 언어 표시: 주로 사용하는 언어를 명시해야 한다.
    1. e.g. html lang="ko"
18. 사용자 요구에 따른 실행: 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
19. 콘텐츠의 선형화: 콘텐츠는 논리적인 순서로 제공해야 한다.
20. 표의 구성: 표는 이해하기 쉽게 구성해야 한다.
    1. caption 또는 summary 속성 이용
21. 레이블 제공: 사용자 입력에는 대응하는 레이블을 제공해야 한다.
    1. input, textarea, select 요소에 1:1 대응하는 label 요소 또는 title 속성을 제공
22. 오류 정정: 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
    1. e.g. 오류 발생 시 해당 입력 서식으로 초점이 이동
    2. e.g. 형식: yyyy-mm-dd
    3. 오류 원인 및 내용 안내, 본문에 오류 메세지를 표시
    4. 오류 메세지를 스크립트 공고창으로 제공
    5. 오류 발생시 입력 내용 사라지지 않도록 함

 

- 견고성

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

---

참고

• 크로스 브라우징(cross browsing)
• 웹 접근성이란?
• 접근성 가이드
• 웹 접근성
• 웹 접근성의 이해