PLATON

탭 이름은 바뀌었는데 본문은 그대로라면, 선택 상태를 함께 점검합니다

플라톤마케팅 사내 원고 회의 기록, 2023년 12월

교통편 탭을 눌렀는데 주차 안내가 그대로 남거나, 본문은 바뀌었는데 이전 탭만 선택된 것으로 보일 수 있습니다. 이런 상태에서는 방문자가 어떤 정보를 읽고 있는지 판단하기 어렵습니다. 탭을 검수할 때에는 선택 표시와 연결된 본문이 함께 바뀌는지 확인해야 합니다. 마우스로 제목을 한 번 누르는 시험만으로는 키보드와 보조기술의 동작까지 확인하기 어렵습니다.

탭 이름과 표시할 내용을 먼저 연결합니다

GOV.UK는 탭을 관련된 콘텐츠 영역 사이를 이동하면서 한 영역씩 보여 주는 구성으로 설명합니다. 탭 구성 안내 홈페이지의 탭마다 어떤 내용을 담을지 정리하고 이름만 보고도 예상할 수 있는지 확인합니다. 같은 이름이 반복되거나 이름과 다른 지점의 안내가 나오면 먼저 콘텐츠 대응 관계를 고쳐야 합니다.

새 페이지로 이동하는 메뉴를 탭처럼 꾸몄는지, 같은 페이지 안에서 본문을 바꾸는 실제 탭인지도 구분합니다. 두 기능은 이용자가 기대하는 이동과 기록 방식이 다를 수 있습니다. 모양이 비슷하다는 이유로 같은 키보드 동작을 적용했다고 보고하지 않고 실제 구현 의도를 확인합니다.

노트북을 앞에 두고 자료를 설명하는 플라톤마케팅 구성원들
홈페이지 탭 구성을 검토하는 업무의 참고 사진입니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

초점이 간 탭과 열린 탭을 구분합니다

W3C APG는 초점을 받으면 자동으로 본문을 표시하는 탭과, 초점을 옮긴 뒤 Space 또는 Enter로 활성화하는 탭을 설명합니다. 가로 탭에서는 좌우 방향키로 탭 사이를 이동하며 Tab 키는 탭 목록 밖의 다음 조작 대상으로 이동하는 구조를 제시합니다. 탭 패턴과 키보드 동작

수동 활성화 방식에서는 초점 테두리가 옮겨졌지만 본문이 아직 바뀌지 않은 상태가 의도된 동작일 수 있습니다. 이를 무조건 오류로 판단하지 말고 활성화 키를 누른 뒤의 결과까지 확인합니다. 반대로 클릭 후 선택된 탭과 표시 패널이 다르면 별도로 기록합니다. 초점 표시와 선택 표시가 무엇을 의미하는지 구분하는 것이 중요합니다.

자동 활성화는 탭을 지날 때마다 내용을 불러오는 방식과 결합되면 탐색이 느려질 수 있습니다. APG는 눈에 띄는 지연 없이 패널을 표시할 수 있을 때 자동 활성화를 권장합니다. 운영자는 실제 페이지에서 빠르게 탭을 이동할 때 기다림이나 잘못된 본문 표시가 생기는지 확인합니다.

이름 / 탭에서 예상되는 내용 확인 · 초점 / 키보드 이동과 활성화 방식 구분 · 패널 / 선택 표시와 실제 본문 대조 · 이동 / 본문 진입과 다른 탭 복귀 확인
플라톤마케팅 검수 제안 · W3C APG Tabs 참고 · 2026-10-26

선택 상태와 숨겨진 내용의 관계를 확인합니다

화면의 강조 표시뿐 아니라 보조기술에 전달되는 선택 상태와 패널 연결도 확인합니다. APG는 활성 탭의 aria-selected를 true로, 나머지를 false로 설정하고 탭과 해당 패널을 연결하는 관계를 설명합니다. 코드에 속성이 있다는 사실만으로 실제 상태 전환이 맞다고 판단하지 않습니다.

가정으로 탭 3개를 마우스와 키보드라는 2개 방식으로 열면 6개 활성화 흐름을 비교할 수 있습니다. 이는 검수 범위 예시입니다. 각 흐름에서 선택 이름, 본문 제목, 실제 내용과 초점 위치를 적습니다. 현재 보이지 않는 패널의 링크에 키보드 초점이 들어가는지, 선택한 패널의 내용까지 이어서 읽을 수 있는지도 살펴봅니다.

본문을 늦게 불러오는 구현이라면 기다리는 동안 이전 내용이 새 탭의 내용처럼 보이지 않는지 확인합니다. 빠르게 다른 탭을 선택한 뒤 먼저 요청한 내용이 나중에 덮어쓰는 상황도 시험합니다. 단순한 표시 오류인지 자료를 불러오는 순서의 문제인지 재현 기록을 남겨 개발 담당자가 조사할 수 있도록 합니다.

회의 테이블에서 각자 노트북 자료를 검토하는 플라톤마케팅 구성원들
선택 표시와 열린 본문을 대조합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

작은 화면과 복귀 경로에서 다시 시험합니다

좁은 화면에서 마지막 탭이 잘리면 해당 정보가 있다는 사실을 놓칠 수 있습니다. 가로로 움직이는 탭 목록이라면 선택된 탭을 찾을 수 있는지, 확대했을 때 이름이 겹치지 않는지 확인합니다. 모바일에서는 다른 구성으로 바뀌는 사이트도 있으므로 넓은 화면의 결과를 그대로 적용하지 않습니다.

탭 안의 링크를 열었다가 돌아왔을 때 무엇이 선택되는지도 살펴봅니다. 특정 탭으로 직접 연결하는 기능을 제공한다면 주소로 진입했을 때 해당 탭과 본문이 함께 열리는지 확인합니다. 그런 기능이 없는 사이트에 있다고 가정하지 않고 제공하는 경로만 검수합니다.

수정 요청은 출발 탭, 누른 키나 버튼, 선택 표시, 열린 본문과 기대 결과를 묶어 작성합니다. 한 화면 캡처로는 초점만 옮긴 상태와 실제 활성화한 상태를 구별하기 어려울 수 있습니다. 방문자가 탭을 골라 해당 내용을 읽고 다음 조작으로 이어갈 수 있는지를 기준으로 결과를 기록합니다.

출처 확인일: 2026-10-26. 본문의 탭 이름과 수량은 설명용 가정이며 전체 접근성 준수를 판정한 결과는 아닙니다.

긴 테이블에 마주 앉아 논의하는 플라톤마케팅 구성원들
입력 방식별 탭 이동 결과를 기록합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

이 글과 이어지는 주제

이 글에 공감하셨다면, 상담 전에 다른 글도 한 번 보십시오. 저희와 맞는지 먼저 확인하시는 편이 서로에게 낫습니다.

카톡으로 물어보기
카카오톡 상담지금 바로 답변드립니다