서금원 프로젝트 마지막 과업. 접근성 프로젝트였다.
내게 남은 시간은 약 3주뿐이었고 앱은 해본적도 없을 뿐더러 어떻게 해야 하는지, 개발 환경도 총체적 난국이었다. (감히 커밋할 수 없고 감히 테스트를 할 수 있는 상황이 아니였음)
게다가 소스는 엉망진창.. 운영소스에 데이터와 디자인, 구조를 건드리지 않고 해야하는 문제라 굉장히 힘들었다.
어쨌든.
앱 접근성은 합격을 했고, 나의 경험을 바탕으로 정리를 해보려고 한다.
👉 스크린리더 그게 뭔데
스크린리더는 화면 속 요소들을 읽어주는 도구이다.
그렇지만!! 모든 것을 읽어주는 것이 아니고 구조와 의미를 전달하는 도구라고 생각하면 된다.
🗣️ 스크린리더가 읽어주지 않는 것
- 색상
- 위치
- 크기
- 시각적 강조
🗣️ 스크린리더가 읽어주는 것
- 요소의 이름(label)
- 역할(role)
- 상태(state)
- 포커스 순서
👉 VoiceOver와 TalkBack이 뭐야?
🔉 VoiceOver
- OS: iOS
- 제공: Apple
- 대상: iPhone, iPad, Mac
🔉 TalkBack
- OS: Android
- 제공: Google
- 대상: Android 기기
이 둘을 조작할 땐 스와이프하여 초점 이동이 가능하다.
더블 탭을 하게 되면 실행이 되는 개념이고, 초점으로 이동한 요소만 읽는 것이 특징이다.
왜 더블 탭을 해야만 실행이 되냐?
한번 선택 시에 그 요소를 읽어주기 때문이다. 읽으면서 바로 실행을 시킬 수는 없으니 두번 탭하게 만든 것 같다.
👉 초점(Focus)은 머엇인가?
초점은 스크린리더가 어떤 요소를 가르키고 있는지를 알려준다.
초점이 잡히지 않는 경우 일반적인 사용자들에는 보이지만 스크린리더 사용자 입장에선 보이지 않는 것과 같이 인식한다.
그렇기 때문에 스크린리더 사용자 기준에선
화면에는 있어도 초점이 안잡히면 없는 것과 동일,
선택 가능한 요소임에도 초점이 안잡히면 없는 것과 동일,
애니메이션이나 강조효과는 의미가 없다.
📖 읽는 순서 그거 그냥 순서대로 읽어주는거 아니야?
응 아니다.
DOM 구조 -> 접근성 트리 순서 -> focusable 여부에 따라 읽히게 된다.
많은 이들이 이 순서에 대해 놓치고 있어 문제가 많이 발생한다. (나또한 그랬어~)
절대적으로 좌~우로 읽는 것이 아니라는걸 명심 또 명심이
오늘은 요기까지.
새해 복 왕왕 받으십쇼!