# Web\_Accessibility

### **웹 접근성**

#### 웹 접근성이란?

* 웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있음

\


### **2. 웹 콘텐츠 접근성 지침 (WCAG)**

#### ✅ **인식의 용이성** : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다

* 적절한 대체 텍스트
  * `alt` 속성으로 대체텍스트 제공
  * 배경이미지와 같이 정보 인식이 필요 없는 경우에는 `alt` 값으로 빈 문자열을 주어 스크린 리더가 인식하지 못하도록 함
* 자막 제공
  * 자막을 포함하거나, 비디오 요소 안쪽에 `track` 요소를 사용해 자막 파일 불러오기
* 색에 무관한 콘텐츠 인식
  * 콘텐츠는 색에 관계없이 인식되어야 하므로, 콘텐츠에 테두리를 설정하거나, 레이블을 추가하여 내용 파악 가능하게 함
* 명확한 지시사항 제공
  * 지시사항에도 대체 텍스트 작성 혹은 시각적 피드백 함께 제공
* 텍스트 콘텐츠 명도 대비
  * 명도 대비가 충분히 확보되지 않으면 텍스트 읽기가 어려움
  * 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 함
* 자동 재생 금지
  * 스크린 리더를 사용하는 경우, 자동 재생된 소리와 겹쳐 페이지 내용 파악이 어려움
* 콘텐츠 간 구분
  * 이웃한 콘텐츠는 구별될 수 있어야 하므로 테두리, 구분선, 명도대비, 간격 등으로 구분

#### ✅ **운용의 용이성** : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다

* 키보드 사용 보장
  * 모든 기능은 키보드만으로도 사용할 수 있어야 함
* 초점 이동
  * 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 함
* 조작 가능
  * 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다
  * 미세한 조작이 어려운 상황에서도 원하는 요소를 선택하여 조작할 수 있도록 해야 한다
* 응답 시간 조절
  * 시간 제한이 있는 콘텐츠는 응답 시간을 조절하거나, 종료 시간을 알려주어야 함
* 정지 시간 제공
  * 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
* 깜빡임과 번쩍임 사용 제한
  * 눈에 피로나 광과민성 발작을 일으킬 수 있으므로 하더라도 일정 조건 충족 필요
* 반복 영역 건너뛰기
  * 제공하더라도 건너뛰어 메인 콘텐츠로 이동할 수 있는 방법 제공
* 제목 제공
  * 적절한 제목을 제공함으로써 내용에 빠르게 접근할 수 있도록 도움
* 적절한 링크 텍스트
  * 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 함

#### ✅ **이해의 용이성** : 콘텐츠는 이해할 수 있어야 한다

* 기본 언어 표시
  * 주로 사용하는 언어를 명시 ex) `<html lang = "ko">`
* 사용자 요구에 따른 실행
  * 사용자가 의도하지 않은 기능 (새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 함
* 콘텐츠 선형 구조
  * 콘텐츠는 논리적인 순서로 제공해야 함
* 표의 구성
  * 표는 이해하기 쉽게 구성해야 함
* 레이블 제공
  * 사용자 입력에는 그에 대응하는 레이블을 제공해야 함
  * `<input>` 요소에 `value` 나 `placeholder` 속성만 설정하는 것은 적합하지 않고
  * `<input>` 요소에 `id` 를 설정하고 `<label>` 요소의 `for` 속성으로 연결하기
* 오류 정정
  * 입력 오류를 정정할 수 있는 방법을 제공해야 함

#### ✅ **견고성** : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 함

* 마크업 오류 방지
  * 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
* 웹 애플리케이션 접근성 준수
  * 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 하며, 없다면 대체 수단 제공 필요

\


### **3. WAI-ARIA**

#### 1. WAI-ARIA

* WAI(Web Accessibility Initiative)
  * 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
* ARIA (Accessible Rich Internet Applications)
  * 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

#### 2. WAI-ARIA의 필요성

* HTML 요소에 추가적으로 의미를 부여할 수 있게 해주므로 웹 접근성을 향상 시킬 수 있음

#### 3. WAI-ARIA 사용법

1. 역할(role)

*   HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시할 때 사용하는 속성

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

    ```html
      <!-- WAI-ARIA의 잘못된 사용 예시 : WAI-ARIA로 또다시 설명 -->
      <button role="button">button인 요소</button>
      <h1 role="button">h1인 요소</h1>
    ```

2. 상태(state)

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

    ```html
    <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>
    ```

3. 속성(property)

*   `aria-label`: 요소에 라벨을 붙여줌

    ```html
      <!-- 1. html 요소의 구조만으로는 어떤 역할을 하는 버튼인지 알기 힘듦 -->
      <button> <img src="X.png" /> </button>
      <button> <img src="돋보기.png" /> </button>

      <!-- 2. aria-label 사용 -->
      <button aria-label="닫기"/> <img src="X.png" /> </button>
      <button aria-label="검색"/> <img src="돋보기.png" /> </button>
    ```
* `aria-live`: 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시 (alert, modal 등)
  * 속성 값으로는 `polite`, `assertive`, `off(default)`가 있음
