포용적인 웹 만들기: 워드프레스 접근성 초보자 가이드 (파트 2)
Source: Dev.to
접근 가능한 테마 선택
테마는 사이트의 기반입니다. 테마가 제대로 만들어지지 않으면 접근성 문제와 끊임없이 싸워야 합니다.
살펴볼 항목
- 워드프레스 테마 디렉터리에서 “Accessibility‑ready” 라벨이 있는지
- 명확한 포커스 상태(탭을 눌렀을 때 현재 위치가 보이는지)
- 충분한 색 대비
- 논리적인 헤딩 구조
빠른 테스트 (≈ 30 초)
- 사이트를 엽니다.
- 마우스를 치워 놓습니다.
- Tab 키를 반복해서 누릅니다.
스스로에게 물어보세요:
- 현재 위치가 보이나요?
- 메뉴에 접근할 수 있나요?
- Enter 로 버튼을 활성화할 수 있나요?
가능하지 않다면 테마 교체를 고려하세요. 스크린 리더는 올바른 헤딩 계층 구조에 크게 의존합니다—헤딩을 목차처럼 생각하면 됩니다.
헤딩 구조
올바른 계층
H1 → 페이지 제목
H2 → 주요 섹션
H3 → 하위 섹션하지 말아야 할 것
- “보기에 더 예쁘다”는 이유만으로 H2에서 H4로 건너뛰지 마세요.
- 텍스트를 굵게 만들고 헤딩이라고 부르지 마세요.
Gutenberg에서는 일반 텍스트를 스타일링하는 대신 Heading 블록을 사용하세요.
깨끗한 구조는 접근성뿐 아니라 SEO에도 도움이 됩니다.
Alt 텍스트
Alt 텍스트는 모든 픽셀을 설명하는 것이 아니라 이미지의 목적을 전달하는 것입니다.
스스로에게 물어보세요: 누군가 이 이미지를 볼 수 없다면 무엇을 알려줘야 할까?
- ❌ “여성의 이미지” (너무 모호)
- ✅ 목적을 설명하고, 장식적인 요소는 제외합니다.
이미지가 순수히 장식용이라면 alt="" 와 같이 alt 속성을 비워 둘 수 있습니다.
색 대비
낮은 대비는 가장 흔한 문제 중 하나입니다(예: 흰 배경에 연한 회색 텍스트).
간단한 점검
- 밝은 배경에 너무 연한 텍스트는 피하세요.
- 링크는 명확히 보이게 하세요(단순히 약간 어두운 텍스트만으로는 부족).
- 의미를 전달할 때 색상에만 의존하지 마세요.
키보드 네비게이션
많은 사용자는 마우스를 사용할 수 없으며, 키보드, 보조 스위치 또는 다른 입력 방식을 사용합니다.
사이트 테스트
- 메뉴를 Tab 키로 탐색합니다.
- 드롭다운을 엽니다.
- 폼을 제출합니다.
- 팝업을 닫습니다.
막히는 부분이 있으면 사용자는 바로 막히게 됩니다. 키보드 접근성은 선택 사항이 아닙니다.
폼
폼은 자주 불만을 초래하는 요소입니다.
확인 사항:
- 모든 필드에 눈에 보이는 라벨이 있어야 합니다.
- 필수 필드는 명확히 표시합니다.
- 오류 메시지는 무엇이 잘못됐는지 설명해야 합니다.
- 오류는 해당 필드 근처에 표시합니다.
명확하고 접근 가능한 폼은 이탈률을 낮춥니다.
플러그인: 도움이 되지만 마법은 아니다
플러그인을 사용하면 다음을 할 수 있습니다:
- 스킵 링크 추가
- 포커스 상태 강조
- 일반적인 문제 스캔
유용하지만 플러그인만으로 완전한 접근성을 보장할 수는 없습니다. 플러그인은 좋은 관행을 지원할 뿐, 이를 대체하지는 못합니다.
미디어(동영상, 팟캐스트, 오디오)
미디어를 삽입할 때는 항상 다음을 제공하세요:
- 캡션 또는 트랜스크립트
이점
- 청각 장애인에게 도움
- 비원어민에게도 유용
- SEO 향상
- 시끄러운 환경에서도 이용 가능
캡션은 “추가적인 좋은 기능”이 아니라 포용의 필수 요소입니다.
테스트 체크리스트
낮은 비용의 점검부터 시작해 반복적으로 개선합니다:
- 키보드 전용 탐색
- 200 % 확대(스케일링 문제 확인)
- 모바일 테스트
- 브라우저 접근성 도구(예: Lighthouse)
눈에 띄는 문제부터 먼저 해결하세요. 접근성은 완벽함이 아니라 진행이며, 한 번에 모든 것을 고칠 필요는 없습니다.
우선순위
- 더 나은 헤딩
- 더 나은 Alt 텍스트
- 더 나은 대비
- 키보드 테스트
작은 개선이 시간이 지나면서 큰 차이를 만듭니다.
마무리 생각
파트 1에서는 모두가 사용할 수 있는 놀이터를 만드는 이야기를 했습니다. 이제 실제로 그 놀이터를 만들 도구를 갖추었습니다. 접근성은 완벽함을 목표로 하는 것이 아니라, 개선할 때마다 이전에 접근하지 못했던 사람에게 웹을 열어 주는 것입니다. 그것이 중요한 이유입니다.