[공유] 우리가 관심 가져야 할 접근성 in 널리 모바일
안녕하세요. 접근성 팀 서미연입니다.
널리 모바일은 모바일 접근성 지침을 충실히 준수하여 설계·개발되었습니다. 기본적 접근성 기준을 넘어 사용성을 더욱 향상하기 위해 다양한 정보 접근성 요소를 추가로 적용했습니다. 널리 모바일에 구현된 주요 접근성 사례를 살펴보겠습니다.
기획 단계에서 대체 텍스트 정의하기
널리 모바일은 기획에서부터 개발에 이르기까지 접근성을 고려하여 제작하였습니다. 초기 기획 문서에 대체 텍스트를 비롯한 세부 접근성 정의를 명확히 작성해 개발팀에 전달하면 UX 흐름· UI 가이드 일관성을 확보하며 실제 구현 품질을 높일 수 있습니다. 대체 텍스트를 적용하는 것은 개발 부서에서 하지만 그 기능의 상세 정의를 알고 있는 기획/설계 부서에서 대체 텍스트에 대한 정의를 개발부 서로 전달해 주는 것이 좋습니다. 이 과정을 통해 명확한 접근성 정의 전달로 기획-개발 간 커뮤니케이션 비용을 절감하고 협업 효율을 높일 수 있습니다.
다음 이미지에 보이시는 것처럼 기획서에 영역별 기능을 작성할 때 접근성 정보 또는 대체 텍스트 테이블을 추가하는 것을 권장합니다.
공통적으로 사용되는 대체 텍스트에 자세한 용도 정보 제공하기
‘닫기’, ‘삭제’, ‘이전/다음’ 등 공통어로 많이 사용하는 대체 텍스트입니다. 이 경우 기능명만으로는 스크린리더 사용자가 정확한 용도를 파악하기 어렵습니다. 예컨대 ‘닫기’가 도움말을 닫는지 팝업을 닫는지, 또 ‘이전/다음’이 슬라이드 콘텐츠 전환인지 전체 페이지 이동인지 구분하기 힘듭니다. 시각 장애 사용자는 화면 전체를 한눈에 볼 수 없기 때문에, 기능 의도를 즉시 알 수 있는 상세 대체 텍스트를 제공할 것을 권장합니다.
널리 모바일에는 다음과 같이 정확한 용도 및 기능을 알 수 있도록 상세 대체 텍스트를 적용했습니다.
동일 대체 텍스트에 관련 콘텐츠 연결해 주기
스크린리더의 1) 임의 탐색 기능을 사용할 때, 동일한 대체 텍스트가 반복되면 여러 요소를 구분하기 어려워집니다. 저시력 사용자의 경우 화면을 확대해서 탐색하는데요. 이렇게 확대를 하게 되면 콘텐츠 일부만 노출이 되기 때문에 해당 요소의 정확한 용도를 알기 위해서는 화면을 상·하·좌·우로 스크롤 해야 하는 불편이 있습니다. 따라서 각 요소의 용도를 명확히 설명하는 관련 텍스트를 대체 텍스트에 포함하면, 스크린리더 사용자가 더 빠르고 정확하게 콘텐츠를 인식할 수 있습니다.
1) 임의 탐색 : 한 손가락으로 한 번 탭하여 탭 한 영역에 있는 콘텐츠에 포커스 지정하여 임의로 탐색함.
TIP 스크린리더 기본 동작 방법 알아보기
모바일 스크린리더 기본 사용법 #iOS VoiceOver
모바일 스크린리더 기본 사용법 #Android TalkBack
널리 모바일은 동일한 대체 텍스트를 사용하는 요소에 대해 관련 콘텐츠 정보를 덧붙여 상세 대체 텍스트를 제공합니다. 덕분에 임의 탐색 시에도 각 요소의 용도를 명확히 파악할 수 있습니다.(참고로 아티클 또는 포럼처럼 관련 정보가 길어질 경우에는 부가 정보를 뒤에 배치하는 것이 사용성에 용이하다고 합니다.)
관련 콘텐츠를 연결하는 방법에는 aria-labelledby 또는 aria-describedby를 이용해 연결할 수 있습니다. 널리 모바일의 경우 버튼 본래 텍스트와 관련 정보 텍스트를 aria-labelledby로 가져와 읽히도록 처리하였습니다.
| code |
|---|
|
<button><span id="wa_tit0" >널리</span></button> <button aria-labelledby="wa_tit0 wa_delete0"><span id="wa_delete0">최근 검색어 삭제</span></button> |
숫자 정보가 무엇을 의미하는지 알 수 있도록 제공하기
비장애 사용자는 시각적 맥락만으로 숫자의 의미를 직관적으로 이해할 수 있지만, 스크린리더 사용자는 음성으로 전달된 내용만을 기반으로 판단해야 하므로 ‘1’이라는 숫자만으로는 즉시 의미를 파악하기 어렵습니다. 예를 들어 ‘1’이 순위(1위), 점수(1점), 날짜(1일) 중 어느 것을 뜻하는지 알 수 없습니다. 따라서 숫자를 제공할 때는 다음과 같이 용도를 명확히 명시하는것이 좋습니다.
- 단위 정보를 넣어주세요. 예) 1위 , 1점 , 1일, 1페이지, 1개
- 숫자 용도 정보를 넣어주세요. 예) 별점 1점 , 평점 1점
- 숫자 날짜/시간 정보를 넣어주세요. 예) 25년 01월 01일
TIP 날짜/시간 정보 접근성 향상 시키는 방법 알아보기
모바일 접근성 time 태그와 datetime 속성으로 날짜 시간 정보 접근성 향상 시키기
널리 모바일은 숫자 정보의 단위와 용도를 정확히 전달하기 위해, 숨김 대체 텍스트와 aria-label 속성을 활용해 스크린리더 사용자가 더 빠르고 정확하게 콘텐츠를 인식할 수 있습니다.
제목과 버튼 이중 유형 정보 제공하기
콘텐츠 유형 정보(머리말, 버튼 등)는 구조 인지뿐만 아니라 빠른 탐색에도 필수적입니다. iOS VoiceOver의 로터 기능은 사용자가 머리글·컨테이너 단위로 즉시 이동할 수 있게 하고, Android TalkBack의 단위 탐색 제스처 역시 제목·컨트롤 등 의미 단위로 콘텐츠를 빠르게 찾도록 돕습니다. 이러한 이유에서 전체 콘텐츠 구조를 빠르게 파악할 수 있도록 제목 정보를 제공하도록 권장하고 있습니다.
TIP 콘텐츠 유형 정보와 상태 정보 제공하는 방법 알아보기
[모바일 접근성] #대체 텍스트와 #보조기술과의 호환성 알아보기
네이티브 앱에서는 하나의 UI 요소에 여러 접근성 역할(role)을 동시에 부여할 수 있지만, HTML은 단일 요소에 다중 역할을 지정할 수 없습니다. HTML에서는 시멘틱 태그를 중첩해 유사한 효과를 내는데요.
예를 들어 그룹 제목이면서 버튼으로 동작해야 하는 요소는
- 헤딩 태그(h1~h6)로 그룹의 제목 역할을 부여하고
- 그 안에
<button>태그를 넣어 버튼 역할을 부여하면
스크린리더는 해당 영역을 “제목”과 “버튼” 두 가지 시멘틱으로 인식하며, 로터(Rotor)나 단위 탐색 기능으로 빠르게 찾아갈 수 있습니다.
| code |
|---|
| <h3><button>인식의 용이성</button></h3> |
널리 모바일에서는 그룹 제목이면서 버튼 역할을 하는 요소에 헤딩 태그와 <button> 태그를 중첩해 ‘제목’과 ‘버튼’ 두 가지 시멘틱을 부여했습니다. 이를 통해 VoiceOver 로터나 TalkBack 단위 탐색 기능으로 요소를 빠르게 찾을 수 있습니다.
컨트롤 크기 44px 이상 제공하기
모바일 기기는 터치 기반으로 조작되므로 터치 대상의 정확성이 매우 중요합니다. 이를 위해 컨트롤의 크기와 간격을 충분히 확보해야 합니다. WCAG 2.1에서는 최소 44×44픽셀(약 7 mm)의 터치 영역을 권고하고 있습니다.
WCAG 2.2 Target Size
널리 모바일 프로젝트를 진행하던 시점에는 WCAG 2.2가 아직 W3C 권고안이 아니었으므로, 컨트롤 크기는 WCAG 2.1 기준에 따라 설계했습니다. WCAG 2.2에서는 터치 장치와 마우스를 사용하는 잠재적 이동성 장애인을 배려하여, 대상(Target) 크기를 최소 24×24픽셀로 하거나 대상 간 간격을 최소 24픽셀 이상 확보하도록 권고하고 있습니다. WCAG 2.2 Target Size는 다음 링크를 참고해주세요.
https://www.w3.org/TR/WCAG22/#target-size-minimum
기획서에 각 컨트롤의 크기와 터치 영역을 명시하면, 디자인·개발 단계에서 기준을 충족하도록 참고할 수 있어 좋습니다. 널리 모바일 예시와 같이 기획서에 컨트롤 크기 및 터치 영역을 표기하면, 소형 컨트롤 발생을 예방하고 일관된 UX 구현에 도움이 됩니다.
널리 모바일은 컨트롤의 크기를 최소 44×44픽셀 이상으로 유지하고, 포커스 영역이 실제 콘텐츠 위치·크기와 일치하도록 제공하고 있습니다. 특히 iOS에서는 기본 <a> 요소의 포커스 영역이 시각적 버튼 크기와 어긋나거나, 아티클·포럼 같은 목록형 링크 내부에 다른 태그를 중첩했을 때 포커스가 분리되는 문제가 있습니다. 이를 해결하기 위해 해당 링크에 role="button"을 부여해 포커스 영역을 통합하고 일관된 초점 크기를 제공했습니다.
사용자 테스트 의견 반영하기
널리 모바일은 개발 완료 후 실시한 사용성 테스트에서 “이전·다음 배너 버튼으로 슬라이드를 전환할 때 스크린리더 사용자가 현재 슬라이드를 빠르게 파악하기 어렵다”라는 의견을 수렴했습니다. 이에 개발팀은 숨겨진 aria-live 영역을 도입해 슬라이드 전환 시 “배너 대체 텍스트 + 총 n 페이지 중 n 페이지”를 실시간으로 안내하도록 구현했고, 이 기능은 기술적·사용성 측면에서 스크린리더 경험을 크게 향상합니다.
이번 널리 모바일 프로젝트에서는 기획 단계에서 정보 접근성을 고려한 디자인을 시작으로, 개발 단계에 이르기까지 사용자에게 정보를 효과적으로 전달하기 위해 노력했습니다. 특히 개발 과정에서는 필수 접근성 기준을 준수하는 것을 넘어서, 우리가 추가로 주목해야 할 고급 접근성 요소를 도입해 전반적인 사용성을 강화했습니다. 앞으로도 지속적인 모니터링과 피드백을 통해 부족한 부분을 보완하고, 개선을 이어가겠습니다.
널리 모바일
기획: 김영희 / 개발: 오윤식 / 마크업: 서미연