초코의 풀스택 도전기 13: 웹 접근성을 고려한 CSS 적용 방법

스토리텔링 2024. 10. 8. 10:18

도입

CSS 최적화와 성능 개선을 배운 초코는 웹사이트의 속도를 개선하는 데 성공했지만, 여전히 뭔가 부족하다고 느꼈다.

"멘토님, 저희 웹사이트가 빠르고 깔끔하게 보이긴 하지만, 모든 사람이 쉽게 사용할 수 있을까요? 장애가 있는 사용자나 특정 기기를 사용하는 사용자들도 쉽게 웹사이트를 사용할 수 있을지 궁금해요."

멘토는 미소를 지으며 대답했다. "좋은 질문이야, 초코야. 웹사이트의 접근성은 매우 중요한 주제야. 모든 사람이 웹사이트에 쉽게 접근하고 사용할 수 있도록 만드는 것이 목표이지. CSS를 사용해 웹 접근성을 크게 개선할 수 있어. 오늘은 그 방법을 배워보자."

1. 웹 접근성이란?

먼저 멘토는 웹 접근성에 대한 기본 개념을 설명했다.

"웹 접근성(Web Accessibility)은 장애나 환경에 상관없이 모든 사용자가 웹사이트를 쉽게 이용할 수 있도록 만드는 것이야. 시각 장애인, 청각 장애인, 색맹 사용자나 키보드만 사용하는 사용자들도 웹사이트를 탐색하고 사용할 수 있어야 해."

초코는 고개를 끄덕였다. "모든 사용자를 고려해야 하는 거군요. 그렇다면 CSS로 어떻게 접근성을 개선할 수 있나요?"

2. 색상 대비 (Color Contrast)

"첫 번째로 배울 건 **색상 대비(Color Contrast)**야. 웹사이트의 텍스트와 배경색 사이의 대비가 너무 낮으면, 시각 장애가 있는 사람들은 텍스트를 읽기 어려울 수 있어."

코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>색상 대비 예제</title>
  <style>
    .low-contrast {
      color: #999999; /* 밝은 회색 텍스트 */
      background-color: #ffffff; /* 흰색 배경 */
    }

    .high-contrast {
      color: #000000; /* 검은색 텍스트 */
      background-color: #ffffff; /* 흰색 배경 */
    }
  </style>
</head>
<body>

  <div class="low-contrast">
    <p>이 텍스트는 대비가 낮아서 읽기 어렵습니다.</p>
  </div>

  <div class="high-contrast">
    <p>이 텍스트는 대비가 높아서 읽기 쉽습니다.</p>
  </div>

</body>
</html>

설명:

저대비 예시: low-contrast 클래스는 텍스트 색상이 밝은 회색(#999999)으로 설정되어 있고, 배경색은 흰색(#ffffff)이야. 이 경우 텍스트와 배경의 대비가 낮아 시각적으로 불편하고, 시력이 좋지 않은 사용자는 텍스트를 쉽게 읽을 수 없어.
고대비 예시: high-contrast 클래스에서는 검은색 텍스트와 흰색 배경을 사용해서 대비를 높였어. 이렇게 하면 시각 장애가 있거나 시력이 약한 사용자도 쉽게 읽을 수 있어.

추가 설명: 웹 접근성 표준인 **WCAG(Web Content Accessibility Guidelines)**에 따르면, 일반 텍스트와 배경 사이의 색상 대비는 4.5:1 이상이 권장돼. 이를 위해 온라인 색상 대비 도구를 사용해 웹사이트의 텍스트와 배경의 대비 비율을 확인할 수 있어.

"첫 번째 예시는 대비가 낮아서 읽기 어려워. 반면 두 번째 예시는 검은색 텍스트와 흰색 배경 사이의 대비가 충분히 높아서 모든 사용자가 쉽게 읽을 수 있어." 초코는 두 예시를 비교하며 말했다. "아, 이렇게 대비만 높여도 텍스트가 훨씬 더 잘 보이네요!"

3. 포커스 스타일 (Focus Styles)

"두 번째로 알아볼 것은 **포커스 스타일(Focus Styles)**이야. 키보드만 사용하는 사용자들이 웹사이트를 탐색할 때, 포커스가 어디에 있는지 시각적으로 확인할 수 있어야 해."

코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>포커스 스타일 예제</title>
  <style>
    a {
      color: blue;
      text-decoration: none;
    }

    a:focus {
      outline: 2px solid red; /* 포커스가 있을 때 빨간색 테두리 추가 */
    }
  </style>
</head>
<body>

  <a href="#">이 링크에 포커스가 있을 때 빨간색 테두리가 나타납니다.</a>

</body>
</html>

설명:

a:focus: 이 CSS 규칙은 링크에 포커스가 있을 때 적용돼. 키보드로 Tab 키를 사용해 탐색할 때 링크에 빨간색 테두리가 추가되면서 현재 선택된 항목을 시각적으로 확인할 수 있어. 이 방법은 특히 시각 장애나 키보드 탐색 사용자에게 매우 유용해.

추가 설명: CSS를 사용해 모든 인터랙티브 요소들(버튼, 링크, 폼 입력란 등)에 포커스 스타일을 추가하면, 키보드만으로 웹사이트를 탐색하는 사용자들이 사이트를 더욱 쉽게 사용할 수 있어.

"이 코드는 링크에 포커스가 있을 때, 빨간색 테두리가 나타나도록 해. 키보드로 탐색하는 사용자들은 이렇게 포커스를 쉽게 볼 수 있어야 해."

초코는 키보드로 링크에 포커스를 맞춰보며 말했다. "오! 포커스가 어디 있는지 명확하게 보이니까 탐색하기가 훨씬 쉽네요!"

4. 읽기 흐름과 시각적 배치

"세 번째는 읽기 흐름과 시각적 배치야. CSS를 통해 콘텐츠를 화면에 배치할 수 있지만, 시각적으로 보이는 순서와 스크린 리더가 읽는 순서가 일치하도록 신경 써야 해."

멘토는 **float**와 **position**을 사용하는 방법을 보여주며 설명했다.

코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta charset="viewport" content="width=device-width, initial-scale=1.0">
  <title>읽기 흐름 예제</title>
  <style>
    .image {
      float: right;
      width: 200px;
    }
  </style>
</head>
<body>

  <p>이 텍스트는 스크린 리더가 먼저 읽습니다.</p>
  <img src="choco.jpg" alt="이미지 설명" class="image">
  <p>이 텍스트는 이미지를 스크린 리더가 먼저 읽고 나서 읽습니다.</p>

</body>
</html>

설명:

시각적 배치: 이 코드는 이미지를 오른쪽으로 배치하지만, HTML 코드에서 텍스트가 먼저 나와. 따라서 스크린 리더는 이 구조에 따라 텍스트를 먼저 읽고, 그 다음에 이미지를 설명해.
alt 속성: 이미지에는 alt 속성을 사용해 이미지 설명을 제공하는데, 스크린 리더가 이미지의 대체 텍스트로 읽어줘. 이것은 시각 장애가 있는 사용자들에게 매우 중요해.

추가 설명: 스크린 리더 사용자가 웹사이트를 쉽게 탐색할 수 있도록, CSS를 통해 시각적으로 배치한 콘텐츠와 HTML 코드의 읽기 순서가 일치하도록 주의해야 해.

"이 예시에서 이미지를 오른쪽에 배치했지만, 스크린 리더는 텍스트를 먼저 읽어. CSS로 시각적 배치를 다르게 할 수 있지만, 읽기 흐름은 HTML 순서를 따르기 때문에 이를 고려해서 배치해야 해."

초코는 고개를 끄덕이며 말했다. "아, 스크린 리더 사용자들도 콘텐츠를 제대로 이해하려면 읽기 흐름을 고려해야 하는군요!"

5. 접근성을 고려한 레이아웃

멘토는 마지막으로 레이아웃을 어떻게 접근성 있게 디자인할 수 있는지 설명했다.

"웹페이지의 레이아웃이 모든 사용자에게 편리하게 사용될 수 있도록 디자인하는 것도 중요해. 예를 들어, 반응형 디자인을 통해 다양한 기기에서 편하게 볼 수 있도록 해야 해."

멘토는 미디어 쿼리를 사용한 반응형 디자인의 예시를 보여주었다.

코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>반응형 레이아웃 예제</title>
  <style>
    .container {
      width: 100%;
      padding: 20px;
    }

    @media (min-width: 768px) {
      .container {
        max-width: 600px;
        margin: auto;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <p>이 레이아웃은 작은 화면에서는 100% 너비를 사용하고, 큰 화면에서는 중앙에 고정됩니다.</p>
  </div>

</body>
</html>

설명:

미디어 쿼리: @media (min-width: 768px)는 화면의 너비가 768px 이상일 때만 적용되는 CSS 규칙이야. 작은 화면에서는 100% 너비를 사용하지만, 큰 화면에서는 중앙에 고정된 레이아웃을 보여줘.
반응형 디자인: 이는 모바일과 데스크톱 같은 다양한 기기에서 웹사이트가 적절히 표시되도록 도와줘. 다양한 화면 크기에 맞춰 적응형 레이아웃을 제공하는 것이 중요해.

추가 설명: 웹 접근성을 개선하기 위해 모든 디바이스에서 콘텐츠가 적절히 표시되도록 미디어 쿼리와 반응형 디자인을 사용하는 것이 필수적이야.

"이 코드는 작은 화면에서는 전체 너비를 사용하고, 큰 화면에서는 중앙에 고정된 레이아웃을 보여줘. 이렇게 하면 다양한 화면 크기에 맞춰 웹페이지가 제대로 표시되지."

초코는 반응형 레이아웃을 보며 말했다. "모든 기기에서 웹페이지가 보기 좋게 표시되니까 훨씬 더 유용하네요!"

결론

초코는 웹 접근성을 고려한 CSS 적용 방법을 배우면서, 모든 사용자가 웹사이트를 쉽게 이용할 수 있도록 디자인하는 것이 얼마나 중요한지 깨달았다.

"이제 더 많은 사람들이 접근할 수 있는 웹사이트를 만들 수 있겠어요!" 초코는 자부심 가득한 얼굴로 말했다.

멘토는 미소 지으며 말했다. "맞아, 웹 접근성은 사용자 경험을 높이고, 더 많은 사람들이 웹사이트에 접근할 수 있게 만드는 중요한 요소야. 이를 염두에 두고 항상 디자인하는 것이 웹 개발의 핵심이야."

'스토리텔링' 카테고리의 다른 글

프로그래밍이란? 왜 배워야 할까? (5)	2024.10.10
초코의 풀스택 도전기 14: 반응형 이미지와 비디오 다루기 (2)	2024.10.09
초코의 풀스택 도전기 12: 웹 성능 최적화와 CSS 파일 최적화 방법 (0)	2024.10.07
초코의 풀스택 도전기 11: CSS 프레임워크로 웹 개발 효율성 높이기 (0)	2024.10.06
초코의 풀스택 도전기 10: CSS 애니메이션으로 웹페이지에 생동감 더하기 (2)	2024.10.05

ABOUT ME

EduTech Hub EduTech Hub

도입

1. 웹 접근성이란?

2. 색상 대비 (Color Contrast)

코드 예시

설명:

3. 포커스 스타일 (Focus Styles)

코드 예시

설명:

4. 읽기 흐름과 시각적 배치

코드 예시

설명:

5. 접근성을 고려한 레이아웃

코드 예시

설명:

결론

'스토리텔링' 카테고리의 다른 글

티스토리툴바

ABOUT ME

도입

1. 웹 접근성이란?

2. 색상 대비 (Color Contrast)

코드 예시

설명:

3. 포커스 스타일 (Focus Styles)

코드 예시

설명:

4. 읽기 흐름과 시각적 배치

코드 예시

설명:

5. 접근성을 고려한 레이아웃

코드 예시

설명:

결론

'스토리텔링' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바