Front-end/웹접근성

[앱접근성] UI 요소 순서가 논리적인지 파악하기

mooyou 2025. 4. 13. 22:32
728x90
300x250
SMALL

 

스크린리더(VoiceOver, TalkBack)는 화면을 시각적으로 보지 않고, 요소들을 하나씩 읽어주며 탐색한다.

그래서 탐색 순서가 논리적이어야 한다.

 

예시1: 로그인 화면

UI 요소(시각 순서) 스크린리더 읽기 순서( ❌ 잘못된 예)
1. 이메일 입력창 1. 로그인 버튼
2. 비밀번호 입력창 2.이메일 입력창
3. 로그인 버튼 3. 비밀번호 입력창

 

UI 시각 순서 대로 이메일 -> 비밀번호 -> 로그인 버튼 순서로 읽혀야 하지만 그렇지 않을 경우 사용자 혼란!


예시 2: 카드형 UI리스트

[🔍검색창]
[📰 뉴스 제목1]
[📷 이미지]  [📝 설명]
[❤️ 좋아요 버튼]
  • 스크린리더가 읽을 때도 뉴스제목 -> 이미지 -> 설명 -> 좋아요 버튼 이런 순서로 정보 흐름이 자연스러워야 한다.

개발 팁(Android)

  • XML에서 요소 순서를 화면 배치 순서와 맞춰서 작성하면 대부분 OK.
  • 혹시 UI가 복잡하면 android:importantForAccessibility="no"등으로 불필요한 요소는 제외

 

728x90
반응형
LIST