모두가 웃는 웹 ‘web for all’

정혜윤
정혜윤은 UX/UI디자이너이자 마크업 개발자로 일하며 정보기술을 공부한다. Tech/IT업계의 성차별, 중앙화 문제에 관심사를 두고, 기술로 사회문제를 해결하는 자발적인 시민들의 시빅해킹 커뮤니티에서 활동하고 있다.

눈이 보이지 않는 사람은 어떻게 웹사이트를 볼 수 있을까?
정보통신기술(Information and Communications Technology, ICT)의 발달로 대부분의 분야에서 기존의 오프라인 방식과 다른 온라인 방식이 생활 깊숙이 자리잡았다. COVID-19로 인한 대규모 감염병 유행 상황 이전에도 온라인으로 무언가를 하는 행위는 모두에게 자연스러운 일이었다. 하지만 필수가 아닌 선택의 영역의 여지는 남겨져 있었다. 그렇다면 감염차단을 위해 사람간의 접촉을 차단한 상태에서 신체 감각이 무뎌진다면, 특히 눈이 보이지 않는다면 우리들의 일상은 어떻게 변할까?

[<모두가 웃는 웹 ‘web for all’>(2021) 보러가기]

이동약자를 위해 턱을 깎고 경사로를 내듯이 웹에도 시각약자를 위해 만든 약속과 규약들이 있고, 그것을 웹접근성(Web Accessibility)1이라 한다. 웹접근성은 물리적인 실체가 뚜렷한 경사로와 달리 바로 눈에 띄지 않는다. 궁금하다면 각자가 쓰는 브라우저에서 ctrl+shift+I2를 눌러보자. 그러면 사용자들에게 전혀 보이지 않았던 웹의 뒷모습이 드러난다. 거기에서 내가 현재 보고 있는 페이지에서는 보이지 않는 또 다른 텍스트3가 보인다.

이 텍스트들을 브라우저가 읽어들여 우리가 보는 화면과 같은 모습을 만들어 낸다. 시각장애인들은 시각보조도구 혹은 스크린리더로 부르는 프로그램이나 기계가 텍스트를 읽어주는 소리로 웹을 탐색한다. 보통 시각장애인을 떠올린다면 완전히 보이지 않는 ‘전맹’을 떠올리기 쉽지만 저시력자나 부분적인 시야가 가려지는 상태도 시각장애이며 노화로 인한 노안과 색각이상도 시각장애의 범주에 든다. 우리가 생각하는 것 이상으로 시각장애인이나 시각약자 범위안에 포함되는 사람들은 꽤 다수이다.

가운데 영역이 보이지 않는 상태
주변 영역이 보이지 않는 상태
그 외 부분영역이 보이지 않는 상태

*시각약자의 시야상태를 표현한 위의 이미지들은 W3C의 웹사이트에서 가져왔으며, 더 자세한 내용은 다음의 글에서 확인할 수 있다. (W3C, ‘Accessibility Requirements for People with Low Vision,’ Mar. 17. 2016.)

그럼 이제, 각자의 컴퓨터(데스크탑이든 노트북이든 관계없이)에서 키보드로 ‘탭(Tab)’키를 눌러 보자. 그러면 글씨나 이미지를 둘러싼 파란색(혹은 노란색) 상자 모양이 뜬다. 이 상태에서 시각보조도구가 켜져있다면 이 상자 안에 있는 텍스트를 음성으로 변환하여 들려준다.

모두가 웃는 웹 페이지 중 들어가기 부분.
이 화면에서 시각보조도구를 활성화하고 ‘tab’키를 누르면 화면 요소 중 가장 윗 부분부터 노란색 상자영역 내의 텍스트 내용을 모두 음성으로 읽어준다.

시각보조도구는 스마트폰에도 있다. 각자의 스마트폰에서 ‘설정’에 들어가면 안드로이드 기반의 스마트폰에서는 ‘접근성 > 스크린리더 > 보이스 어시스턴트’로 iOS기반 스마트폰은 ‘손 쉬운 사용 > 보이스오버’ 로 사용 여부를 선택 할 수 있다.

iOS(아이폰)의 ‘보이스오버’ 기능과 안드로이드(갤럭시)의 ‘보이스어시스턴트’ 기능

처음 사용해본다면 불편하게 느낄 수 있다. 몇 번 눌러서 연습해보면 ‘한 번’ 터치했을때에는 내가 터치한 요소에 적힌 텍스트를 읽어주고 ‘두 번’ 터치했을때에는 실행이 일어나는 방식이다. ‘확인’ 버튼을 실행하고 싶다면 ‘한 번’ 눌러서 텍스트의 내용을 음성으로 듣고 ‘두 번’ 눌러서 확인이라는 버튼 기능이 실행되는 것이다. 이 방식으로 ‘크롬’ 혹은 ‘사파리’를 실행시켜 아무 내용이나 검색해본다. 화면 상단에서부터 하단까지 보이는 요소를 손가락으로 터치하여 들어보자. 눈이 보이지 않는 사람들에게 웹은 이런 세상이다.

여기서 문제가 있다. 눈에 보이지만 ‘탭(Tab)’키를 눌렀을 때 상자가 활성화되지 않거나 손가락으로 터치 했을 때 선택이 안되는 요소가 있다면 기계에 포착이 안된다. 그러므로 음성으로 변환할 수 없고 보이지 않는 사람에게는 ‘그 것’은 ‘없는 것’이 된다.

우리가 많이 이용하는 검색포탈, SNS 플랫폼 기반의 서비스들과 같이 일정규모 이상의 방문자가 있는 웹사이트와 공공기관의 웹사이트는 이를 우선적으로 지킬 의무가 법으로 정해져 있고 지키지 않을 시 벌금까지 물을 수도 있게 되어있다. 그렇지만 안타깝게도 웹접근성이 지켜진 사이트들의 수는 많지 않다.4 기획의 시작단계에서부터 이용자의 범위 안에 시각장애인을 포함하지 않거나 미관상의 이유로 가려두거나 컨텐츠 요소들의 위치를 조정하기 때문이다. 이렇게 미관을 이유로 가려두거나 위치를 바꾸게 되면 ‘탭(Tab)’키나 ‘터치’ 동작으로도 그 내용을 잡아낼 수가 없거나 아래의 이미지와 같이 텍스트 순서를 뒤죽박죽으로 나타나게 된다.

모두가 웃는 웹 페이지 중 하나. 헤딩요소가 아래에 있고 내용이 위에 있다.
이 화면은 눈에만 의지하는 사람들에게는 오히려 혼란스러울 수 있겠지만 시각보조도구를 활용하는 시각약자들은 ’tab’키를 눌러 자연스럽게 제목과 내용 순서대로 읽을 수 있다.

이런 시각보조도구, 웹의 특성을 이용하여 ‘모두가 웃는 웹’ 사이트에서 살짝 혼란을 주어보았다. 시각보조도구를 쓰는 시각약자들에게는 평소와 달리 불편함이 없지만 시각에만 의존하는 우리에게는 불편하도록 말이다. 이 글을 읽고 ‘모두가 웃는 웹’에 접속한다면 반드시 꼭 시각보조도구를 활성화 한 후에 탐색해보길 권한다.

어떻게 하면 웹접근성이 잘 지켜지도록 할 수 있을까?
웹사이트를 만들때부터 기획에 잘 포함시켜야 하는 것도 중요하지만 일반 사용자인 우리들도 약간의 수고를 더하면 웹접근성을 지킬 수 있다. 방법 중 하나는 사용하고 있는 SNS 서비스가 있다면 사진을 추가할 때 다음과 같은 버튼을 눌러 이미지를 설명하는 대체 텍스트를 입력하는 것이다.

대체 텍스트 입력을 지원하는 페이스북(좌)과 트위터(우)의 옵션버튼

또 다른 하나는 각자가 자주 가는 사이트를 사용하다가 한 번쯤 ‘탭(Tab)’키를 살포시 눌러보는 것이다. 사이트에서 중요하게 다루는 콘텐츠를 ‘탭(Tab)’키 만으로 접근할 수 있는지, 대체 텍스트는 충분한지 보고 사이트 책임자에게 문의를 넣어보자(보통 사이트 책임자 정보는 사이트 가장 하단에 정보가 있다). 위에서 언급한 것처럼 웹접근성은 법으로도 정해져 있는 우리 모두의 권리이다.

웹접근성이 잘 지켜지면 ‘휠체어’를 위해 만들어진 경사로나 승강기가 ‘유아차’를 동반한 사람, 노인 등과 같이 이동약자에게도 이익이 된 것처럼 시각약자 모두가 편하게 웹사이트를 이용할 수 있게 된다. 우리 모두가 웃을 수 있는 웹을 이렇게 조금씩 만들어 갈 수 있다.


  1. ‘웹접근성’ 개념은 W3C 웹사이트에 소개되었다. [웹사이트 둘러보기

  2. 크롬 브라우저 기준 주소표시창 가장 오른쪽 끝에 ‘점 세 개’ 모양의 아이콘을 클릭 > 도구 더보기 > 개발자 도구로 들어가도 같은 화면을 볼 수 있다. 

  3. 보통은 <img 태그 안쪽에, alt=”이미지에 대한 설명”>으로 적혀있다. 

  4. ‘웹접근성 실태조사’, 한국지능정보사회진흥원, 2019.