웹 개발자라면 한번 쯤은 생각해보고 알아보아야 할 문제인 웹 접근성에 대해서 간단하게 정리해보려 합니다.
개요
신체적으로 불편한 부분이 없는 저는 일상생활 속 건물에서, 화장실에서 항상 장애인을 위한 장치들을 무심코 보아 왔는데요, 제가 최근에 안 사실이 있습니다.
보통 건물을 보면 엘리베이터가 있는 건물이 있고 없는 건물이 있는데요.
엘리베이터가 있는 이유가 다름이 아닌 건축법상 건물의 높이에 따라서 필수적으로 지어야 했기 때문이라고 합니다.
즉, 건물을 짓는 사람이 마음대로 짓고 말고가 아니라 경우에 따라 반드시 지어야 한다는 것인데요
왜 이러한 제약이 생긴걸까요?
맞습니다. 바로 장애인을 비롯해서 이동이 불편한 약자들을 위해 아예 법으로 생긴 것이라고 합니다.
여기서 한번 생각해보죠.
정보가 점점 더 중요시되는 현대 사회에서 과연 건물 혹은 공공시설에서만 이러한 불편함이 있을까요?
아닙니다. 조금만 생각해보면 알 수 있다시피 신체적 제약이 있는 사람들에게는 우리가 개발하는 IT 서비스들을 사용함에 있어서도 불편함을 충분히 겪으며 생활하고 있겠죠.
위의 건물 사례와 연결지어 생각해보면 우리가 만드는 서비스에는 과연 제약이 없을까요?
그것을 지금부터 알아보려 합니다.
웹 접근성
http://www.wa.or.kr/m1/sub1.asp
위의 링크를 통해서 웹 접근성에 대해 바로 한눈에 알아볼 수 있습니다.
대충 처음 부분에만 보더라도 써있죠.
웹 접근성은 어떠한 선택적 지침이 아니라 '법'에 해당합니다.
아예 웹 접근성 준수는 법적의무사항이라고 못을 박아두었네요.
사진에 간략히 소개되어있긴 하지만 사용자 관점에서 나름대로 한번 적어보겠습니다.
- 시각에 제약이 있는 사람
우리가 만드는 웹이 스크린 리더라는 프로그램에 의해서 읽힐 수 있다는 사실을 알고 계셨나요?
아마 어렴풋이 알고 계셨겠지만 우리는 스크린 리더를 고려해서 웹 페이지, 즉 HTML을 설계할 필요가 있습니다.
이를테면 우리가 흔히 보아왔던 lang="en" 혹은 "ko" 같은 부분들도 스크린 리더의 언어셋 세팅을 위해서 중요합니다.
또, 스크린 리더는 HTML 문서의 트리 구조에 따라서 문서를 읽기 때문에 제작자 본인이 눈을 감고 순서대로 문서를 들었을때 사용자 입장에서 혼동이 없게 HTML 구조를 구성해야 합니다.
웹 개발자는 태그를 사용함에 있어서 div태그가 아닌 Semantic Tag를 사용해야 하는데요, 이 역시 스크린 리더를 위함이 큽니다.
단순히 의미론적이어서 사용에 의미가 있는게 아닌 스크린 리더가 navigation인지 그냥 div로 인식하는지는 차이가 크겠죠.
따라서 Semantic Tag를 사용해야 합니다.
-
청각에 제약이 있는 사람
유튜브의 자동 자막 기능이 있다는 것을 생각하시면 좋을 것 같습니다.
들을 수 없다면 읽을 수 있어야 겠죠. 그래서 자막기능이 반드시 필요합니다. -
신체에 제약이 있는 사람
시각과 청각을 제외하고 몸의 거동이 불편하여 키보드 사용이 제약적이거나 마우스등을 사용하기 어려운 또는 사용할 수 없다면 어떤 조치가 필요할까요?
이런 사람들을 위해서 간단하게는 우리가 만드는 웹의 인터페이스들이 tab키로 하나하나 순회가 가능해야 합니다. tab과 enter만으로 사용할 수 있게 말이죠.
IR 기법이란
제가 아는대로 쉽게 표현을 해드리자면 IR 기법이란 화면에는 안보이는데 스크린 리더에는 읽히게 하기 위한 기법이라고 말씀드리고 싶습니다.
사진은 제가 미니 프로젝트로 만든 닌텐도 아미보 소개 페이지인데요.
사진을 보시면 배경화면에 마리오 캐릭터들이 연한 회색으로 들어간 패턴 배경그림이 이미지 태그로 넣은게 아닌 div 태그를 사용하여 css로 백그라운드 이미지를 입혀준 형태로 구현하였습니다.
시각에 제약이 없는 사람은 한눈에 배경 이미지를 인식할 수 있지만 그렇지 않다면 저 배경이미지를 어떻게 알 수 있을까요?
단순하게 생각해보면 스크린 리더가 저 배경이미지에 대한 설명을 읽을 수 있게 만들면 됩니다.
근데 그 설명이 글자 그대로 웹 페이지에 나와 있는 경우를 본적이 있나요?
맞습니다. 글자를 읽을 수는 있게 하되, 시각적으로는 안보이게 해야합니다.
이것을 IR기법이라고 합니다.
간단한 div태그를 하나 추가해서 태그 안으로 설명을 넣고 이 태그는 css를 이용해서 가리는 것이죠.
간단하지 않나요?
이 간단한 조치가 우리가 모르는 누군가를 배려하는 수단이 되는 것 입니다.
간단한 예시를 살펴볼까요?
시각적으로 불편한 사람으로는 아예 보지 못하는 사람도 있겠지만 색맹을 고려할 수 도 있습니다.
우선 네이버 웹툰의 페이지 네비게이터는 현재 페이지를 초록색으로 한번, 네모로 또 한 번 표시를 해주었는데요.
바로 이유가 색맹을 고려해서 네모로 또 한번 표시를 해준 것 이겠죠.
이것은 웹 개발자의 역량보다도 디자이너의 역량이긴 하겠지만 어쨌든 이러한 숨은 디테일을 하나 발견 가능하고,
두번째로는 밑의 개발자 도구를 보시면 1밑에 "현재 페이지" span태그가 있는 것 을 볼 수 있습니다.
이상하죠. 1주변에는 "현재 페이지"라는 글자는 어디에도 없으니까요.
바로 위에서 소개한 IR 기법이 실제로 활용된 사례를 이렇게 확인이 가능함을 볼 수 있습니다.
신기하죠?
aria-hidden, aria-label
사진과 같이 오전 6시 ~ 오후 6시 는 스크린 리더로 읽혔을때 어떻게 읽힐까요?
오전 6시 물결 오후 6시 라고 읽힐 것 입니다.
하지만 기왕이면
오전 6시 부터 오후 6시 라고 읽히면 더 사용자를 배려한 웹이 되지 않을까요?
~ 부분을 HTML의 aria-hidden 속성을 이용하여 스크린 리더가 안읽게 할 수 있습니다.
대신에 IR기법을 이용해서 "부터"라는 글자를 넣는 것이죠.
사진은 유튜브의 홈화면 중 검색 입력입니다.
이 역시 스크린 리더의 관점에서 보도록 하죠.
태그의 속성을 자세히 보시면 우선 placeholder로 "검색"을 hint로 화면을 보는 사용자에게 해당 입력창의 목적을 나타내주고 있습니다.
하지만 스크린 리더는 저 글자를 읽지 못하는데요,
그래서 사용한게 aria-label 속성 입니다.
해당 속성을 사용해서 스크린 리더가 읽게 할 수 있습니다.
한가지 궁금증이 들어야 합니다.
바로 IR기법을 사용하면 되는 문제 아닌가? 하는 생각이 들 수 있는데요
간단한 이유인데, 화면을 볼 수 없는 사람 입장에서는 현재 웹에서 focused되어있는 부분이 입력창인지 알 수 있어서 바로 내가 여기에서 입력을 하면 되겠구나! 하는걸 알아야 할텐데 IR기법을 사용하면 Input태그와 IR기법을 사용한 설명 태그가 떨어져 있기 때문에
유튜브와 같이 aria-label 속성으로 해결한게 적절하다고 볼 수 있습니다.
결론
실력있는 웹 프론트엔드 개발자를 목표로 하고 있는 저로써는 사실 굉장히 신선하고 중요하게 와닿았던 주제였습니다.
위에서 건물에 엘리베이터가 있는 이유가 법 때문이라고는 했지만 법 이전에 내가 만든 웹 페이지를 모든 사람들이 사용하기에 불편하지 않게 만드는 방법이 있다면 그것을 안지킬 이유가 있을까요?
물론 웹 접근성을 완벽하게 구현하고자 한다면 우리는 더욱더 깊게 파고 들어야 할테지만
일단은 이것이 누군가에게는 반드시 필요한 기능인지 아닌지를 개발자가 인지 했는가 안했는가 만으로도 굉장히 중요한 의미가 있다고 생각합니다.
오늘 이후에 웹 페이지를 만든다면 미약하게 나마 하나씩 시작해보는 것은 어떨까요?
긴 글 읽어주셔서 감사드립니다.
