연재의 마지막 회차입니다. 지금까지 대비 · 대체 텍스트 · 초점 · 키보드 순서 · 폼 · 모션 · 제목 계층을 다뤘습니다. 문제는 이것을 화면마다 매번 처음부터 확인할 수는 없다는 것입니다.
해결은 일을 두 갈래로 나누는 것입니다. 기계가 정확하게 판정할 수 있는 부분은 도구에 맡기고, 판단이 필요한 부분만 사람이 봅니다.
자동 검사가 잘하는 것과 못 하는 것
오른쪽은 도구가 사람보다 빠르고 정확합니다. 반대로 왼쪽은 도구가 통과시켜도 틀릴 수 있습니다. alt 속성이 있으면 검사는 통과하지만 그 안에 파일 이름이 적혀 있을 수 있고, 대비 계산은 단색 배경에서만 확실하며 사진 위에서는 사람이 봐야 합니다.
그러니 자동 검사의 결과를 “점수” 로 읽지 않는 편이 좋습니다. 통과는 기계적 결함이 없다는 뜻이지 사용할 만하다는 뜻이 아닙니다.
사람이 하는 15분 — 네 가지
Tab 한 바퀴는 초점 표시와 이동 순서를 동시에 확인합니다. 네 번째 회차의 다섯 줄 점검표를 그대로 씁니다.
200% 확대는 글자를 키우거나 창을 좁혔을 때 무엇이 사라지는지 봅니다. 가로 스크롤이 생기거나, 겹쳐서 읽을 수 없게 되거나, 고정된 요소가 화면을 덮는 문제가 여기서 드러납니다.
제목만 훑기는 제목 계층이 목차로 말이 되는지 봅니다. 제목 목록만 읽어서 페이지 내용이 짐작되면 통과입니다.
이미지 없이 읽기는 대체 텍스트의 실제 값을 확인하는 방법입니다. 이미지가 빠진 상태에서도 문단이 이어지면 좋은 alt 이고, 아무 정보도 남지 않으면 다시 써야 합니다.
페이지가 아니라 템플릿을 봅니다
사이트에 페이지가 200개라도 템플릿은 대개 열 개 남짓입니다. 점검을 템플릿 단위로 하면 한 번의 수정이 그 템플릿을 쓰는 모든 페이지에 적용됩니다. 페이지 단위로 점검하면 같은 결함을 200번 발견하게 됩니다.
이 목록을 별도의 접근성 점검표로 두지 않고 기존 디자인 QA 체크리스트에 섞어 두는 것이 오래갑니다. 별도 문서는 바쁠 때 먼저 생략되지만, 이미 돌고 있는 점검표의 네 줄은 생략되지 않습니다.
연재를 마치며
여덟 회차를 관통하는 것은 하나입니다 — 여기서 다룬 것 중 규정 준수 서류인 것은 없습니다. 읽히는 글자, 보이는 커서, 예측 가능한 이동, 이해되는 오류 메시지는 전부 디자인 품질이고, 잘 만들면 모든 방문자가 이득을 봅니다.
워드프레스는 이 모든 것을 제대로 할 수 있는 도구입니다 — 테마와 템플릿이 우리 손에 있고, 마크업 구조를 우리가 정할 수 있기 때문입니다. 문제가 생기는 것은 도구가 아니라 손대지 않은 채 쌓인 시간 쪽입니다.
운영 중인 사이트의 마크업 구조 · 성능 · 보안을 한 번에 정리하고 싶다면 최적화 지원 사업이 그 작업을 한 건으로 다루고, 우리가 실제로 어떤 순서로 진단하고 검증하는지는 작업 과정에 절차 그대로 공개돼 있습니다.