콘텐츠의 선형구조 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 콘텐츠의 선형구조
요약 설명

관련 지침(적응성) : 콘텐츠의 읽기 순서와 포커스 이동 순서가 논리적으로 일치하는가?
플로팅 버튼·바텀시트·중첩 스크롤은 시각 순서와 뷰 트리 순서를 쉽게 어긋나게 합니다. 스크린 리더·키보드 탐색은 뷰 순서를 따릅니다.

모바일 앱 접근성 체크리스트(MACAG) 전체 보기
WCAG 2.2 — Meaningful Sequence

필요성

순서가 뒤바뀌면 제목 다음에 본문이 오지 않거나, 확인 다이얼로그보다 배경이 먼저 읽히는 등 문맥이 깨집니다. 특히 동적 삽입·애니메이션·조건부 표시는 빌드 후 순서를 다시 점검해야 합니다.

대상

  • 스크린 리더 사용자

    한 요소씩 순차 탐색하며 문서 흐름을 구성하는 사용자.

  • 키보드·스위치 접근 사용자

    포커스 이동만으로 전체 흐름을 따라가야 하는 사용자.

  • 인지 장애인

    예상 가능한 순서가 깨지면 작업을 중단하기 쉬운 사용자.

  • 고령 사용자

    복잡한 레이아웃에서 시선 이동과 음성 순서가 다를 때 혼란을 느끼는 사용자.

체크리스트

  • 시각 vs 접근성 트리

    스크린샷 순서와 VoiceOver/TalkBack 탐색 순서를 비교했는가?

  • 동적 영역

    로딩 후 삽입된 뷰가 본문보다 앞서 읽히지 않는가?

  • 중첩 스크롤

    내부 리스트와 외부 스크롤 간 포커스 트랩이 없는가?

  • 모달·시트

    열릴 때 포커스가 본문으로 새지 않고 제목으로 이동하는가?

구현 시 참고

Android

  • importantForAccessibility로 장식용 뷰를 숨기거나, 읽기 순서 조정 API를 신중히 사용합니다.
  • RecyclerView 아이템 재사용 시 포커스가 튀지 않도록 스테이트를 유지합니다.

iOS

  • Auto Layout 제약 변경 후 VoiceOver로 전체 흐름을 다시 읽습니다.
  • 커스텀 컨테이너는 자식 순서가 곧 읽기 순서임을 기억합니다.

WebView

DOM 순서를 시각 순서와 맞추고, CSS order·그리드로만 순서를 뒤집지 않도록 합니다.

점검 방법

  • 스크린 리더 ‘다음 요소’만으로 주요 시나리오(가입, 결제)를 끝까지 수행해 봅니다.
  • 가로·세로 전환, 글자 크기 최대, 다크 모드에서도 순서가 유지되는지 확인합니다.

개발방법

아래 코드는 콘텐츠의 선형구조 검사항목을 구현할 때 바로 참고할 수 있는 기본 예시입니다. 시각 순서와 포커스/읽기 순서가 일치하도록 화면 요소 배치를 관리합니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링