🌐 웹 표준(Web Standards)
웹 표준은 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'을 말하는 것으로, 사용자가 어떤 운영체제나 브라우저를 사용하든지 동일하게 정상적으로 작동할 수 하는 웹페이지를 제작하는 기법을 담고 있다. 웹 표준은 화면의 구조, 표현, 동작을 담당하는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다.
크롬, 엣지, 사파리, 오페라, 파이어폭스 등의 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 따라서 웹 표준에 맞춰 웹 페이지를 작성하기만 해도 어느정도 동일한 결과물을 얻을 수 있으며, 브라우저의 호환 문제로 화면이 나타나지 않거나 기능이 작동하지 않는 등의 문제 상황을 방지할 수 있다.
웹 표준의 장점
✅ HTML, CSS, JS를 분리함으로써 유지 보수가 용이해지고, 트래픽 비용이 감소한다.
✅ 특정 운영체제나 브라우저에 종속적이지 않게 웹 페이지를 제작할 수 있어 웹 호환성을 확보할 수 있다.
✅ 적정한 HTML요소를 사용하고 웹 페이지에 대한 정확한 정보를 작성함으로써 검색의 효율성을 높일 수 있다.
✅ 위의 장점들을 확보함으로써 웹 페이지의 접근성이 향상될 수 있다.
Semantic HTML(시맨틱 HTML)
웹 표준에서는 Semantic HTML의 중요성을 강조한다.semantic은 '의미의, 의미가 있는' 이라는 뜻으로 HTML이 구조를 만드는 것을 넘어서 의미를 가질 수 있도록 한다는 의도가 담겨있다.
예를 들면 모든 화면을 div 태그와 span 태그로 구성하면 HTML 구조만 보고 각 요소들이 어떤 역할을 하는 지 파악할 수 없지만 header, nav, main, article 등의 시멘틱 요소를 이용하면 각 요소가 어떤 내용을 가지고 어떤 역할을 할지 의미가 담겨있기 때문에 구성만 보고도 그것들을 예상할 수 있게 된다.
자주 사용되는 시맨틱 요소
| 시맨틱 요소 | 설명 |
|---|---|
| header | 페이지나 요소의 최상단에 위치하는 머릿말 역할 |
| nav | 메뉴, 목차 등에 사용 |
| aside | 문서와 연관은 있지만, 직접적인 연관은 없는 내용 |
| main | 문서의 메인이 되는 주요 콘텐츠 |
| article | 게시글, 뉴스기사 등 독립적으로 재사용할 수 있는 요소 |
| section | 문서의 독립적인 구획(적합한 의미의 요소가 없을 때 사용) |
| hgroup | 제목 표시 요소(h1 ~ h6 태그) |
| footer | 페이지나 요소의 최하단에 위치하는 꼬릿말 역할 |
🌐웹 접근성(Web Accessibility)
웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다. 웹 접근성을 갖춘 웹페이지에서는 어떤 상황(화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스를 사용할 수 없는 상황 등)에서도 항상 동등한 수준의 정보를 제공받을 수 있다. 웹 접근성의 궁극적인 목적은 어떤 상황에 어떤 사람이 접근하더라도 정보의 격차가 생기지 않도록 하는 것이기 때문이다.
우리나라에서는 2008년 시행된 장애인 차별 금지 및 권리 구제 등에 관한 법률에 의해 모든 공공가관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갇추도록 강제성이 부여되었으나, 처벌 규정이 약하고 피해 사실의 입증 책임이 장애인에게 있는 탓에 실제 처벌 사례가 극히 드물어 웹 접근성 준수도는 상당히 낮은 수준이다.
장애인 이동권이 개선되면 임신부와 노약자 등의 이동 약자 이동권이 보장되고 편의가 개선되듯 웹 접근성 정책은 장애인들만을 위한 것이 아니다. 또한 장애인 10명중 9명이 후천적 장애인이라는 통계를 고려한다면 올바른 웹 접근성을 갖추는 것은 모든 사람을 위한 것이라고 할 수 있다.
웹 접근성을 갖추면 얻을 수 있는 효과
✅ 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되므로 웹 이용자를 늘릴 수 있고 새로운 고객층을 확보함으로써 매출을 증대시킬 수 있다.
✅ 다양한 환경, 다양한 기기에서의 웹 사이트 이용 자유도가 높아져 서비스의 사용 범위가 확대되고 이용자 수를 증대시킬 수 있다.
✅ 기업의 사회적 책임(CSR)의 중요성이 높아지고 있는 만큼 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줌으로써 기업의 사회적 이미지또한 향상될 수 있다.
웹 콘텐츠 접근성 지침
한국형 웹 콘텐츠 접근성 지침(2.1)에 따르면 콘텐츠는 크게 네 가지의 특성을 갖춰야 한다.
- 인식의 용이성(Perceivable)
- 운용의 용이성(Operable)
- 이해의 용이성(Understandable)
- 견고성(Robust)
각 특성에는 다음과 같은 세부 항목이 있다.
1. 인식의 용이성(Perceivable)
모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
적절한 대체 텍스트: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.자막 제공: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.색에 무관한 콘텐츠 인식: 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.명확한 지시사항 제공: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.텍스트 콘텐츠 명도 대비: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.자동 재생 금지: 자동으로 소리가 재생되지 않아야 한다.콘텐츠 간 구분: 이웃한 콘텐츠는 구별될 수 있어야 한다.
2. 운용의 용이성(Operable)
사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
키보드 사용 보장: 모든 기능은 키보드만으로도 사용할 수 있어야 한다.초점 이동: 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.조작 가능: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.응답 시간 조절: 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.정지 기능 제공: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.깜빡임과 번쩍임 사용 제한: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.반복 영역 건너뛰기: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.제목 제공: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.적절한 링크 텍스트: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
3. 이해의 용이성(Understandable)
콘텐츠는 이해할 수 있어야 한다.
기본 언어 표시: 주로 사용하는 언어를 명시해야 한다.사용자 요구에 따른 실행: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.콘텐츠 선형 구조: 콘텐츠는 논리적인 순서로 제공해야 한다.표의 구성: 표는 이해하기 쉽게 구성해야 한다.레이블 제공: 사용자 입력에는 대응하는 레이블을 제공해야 한다.오류 정정: 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
4. 견고성(Robust)
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
마크업 오류 방지: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.웹 애플리케이션 접근성 준수: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
reference
http://www.ohmynews.com/NWS_Web/View/at_pg.aspx?CNTN_CD=A0002750526
http://www.wa.or.kr/board/view.asp?sn=161&page=1&search=&SearchString=&BoardID=0004&cate=
