[Web] 웹 표준 & 접근성

❤️‍🔥 웹 접근성

• 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

❤️‍🔥 웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대
   웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 된다. 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 된다. 실제로 웹 접근성 향상을 통해 매출이 증가한 외국 쇼핑몰 사례도 있으며, 국내 온라인 쇼핑몰에서도 노년층의 매출이 증가 추세를 보이고 있다.
2. 다양한 환경 지원
   정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있습니다. 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황 등이 있다. 웹 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다. 자연스럽게 서비스의 이용자 수 증가를 기대할 수 있다.
3. 사회적 이미지 향상
   기업의 사회적 책임에 대한 중요성이 점점 증가하고있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다. 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 된다.

---

❤️‍🔥 WAI-ARIA

• WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
• WAI와 ARIA를 합친 단어
• 웹 접근성을 향상시킬 수 있는 방법 중의 하나
• WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
• ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
• RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

❤️‍🔥 WAI-ARIA의 필요성

• WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해 준다.
• 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다.
• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.
• ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미. WAI-ARIA는 보조적인 역할로만 사용해야 한다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선
• SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.

❤️‍🔥 WAI-ARIA 사용법

1. 역할(Role)

• HTML 요소의 역할을 정의하는 속성
• HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)

<div role="button">div이지만 button으로 사용되는 요소</div>

⚠️ 주의할 점, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없다.

// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>

⚠️ 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.

// WAI-ARIA의 잘못된 사용 예시
<h1 role="button">h1인 요소</h1>

2. 상태(State)

• 요소의 현재 상태를 나타내는 속성

🤔 aria-selected
여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 속성

<div 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>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

3개의 탭 중에서 첫 번째 탭이 선택된 상태임을 알 수 있다. 이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded , 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있다.

3. 속성(Property)

• 요소의 특징을 정의하는 속성(attribute)

🤔 aria-label
요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다. 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예시이다. 이미지만 들어있는 버튼의 경우, HTML 요소의 구조만으로 어떤 역할을 하는 버튼인지 파악하기 어렵다.

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

물론 버튼 요소에 숨겨진 자식 요소를 추가해서 어떤 역할을 하는지 설명하는 내용을 추가해줄 수 도 있지만, 이럴 때 사용할 수 있는 WAI-ARIA 속성이 바로 aria-label 이다. 요소에 라벨을 붙여주는 기능을 가진다. 해당 요소를 사용하면 다음과 같이 의미를 부여해줄 수 있다.

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

🤔 aria-live
해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다. 즉, 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성이다. 시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려주면 큰 도움이 된다. 속성 값으로는 polite, assertive, off(default)가 있다.

polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달
assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달