웹 접근성 기본 점검, 키보드만으로 사이트를 써 보는 법

웹 접근성을 가장 쉽게 점검하는 방법은 마우스를 치우고 키보드의 Tab 키만으로 사이트를 처음부터 끝까지 써 보는 것입니다. 메뉴로 이동하고, 버튼을 누르고, 입력 폼을 채워 보내는 일까지 키보드로 할 수 있는지, 지금 어디에 있는지 눈으로 보이는지를 확인하면 많은 문제를 찾을 수 있습니다. 이 점검은 특별한 도구 없이 몇 분 만에 할 수 있어 디자인 검토 단계에서 바로 해 보기 좋습니다.

웹 접근성은 장애가 있거나 다른 환경에서 웹을 쓰는 사람도 정보를 얻고 기능을 쓸 수 있도록 사이트를 만드는 일입니다. 손을 다쳐 잠시 마우스를 못 쓰는 사람처럼 누구나 접근성의 도움을 받을 수 있습니다.

키보드 점검은 어떻게 하나요?

사이트를 열고 Tab 키를 누르면 링크와 버튼, 입력칸 같은 조작할 수 있는 요소로 차례대로 이동합니다. Shift와 Tab을 함께 누르면 거꾸로 이동하고, Enter나 스페이스 키로 버튼을 누릅니다. 이렇게 사이트의 주요 기능을 끝까지 써 보면서 막히는 곳이 있는지 봅니다.

가장 먼저 확인할 것은 이동하는 순서입니다. 화면에서 위에서 아래, 왼쪽에서 오른쪽으로 읽는 순서와 Tab 이동 순서가 비슷해야 자연스럽습니다. 순서가 뒤죽박죽이면 키보드를 쓰는 사람은 원하는 곳을 찾기 어렵습니다.

점검 항목	확인할 것	자주 생기는 문제
이동 순서	화면 읽는 순서와 비슷한지	순서가 뒤섞임
포커스 표시	지금 위치가 보이는지	테두리를 지워 위치를 모름
메뉴	하위 메뉴까지 열리는지	마우스를 올려야만 열림
팝업	닫기와 빠져나오기가 되는지	팝업 안에 갇힘

포커스 표시는 왜 중요한가요?

포커스 표시는 키보드로 이동할 때 지금 어떤 요소에 있는지 알려 주는 테두리나 강조 효과입니다. 디자인을 깔끔하게 보이려고 이 테두리를 지우는 경우가 있는데, 그러면 키보드 사용자는 자신이 어디에 있는지 알 수 없습니다. 기본 테두리가 디자인과 어울리지 않는다면 지우는 대신 브랜드 색으로 다시 디자인하는 것이 좋습니다.

포커스 표시는 배경과 대비가 충분해야 잘 보입니다. 흐린 회색 테두리는 밝은 배경에서 거의 보이지 않으므로, 두께와 색을 조정해 눈에 띄게 만듭니다.

메뉴와 팝업은 어떻게 점검하나요?

마우스를 올려야만 열리는 하위 메뉴는 키보드로 열리지 않는 경우가 많습니다. Tab 키로 메뉴에 갔을 때 Enter나 방향키로 하위 메뉴를 열 수 있는지 확인합니다. 팝업 창은 열렸을 때 포커스가 팝업 안으로 옮겨 가고, 닫기 버튼이나 Esc 키로 닫을 수 있어야 합니다. 팝업을 닫은 뒤에는 원래 있던 자리로 포커스가 돌아와야 사용자가 길을 잃지 않습니다.

본문이 시작되기 전에 메뉴가 길게 이어지는 사이트라면, 첫 Tab에서 본문으로 바로 건너뛰는 링크를 두면 편합니다. 더 체계적인 점검 항목과 디자인 사례는 일본 무좀약 같은 곳의 자료도 함께 참고해 보면 범위를 넓히는 데 도움이 됩니다.

자주 묻는 질문

키보드 점검만으로 접근성이 충분한가요?
중요한 출발점이지만 전부는 아닙니다. 색 대비, 이미지 대체 텍스트, 화면 낭독기 점검도 함께 하는 것이 좋습니다.

포커스 테두리가 디자인을 해치면 어떻게 하나요?
지우지 말고 브랜드 색과 두께로 다시 디자인하면 됩니다. 보이기만 하면 모양은 자유롭게 정할 수 있습니다.

점검은 언제 하는 것이 좋나요?
디자인 시안 단계부터 고려하고, 개발 뒤 실제 화면에서 다시 확인하는 것이 가장 효율적입니다.