[HTML/CSS] 웹 접근성에 대한 고찰

이번 포스팅에서는 프론트엔드 개발자로서 꼭 알아야 하는

 

1) 웹 접근성의 의미

2) 개인적으로 선정한 좋은 예와 나쁜 예

3) 웹 접근성에 대한 나의 생각

 

에 대해 기술하고자 한다.

 

 

 

 

1) 웹 접근성의 의미

웹 접근성이란 무엇인가?

웹 접근성이란 단어만 보면 접근하기 좋은 웹이라는 의미로 연상되고,

그렇다면 접근하기 좋은 웹은 무엇인지 생각해보지만 딱히 떠오르지 않는다.

 

 

W3C에 의하면, 웹 접근성에 대한 소개를 다음과 같이 요약한다.

 

 

웹 사이트와 웹 도구들이 잘 설계되고 만들어졌을 때 장애를 가진 사람들이 사용할 수 있습니다.
그러나, 현재 많은 사이트와 도구들은 접근성 장벽이 있고,
이는 일부 사람들이 이용하는 데에 어려움을 주거나 불가능하게 합니다.

웹을 접근 가능하게 만드는 것은 개인, 비즈니스, 사회에 이점을 줍니다.
국제 웹 표준은 접근성을 위해 무엇이 필요한지 정의하고 있습니다.

 

 

그러면서 웹 접근성에 대해 무엇인지 다음과 같이 소개하고 있다.

웹 접근성은 웹사이트나 적용된 기술이 장애를 가진 사용자를 고려하여 설계되는 것을 말한다.

웹에 접근할 때 영향을 줄 수 있는 모든 장애는 청각, 인지, 신경, 신체, 언어, 시각 등을 포함하고 있다.

 

나아가 장애를 가진 사용자뿐만 아니라 일반적인 사용자에게도 이점을 줄 수 있는데, 

이는 기기에 따른 적절한 화면 표현을 고려하는 것과

일시적으로 신체의 어떤 부분을 사용하기 불편한 상황에 있는 사용자,

광과민성 증후군(갑작스레 빛을 보면 발작할 수 있는 증후군)을 가진 사용자 등에게 이점을 줄 수 있다.

 

 

다음 그림을 보자.

색감이 다른 사람보다 없거나, 색맹의 경우 다음 두 색상이 적용된 글자를 구분하기 어려울 수 있다.

좌측 그림의 글자보다는 우측 그림의 글자를 훨씬 알아보기 편하다.

 

 

그림 1. 웹 접근성을 위한 색상 대비 예시

 

 

이러한 점들을 고려하는 것도 웹 접근성을 높이는 방법 중 하나이다.

실제로 WCAG 2.1의 1.4.1. 색상 사용에도 웹 접근성을 위한 가이드라인이 제시되어 있다.

 

 

장애를 가진 사람들이 웹을 어떻게 이용하는가에 대한 다음 참고자료가 있으니, 참고하면 좋을 듯 하다.

어떻게 이용하는지를 알아야 그에 맞춰 개발할 수 있기 때문.

기회가 된다면 연습해보려고 만들었던 테이블 페이지를

스크린리더가 어떻게 읽어나가는지 테스트해보고 분석해보려 한다.

https://www.w3.org/WAI/people-use-web/

 

 

참고 공부 자료로 웹 접근성에 대한 가이드라인은 다음 주소에서 공부할 수 있다.

https://www.w3.org/TR/WCAG21/

 

 

 

 

2) 개인적으로 선정한 좋은 예와 나쁜 예

2.1) 좋은 예

일단 웹 접근성이 좋은 사이트라고 이름을 내걸려면 형식적인 게 필요한데, 

국가에서 전문가 심사와 사용자(실제로 장애가 있는 사용자에게 테스트) 심사를 하여

웹 접근성 품질인증 사이트로 지정한다고 한다.

웹 인증 현황과 심사기준은 다음 사이트에서 확인할 수 있다. 약 8600건이 인증되었다.

http://www.webwatch.or.kr/Situation/WA_Situation.html?MenuCD=110

 

좋은 예를 찾아보기 위해 위 사이트에서 인증받은 사이트를 전전하는데,

과연 장애인을 위한 사이트는 얼마나 잘 설계되어있을지 궁금하여

장애인 스포츠강좌 이용권 사이트를 접속했다.

https://dvoucher.kspo.or.kr/main.do

장애인스포츠강좌이용권

 

 

위 사이트는 다음과 같이 키보드로 지정된 단축키 번호를 누르면 해당 페이지로 이동한다.

단축키 하나로 페이지 이동이 가능하고, 콘텐츠의 확대/축소도 키보드로 가능하다.

보조기술을 채택하여 이러한 점을 구현할 수 있었다는 것에서, 

구현이 그렇게 어려운 기술은 아니나

작은 생각의 변화와 배려로 큰 결과를 낳을 수 있지 않았나 하는 생각이 든다.

 

 

그림 2. 장애인 스포츠강좌 이용권 사이트의 단축키 서비스

 

 

 

2.2) 나쁜 예

접근성이 좋은 테이블을 만드는 연습을 하다가 떠올랐던 사이트이다.

규모가 크지 않은 사이트이지만 접근성이 매우 좋지 않다고 판단된다.

다음의 사이트는 아스키코드, 16진수, 2진수의 변환 결과와 표를 알려주는 사이트이다.

 

https://www.easycalculation.com/ascii-hex.php

 

String to ASCII chart, ASCII to decimal convertor, String to decimal converter, string hexadecimal / hex conversion

 

 

 

그림 3. 위 사이트의 아스키 코드 참조표 부분

 

 

많은 아스키 코드 차트를 봤지만, 이런 적은 처음이다.

나 같은 비장애인들 조차 어디서 어떻게 읽어야 하는지, 행의 구분이 어디인지

20초는 쳐다봐야 간파할 수 있다.

그리고 웹 접근성을 위한 테이블을 만들기 위한 요소는 어디에도 없다.

가독성이 떨어지는 것은 둘째 치고, scope, caption, colgroup 태그 등을 아무것도 찾을 수 없다.

(이 사이트를 나쁜 예로 예시를 든 것은, 이보다 접근성이 나쁘다고 판단되는 사이트가 없다.)

그리고 BEL, VT, CR 등 약어의 본래 의미를 알 수 있는 수단도 없다.

 

 

 

 

3) 웹 접근성에 대한 나의 생각

처음 프론트엔드 공부를 시작하며 웹 접근성이라는 말을 들었을 때가 떠오른다.

정확히는 들은 것이 아니라 책에서 본 것이지만.

프론트엔드 공부를 시작하는 초심자에게 웹 접근성에 대해 자세히 알려주는 교재는 흔치 않다.

참고하는 부분에 작게 쓰인 책들은 있지만, 그것을 강조하는 교재는 드물다는 것이다.

그러므로 개발을 시작하는 사람들조차 이것의 중요성을 모르기 때문에 

존재를 알고 나서야 뒤늦게 습관을 고치기 시작하는 사람이 많은 듯하다. 나 또한 그랬다.

 

사실 현실 세계에서 장애인을 위한 무언가를 

비장애인들은 "굳이 저렇게까지 해야 하나?"라고 생각하는 사람이 꽤 있다.

버스에서 장애인이 휠체어를 타고 느리게 탑승할 때, 

바쁜 시간에 의도치 않게 짜증을 내는 사람도 있다.

말을 못 하는 사람이 카페에서 주문을 하기 위해 쪽지를 쓰는 시간을 기다려주지 못하는 사람도 있다.

사회적으로는 나쁜 감정이지만, 자신의 삶에서 자신이 가장 중요한 것은 맞으니

그 바쁜 자들의 딱한 상황까지 고려하면 욕으로만 다그칠 수 없을 때가 있을 것이다.

 

하지만 웹에서는 그런 짜증을 낼 필요가 없다.

음성인식(TTS) 기능, 큰 텍스트 기능,

그리고 위 <좋은 예>처럼 단축키로 페이지 이동 등이 구현되어 있어도

사람들은 기다리지 않아도 된다. 오히려 좋아해야 한다.

나의 경우는 이것이 감동으로 다가오기도 한다.

누군지 모를 누군가를 위해 힘써왔다는 흔적이기 때문이다.

다시금 웹은 누구나, 언제, 어디서 사용해도 문제가 없어야 함을 깨닫는다.

 

장애를 가진 사람을 위하여 추가 기능을 구현한다면 드는 비용이 손해일까?

나의 생각은 '아니다'이다.

 

아래의 이야기를 쇼핑몰로 예시를 들어보려 한다.

보통 사람들이 자주 접속하는 쇼핑몰이 있다면 여러 이유가 있을 것이다.

VIP 회원이라서 혜택이 클 수도 있고, 할인을 자주 하는 곳일 수도 있다.

하지만 그 사이에 이 '웹 접근성'이라는 요소가 제외되지 않는다고 생각한다.

 

말을 못하는 사람도, 보이지 않는 사람도, 들리지 않는 사람도 물건을 구매할 권리는 있다.

당연한 말이라 더 할 말이 없다만.

 

우리 어머니는 아직도 G마켓에서 물건 구매하는 것을 나에게 부탁하신다.

회원 가입하느라 키보드를 꾹꾹 눌러 가입하는 절차도 부담스럽고,

원하는 물품을 검색하고 찾고 리뷰를 비교해보는 이 모든 것이 부담인 것이다.

어머니는 무슨 버튼이 어디에 있는지 잘 모르는 정보의 바닷속에서 헤엄치는 방법보다

헤엄을 칠 줄 아는 사람, 즉 대리인에게 미역을 구해다 달라고 하는 것이 편한 것이었을까.

비장애인조차 헤엄을 두려워하는데,

장애가 있는 사람에게 그것을 극복하라 하는 것은 너무나 무책임하다.

 

그래서 왜 비용이 손해가 아닌가?를 생각해보면,

소수일지도 모르는 그들을 위한 웹을 구현하느라 드는 비용과 인력 소모보다,

한 번 잘 설계해놓은 웹 접근성을 고려한 웹사이트가 유지보수비용도 적을뿐더러,

(사용자 경험이 좋다고 분석된다면 추가로 더 요구되는 기능이 줄어들기도 하고.)

더 나아가 그 소수가 편리함을 느낌에 따라 매출이 더 증가할 수도 있기 때문이다.

그런 이유에서 장애를 가진 사람/비장애인 따로 웹 버전을 둘 필요도 없다.

 

그렇다면 쇼핑몰과 같이 이익을 창출하기 위한 기업에서만 웹 접근성이 필요한가?

매출이 늘기 때문에? 불편한 사람도 사게 만들어야 하기 때문에?

라고 생각한다면 정말로 크나큰 오산이다.

위 단락들에서 서술한 것은 '비용적인 측면에서 기업이 손해인가?'에 대한 자발적 물음이었지,

'장애를 가진 사람을 웹에서 배제해도 되는가?'에 대한 물음이 아니다.

 

개인적인 경험에 의하면,

장애를 가진 사람을 고려한 웹 접근성이 좋은 사이트들은 비장애인들도 만족시키기에 충분하다.

당장 이런 부분이 아니라고 해도, 어떤 페이지에 접속할 때 모바일 기기가 고려되지 않아

아예 이용이 불가능한 적이  있는데 매우 불쾌했던 경험이 떠오른다.

이것은 반응형 웹이라는 개념과 직결된다.

이것을 알고 나면 사이트를 접속할 때, 이러한 점들을 잘 고려했는지 눈여겨보게 된다.

사실 공부하는 분야가 프론트엔드 공부라 그런지, 웹 접근성을 고려하지 않았다는 점 하나로

그 사이트의 운영 주체에 대한 신뢰와 이미지가 달려있다고 해야 하나.

 

위에서 잠시 언급한 웹 접근성 인증을 받기 위한 심사 항목과

전문가 심사, 사용자 심사가 물론 모든 조건을 충족할 수는 없겠지만,

실 사용자의 편의성과 비슷한 수준에 닿기를 바란다.

 

결론적으로, 세상의 모든 웹이 웹 접근성 인증을 받을 수 있기를 바라고,

(진짜 인증만 받자는 것이 아니다.)

그 인증 하나에서 끝나는 것이 아닌 

웹에서라도 우리 모두가 환경과 제약으로부터 자유로울 수 있기를 바란다.