웹 접근성을 고려한 다크 모드 토글 버튼 제작 튜토리얼

웹 접근성을 고려한 다크 모드 토글 버튼 제작 튜토리얼

최근 웹사이트와 애플리케이션에서 다크 모드가 인기를 얻고 있습니다. 다크 모드는 사용자에게 시각적으로 편안함을 제공하고, 특히 어두운 환경에서 눈의 피로를 줄여주는 효과가 있습니다. 하지만 다크 모드를 적용할 때는 웹 접근성도 반드시 고려해야 합니다. 이번 글에서는 웹 접근성을 고려한 다크 모드 토글 버튼을 제작하는 방법을 알아보겠습니다.

1. HTML 구조 설계

먼저, 간단한 HTML 구조를 설계합니다. 다크 모드 토글 버튼은 사용자에게 선택할 수 있는 명확한 옵션을 제공해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다크 모드 토글 버튼</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>다크 모드 토글 예제</h1>
        <button id="dark-mode-toggle" aria-pressed="false" aria-label="다크 모드 토글 버튼" tabindex="0">
            다크 모드 켜기
        </button>
    </header>
    <main>
        <p>이곳은 다크 모드 예제입니다.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

위의 코드에서 aria-pressed 속성은 버튼의 상태를 나타내며, aria-label은 스크린 리더 사용자에게 버튼의 기능을 설명합니다.

2. CSS 스타일링

다음은 다크 모드와 라이트 모드를 위한 기본 스타일을 설정합니다. styles.css 파일을 생성하고 다음 내용을 추가합니다.

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

body.light-mode {
    background-color: white;
    color: black;
}

body.dark-mode {
    background-color: #121212;
    color: white;
}

#dark-mode-toggle {
    margin: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

위 CSS는 라이트 모드와 다크 모드의 배경색과 글자색을 정의하고, 전환 효과를 부드럽게 설정합니다.

3. JavaScript로 다크 모드 기능 구현

이제 토글 버튼의 기능을 추가할 JavaScript를 작성합니다. script.js 파일을 생성하고 다음 코드를 추가합니다.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    if (body.classList.contains('dark-mode')) {
        body.classList.remove('dark-mode');
        body.classList.add('light-mode');
        toggleButton.setAttribute('aria-pressed', 'false');
        toggleButton.textContent = '다크 모드 켜기';
    } else {
        body.classList.remove('light-mode');
        body.classList.add('dark-mode');
        toggleButton.setAttribute('aria-pressed', 'true');
        toggleButton.textContent = '다크 모드 끄기';
    }
});

위 코드에서 버튼 클릭 이벤트를 추가하여 다크 모드와 라이트 모드 간의 전환을 구현합니다. 버튼의 텍스트와 aria-pressed 속성도 동적으로 변경하여 접근성을 강화합니다.

4. 접근성 고려사항

• 명확한 라벨: 버튼에 aria-label을 사용하여 버튼의 기능을 명확히 설명합니다. 이는 스크린 리더 사용자에게 유용합니다.
• 키보드 접근성: 버튼에 tabindex 속성을 추가하여 키보드만으로도 접근할 수 있도록 합니다. 사용자가 Enter 키를 눌렀을 때도 기능이 작동하도록 추가적인 이벤트 리스너를 설정할 수 있습니다.

toggleButton.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        toggleButton.click();
    }
});

이 추가 코드는 사용자가 키보드를 통해 토글 버튼을 활성화할 수 있게 해줍니다.

마무리

이번 튜토리얼을 통해 웹 접근성을 고려한 다크 모드 토글 버튼을 제작하는 방법을 알아보았습니다. 웹 접근성은 모든 사용자에게 편리한 웹 경험을 제공하는 데 중요한 요소입니다. 사용자가 다크 모드 기능을 쉽게 사용할 수 있도록 구현하여, 보다 나은 사용자 경험을 만들어보세요. 앞으로도 접근성을 고려한 UI/UX 설계에 많은 관심을 기울이시길 바랍니다.