본문 바로가기

웹 표준, 웹 호환성, 웹 접근성을 알아보자! 본문

MarkUp

웹 표준, 웹 호환성, 웹 접근성을 알아보자!

개발자로 거듭나기 2022. 8. 8. 16:52
반응형

웹 표준, 웹 호환성, 웹 접근성에 대한 고찰

안녕하세요, 오늘은 웹 표준, 웹 접근성, 웹 호환성에 대한 이야기를 해보려 합니다. 모든 웹사이트는 정해진 웹 표준을 따라야 합니다. 그리고 웹 호환성을 준수한 사이트를 만드려면, 어떠한 브라우저에서도 웹사이트가 동일한 동작을 하도록 해야 합니다. 우리가 웹 표준과 웹 호환성을 준수하여 웹사이트를 제작한다면, 누구나 편하게 이용 가능한 웹 접근성이 높은 사이트를 만들 수 있습니다. 즉, 웹 호환성과 웹 접근성의 개념에는 웹 표준이 포함되어 있습니다.

웹 표준

웹 표준이란 img 태그의 적절한 alt속성을 추가, semantic태그를 이용할 때, 제목을 꼭 붙여준다, img태그를 사용할 때 figure 태그와 같이 사용한다, meta 태그를 적극 사용한다던가 라는 일련의 규칙들을 준수 하는 것을 말합니다. 그렇다면 웹 표준의 정의는 무엇일까요? 웹 표준이란 국제 표준화 단체인 W3C(World Wide Web Consortium)가 지정한 표준안을 지켜 웹사이트를 제작하는 것 입니다. 또한 그렇게 함으로써 어떤 운영체제나 웹브라우저 상에서도 비교적 동일한 디자인과 기능을 구현하는 데에 그 목적이 있죠 만약 표준을 지키지 않는다면, 다양한 브라우저에서 원할한 사용이 어려울 것 입니다.

장점 :
수정 및 관리의 용이 웹 표준을 준수하여 (X) HTML과 CSS가 분리된 사이트를 만들 경우 수정사항이 있을 시 CSS의 수정만으로도 손쉽게 디자인의 수정이 가능해집니다. 따라서 엄청난 시간, 비용 절감의 효과를 누리실 수 있습니다. 파일 사이즈의 감소를 통한 웹 공간의 확보와 로딩 시간 감소 웹 표준을 준수하여 코딩할 경우 필요 없는 소스와 파일을 줄임으로서 웹 공간에 여유 공간을 확보하고 페이지 로딩 속도를 빠르게 함으로써 사용자에 더 나은 편의를 제공할 수 있습니다. 또한 검색 엔진에 대한 최적화 방안 웹 표준을 이용하여 (X) HTML 소스를 중요도에 맞게 구조화하고, 깨끗하게 정리된 소스를 만들어내면 검색 로봇이 올바르게 검색할 수 있습니다. 예를 들어 웹 표준 태그인 (h1~h6) 태그와 텍스트 강조 요소 등을 이용하면 검색엔진에 효율적으로 노출될 수 있도록 최적화 시킬 수 있습니다.

대한민국 웹 표준 조건 :
1. W3C 권장 표준 DTD(Document Type Definition) 사용해야 함
2. 논리적이고 의미에 맞는 HTML 마크업과 CSS 레이아웃 사용해야 함
3. 최신 버전의 데스크톱 및 모바일 브라우저 'Internet Explorer, Firefox, Safari, Opera, Chrome'에서 콘텐츠 호환성 유지해야 함
4. HTML 문법 오류가 페이지별 평균 99개 이하. 초기화면은 필히 99개 이하. 확인. CSS 문법 오류는 확인하지 않음
5. 'ActiveX, Java Applet, Flash, Silverlight Javascript'와 같은 부가 애플리케이션이 존재하더라도 핵심 기능을 사용하는데 지장이 없음
6. 다양한 웹 브라우저에서 키보드만으로 대부분의 콘텐츠를 탐색하거나 조작할 수 있음. 내비게이션을 플래시로 구현한 경우 등록 불가


웹 표준 검사 사이트 :
[W3C Mark Up 검증 서비스] : http://validator.kldp.org/
[W3C CSS Validation 서비스] : http://jigsaw.w3.org/css-validator/

웹 호환성

웹 호환성은 표준 웹 긴 줄을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법입니다.
웹 사이트 사용 시 운영체제 및 브라우저 간 동일한 결과가 나오도록 의미하는 웹 상훈 운용성 개념에 웹 표준의 준수를 포함하는 개념입니다.

중요성 :
국내로 예를 들면 IE 웹 브라우저에 최적화된 비표준 기술이 널리 사용되고 있습니다. ActiveX가 대표적으로 웹사이트에 플러그인 기술의 제약이 있고 보안에 취약해지기 때문에 IE 외 브라우저에서는 호환성이 떨어져 문제가 발생할 수가 있죠. 따라서 모든 웹브라우저 환경에서 동일하게 이용하기 위해서는 웹 호환성을 준수해야 합니다.

웹 접근성

웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것 입니다. 웹 접근성은 모두에게 동등한 기회를 제공해야 하는 취지로, 법으로 명시되어 있습니다.
웹 접근성은 다음과 같은 사람들을 위해 필요합니다.

장애유형 특징 보완대책
시각장애 전맹 모니터를 볼 수 없음 스크린 리더
저시력 모니터 사용이 일부 가능함 화면 확대/고대비
색맹 색을 구별할 수 없음 색상에만 의존하지 않기/고대비
청각장애 사운드, 오디오 등을 청취할 수 없음 수화, 시각 정보 제공
지체장애 상지장애 손을 사용할 수 없음 마우스 대체 방법, 키보드만 사용
기타 움직임이 어려움 충분한 시간 제공
언어장애 복잡한 용어, 어려운 용어의 이해 불가능 쉬운 용어 사용

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


반응형

웹 표준/웹 호환성/웹 접근성의 차이

웹 표준을 준수하는 것만으로 웹 호환성과 웹 접근성이 보장되지는 않습니다. 웹 호환성은 OS, SW에 독립적인 상호운용성 확보를 우선시하고, 웹 접근성은 보편적 접근성 확보를 우선시 합니다.

공통점
1. 웹을 사용하는 사용자가 웹사이트를 자유롭고 편리하게 사용할 수 있어야 합니다.
2. 웹을 장애인, 고령자 등을 포한한 사용자층을 포함한 다양한 환경에서 사용할 수 있어야 합니다.
3. 웹을 새로운 기기에서의 이용, 개발 및 운용의 효율성 제고해야 합니다.


차이점
대상 및 종류 등의 준수 내용과 편의를 제공하는 점에서는 차이가 있습니다.

반응형

'MarkUp' 카테고리의 다른 글

CSS 기본과 사용법을 알아보자!  (5) 2022.08.12
비트맵과 벡터의 차이는 무엇일까?  (13) 2022.08.09
JS 요소 선택자 알아보기  (13) 2022.08.05
JS 전역변수와 지역변수  (13) 2022.07.28
JS 데이터 타입 이해하기  (12) 2022.07.25
Comments