카페 사이트, 처음 코드와 고친 코드
알아 두세요
이 결과가 실제 장애인 사용자의 검증을 대신하지는 못합니다. 에이전트가 막혔다면 실제로도 문제가 있을 가능성이 높지만, 끝까지 갔다고 해서 문제가 없다는 뜻은 아닙니다. 실제 스크린리더가 읽어 주는 순서나 가상 커서 동작은 흉내 내지 않습니다. 한계와 실제 사용자 검증 방법
고치기 전
고치기 전 · 공지 열기를 눌러 8월 정기 휴무 안내 대화상자를 연다
https://demo.codeslog.com/book/vibe-a11y/ch25/start/index.html
- 키보드 에이전트: 3단계에서 막힘, 키보드로 갈 수 없음 (페이지 쪽 문제일 가능성이 큼)
- 스크린리더 에이전트: 14단계에서 막힘, 키보드로 갈 수 없음 (페이지 쪽 문제일 가능성이 큼)
고치기 전 · 키보드 에이전트: 3단계에서 막힘
페이지 구조는 보지만 마우스는 쓰지 않습니다. 포커스 표시가 보이지 않으면 지금 어디에 있는지 모릅니다.
1단계
포커스: 없음
파악한 것: '공지 열기'가 role=generic인 텍스트 요소로 표시되어 있고, 페이지의 Tab 정지점은 3개(오시는 길, 메뉴, 홈 링크)뿐임을 인지했다. '공지 열기'는 버튼이나 링크 역할이 부여되지 않아 포커스 가능한 요소 목록에 없다.
하려는 일: 우선 Tab으로 페이지를 순회하며 '공지 열기'에 해당하는 포커스 가능한 요소가 있는지 확인하려 한다.
한 일: Tab
결과: 요청 3회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
2단계
포커스: 메뉴 링크
파악한 것: 탭 정지점이 총 3개뿐이며 '공지 열기' 요소는 role이 generic으로 포커스 가능한 링크나 버튼이 아님을 인지했다. 현재 포커스는 '메뉴' 링크에 있다.
하려는 일: 남은 탭 정지점을 확인해 '공지 열기'에 도달 가능한 포커스 요소가 있는지 한 번 더 확인하려 한다.
한 일: Tab
3단계⚠ 막힘
포커스: 홈 링크
파악한 것: 탭 정지점이 3개뿐이며 '오시는 길', '메뉴', '홈' 링크만 포커스 가능하고, '공지 열기' 텍스트는 generic 요소로 포커스 불가능함을 확인했다.
하려는 일: '공지 열기'가 키보드로 접근 가능한 컨트롤이 아님을 최종 확인하고 막힘을 선언하려 한다.
한 일: 막혔다고 판단, 키보드로 갈 수 없음
원인 판단: 페이지 쪽 문제일 가능성이 큼
근거
- 성공 조건인 '8월 정기 휴무 안내' dialog의 open 상태가 충족되지 않았고, 에이전트가 3스텝에서 막힘(unreachable)을 명시적으로 선언했다.
- '공지 열기'가 role=generic 텍스트 요소로 노출되어 버튼/링크 역할이 없고 tabindex도 없어 키보드 포커스 순서(탭 정지점 3개: 오시는 길, 메뉴, 홈)에 포함되지 않았다.
- 전체 탭 순회를 수행해 도달 가능한 컨트롤을 모두 확인했으므로 탐색 부족이 아니라 앱의 키보드 도달 불가 결함으로 판단된다.
- 클릭 핸들러만 있는 비의미론적 요소는 마우스 전용 상호작용이 되어 keyboard 페르소나에게 구조적으로 차단된다.
실제 스크린리더에서는 다를 수 있는 점
- 접근성 트리에는 '공지 열기'라는 텍스트 이름이 보여 노드가 존재하는 것처럼 읽히지만, 실제 스크린리더에서는 generic 요소라 가상 커서로는 읽히되 폼 모드/포커스 이동으로는 활성화할 수 없어 사용자가 존재만 인지하고 실행하지 못하는 혼란이 발생할 수 있다.
- 트레이스 1스텝에서 tab 3회 요청 중 2회만 실행된 도구 측 기록이 있어, 실제 브라우저에서 탭 순회가 완전히 소진되었는지에 대한 미세한 불확실성이 남는다.
- 숨겨진 요소나 스크롤 후 나타나는 추가 탭 정지점이 접근성 스냅샷에 반영되지 않았을 가능성이 있어, 실제 스크린리더 탐색에서는 다른 경로가 드러날 여지가 있다.
- 클릭 핸들러가 Enter/Space 키 이벤트에도 바인딩되어 있을 경우 마우스 사용자와 키보드 사용자의 체감 결과가 달라질 수 있으나, 포커스 자체가 불가능해 검증되지 않았다.
고치기 전 · 스크린리더 에이전트: 14단계에서 막힘
화면은 보지 않습니다. 접근성 트리에서 제목, 랜드마크, 지금 포커스가 있는 곳과 그 주변 몇 줄만 읽습니다.
1단계
포커스: 없음
파악한 것: 현재 읽기 창에서 '오시는 길', '메뉴' 링크만 확인했고, '공지 열기' 버튼은 아직 보이지 않는다.
하려는 일: 문서를 더 읽어 '공지 열기' 컨트롤을 찾으려 한다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
2단계
포커스: 없음
파악한 것: 현재 읽기 창에는 오시는 길/메뉴/홈 링크와 카페 소개 텍스트만 있고 '공지 열기' 컨트롤은 보이지 않는다.
하려는 일: 문서를 계속 읽어 '공지 열기' 컨트롤을 찾으려 한다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
3단계
포커스: 없음
파악한 것: 읽기 창에서 카페 소개 텍스트만 발견되고 '공지 열기' 컨트롤은 아직 보이지 않는다.
하려는 일: 문서를 계속 읽어 '공지 열기' 컨트롤을 찾는다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
4단계
포커스: 없음
파악한 것: 현재 읽기 창에는 메뉴 관련 항목들만 보이고 '공지 열기' 컨트롤은 아직 발견되지 않았다.
하려는 일: 문서를 계속 읽어 내려가며 '공지 열기' 버튼을 탐색한다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
5단계
포커스: 없음
파악한 것: 메뉴 목록 항목들만 반복적으로 읽고 있으며 '공지 열기' 버튼이 읽기 창에 나타나지 않음을 인지했다.
하려는 일: 헤딩이나 랜드마크가 없으므로 계속 read_next로 문서를 탐색해 공지 열기 컨트롤을 찾는다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
6단계
포커스: 없음
파악한 것: 현재 읽기 창에는 메뉴 항목들(에이드, 케이크)만 보이고 '공지 열기' 컨트롤은 아직 보이지 않는다.
하려는 일: 문서를 계속 읽어 내려가 '공지 열기' 버튼을 찾는다.
한 일: 다음 줄 읽기
결과: 읽기 창 이동(브라우저 동작 없음)
7단계
포커스: 없음
파악한 것: 읽기 창에서 '공지 열기' 텍스트를 가진 generic 요소를 발견했다.
하려는 일: 해당 요소를 activate하여 대화상자를 열고자 한다.
한 일: 누르기
결과: ✕ 포커스를 받을 수 없는 요소
8단계
포커스: 없음
파악한 것: activate가 실패했음을 확인했고, 현재 읽기 창에는 상단 링크들만 보인다. '공지 열기' 버튼은 아직 화면에 없다.
하려는 일: tab 키로 포커스 가능한 컨트롤들을 순회하며 '공지 열기' 버튼을 찾는다.
한 일: Tab
결과: 요청 5회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
9단계
포커스: 메뉴 링크
파악한 것: 현재 포커스는 '메뉴' 링크이며 읽기 창에는 카페 소개 텍스트가 보인다. '공지 열기' 버튼은 아직 발견되지 않았다.
하려는 일: tab을 계속 눌러 포커스 가능한 컨트롤들을 순회하며 '공지 열기' 버튼을 찾으려 한다.
한 일: Tab
결과: 요청 3회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
10단계
포커스: 없음
파악한 것: 현재 포커스가 없고 읽기 창에는 링크 두 개만 보인다. '공지 열기' 버튼은 아직 발견되지 않았다.
하려는 일: tab을 계속 눌러 포커스 가능한 컨트롤을 탐색하며 '공지 열기' 버튼을 찾는다.
한 일: Tab
결과: 요청 5회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
11단계
포커스: 메뉴 링크
파악한 것: 현재 포커스는 '메뉴' 링크이며, 읽기 창에는 오시는 길/메뉴/홈 링크와 카페 소개 텍스트가 보인다. 아직 '공지 열기' 버튼은 발견되지 않았다.
하려는 일: tab을 계속 눌러 포커스 가능한 컨트롤을 순회하며 '공지 열기' 버튼을 찾는다.
한 일: Tab
결과: 요청 3회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
12단계
포커스: 없음
파악한 것: tab 이동 후 포커스 컨트롤이 문서 상단으로 되돌아온 것을 인지했다. 아직 '공지 열기' 버튼을 찾지 못했다.
하려는 일: tab을 계속 눌러 포커스 가능한 컨트롤을 순회하며 '공지 열기' 버튼을 탐색한다.
한 일: Tab
결과: 요청 5회 중 2회만 실행(페이지의 Tab 정지점 3개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
13단계
포커스: 메뉴 링크
파악한 것: 포커스가 다시 '메뉴' 링크로 돌아온 것을 인지했다. 이는 이전 tab 시퀀스에서 이미 거쳐간 요소로, 포커스 가능한 컨트롤들이 순환하고 있음을 시사한다.
하려는 일: 순환 여부를 확실히 하기 위해 tab을 한 번 더 눌러 다음 포커스 요소를 확인하고자 한다.
한 일: Tab
14단계⚠ 막힘
포커스: 홈 링크
파악한 것: tab 포커스가 '오시는 길'→'메뉴'→'홈' 순으로 순환하며 '공지 열기' 버튼에는 포커스가 도달하지 않는다.
하려는 일: 포커스 가능한 요소들을 계속 순회했으나 목표 버튼이 포커스 트래버설 순서에 포함되지 않음을 확인했다.
한 일: 막혔다고 판단, 키보드로 갈 수 없음
원인 판단: 페이지 쪽 문제일 가능성이 큼
근거
- 성공 조건인 '8월 정기 휴무 안내' dialog가 open 상태로 확인되지 않았고, 에이전트가 14스텝에서 막힘(unreachable)을 선언했다.
- '공지 열기'는 role이 generic으로 노출되어 버튼 의미가 없고, activate 시도에서 '포커스를 받을 수 없는 요소'로 실패했다.
- 페이지의 Tab 정지점이 '오시는 길/메뉴/홈' 3개뿐이며 순환 확인 결과 해당 컨트롤이 포커스 순서에 포함되지 않아 키보드 도달이 불가능했다.
- 읽기 탐색과 Tab 순회 두 경로를 모두 시도했으므로 정보 해석 실패로 보기 어렵다.
실제 스크린리더에서는 다를 수 있는 점
- 접근성 트리에서는 '공지 열기' 텍스트가 읽히므로 스크린리더 사용자가 존재는 인지하지만, 실제 NVDA/VoiceOver의 가상 커서에서는 클릭 가능 여부 힌트가 다르게 들릴 수 있다는 점을 평가자는 유의해야 한다.
- 실제 스크린리더의 가상 커서 Enter(클릭 패스스루)는 비포커스 요소의 click 핸들러를 발화시킬 수 있어, 도구상의 activate 실패가 실사용 실패와 일치하지 않을 가능성이 있다.
- 마우스 클릭으로는 대화상자가 열릴 수 있어 시각 사용자 기준 검증에서는 결함이 드러나지 않을 수 있다.
- 트레이스에서 focus가 null로 보고되는 구간이 있어, 포커스 추적 계측의 누락이 도달 불가 판정을 과장했을 여지가 있다.
고친 뒤
고친 뒤 · 공지 열기를 눌러 8월 정기 휴무 안내 대화상자를 연다
https://demo.codeslog.com/book/vibe-a11y/ch25/fixed/index.html
- 키보드 에이전트: 4단계 만에 끝까지 감
- 스크린리더 에이전트: 3단계 만에 끝까지 감
막힌 곳이 없었습니다. 접근성 트리의 제목·랜드마크·포커스와 키보드 조작만 살펴본 결과입니다.
고친 뒤 · 키보드 에이전트: 4단계 만에 끝까지 감
페이지 구조는 보지만 마우스는 쓰지 않습니다. 포커스 표시가 보이지 않으면 지금 어디에 있는지 모릅니다.
1단계
포커스: 없음
파악한 것: 공지 열기 버튼이 페이지의 마지막 탭 정지점(9번째)임을 인지했다.
하려는 일: Tab을 9회 눌러 공지 열기 버튼으로 포커스를 이동시킨다.
한 일: Tab
결과: 요청 9회 중 8회만 실행(페이지의 Tab 정지점 9개, 상한 25). 트리 노드 번호는 Tab 횟수가 아니다
2단계
포커스: 치즈 케이크 링크
파악한 것: 현재 포커스가 치즈 케이크 링크에 있음을 인지했다. 목표인 공지 열기 버튼이 다음 순서에 위치한다.
하려는 일: Tab을 눌러 공지 열기 버튼으로 포커스를 이동시키고자 한다.
한 일: Tab
3단계
포커스: 공지 열기 버튼
파악한 것: 포커스가 공지 열기 버튼에 위치함을 확인했다.
하려는 일: Enter 키를 눌러 공지 열기 버튼을 활성화하고자 한다.
한 일: Enter 키
4단계
포커스: 닫기 버튼
판정 근거
근거
- 성공 조건 전부 충족
실제 스크린리더에서는 다를 수 있는 점
- 접근성 트리 기준 완료이며 실제 스크린리더 발화는 검증하지 않음
고친 뒤 · 스크린리더 에이전트: 3단계 만에 끝까지 감
화면은 보지 않습니다. 접근성 트리에서 제목, 랜드마크, 지금 포커스가 있는 곳과 그 주변 몇 줄만 읽습니다.
1단계
포커스: 없음
파악한 것: 개요에서 '공지' 제목을 확인했다. 대화상자는 아직 열려 있지 않다.
하려는 일: 공지 섹션으로 이동해 '공지 열기' 버튼을 찾는다.
한 일: 다음 제목으로 건너뛰기
결과: 읽기 창 이동(브라우저 동작 없음)
2단계
포커스: 없음
파악한 것: 읽기 창에서 '공지 열기' 버튼을 발견했다.
하려는 일: 공지 열기 버튼을 활성화하여 대화상자를 연다.
한 일: 누르기
3단계
포커스: 닫기 버튼
판정 근거
근거
- 성공 조건 전부 충족
실제 스크린리더에서는 다를 수 있는 점
- 접근성 트리 기준 완료이며 실제 스크린리더 발화는 검증하지 않음