웹사이트 제작자라면 꼭 알아야 할 접근성의 기준
“모든 사용자가 웹사이트를 자유롭게 이용할 수 있어야 한다”는 웹 접근성의 원칙은 이제 선택이 아닌 필수가 되고 있습니다. 그 중심에 있는 것이 바로 **WAI-ARIA Authoring Practices Guide(APG)**입니다.
이번 글에서는 Elementor 공식 블로그에서 소개한 APG의 핵심 개념과 실전 적용 방법을 초심자의 눈높이에 맞춰 정리해보았습니다.
📚 목차
- APG란 무엇인가요?
- 왜 중요한가요?
- WAI-ARIA와 WCAG 2.1의 관계
- 핵심 구성요소와 예제 패턴
- APG를 웹사이트에 적용하는 방법
- 주의할 점과 실수 방지 팁
- 마무리 정리
1. 🔎 APG란 무엇인가요?
**APG(Authoring Practices Guide)**는 W3C의 WAI(Web Accessibility Initiative) 그룹에서 만든 가이드입니다. 이 가이드는 웹 개발자가 WAI-ARIA를 적절하게 적용할 수 있도록 실용적인 패턴과 예제를 제공합니다.
쉽게 말해, 접근성이 우수한 UI 컴포넌트를 만들기 위한 설명서입니다.
예를 들어, 드롭다운 메뉴, 탭, 모달 등 인터랙티브 요소들을 어떻게 마크업하고, 어떤 ARIA 속성을 써야 하는지 단계별로 설명되어 있습니다.
2. 🎯 왜 중요한가요?
- 시각, 청각, 신체 등의 장애가 있는 사용자도 웹사이트를 이용할 수 있도록 하기 위해
- 웹 접근성 기준 WCAG 2.1을 만족시키기 위해
- 법적 규제를 피하기 위해 (국가별로 접근성 법규 존재)
- UX 향상 및 브랜드 신뢰도 제고 효과까지!
실제로 키보드만 사용하는 사용자, 스크린 리더 사용자, 색각 이상 사용자에게는 접근성 있는 마크업이 사이트 이용의 전제조건이 됩니다.
3. 🧩 WAI-ARIA와 WCAG 2.1의 관계
- WAI-ARIA: 스크린리더 등 보조 기술이 UI를 이해할 수 있도록 돕는 속성(Attribute) 체계입니다.
- WCAG 2.1: 웹 접근성을 평가하는 국제 표준 지침입니다.
- APG: 위 두 가지를 바탕으로, 실전에서 어떤 컴포넌트를 어떻게 만들어야 하는지를 알려주는 매뉴얼입니다.
4. 🧱 핵심 구성요소와 예제 패턴
APG는 다양한 UI 패턴을 다룹니다. 대표적인 예는 다음과 같습니다:
- 모달 다이얼로그 (Dialog)
- 아코디언 (Accordion)
- 탭(Tab) UI
- 트리 뷰(Tree View)
- 슬라이더(Slider)
- 알림(Alert)
각 항목에 대해:
- 어떤 HTML 요소를 사용해야 하는지
aria-labelledby,aria-expanded등 어떤 ARIA 속성을 써야 하는지- 키보드로 어떻게 이동하게 만들어야 하는지를 자세히 설명합니다.
5. 🛠 웹사이트에 APG 적용하는 방법
- 패턴 확인: APG 공식 사이트에서 원하는 UI 패턴 찾기
- 샘플 코드 확인: 예제 HTML + JavaScript 구조 분석
- ARIA 속성 이해: 속성이 의미하는 바 파악
- 테스트: 스크린리더, 키보드 등으로 실제 동작 확인
- 반복 개선: 피드백을 반영하여 접근성 향상
6. ⚠️ 자주 하는 실수와 방지 팁
- 단순히 ARIA 속성만 추가하고 테스트하지 않음 ❌
tabindex를 남용하여 키보드 흐름을 방해 ❌- 디자인에만 신경 쓰고 시멘틱 구조는 무시 ❌
팁:
- 먼저 HTML을 시멘틱하게 구성하세요 (
<nav>,<button>,<header>등) - 그 후에 필요한 ARIA 속성을 보완하는 것이 좋습니다.
7. 📝 마무리 정리
APG는 단순한 문서가 아닙니다. 모두를 위한 웹을 만드는 실천 지침서입니다.
복잡한 UI도 접근 가능하게 만들 수 있도록 도와주는 이 가이드를 따라가며, 여러분의 사이트를 진정한 의미에서 “모두를 위한 공간”으로 만들어보세요.
📌 출처 명시: Elementor 공식 블로그의 “Authoring Practices Guide (APG) Explained” 글을 기반으로 재작성되었습니다.