실습 환경 준비하기

이 교재의 실습을 따라하려면 다음 도구들이 필요합니다. 대부분 무료이며, 설치가 간단합니다.

필수 도구

코드 편집기 — VS Code

VS Code를 설치합니다. 다음 확장 프로그램을 함께 설치하면 접근성 작업에 도움이 됩니다.

• axe Accessibility Linter: 코드 작성 중 실시간으로 접근성 문제를 알려줍니다.

브라우저 — Chrome

Chrome을 기본 브라우저로 사용합니다. 다음 확장 프로그램을 설치합니다.

• axe DevTools (무료 버전): Chrome 웹 스토어에서 "axe DevTools"를 검색하여 설치합니다.
• Lighthouse는 Chrome DevTools에 기본 포함되어 있습니다 (F12 → Lighthouse 탭).

스크린리더

스크린리더는 PART 08에서 본격적으로 다루지만, 미리 설치해두면 좋습니다.

Windows: NVDA — 무료, 가장 널리 쓰이는 스크린리더입니다.

macOS: VoiceOver — macOS에 기본 내장되어 있습니다. 별도 설치가 필요 없습니다.

실습 코드 저장소

git clone https://github.com/sung2ne/textbook-web-accessibility.gitcd textbook-web-accessibility

저장소 구조는 다음과 같습니다.

textbook-web-accessibility/
├── part01/          ← PART별 예제 코드
├── part02/
├── ...
├── part10/
│   ├── before/      ← 리팩토링 전 코드
│   └── after/       ← 리팩토링 후 코드
└── README.md

개발자 도구 접근성 패널

Chrome DevTools에는 접근성 전용 패널이 있습니다.

1. F12로 개발자 도구를 엽니다.
2. Elements 탭에서 HTML 요소를 선택합니다.
3. 우측 패널에서 Accessibility 탭을 클릭합니다.

접근성 트리(Accessibility Tree)와 해당 요소의 접근성 속성을 확인할 수 있습니다. PART 05에서 자세히 다룹니다.

환경 확인

설치가 완료되면 Chrome을 열고 다음 URL에 접속해봅니다.

https://webaim.org/

axe DevTools 아이콘을 클릭하고 "Scan ALL of my page"를 눌러봅니다. 이 사이트의 접근성 점수를 확인하며 도구가 정상 작동하는지 확인합니다.