회사에서 개발하는 제품이 대체적으로 앱이라서 모바일 접근성에 대해 알아둘 필요가 있다고 하여 접근성에 기본인 스크린리더기에 대해 MDN문서를 찾아봤다
1. Android TalkBack
talkback은 안드로이드에 내장되어있는 스크린리더다
하지만 안드로이드 버전에 따라 심지어 핸드폰모델에 따라 크게 다른 경향이 있다
그리고 제조사에 따라(예를 들어 삼성)같은 경우에는 talkback을 넣지 않고 자체 제작한 스크린리더를 넣는 경우도 있다
talkback을 키게되면 일반적인 동작방식과는 조금 다르게 변하게 되는데 예를 들면
- 한번 터치하면 앱이 선택되고 그 앱이 무슨앱인지 읽어준다
- 좌우로 스와이프를 하면 키보드에서
tab,shift + tab을 한 것처럼 다음 혹은 이전으로 이동하거나 음량조절과 같은slider등의 경우에는 일정 값이 증가 혹은 감소한다 - 두번 터치하면 선택된 앱이나 버튼 등이 실행되는데 이때 터치위치는 중요하지 않다
- 터치를 한 상태로 스크린에서 움직이면 손가락과 겹치는 것들(앱 등)을 모두 읽어준다
2. iOS VoiceOver
애플제품도 대부분 비슷한데 다른점이 있다면
- 세 손가락으로 스와이프 시 스크롤이 된다
- 카메라에서 사진을 찍을 때 일반적으로 화면을 한손가락으로 터치하는데 이러한 상호작용을 하고 싶을 때에는 두손가락으로 터치하면 된다
3. HTML and accessibility
HTML tag를 제대로 쓰는 것 만으로도 접근성이 꽤 많이 향상되는데 예를 들어
<div>Play video</div>은 아무런 의미를 전달해주지 않는다
그저 Play video라는 텍스트를 보고 '버튼인가?' 하고 짐작해야 한다
<button>Play video</button>하지만 이렇게 button tag를 사용하면 의미가 보다 명확해진다
HTML tag는 이렇게 의미만 전달하는 태그가 아니다
tab키를 사용할 때 포커싱되는 태그들이 정해져있다
div는 탭키로 접근을 할 수 없지만 button은 접근할 수 있다
div도 탭키로 접근할 수 있게 만들 수 있는데 이를 위해 tanindex attribute가 필요합니다
<div tabindex="0">Play video</div>기본적으로 tabindex는 포커스가 가게 하는 것과 포커스를 가지 않게 하는 것 두가지를 할 수 있다
tabindex="0"은 포커스가 가게 설정하며, tabindex="-1"은 포커스가 가지 않게 설정된다
즉, div같은 경우는 기본값이 tabindex="-1"이고 button의 경우는 tabindex="0"인 것이다
이렇게 기본값이 있는 attributes들을 global attributes라고 부른다
tabindex를 양수로 하게되면 탭의 순서를 지정해 줄 수 있다
숫자는 낮을수록 우선순위가 높다
4. WAI-ARIA
Web Accessibility Initiative - Accessble Rich Internet Applications의 약자로 W3C에 의해 제정된 RIA의 웹 접근성에 대한 표준 기술 규격을 의미한다
RIA란 정적인 HTML, 단순한 js 환경이 아닌 동적인 js와 ajax와 같은 기술을 사용한 수준 높은 UX 환경을 제공하는 웹앱을 말한다
웹앱의 기술이 발전하면서 점점 더 복잡한 문제를 직면하게 되었는데 예를 들면
<input type="date">
<input type="range">위와 같은 태그들은 크로스브라우징이 안되는 경우가 많았다
또한 생김새도 브라우저마다 다르기때문에 대부분의 개발자들이 라이브러리에 의존하였으며 때문에 무수히 많은 div로 감싸진 결과물이 탄생했다
이러만 결과물의 가장 큰 문제점은 시각적으로는 문제가 없지만 스크린리더에서는 개판(?)이라는 거다
이러한 문제점을 해결하기 위해 태어난 WAI-ARIA의 세가지 주요 기능이 있는데
-
Roles
영어의 뜻대로 '역할' 을 정의한다
roles중에 많은 것들이 HTML5 구조와 겹치는데 (예를 들어 role="navigation"은nav태그와 겹침) 이외에도search,tablist,tab등 다양한 역할들이 있다 -
Properties
element의 propertiy를 정의하고 element들에게 추가적인 의미를 부여한다
(예를 들어aria=required="true"는 양식을 채워줘야 한다는 의미를 부여해준다) -
States
properties중 특별한properties로 element의 현재 조건을 정의한다
(예를 들어aria-disabled="true", 이는 화면판독기에서 읽히지 않는다)
일반적인properties와의 가장 큰 차이점은 자바스크립트를 사용해 상황에 맞게 변경한다는 점이다
5. TL; DR
모바일 접근성을 위해서는 모바일 OS의 특성을 잘 파악해야하며
웹 접근성 또한 잘 알아둬야한다
웹 접근성에서 tabindex, aria-*, role의 역할을 잘 파악하고 semantic tag를 적극 활용하여 스크린리더기와 실제 보여지는 사이트가 동일하게 느껴지도록 해야한다
*References
