웹접근성

웹접근성이란?

웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것

• 장애인 및 고령자를 포함한 모든 사람
• 다양한 플랫폼 및 디바이스와 웹브라우저 등 모든 환경

---

웹접근성 향상 방법

1. 웹접근성 지침 준수
   WCAG란?
   : W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침

• WCAG (Web Content Accessibility Guidelines)의 4가지 원칙
  • 인식 (Perceivable): 모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 함
  • 조작 (Operable): 모든 사용자는 서비스의 기능을 운영할 수 있어야 함 (ex. 마우스 없이 사용 가능해야 함)
  • 이해 (Understandable): 모든 사용자가 서비스 콘텐츠, 기능 사용법을 이해하기 쉬워야 함
  • 견고 (Robust): 사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능해야 함
    
    

2. 웹표준 기술의 활용
   : 웹에서 표준적으로 사용되는 기술이나 규칙

• HTML: 견고한 구조설계
• CSS: 레이아웃 및 스타일
• DOM, JavaScript: 동작 및 제어
• WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications): RIA를 위한 웹접근성 관련 기술.
  스크린리더 및 보조기기 등에서 접근성 향상을 위해 마크업에 역할, 속성, 상태 정보를 추가할 수 있도록 지원

---

웹접근성을 고려한 CSS

• 콘텐츠를 숨길 때
  display: none;은 스크린리더 등 보조기기가 인식할 수 없음.
  
  그래서 아래와 같이 사용

.class명{
   position: absolute !important;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin: -1px;
   clip: rect(0, 0, 0, 0);
   clip-path: polygon(0 0, 0 0, 0 0);
}

• 색에 의존한 정보 제공 오류
  : 색이 없다면 정보를 얻기 어려운 디자인이라면 패턴이나 레이블 등으로 구분이 필요
  
  
• 전경 색상과 배경 색상의 명도 대비 오류
  : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상
  
  
• 이웃한 콘텐츠 간의 구분
  : 여백을 주는 것도 좋지만 구분선을 사용하면 명확하게 콘텐츠를 구분할 수 있음

---

출처

유튜브 AOA11Y 채널
https://www.youtube.com/playlist?list=PLtaz5vK7MbK1vJ7HJjCV5xSy7bW7D_mbB