웹 접근성(Accessibility)

// 웹 접근성(Accessibility)

- 모든 사용자가 웹사이트에 쉽게 액세스하여 이용할 수 있도록 하는 것

- 사이트의 리소스 및 기능들을 누구나 쉽게 이용할 수 있어야 한다.

- 신체적 장애나 접근 기기, 위치 때문에 접근할 수 없는 문제를 최소화해야 한다. 

---

// WCAG의 웹 접근성의 네 가지 원칙

• Perceivable: 모든 사용자가 인지할 수 있어야 한다.
  - 시각, 청각 등 특정 감각으로만 인지할 수 있도록 만들면 안 된다.
  - Touch, See, Hear, Speak 관점 모두 고려해야 한다.
  - 스크린 리더, 점자 디스플레이, 고대비 모드, 색약 등을 고려해야 한다.
  
  
• Operable : 다양한 기기, 물리적 환경에서 사용할 수 있어야 한다.
  - 마우스가 없는 사용자, 터치스크린을 사용할 수 없는 사용자도 고려해야 한다.
  
  
• Understandable : 내용 및 인터페이스를 이해할 수 있어야 한다.
  - 직관적으로 사용자가 이해하고 사용할 수 있어야 한다.
  
  
• Robust: 다양한 사용자 에이전트에서 접근할 수 있어야 한다.
  - 특정 브라우저에서만 접근할 수 있으면 안 된다.

 https://www.w3.org/TR/WCAG20/

Web Content Accessibility Guidelines (WCAG) 2.0

---

// 웹 접근성 향상법

• 대체 텍스트 사용
  - 시각 장애가 있는 사용자도 콘텐츠를 이해할 수 있도록 이미지, 동영상 파일, 오디오 파일에 대체 텍스트를 사용한다.
    ~ 이미지: alt 속성 사용 / 동영상: 자막 사용 / 오디오: 대본 제공
  
  
• 시맨틱 마크업
  - 시맨틱 HTML 태그를 사용하여 내비게이션, 헤더, 본문, 푸터 등으로 사이트의 구분을 명확히 한다.
  - 마우스를 사용하지 않고 키보드만으로도 탐색할 수 있게 한다.
    ~ tabindex 속성을 사용하여 Tab으로 탐색할 있게 설정
  - ARIA를 사용하여 동적 콘텐츠의 접근성을 향상시킨다.
    ~ role, properties 활용
  
  
• 명확한 라벨과 연결
  - form에 사용되는 요소들은 명확하고 이해하기 쉬운 라벨이 필요하며, 라벨을 선택 시 연결된 요소가 선택되어야 한다.
    ~ '아이디' 라벨 클릭 시 아이디를 입력하는 input 박스 활성화
  
  
• 색상 대비
  - 색상 대비를 적절히 확보하여 색맹이나 색약이 있는 사용자, 또는 시력이 약한 사용자가 내용을 더 쉽게 볼 수 있게 한다.
  
  
• 반응형 디자인
  - 스마트폰, 태블릿 등 다양한 크기의 화면을 가진 기기에서도 콘텐츠에 쉽게 접근할 수 있도록 디자인한다.

---

이 외에도 <span>이나 <div> 태그에 링크 연결하지 않기 등 웹 접근성을 향상시키기 위한 다양한 방법들이 있다.

아래 사이트에서 더 구체적으로 확인할 수 있다.

https://www.w3schools.com/accessibility/index.php

Accessibility Tutorial