웹 개발 기초집LESSON 07

접근성의 첫 원칙

난이도입문

예상 시간25분

선수지식이전 강의

7강. 접근성의 첫 원칙

이번 강의의 결과물은 키보드만으로 주요 영역과 링크, 폼을 순서대로 탐색할 수 있는 포트폴리오입니다.

1. 이번 강의에서 해결할 문제

마우스를 사용하기 어렵거나 화면을 볼 수 없는 사용자도 포트폴리오를 이용할 수 있어야 합니다. 이번 강의에서는 별도 접근성 도구를 덧붙이기 전에 HTML 자체의 의미와 키보드 동작을 점검합니다.

학습 목표

마우스를 사용하기 어렵거나 화면을 볼 수 없는 사용자도 포트폴리오를 이용할 수 있어야 합니다. 이번 강의에서는 별도 접근성 도구를 덧붙이기 전에 HTML 자체의 의미와 키보드 동작을 점검합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

키보드 접근: Tab으로 다음 요소, Shift+Tab으로 이전 요소, Enter 또는 Space로 알맞은 기능을 실행할 수 있어야 합니다.
포커스: 현재 키보드 입력을 받을 요소입니다. 화면에서 위치를 알아볼 수 있어야 합니다.
접근 가능한 이름: 링크 텍스트, 버튼 텍스트, 연결된 label, 이미지의 alt처럼 요소의 목적을 설명하는 이름입니다.
네이티브 HTML 우선: 이동은 a, 동작은 button, 입력은 input처럼 이미 키보드 동작과 의미가 있는 요소를 사용합니다.
문서 순서: 키보드 탐색 순서는 기본적으로 HTML에 작성된 순서를 따릅니다.

div에 클릭 동작을 붙이는 것보다 button을 사용하면 브라우저가 포커스와 키보드 동작을 기본 제공합니다. W3C도 모든 상호작용 요소를 키보드로 사용할 수 있게 하고 레이블을 입력과 연결하도록 안내합니다. W3C 접근성 개발 팁

3. 코드 예시

파일 위치: web-basics/portfolio/index.html

body의 첫 번째 요소로 건너뛰기 링크를 추가하고 main에 목적지 id를 지정합니다.

<body>
  <a href="#main-content">본문으로 건너뛰기</a>

  <header>
    <h1>게임과 웹을 공부하는 개발자</h1>
    <nav aria-label="주요 메뉴">
      <ul>
        <li><a href="#about">소개</a></li>
        <li><a href="#projects">프로젝트</a></li>
        <li><a href="#contact">문의</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <!-- 소개, 프로젝트, 문의 영역 -->
  </main>

  <footer>
    <p><a href="https://github.com/baggu4402">GitHub 프로필 보기</a></p>
  </footer>
</body>

문의 폼은 6강처럼 모든 필드에 보이는 label을 유지합니다.

<label for="email">이메일</label>
<input id="email" name="email" type="email" required>
<button type="submit">문의 내용 확인</button>

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

4. 코드가 동작하는 이유

페이지 첫 링크를 실행하면 반복 메뉴를 지나 main으로 바로 이동할 수 있습니다.
a[href], button, input, textarea는 기본적으로 키보드 포커스를 받을 수 있습니다.
의미 있는 링크·버튼 텍스트는 화면 낭독기와 음성 입력 사용자에게 목적을 알려 줍니다.
시맨틱 영역과 제목 계층은 사용자가 페이지 구조를 탐색하는 기준이 됩니다.
올바른 label, alt, lang은 화면에 보이는 모양 외에도 이름과 언어 정보를 전달합니다.

접근성은 마지막에 추가하는 기능이 아니라 HTML을 선택하는 순간부터 결정됩니다. W3C의 기초 점검도 키보드 접근, 보이는 포커스, 레이블, 대체 텍스트를 직접 확인하도록 안내합니다. W3C 접근성 간편 점검

5. 자주 하는 실수

클릭할 수 있는 div를 만들고 키보드 동작은 구현하지 않음
outline: none으로 포커스 표시만 제거함
tabindex="1" 같은 양수 값으로 탐색 순서를 억지로 재배치함
아이콘이나 여기라는 말만 링크 이름으로 사용함
placeholder만 있고 보이는 label이 없음
네이티브 요소가 있는데도 불필요한 ARIA 역할을 추가함

6. 짧은 실습 과제

마우스를 사용하지 않고 Tab만으로 페이지 끝까지 이동합니다.
현재 포커스 위치를 매번 눈으로 확인할 수 있는지 점검합니다.
건너뛰기 링크로 main에 이동합니다.
모든 링크는 Enter, 버튼은 Enter 또는 Space로 사용할 수 있는지 확인합니다.
각 이미지의 alt, 각 폼 필드의 label, 문서의 lang을 점검합니다.
링크 텍스트만 따로 읽어도 목적지를 추측할 수 없는 표현을 수정합니다.

완료 기준은 키보드만으로 모든 상호작용 요소에 도달하고 현재 위치와 각 요소의 목적을 알 수 있는 것입니다.

7. 이해 점검 질문 3개

클릭 동작을 구현할 때 div보다 button을 먼저 고려해야 하는 이유는 무엇인가요?
양수 tabindex로 순서를 재배치하는 방식이 유지보수하기 어려운 이유는 무엇인가요?
건너뛰기 링크는 어떤 사용자의 어떤 문제를 해결하나요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ