웹 접근성은 단순히 점수를 높이는 기술적 과제가 아니라, 모든 사용자가 소외 없이 서비스를 이용할 수 있도록 보장하는 보편성의 가치를 실현하는 작업입니다. 우아한형제들 기술 블로그에서는 스크린 리더 사용자가 겪는 실질적인 불편함을 해결하기 위해 탐색 단위 구조화, 텍스트 통합, 상호작용 요소의 역할 구체화를 진행했습니다. 이를 통해 사용자 탐색 피로도를 획기적으로 낮추고 서비스의 본질적인 사용성을 회복하는 성과를 거두었습니다.
### 랜드마크와 머리말을 활용한 탐색 구조화
* **단위 탐색 기능 활성화**: 스크린 리더의 '로터(iOS)'나 '단위 탐색(Android)' 기능을 활용할 수 있도록 페이지를 의미 있는 섹션으로 나누고 적절한 머리말(Heading)을 배치했습니다.
* **섹션 컴포넌트화**: `section` 태그와 `h1-h6` 태그, 그리고 이를 연결하는 `aria-labelledby` 속성을 조합한 재사용 가능 컴포넌트를 만들어 페이지 전체에 일관된 랜드마크 구조를 적용했습니다.
* **목록 역할 명시**: CSS에서 `list-style: none`을 적용할 경우 VoiceOver가 목록으로 인식하지 못하는 문제를 해결하기 위해 `role="list"`를 명시적으로 선언했습니다.
### 파편화된 텍스트 통합과 발화 최적화
* **불필요한 스와이프 제거**: 스타일링을 위해 "990"과 "원"처럼 분리되어 있던 텍스트를 템플릿 리터럴을 통해 하나의 문자열로 결합하여 스크린 리더가 한 번에 읽도록 개선했습니다.
* **스크린 리더 전용 레이어 활용**: 디자인 제약으로 태그를 분리해야만 하는 경우, 시각적 요소에는 `aria-hidden="true"`를 설정하고 보이지 않는 별도 요소에 통합된 텍스트를 담아 제공했습니다.
* **크로스 플랫폼 대응**: `span`이나 `div` 같은 일반 컨테이너에 `aria-label`을 쓰면 iOS VoiceOver가 이를 무시하는 특성을 고려하여, 다양한 OS 환경에서 일관되게 읽히는 방식을 채택했습니다.
### 상호작용 요소의 목적과 맥락 명확화
* **모호한 버튼 레이블 개선**: "전체 보기", "자세히"와 같이 목적이 불분명한 버튼에 `aria-label`을 추가하여 "배달팁 자세히 보기"처럼 구체적인 동작 맥락을 제공했습니다.
* **사용자 흐름 단축**: 300번 이상의 스와이프가 필요했던 비효율적인 탐색 구조를 개선하여, 사용자가 원하는 정보를 빠르게 찾고 구매하기 버튼까지 도달하는 시간을 대폭 단축했습니다.
진정한 의미의 접근성 개선은 Lighthouse 점수 100점에 안주하는 것이 아니라, 개발자가 직접 스크린 리더를 켜고 사용자의 시점에서 서비스를 탐색해 보는 것에서 시작됩니다. 자동화 도구가 잡아내지 못하는 '맥락의 단절'을 찾아내고, 의미 있는 구조(Semantic)와 구체적인 설명(Labeling)을 더할 때 비로소 모두를 위한 서비스를 완성할 수 있습니다.
Slack은 2024년 대규모 UI 개편 이후 제3자 VPAT 평가를 진행하며 Android 전반의 접근성 문제를 발견했다. 단순한 색상 대비·이미지 라벨 문제뿐 아니라 오류 안내, 제목 구조, 입력 필드 라벨, 목록 개수, 드래그 앤 드롭 등 반복적인 문제가 확인되었고, 이를 공통 컴포넌트와 TalkBack 지원 개선으로 해결했다. 특히 시각적 UI를 추가하는 데 그치지 않고, 스크린 리더 사용자가 동일한 기능을 수행할 수 있도록 의미 구조와 대체 조작 방식을 제공하는 데 중점을 두었다.
## VPAT 평가와 Android 접근성 문제의 분류
- VPAT(Voluntary Product Accessibility Template)는 제품이 접근성 표준을 얼마나 충족하는지 설명해 고객의 구매 판단을 돕는 문서다.
- Slack은 IA4 UI 개편 이후 2024년에 외부 접근성 전문 업체를 통해 VPAT 평가를 실시했다.
- Android, iOS, 데스크톱에서 문제가 발견되었으며, Android에서는 다음과 같은 유형이 주요 이슈로 나타났다.
- 오류 메시지가 스크린 리더에 전달되지 않음
- 제목이 제목 요소로 식별되지 않음
- 입력 필드에 영구적인 접근성 라벨이 없음
- 목록 항목 수가 잘못 안내됨
- 워크스페이스 순서 변경 기능이 드래그 앤 드롭에 의존함
- 취소선 정보가 스크린 리더에 전달되지 않음
- 오류를 색상만으로 표시함
- 키보드 탐색과 포커스 문제는 다수 보고되었지만, Android의 대형 화면 지원이 아직 제한적이어서 후속 과제로 남겼다.
## 오류 메시지의 스크린 리더 전달
- 잘못된 값을 입력한 뒤 “Next” 또는 제출을 누르면 오류가 화면에 표시되지만, TalkBack에는 오류 상태와 원인이 전달되지 않았다.
- 오류 표시 방식은 크게 두 가지였다.
- `OutlinedTextField` 바로 아래에 오류 메시지를 표시
- `SKBanner`를 이용해 오류 배너를 표시
- 두 경우 모두 TalkBack이 오류를 자동으로 읽지 않아 사용자가 화면을 직접 탐색해야 했다.
- 해결 방법:
- `OutlinedTextField`를 수정해 입력 필드에 포커스가 갔을 때 오류 상태와 메시지를 안내하도록 변경
- 오류 유형의 `SKBanner`도 오류 발생 시 스크린 리더가 내용을 읽도록 수정
## 제목 구조와 페이지 탐색 개선
- 제목이 시맨틱하게 식별되지 않으면 스크린 리더 사용자가 페이지의 구조를 빠르게 파악하거나 제목 단위로 이동하기 어렵다.
- Preferences와 같은 목록 내부에서 누락된 제목 요소를 찾아 수정했다.
- 외부 업체는 상단 앱 바의 제목도 heading으로 지정할 것을 제안했지만, 다른 Android 앱과 표준 동작을 비교한 결과 일관된 Android 관행이 아니라고 판단해 해당 티켓은 종료했다.
## 입력 필드의 영구 라벨 문제
- 일부 입력 필드는 placeholder만 라벨로 사용했다.
- 사용자가 텍스트를 입력하면 placeholder가 사라지므로, 인지적 어려움이 있는 사용자는 필드의 목적을 잊을 수 있다.
- 메시지 입력 영역(AMI)은 공간 제약 때문에 이상적인 해결책을 적용하지 못했다.
- 검색 필드에는 돋보기 아이콘을 추가했다.
- 입력 전후에도 해당 필드가 검색용이라는 시각적 단서를 제공한다.
- 작은 디자인 변경으로 입력 필드의 목적을 더 명확하게 만들었다.
- 이 문제는 접근성 개선이 반드시 복잡한 기술적 변경을 요구하지 않으며, 적절한 시각적·의미적 단서만으로도 사용성을 크게 높일 수 있음을 보여준다.
## 목록 항목 수를 정확히 안내
- TalkBack의 “항상 목록 항목 수 말하기” 설정이 켜져 있으면 목록의 전체 항목 수가 안내된다.
- Slack의 구형 Slack Kit(SK) Bottom sheet에서는 장식용 divider까지 목록 항목으로 계산됐다.
- 실제 행이 5개이고 divider가 2개면 TalkBack이 “7개 항목이 있는 목록”이라고 안내했다.
- 해결을 위해 `SKListAdapter`에 새로운 `SKListAccessibilityDelegate`를 도입했다.
- 이 delegate는 접근성용 `CollectionInfo`를 덮어써 실제 의미 있는 목록 항목 수만 전달한다.
## 드래그 앤 드롭을 대체하는 워크스페이스 이동 방식
- 워크스페이스 전환기에서는 워크스페이스를 선택한 뒤 드래그해 순서를 변경해야 했다.
- 손의 움직임이나 정교한 조작이 어려운 사용자는 이 기능을 수행하기 힘들거나 사용할 수 없었다.
- 해결 방법:
- 워크스페이스 전환기에 `Edit` 모드를 추가했다.
- 편집 모드에서는 각 행에 6점 모양의 드래그 핸들을 표시해 이동 가능한 요소임을 명확히 했다.
- TalkBack 사용자를 위해 사용자 지정 접근성 동작인 “앞으로 이동(Move before)”과 “뒤로 이동(Move after)”을 추가했다.
- TalkBack 컨텍스트 메뉴의 세 손가락 탭 또는 `L`, `r` 제스처로 항목을 이동할 수 있게 했다.
- 정렬이 끝나면 우측 상단의 “Done” 버튼을 눌러 편집 모드를 종료한다.
- 시각적 드래그 UI와 스크린 리더용 명령형 조작을 함께 제공해 동일한 기능에 여러 접근 경로를 마련했다.
## 남은 접근성 개선 과제
- 취소선 정보가 스크린 리더에 전달되지 않는 문제와 오류를 색상만으로 표시하는 문제도 주요 이슈로 분류되었다.
- 키보드 탐색과 포커스는 Android 태블릿 등 대형 폼 팩터에서 특히 중요하지만, Slack Android의 대형 화면 지원이 충분하지 않아 추가 검토 과제로 남았다.
- 접근성 문제는 개별 화면의 수정만으로 끝나지 않고 공통 UI 컴포넌트와 접근성 메타데이터 처리 계층까지 개선해야 반복을 줄일 수 있다.
접근성을 개선할 때는 시각적 표시만 추가하지 말고, TalkBack이 오류·제목·목록 구조·상태 변화를 정확히 인식하는지 함께 검증해야 한다. 또한 드래그처럼 정밀한 동작이 필요한 기능에는 접근성 사용자 지정 동작이나 명시적인 편집 모드를 제공하는 것이 효과적이다.
woowahan원문