10장: 웹 접근성과 CSS

웹 접근성은 장애가 있는 사람들을 포함하여 모든 사용자가 웹 콘텐츠를 접근하고 사용할 수 있도록 하는 것을 목표로 합니다. 이 장에서는 웹 접근성을 고려한 CSS 디자인 원칙과 기술을 다룹니다.

### 10.1 웹 접근성이란?

웹 접근성(Web Accessibility)은 웹 사이트와 웹 애플리케이션을 모든 사용자가 사용할 수 있도록 하는 것을 의미합니다. 여기에는 시각, 청각, 운동 능력, 인지 능력에 장애가 있는 사람들이 포함됩니다. 웹 접근성을 보장하기 위해서는 HTML, CSS, JavaScript 등 모든 웹 기술이 적절하게 사용되어야 합니다.

### 10.2 접근성을 고려한 CSS 디자인

CSS는 웹 페이지의 외관과 사용성을 개선하는 데 중요한 역할을 합니다. 다음은 접근성을 고려한 CSS 디자인 원칙입니다.

#### 10.2.1 색상 대비

텍스트와 배경색 사이의 충분한 대비를 유지하여 시각 장애가 있는 사용자가 콘텐츠를 쉽게 읽을 수 있도록 합니다.

예제:
body {
    color: #333; /* 어두운 회색 텍스트 */
    background-color: #fff; /* 흰색 배경 */
}

a {
    color: #1a73e8; /* 파란색 링크 */
}

a:hover {
    color: #d32f2f; /* 빨간색 링크 */
}

#### 10.2.2 폰트 크기와 가독성

충분한 폰트 크기와 줄 간격을 사용하여 텍스트의 가독성을 높입니다.

예제:
body {
    font-size: 16px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

h1, h2, h3 {
    line-height: 1.2;
}

#### 10.2.3 키보드 네비게이션

키보드만으로도 웹 페이지를 탐색할 수 있도록 포커스 스타일을 명확히 정의합니다.

예제:
a, button, input, textarea {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

### 10.3 색상 대비와 접근성

색상 대비는 텍스트와 배경 색상 사이의 차이를 나타내며, 시각 장애가 있는 사용자가 콘텐츠를 읽을 수 있도록 도와줍니다. WCAG(Web Content Accessibility Guidelines)에서는 텍스트와 배경의 최소 대비 비율을 4.5:1로 권장합니다.

#### 10.3.1 색상 대비 체크

색상 대비를 확인하려면 온라인 도구를 사용할 수 있습니다. 예를 들어, WebAIM의 Contrast Checker를 사용하여 텍스트와 배경 색상의 대비 비율을 계산할 수 있습니다.

#### 10.3.2 색상 대비 CSS 예제

예제:
body {
    color: #333; /* 어두운 회색 텍스트 */
    background-color: #fff; /* 흰색 배경 */
}

a {
    color: #0056b3; /* 파란색 링크 */
}

a:hover {
    color: #004085; /* 짙은 파란색 링크 */
}

### 10.4 접근성 테스트 도구

접근성 테스트 도구를 사용하면 웹 사이트의 접근성을 확인하고 개선할 수 있습니다. 다음은 몇 가지 유용한 도구입니다.

#### 10.4.1 Axe

Axe는 웹 페이지의 접근성을 자동으로 테스트하고, 문제를 발견하여 수정 방법을 제안하는 브라우저 확장 도구입니다.

#### 10.4.2 Lighthouse

Lighthouse는 Google Chrome에 내장된 웹 개발 도구로, 웹 페이지의 성능, 접근성, SEO를 테스트하고 개선 사항을 제안합니다.

#### 10.4.3 WAVE

WAVE는 WebAIM에서 제공하는 접근성 평가 도구로, 웹 페이지의 접근성 문제를 시각적으로 표시하고 해결 방법을 제안합니다.

### 연습 문제

1. 웹 페이지의 텍스트와 배경 색상 사이의 대비를 확인하고, 충분한 대비를 유지하도록 CSS를 수정해 보세요.
2. 폰트 크기와 줄 간격을 조정하여 텍스트의 가독성을 높이는 CSS를 작성해 보세요.
3. 키보드 네비게이션을 위한 포커스 스타일을 정의하여 모든 인터랙티브 요소가 키보드로 탐색 가능하도록 해 보세요.
4. Axe, Lighthouse, WAVE 등의 접근성 테스트 도구를 사용하여 웹 페이지의 접근성을 평가하고, 발견된 문제를 해결해 보세요.