웹 표준
-
W3C(World Wide Web Consortium)의 토론을 통해 나온 권고안(Recomendation)
-
HTML, CSS, Javascript, DOM 등 웹에서 “표준”적으로 사용되는 기술을 의미한다. 그리고 해당 기술은 구조, 표현, 동작의 세 가지 요소로 구분할 수 있다.
웹 표준의 3가지 요소
1. 구조(HTML)
-
HTML(HyperText Markup Language): 하이퍼 텍스트를 표현하기 위한 마크업 언어이다.
-
SGML(Standard Generalizes Markup Language)을 모체로 하여 국제 표준 기구인 ISO가 1986년에 채택한, 웹에서 사용하는 표준 마크업 언어이다.
2. 표현(CSS)
-
CSS(Cascading Style Sheet)는 HTML 3.2부터 지원하기 시작한 것으로, 웹 제작자와 사용자들의 필요에 의해 특별히 개발되었다.
-
폰트, 색상, 공백, 공간과 그 밖의 문서 표현 등을 자유롭게 지정할 수 있는 기능을 제공함.
-
CSS는 W3C 표준이므로 CSS를 이용하여 만든 문서는 사용자의 웹 브라우저 환경에 따라 홈페이지가 다르게 나타나지 않고, 어느 환경에서나 제작자가 의도한 대로 표현할 수 있다.
3. 동작(DOM & ECMA Script)
-
DOM(Document Object Model): 웹 페이지의 구성 체계, HTML을 작성하면서 생성되는 논리적 규칙.
-
ECMA Script: Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. JavaScript를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다.
-
사용자 측에서 작동하는 많은 동적 요소들이 DOM을 이용하여 객체 모델에 접근한 후, 스크립트 언어인 ECMA Script를 이용하여 웹 페이지의 요소의 동작을 제어하는 방법으로 작성한 것이다.
HTML5
HTML5의 특징을 간단하게 알아보자.
-
HTML5에서는 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화하였는데, 이를 HTML5의 콘텐츠 모델이라고 한다.
-
HTML5에서는 정보 구조를 명확히 할 수 있도록 '아웃라인 알고리즘'이라는 개념을 도입했다. 웹 페이지의 정보 구조를 판별할 수 있는 개념으로, 책의 목차와 비슷하다.
-
HTML5에서는 JavaScript 기술을 좀 더 편리하게 이용할 수 있도록 다양한 API를 지원하고 있으며 HTML5에 추가된 API는 오프라인 웹 구현을 위한 API, 실시간 커뮤니케이션 API, 파일/하드웨어 접근 API, GUI를 위한 API 등이 있다.
HTML의 역사
HTML은 컴퓨터 언어로써는 매우 느슨한 구조를 가지기 때문에 HTML이 빠르게 확산될 수 있었지만, 점점 복잡하고 다양해지는 웹과 환경에 적용하기에는 어려움이 있었다.
그래서 1996년 W3C에서 웹에서 구조화된 문서를 전송할 수 있도록 설계된 표준화된 텍스트 형식인 XML(eXtensible Markup Language) 을 제안했다.
좀 더 원활하게 기계적으로 처리하도록 XML의 형식을 빌어 HTML4.01을 재정의했고, 이후 기계에 더욱 친화적인 XHTML 2.0을 정의했지만,
2004년 애플 모질라 재단, 오페라 소프트웨어가 공동으로 설립한 공개 그룹인 WHATWG(Web Hypertext Application Technology Working Group)가 W3C와 별개로 Web Application 1.0과 2.0을 만들었고, 결국 2007년 3월 W3C가 공개적으로 XHTML 2.0의 실패를 인정한 후 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생하였다.
웹 접근성
-
웹 접근성 준수: 법적 의무사항으로 「지능정보화기본법」에 따라 ‘모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것’.
-
여기서 신체적 조건이란 장애인, 고령자 등을 포함한 모든 사용자를 의미하며, 환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등)를 포함하는 것을 말한다.
즉, 누구나 웹을 이용할 수 있게 보장하는 것이다.
예를들면, 시각 장애인은 스크린 리더가 웹 페이지의 내용을 읽어주기 때문에 그에 맞게 설계한다거나, 청각 장애인을 위한 자막을 보여주는 것은 웹 접근성을 고려한 서비스인 것.
하지만, 일반적인 사용자에 대해서도 여러 기기나 브라우저 등에서 동일하게 접근할 수 있게 하는 것이기 때문에 장애를 가진 사용자만을 위한 것이 아니라 미래 기술을 위한 호환성과도 직결되는 부분이다.
이미 대부분의 관련 표준 기술에서 접근성을 고려한 속성을 기본으로 지원하고 있지만, 지금도 많은 개발자들이 웹 접근성은 전혀 신경쓰지 않고 개발하고 있다.
웹 콘텐츠 접근성 가이드라인(Web Content Accessibility Guidelines)
W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침이다.
해당 지침은 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항으로 접근성은 시각, 청각, 지체, 음성, 인지, 언어, 학습 및 신경 장애를 포함한 광범위한 장애를 포함한다.
(장애 유형 참고)
WCAG는 각 지침을 4가지 원칙의 범주로 분류하여 제공한다.
"인식 가능하고, 조작 가능하며, 이해 할 수 있고, 견고 해야 한다."
현재는 WCAG 1.0 -> WCAG 2.0을 거쳐 WCAG2.1이 WCAG 2.0을 확장한 버전으로 2018년 6월에 최종 권고안으로 발표 되었다.
WAI-ARIA
(Web Accessibility Initiative – Accessible Rich Internet Applications)
RIA의 등장은 우수한 UX를 제공하게 되었지만 모든 사용자가 동등하게 접근하고 사용할 수 없는 문제가 있었는데 바로 스크린리더 등 보조기술을 사용하는 장애인이 RIA 기술로 제작된 웹 애플리케이션을 제대로 사용할 수 없었기 때문이다.
또한 주식 시세나 RSS Feed 등 시간에 따라 정보가 자동으로 업데이트 되는 경우 역시 스크린리더 등 보조기기가 이를 알 수 없어 RIA 기술이 접근성에 취약하다는 비판을 받아왔다.
RIA (Rich Internet Applications)
웹이 매우 빠른 속도로 성장하면서 더 이상 문서의 개념이 아닌 데스크탑 수준의 애플리케이션과 같은 사용자 경험(User eXperience, 이하 UX)을 요구 -> RIA가 등장했다.
RIA는 기존의 정적인 HTML과 단순한 자바스크립트 사용 환경에서 벗어나 한층 강력해진 자바스크립트와 Ajax(Asyncronous Javascript and XML, 이하 Ajax) 등의 기술을 활용하여 웹 애플리케이션을 제작하고 좀 더 향상된 UX를 제공할 수 있다.
이러한 문제를 해결하기 위해 등장한 것이 바로 WAI-ARIA 이다.
WAI-ARIA는 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위해 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가할 수 있도록 지원한다.
이렇게 추가된 정보는 웹 브라우저에 의해 자동으로 해석되어 각각의 운영체제(OS)의 접근성 API로 변환되도록 설계되었다.
이때 스크린리더 및 보조기기는 운영체제(OS)에서 제공하는 접근성 API를 통해 데스크탑 애플리케이션과 동일한방법으로 자바스크립트 컨트롤을 인식하고 상호 작용을 하게 된다.
WAI-ARIA 사용법
https://velog.io/@juwon98/WAI-ARIA-instructions
