Day 13) 화면을 확대/축소할 때 접근성 고려하기

🎄  A11y Advent Calendar (번역) 13일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

반응형 디자인이 등장하고 모두가 모바일 기기용 사이트를 구축하기 시작하면서, 한때 사이트를 앱처럼 느껴지도록 만들기 위해 확대/축소를 방지하는 것이 유행처럼 번졌습니다. 그러나 이는 웹 접근성 관점에서 큰 문제를 일으킵니다.

 

웹에서 확대/축소를 비활성화하는 것은 마치 “나는 계단을 선호하니 엘리베이터를 없애겠다”라고 주장하는 것과 같습니다. 이는 이기적이고 잘못된 행동입니다.

 

시력 결핍은 가장 흔한 장애 중 하나로, 많은 사람들이 제대로 보기 위해 안경이나 렌즈를 사용하는 등 시력 교정이 필요합니다. 이 중 일부는 웹 콘텐츠를 보기 위해 확대 기능을 적극적으로 활용합니다. 이 기능은 단지 소수의 편의가 아닌, 다수에게 필수적인 접근 수단입니다.

 

저자의 예시만 봐도 확대 기능이 얼마나 중요한지 알 수 있습니다. 저자는 심한 근시와 약시를 가지고 있으며, 오랜 안경 착용으로 어느 정도 조절할 수 있지만 여전히 눈의 피로감이 심합니다. 이로 인해 한쪽 눈이 더 게으르게 작동하며, 결국 시력이 더 나빠지곤 합니다.

 

그래서 저자는 대부분의 웹 사이트를 100%에서 150% 사이로 확대하여 사용합니다. 이 기능이 없다면 콘텐츠를 읽거나 탐색하는 데 큰 어려움을 겪을 것입니다.

 

추가적으로 사람들은 MacBook Pro의 pinch-and-zoom 트랙패드 제스처를 활용하여 텍스트나 콘텐츠를 확대합니다. 무언가를 읽고 싶을 때는 pinch로 확대해 내용을 확인한 뒤, 다시 pinch out하여 원래 크기로 돌아가 스크롤하거나 탐색합니다.

 

다행히 macOS에서는 이러한 기능이 기본적으로 지원되지만, 다른 환경에서는 보조 기술에 의존해야 하는 경우도 많습니다. 특히, 화면 확대 기술은 스크린 리더보다 10배나 더 자주 사용되는 도구이기 때문에 이를 단순히 무시해서는 안 됩니다.

 

참고: 확대 기능과 화면 확대기를 고려하는 방법에 대한 더 자세한 정보는 AxessLab의 게시물을 참고하세요.

---

저자가 확대기 고려에 관한 글을 은근슬쩍 떠넘겨서 제가 번역해왔습니다 ㅎ 좋은 내용이더라구요

 

때론 hover말고 클릭을 사용하기

 

위와 같은 툴팁이 떴을 때 글자를 확대하려고 마우스를 가져가면 오른쪽 화면처럼 사라져버립니다. 이럴 때 hover가 아니라 클릭을 사용해 구현하면 툴팁이 사라지지 않겠죠?

 

툴팁의 대비도 고려하기

 

디자이너분들이 색상 대비를 잘 고려해서 만들어주시지만 위 예시처럼 마우스 hover했을 때는 가끔 고려하지 못할 때가 있습니다. 이런 부분도 놓치지 않도록 저희도 알고 있으면 좋겠죠 ㅎㅎ

 

안내문은 실행된 곳과 가까이 위치하게 하기

위와 같이 에러 안내문이 화면 맨 위에 위치하게 되면 확대를 하다가 놓치는 경우가 생깁니다. 패스워드가 틀렸다면 패스워드 근처에 에러 메세지가 떴을 때 유저가 놓치지 않도록 할 수 있습니다.

 

한 열에 최대한 많은 정보 넣기

 

화면 확대기를 사용하는 사용자는 다른 사용자만큼 개요를 잘 볼 수 없습니다. 따라서 form과 문서에서 두 번째 열을 놓칠 가능성이 높습니다. 위 form에서 화면 확대기를 사용하는 사용자는 필수 필드인 '메시지'가 별도의 열에 있기 때문에 놓칠 수 있습니다.

 

 

출처 Day 13) zooming