웹표준(Web Standards)
웹 표준이란?
웹표준은 W3C의 토론을 통해 나온 권고안(Recomendation)을 말하며 HTML, CSS, Javascript, DOM 등 웹에서 “표준”적으로 사용되는 기술을 의미합니다. 그리고 해당 기술은 구조, 표현, 동작의 세 가지 요소로 구분할 수 있습니다.
웹 표준의 세 가지 요소
- 구조(HTML) : 콘텐츠의 뼈대와 의미를 정의
- 표현(CSS) : 시각적인 디자인과 스타일
- 동작(DOM, ECMA) : 웹 페이지의 동적인 기능과 상호작용을 제어
웹 접근성
웹 접근성은 모두를 위한 접근성을 뜻합니다.
모든 사용자가 신체적·환경적 조건(장애, 고령, 기기, 브라우저 등)에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것입니다.
신체적 조건: 장애인, 고령자 등 신체적 제약이 있는 모든 사용자
환경적 조건: PC, 모바일 등 다양한 기기, 운영체제(OS), 웹 브라우저(크롬, 파이어폭스 등)
그럼 웹 접근성이 왜 필요할까?
접근성이 필요한 이유는 어떤 사용자도 정보 이용에서 배제되지 않도록 보장하기 위함입니다!! 이어폰이 없어도 동영상의 자막으로 내용을 파악하거나, 마우스를 사용할 수 없을 때 키보드만으로 모든 기능을 조작할 수 있도록 다양한 입력 경로를 제공하는 것이 핵심입니다.
웹 접근성 가이드라인
W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침 입니다
4가지 원칙
- 인식 가능
- 조작 가능
- 이해
- 견고
WAI-ARIA
WAI-ARIA는 동적이고 화려한 웹 애플리케이션(RIA)에서 접근성이 취약한 문제를 해결하기 위해 등장했습니다
웹 개발을 하다보면 div를 남발하지 말고 시맨틱 태그를 사용해라~ 라고 많이 얘기를 하는데 이처럼 <div>나 <span>처럼 의미를 가지지 않는 요소로 버튼, 탭, 슬라이더 같은 복잡한 컴포넌트를 만들 경우 스크린 리더가 해당 컴포넌트의 기능을 명확하게 파악할 수 없는 이슈가 있었습니다.
WAI-ARIA의 해결책
WAI-ARIA는 HTML 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이 문제를 해결합니다.
-
역할 (Role): 해당 요소가 UI에서 어떤 역할을 하는지 정의합니다. (예: role="button", role="navigation")
-
속성 (Property): 컴포넌트의 특징이나 상황을 정의합니다. (접두사: aria-* 사용)
-
상태 (State): 컴포넌트의 현재 상태를 정의합니다. (예: aria-expanded="true" 확장됨)
이러한 정보가 추가되면서 웹 브라우저는 이를 운영체제(OS)의 접근성 API로 변환하고, 스크린 리더는 이 API를 통해 데스크톱 애플리케이션처럼 웹 애플리케이션의 기능을 정확하게 인식하고 사용자에게 전달할 수 있게 됩니다. WAI-ARIA는 개발자의 의도를 보조 기술에 잘 전달하여 사용자 경험을 향상시키는 데 핵심적인 역할을 합니다.
