본문 바로가기
Study/CSS

CSS 기초 강의 8편: 웹 접근성과 시맨틱 태그 활용하기

by wawManager 2024. 11. 23.
728x90

1. 웹 접근성(Accessibility)란?

웹 접근성은 장애가 있거나 특수한 요구가 있는 사용자를 포함한 모든 사용자들이 웹 콘텐츠를 쉽게 이해하고 상호작용할 수 있도록 돕는 것입니다. 웹 접근성을 고려한 웹 페이지는 스크린 리더와 같은 보조 기기를 사용하는 사용자들에게도 유용하며, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줍니다.

2. 시맨틱 태그(Semantic Tags)

HTML5에서는 웹 구조를 보다 의미 있게 나타내기 위해 시맨틱 태그가 도입되었습니다. 시맨틱 태그를 사용하면 페이지 구조를 논리적으로 표현할 수 있어, 스크린 리더 같은 접근성 도구가 콘텐츠의 의미를 더 쉽게 파악할 수 있습니다.

주요 시맨틱 태그

태그설명

<header> 페이지나 섹션의 머리글
<nav> 내비게이션 링크 모음
<main> 페이지의 주요 콘텐츠
<section> 주제별 콘텐츠 영역
<article> 독립적으로 구분되는 콘텐츠(게시글, 뉴스 등)
<aside> 보조 콘텐츠 영역
<footer> 페이지나 섹션의 바닥글

예제: 시맨틱 태그로 구조화된 HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>시맨틱 태그 예제</title>
</head>
<body>
    <header>
        <h1>웹 접근성 강의</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>접근성의 중요성</h2>
            <p>모든 사용자들이 웹 콘텐츠에 쉽게 접근할 수 있도록 돕는 접근성...</p>
        </article>

        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="#link1">추가 자료</a></li>
                <li><a href="#link2">추천 사이트</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2024 웹 접근성 예제 사이트</p>
    </footer>
</body>
</html>

코드 설명

  • <header>, <footer>, <nav>, <main> 등의 시맨틱 태그를 사용하여 페이지 구조를 명확히 구분했습니다.
  • 스크린 리더와 같은 접근성 도구가 이러한 태그를 읽고 구조를 쉽게 파악할 수 있습니다.

3. ARIA 속성(Accessible Rich Internet Applications)

ARIA 속성은 HTML만으로 접근성을 충분히 제공하지 못하는 경우, 보조 기기에서 더 쉽게 콘텐츠를 이해할 수 있도록 추가하는 속성입니다. 주로 스크린 리더를 사용하는 사용자를 위해 요소의 역할과 상태를 명확하게 전달하는 데 사용됩니다.

주요 ARIA 속성

속성설명

aria-label 요소의 레이블을 추가하여 스크린 리더가 읽을 수 있도록 함
aria-labelledby 다른 요소의 ID를 참조하여 레이블을 제공
aria-hidden 요소를 스크린 리더에서 숨김
aria-live 동적으로 변하는 콘텐츠 영역을 알림
aria-expanded 요소가 확장되었는지 여부 (true 또는 false)
role 요소의 역할을 명시 (예: button, alert)

예제: ARIA 속성 적용하기

<button aria-label="닫기 버튼">X</button>

<div aria-labelledby="section-title" aria-live="polite">
    <h2 id="section-title">실시간 업데이트</h2>
    <p>이 영역은 실시간으로 업데이트됩니다.</p>
</div>

<div>
    <button aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">메뉴 열기</button>
    <ul id="menu" aria-hidden="true" style="display:none;">
        <li><a href="#item1">메뉴 항목 1</a></li>
        <li><a href="#item2">메뉴 항목 2</a></li>
    </ul>
</div>

코드 설명

  • aria-label: X 버튼이 "닫기 버튼"임을 스크린 리더에게 설명합니다.
  • aria-live: 실시간으로 업데이트되는 영역을 스크린 리더가 알 수 있도록 설정합니다.
  • aria-expanded, aria-controls, aria-hidden: 메뉴 버튼의 확장 여부와 상태를 명시하여 메뉴가 열리고 닫히는 동작을 스크린 리더가 인식할 수 있게 합니다.

4. CSS로 웹 접근성 향상하기

CSS도 웹 접근성에 중요한 역할을 합니다. 콘텐츠 가독성, 색상 대비, 포커스 스타일 등을 설정하여 접근성을 높일 수 있습니다.

1) 색상 대비

텍스트와 배경색 간의 충분한 대비는 시각 장애나 색각 이상이 있는 사용자에게 매우 중요합니다. WCAG(Web Content Accessibility Guidelines)에서는 텍스트와 배경 색상의 대비율을 최소 4.5:1로 설정할 것을 권장합니다.

body {
    color: #333; /* 어두운 텍스트 */
    background-color: #fff; /* 밝은 배경 */
}

2) 포커스 스타일

키보드만 사용하는 사용자가 쉽게 탐색할 수 있도록 링크와 버튼에 포커스 스타일을 설정합니다.

button:focus, a:focus {
    outline: 3px solid #4CAF50;
}

3) 접근성을 고려한 폰트 크기

텍스트가 너무 작으면 가독성이 떨어지므로, 폰트 크기를 16px 이상으로 설정하고, 유동적인 em이나 rem 단위를 사용해 접근성을 높일 수 있습니다.

body {
    font-size: 1rem; /* 기본 폰트 크기를 설정 */
    line-height: 1.6;
}

5. 접근성을 고려한 웹 페이지 예제

아래는 시맨틱 태그와 ARIA 속성을 함께 사용하여 접근성을 고려한 웹 페이지 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>웹 접근성 예제</title>
    <style>
        body {
            font-size: 16px;
            color: #333;
            background-color: #fff;
        }
        a:focus, button:focus {
            outline: 3px solid #4CAF50;
        }
    </style>
</head>
<body>
    <header>
        <h1>웹 접근성 예제</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2 id="accessibility-title">접근성의 중요성</h2>
            <p>모든 사용자들이 웹 콘텐츠에 쉽게 접근할 수 있도록 돕는 접근성...</p>
        </article>

        <aside>
            <h3>관련 자료</h3>
            <ul>
                <li><a href="#resource1">추가 자료</a></li>
                <li><a href="#resource2">추천 사이트</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <button aria-label="맨 위로" onclick="window.scrollTo(0, 0);">Top</button>
        <p>© 2024 웹 접근성 예제 사이트</p>
    </footer>
</body>
</html>

코드 설명

  • 시맨틱 태그를 사용하여 페이지 구조를 정의했습니다.
  • ARIA 속성으로 버튼에 레이블을 추가하여 스크린 리더가 이해할 수 있도록 했습니다.

6. 웹 접근성을 위한 추가 팁

1) 대체 텍스트 (alt) 제공

이미지에는 반드시 alt 속성을 추가하여 스크린 리더가 이미지 내용을 읽어줄 수 있도록 합니다. 중요한 이미지에만 대체 텍스트를 제공하며, 장식용 이미지는 alt=""로 설정하여 스크린 리더가 무시하도록 합니다.

<img src="example.jpg" alt="웹 접근성 설명을 위한 이미지">
<img src="decorative.jpg" alt=""> <!-- 장식용 이미지 -->

2) 링크와 버튼에 의미 있는 텍스트 추가

링크나 버튼에는 사용자가 이해할 수 있도록 의미 있는 텍스트를 추가합니다. 예를 들어, "자세히 보기" 대신 "접근성 강의 자세히 보기"와 같이 텍스트를 구체적으로 작성하는 것이 좋습니다.

<a href="#accessibility-details">접근성 강의 자세히 보기</a>

3) 키보드 내비게이션 지원

모든 기능은 키보드로 접근 가능해야 합니다. tabindex 속성을 사용하여 초점 이동 순서를 제어하거나 특정 요소에 접근할 수 있도록 합니다.

<div tabindex="0">키보드로 접근 가능한 영역</div>

예제: 웹 접근성을 고려한 실전 HTML 코드

아래 예제는 시맨틱 태그와 ARIA 속성, 웹 접근성 기본 원칙을 활용하여 사용자들이 쉽게 탐색하고 이해할 수 있는 웹 페이지를 구성한 예입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>접근성을 고려한 웹 페이지 예제</title>
    <style>
        body {
            font-size: 16px;
            color: #333;
            background-color: #fff;
            line-height: 1.6;
        }
        a:focus, button:focus {
            outline: 3px solid #4CAF50;
        }
    </style>
</head>
<body>
    <header>
        <h1>웹 접근성 예제</h1>
        <nav aria-label="주요 메뉴">
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article aria-labelledby="accessibility-title">
            <h2 id="accessibility-title">웹 접근성의 중요성</h2>
            <p>웹 접근성은 모든 사용자가 웹 콘텐츠에 쉽게 접근하고 이해할 수 있도록 돕는 중요한 요소입니다.</p>
            <img src="accessibility.jpg" alt="웹 접근성을 설명하는 그림">
        </article>

        <aside>
            <h3>관련 자료</h3>
            <ul>
                <li><a href="#resource1">추가 자료</a></li>
                <li><a href="#resource2">추천 사이트</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <button aria-label="맨 위로" onclick="window.scrollTo(0, 0);">Top</button>
        <p>© 2024 웹 접근성 예제 사이트</p>
    </footer>
</body>
</html>

코드 설명

  • 시맨틱 태그와 ARIA 속성을 활용하여 각 요소의 의미를 명확하게 표현했습니다.
  • 이미지에는 **대체 텍스트(alt)**를 포함하여 스크린 리더가 이미지의 내용을 설명할 수 있도록 했습니다.
  • 키보드 포커스 스타일을 설정하여 링크나 버튼이 선택될 때 시각적 피드백을 제공합니다.

요약

이번 강의에서는 **웹 접근성(Accessibility)**의 개념과 중요성을 이해하고, 시맨틱 태그와 ARIA 속성을 통해 접근성을 높이는 방법을 배웠습니다. 웹 접근성은 모든 사용자를 고려하는 중요한 원칙으로, 시맨틱 HTML과 CSS, ARIA 속성을 활용하여 다양한 사용자가 편리하게 웹 콘텐츠를 이용할 수 있도록 설계해야 합니다.

다음 강의에서는 CSS 변수와 유용한 함수를 소개하여, CSS 코드를 더욱 효율적이고 일관성 있게 작성하는 방법을 알아보겠습니다.

728x90

'Study > CSS' 카테고리의 다른 글

CSS 기초 강의 10편: CSS 프레임워크를 활용한 빠른 웹 페이지 제작  (0) 2024.11.25
CSS 기초 강의 9편: CSS 변수와 함수 활용하기  (0) 2024.11.24
CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기  (0) 2024.11.22
CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리  (0) 2024.11.21
CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기  (0) 2024.11.20

관련글

티스토리툴바