WordPress로 접근성 구현

WordPress 자체는 접근 가능할 수 있습니다 — 문제는 대개 테마, 플러그인, 페이지 블록을 통해 옵니다.

흔한 발견 위치

대비가 너무 낮거나 보이는 포커스가 없는 테마, 일시정지/키보드 조작이 없는 슬라이더 플러그인, 레이블 없는 필드가 있는 삽입형 양식(Contact Form 7 등), 대체 텍스트 없는 이미지 블록, 그리고 제목을 그저 큰 문단으로 바꿔 버리는 페이지 빌더. WordPress 코어 편집기는 대개 문제가 아니며 — 그 위 계층이 문제입니다.

테마 점검 및 선택

테마는 대비, 포커스 표시, 제목 구조, 내비게이션의 키보드 조작을 좌우합니다. 선택 전 기준: Tab 키로 페이지를 훑어보세요 — 포커스가 항상 보이나요? 메뉴가 마우스 없이 조작되나요? 텍스트와 버튼의 색 대비가 최소 4,5:1인가요? 블록 기반 기본 테마(Twenty Twenty-Four/-Five)는 견고한 출발점입니다. 유료 테마는 CSS를 끈 상태로 데모를 살펴보고 키보드 테스트를 하면 도움이 됩니다.

블록 편집기에서 깔끔하게 작업하기

제목 블록을 올바른 순서로 사용하세요(페이지당 H1 하나, 단계를 건너뛰지 않기) — 글자를 크고 굵게 만드는 데 그치지 마세요. 모든 이미지 블록에 대체 텍스트를 주고, 순수 장식용 이미지는 명시적으로 장식용으로 표시하세요. 동작에는 버튼 블록을, 페이지 이동에는 실제 링크를 사용하세요. 목록은 목록 블록으로, 대시가 있는 문단으로 만들지 마세요. 표는 진짜 표 데이터에만, 머리글 행과 함께 사용하세요.

플러그인과 양식

양식 플러그인(Contact Form 7, WPForms, Gravity Forms)은 각 필드에 보이고 연결된 레이블이 있고 오류 메시지가 필드에 결합되어 있을 때만 접근 가능한 양식을 만듭니다 — 자리표시자 텍스트만으로는 부족합니다. 슬라이더와 캐러셀에는 일시정지 버튼이 필요하며 키보드 포커스를 가두어서는 안 됩니다. 의심스러우면 빼세요. 페이지 빌더(Elementor, Divi, WPBakery)는 그 자체로 접근 불가는 아니지만 의미 없는 중첩 div 구조를 유도합니다 — 여기서는 특히 제목과 포커스에 주의하세요.

테스트

추가 소프트웨어 없이 하는 세 가지 빠른 테스트: (1) 키보드만으로 페이지를 조작하세요 — Tab, Enter, 화살표 키; 어디든 갈 수 있고 다시 빠져나올 수 있나요? (2) 브라우저에서 200%로 확대하세요 — 모든 것이 읽히고 조작 가능한 상태로 남나요? (3) WAVE나 axe DevTools 같은 브라우저 확장을 실행하세요. a11yglass의 무료 스캔은 추가로 여러분의 홈페이지가 전달한 HTML을 대비, 대체 텍스트, 레이블, 언어, 구조 측면에서 검사하고 각 발견 사항에 대해 WCAG 기준을 명시합니다.

자주 묻는 질문

접근성 플러그인을 설치하면 사이트가 준수가 되나요? 아니요 — 위젯으로 대비와 글꼴 크기를 전환하는 오버레이 플러그인은 구조적 문제를 해결하지 못하며 장애인 권익 단체의 비판을 받습니다. 어느 테마가 접근 가능한가요? 인증 마크는 없습니다. 결정적인 것은 구체적 사례에서의 구현입니다 — 위 기준이 선택에 도움이 됩니다. 내 WordPress 사이트에 접근성 선언이 필요한가요? 이는 사이트가 BFSG(전자상거래) 적용 대상인지, 공공기관이 운영하는지에 달려 있습니다 — 접근성 선언 페이지를 참조하세요.

a11yglass가 돕는 방법

무료 스캔은 제공된 HTML과 CSS를 자동으로 인식 가능한 WCAG 위반에 대해 점검하고, 각 발견 사항마다 성공 기준과 구체적인 조치를 제시합니다. 문제의 약 20~35 %를 발견하며 완전한 평가를 대체하지 않습니다.

계속 읽기

최선의 지식에 따른 일반 정보이며 법률 자문이 아닙니다. 개별 사안은 IT 법을 전문으로 하는 법무법인에 문의하세요.