스크린리더로도 맥락이 이어지는 금융 화면

보이는 화면과 읽히는 내용이 달랐습니다

금융 앱의 접근성 심사 지적을 바탕으로 Vue WebView 화면과 공통 컴포넌트를 점검했습니다. 버튼 옆 숨김 라벨이 따로 읽히거나, FAQ의 질문과 답변 아이콘에 설명이 없는 문제가 있었습니다.

운영 중인 화면과 네이티브 뒤로가기 동작을 유지해야 했습니다. CSS나 화면 이동 구조를 크게 바꾸지 않고 접근 이름과 상태 전달을 보강하는 방향을 선택했습니다.

중복 낭독을 줄이고 FAQ 72개 항목에 설명을 붙였습니다

최근입금계좌 버튼과 별개로 읽히던 숨김 라벨을 버튼의 aria-label로 통합했습니다. 시각적으로 표시되는 이름을 포함하면서 버튼의 용도가 한 번에 전달되도록 했습니다.

FAQ의 시각적 아이콘은 유지하고 질문과 답변 컨테이너에 스크린리더용 구분 텍스트를 추가했습니다. 72개 항목을 수정한 뒤 원본과 diff를 비교해 기존 코드 삭제 여부를 확인했습니다.

<button>최근입금계좌</button>
<span class="sr-only">최근 입금 계좌 조회</span>

<button aria-label="최근입금계좌 조회">
  최근입금계좌
</button>

포커스를 가두는 것만으로 배경 낭독은 막히지 않았습니다

전체 화면 모달을 제어하는 공통 함수를 분석하니 포커스 트랩은 있었지만 배경 낭독 차단과 닫힌 뒤 포커스 복원은 별도 검토가 필요했습니다. 키보드 포커스와 스크린리더의 탐색 방식이 다르다는 점을 기준으로 문제를 나눴습니다.

기존 모달에 dialog 역할과 접근 이름을 보강하는 방향을 정리했습니다. 전역 유틸은 여러 화면에 영향을 주기 때문에 마크업 담당자와 적용 범위, 포커스 이동 순서와 회귀 확인 범위를 함께 검토했습니다.

2026년 8월 최종 심사를 통과했습니다

2026년 7월 웹 영역 1차 심사를 거쳐 8월 최종 심사를 통과했습니다. 버튼의 접근 이름과 FAQ 구분을 보강하며 화면을 보지 않고도 기능과 내용을 이해할 수 있도록 개선했습니다.