웹 표준이란?
웹 표준이란 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'으로,
사용자가 어떤 운영체제나 브라우저를 사용하더라고 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.
웹 표준에 맞추어 작성하면 브라우저 호환 때문에 화면이 제대로 표시되지 않거나 기능이 작동하지 않는 등의 문제 상황을 방지할 수 있다.
장점
1. 유지 보수의 용이성
- 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 전에는 구조, 표현, 동작이 뒤섞인 코드가 많아 전체를 다 수정해야하는 경우가 있었다.
- => (웹 표준 준수하면) 각 영역 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.
2. 웹 호환성 확보
- 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에는 정상적으로 사용이 불가능한 문제점이 발생한다.
- => (웹 표준 준수하면) 웹 브라우저의 종류나 버전, 운영체제나 사용 기기 종류 상관없이 동일 결과 나올 수 있다.
3. 검색 효율성 증대
- 검색 엔진에서 더 높은 우선순위로 노출될 수 있다.
- HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 담고 있음.
- => 홍보 비용 필요 없이 검색 효율성 높일 수 있다.
4. 웹 접근성 향상
- 브라우저 종류, 운영체제 종류, 기기 종류 등 웹에 접근할 수 있는 환경은 다양한데 웹 표준에 맞춰 개발하면 이러한 문제 해결할 수 있음
웹 접근성이란?
컴퓨터와 스마트폰만 있으면 정보 찾고, 사람들과 소통하고, 물건을 편하게 살 수 있는 시대입니다.
하지만 이러한 웹 사이트에서 제공하는 정보를 장애인, 고령자 등은 쉽게 접근하기가 쉽지않다.
이런 상황을 해결하고자 노력하는 것이 웹 접근성(Web Accessibility)이다.
( 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것)
효과
1. 사용자층 확대
- 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 된다.
- => 사이트 이용자 늘릴 수 있고, 새로운 고객층을 확보활 수 있다.
2. 다양한 환경 지원
- 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황이 있을 수도 있다.
운정 중이라거나, 마우스를 사용할 수 없는 상황 등이 있겠다. - => 다양한 환경, 다양한 기기에서 웹 사이트를 자유롭게 사용할 수 있게 된다면 서비스의 사용 범위 확대되고 이용자 증가 기대할 수 있다.
3. 사회적 이미지 향상
- 웹 접근성 확보를 통해 기업이 정보 소외 계층 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다.
- => 기업의 사회적 이미지가 향상되면 이용자 수 증가 or 충성 고객 확보할 수 있는 가능성 늘어난다.
WAI-ARIA
WAI-ARIA는 WAI와 ARIA를 합친 단어이다.
- WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 엑세스할 수 있도록 하는, 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications) : 따로 프로그램 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 웹 애플리케이션. SPA를 의미하는 경우가 많다.
필요성
시멘틱 HTML은 HTML 요소에 의미를 부여하여 웹 접근성을 향상시킬 수 있다면
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
=> 보조적으로 사용하면 웹 접근성 향상할 수 있다.
1. 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 사용
2. SPA처러 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 동적인 콘텐츠에서도 웹 접근성 향상시킬 수 있다.
사용법
- 역할(role) : HTML 요소 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
- 속성(property) : 요소의 특징을 정의하는 속성
1. 역할
HTML 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용.
<div role="button">div이지만 button으로 사용되는 요소</div>버튼으로 사용되는 요소를 만들었는데 <div>요소를 사용했다면 이 요소가 버튼 역할을 하고 있다고 표시.
하지만 주의할 점은, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해 줄 필요는 없다!
또한, 시멘틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.
// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>
<h1 role="button">h1인 요소</h1>// 컴포넌트 구조를 간소화한 모습입니다.
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>
// WAI-ARIA 사용하여 구조가 탭의 역할을 하고 있다는 것을 명시
<ul role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</ul>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
2. 상태
- aria-selected
위에서 본 탭에서 어떤 탭이 선택되어 있는지도 알아야 한다. 이럴 때 여러개 선택 가능한 요소 중 선택 상태인 요소를 표시할 수 있는 aria-selected라는 속성을 사용한다.
<ul role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</ul>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>이 외에도 UI가 펼쳐진 상태인지 표시해 주는 aria-expanded, 요소가 숨김 상태인지 표시하는 aria-hidden 등의 속성이 있다.
3. 속성
- aria-label
요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다. 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예이다.
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>- aria-live
aria-live는 요소가 실시간으로 내용을 변경하는 영역인지 표시한다. 즉, 브라우징 도중에 내용을 띄우는 alert,modal, dialog와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용되는 속성이다.
시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 변경되는 내용을 알려주면 도움이 된다.
속성 값으로는 polite, assertive, off(default)가 있다.
- polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 변경된 내용을 사용자에게 전달한다.
- assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달한다.
이 외에도 다양한 WAI-ARIA 속성들이 존재한다.
'CS 지식' 카테고리의 다른 글
| [ Cookie / Session] (0) | 2023.05.02 |
|---|---|
| [UI/UX] (0) | 2023.04.13 |
댓글