[css] CSS 가시성과 웹 접근성 가이드라인

26 Dec 2023

CSS는 Cascading Style Sheets로 웹 페이지의 시각적인 디자인과 레이아웃을 결정하는 데 사용됩니다. 이 문서에서는 CSS를 사용하여 웹 사이트의 가시성을 향상시키고 웹 접근성 가이드라인을 준수하는 방법에 대해 설명하겠습니다.

1. CSS를 활용한 가시성 개선

CSS를 사용하여 웹 페이지의 가시성을 개선하는 방법은 다양합니다. 여기에는 색상 대비, 폰트 크기 및 간격, 이미지 및 미디어 콘텐츠의 처리 등이 포함됩니다. 아래는 주요한 가시성 관련 CSS 속성입니다.

색상 대비: 텍스트와 배경 간의 적절한 색상 대비는 비장애인 뿐만 아니라 시각 장애인에게도 중요합니다. color 및 background-color 속성을 사용하여 적절한 색상 대비를 유지하세요.
```
.content {
  color: #333; /* 텍스트 색상 */
  background-color: #fff; /* 배경 색상 */
}
```
폰트 크기 및 간격: 텍스트의 가독성을 높이기 위해 font-size 및 line-height 속성을 적절히 설정하세요.
```
p {
  font-size: 16px; /* 폰트 크기 */
  line-height: 1.5; /* 줄 간격 */
}
```
이미지 및 미디어 콘텐츠: max-width 및 height 속성을 사용하여 이미지와 미디어 콘텐츠의 크기를 조절하고 유연한 레이아웃을 구성하세요.
```
img {
  max-width: 100%; /* 최대 너비 */
  height: auto; /* 비율에 맞게 자동 조절 */
}
```

2. 웹 접근성 가이드라인 준수

웹 접근성은 모든 사용자가 웹 사이트에 쉽게 접근하고 이해할 수 있도록 하는 것을 의미합니다. CSS를 사용하여 웹 접근성 가이드라인을 준수하는 방법은 다음과 같습니다.

시각적으로 숨김: 스크린리더 사용자에게만 표시되어야 하는 콘텐츠를 시각적으로 숨김 처리하세요.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

포커스 스타일링: 키보드로 탐색할 때 포커스가 있는 요소를 시각적으로 구별할 수 있도록 :focus 상태에 대한 스타일링을 제공하세요.
```
a:focus,
button:focus {
  outline: 2px solid #007bff; /* 포커스 표시 스타일 */
}
```
레이아웃 구조: 시멘틱 HTML과 함께 CSS를 사용하여 웹 페이지의 레이아웃을 구성하세요. 올바른 태그를 사용하여 콘텐츠의 구조를 명확히 전달하세요.

이러한 CSS 가시성 및 웹 접근성 가이드라인을 준수하면 모든 사용자에게 더 나은 웹 경험을 제공할 수 있습니다.

Web Content Accessibility Guidelines (WCAG)는 웹 접근성을 향상시키기 위한 국제 표준으로, 더 많은 정보를 제공합니다.