웹 접근성 가이드
May 2021
웹 접근성이 뭘까
사전적인 정의의 웹 접근성
"웹 개발에서의 접근성은 사람들의 능력이 어느정도 제한되어 있더라도 가능한 많은 사람들이 웹사이트를 사용 할 수 있도록 하는것 입니다. 여기서 우리는 접근할 수 있는 콘텐츠 개발에 관한 정보를 제공 합니다." - MDN
"접근성은 장애인을 돕기 위한 '휠체어 접근' 과 같은 시설이나 편의 시설을 설명하는 데 가장 많이 사용됩니다. 이것은 점저 감판, 휠체어 경사로, 보행자 교차점에서의 오디오 신호등, 보행로 등고선, 웹 사이트 디자인 등으로 확장될 수 있습니다." - Wikipedia entry for Accessibility
"그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." W3C - Accessibility
사용자 경험 측면에서의 웹 접근성
사용자가 웹을 이용하면서 장애를 느끼는 순간 웹 접근성은 깨진다. 장애인의 경우 그런 빈도가 높아서 웹 접근성의 대상으로 주로 언급이 된다. 장애를 일으키는 요인은 장애인과 같이 신체적 어려움도 있고 브라우저 같은 이용 환경에 따른 환경적인 어려움도 있다. 원하는 대로 동작이 안되거나 정보를 인지하는데 어려움을 겪는다면 누구나 웹 접근성의 개선의 대상이 된다. 예를 들어 노인 들을 위해 글자 크기를 크게 하거나 어린 아이를 위해서 문구를 쉽게 하는 것도 웹 접근성을 높이는 방법이다. 또, 낯선 사용자를 위해서 웹 어플리케이션을 운용하기 위한 인터페이스를 단순하게 만드는 것도 웹 접근성을 높이는 방법이다.
웹 콘텐츠 접근성 지침 (WCAG)
사용자를 위해 웹 접근성을 높이는 WCAG의 지침이 있다.
모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
UX는 운용 가능 해야한다
- 키보드로 모든 기능 사용 가능해야 한다
- 사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공 해야 한다
정보와 UX 모두 어렵지 않고 이해 가능 해야한다
현재와 미래 기기들 다양하게 해석될 수 있도록 모두 호환성을 극대화 해야한다
모든 세대, 모든 환경, 모든 신체적 조건, 모든 시간 등 많은 것들을 고려해야지 웹 접근성을 높여 개발할 수 있다. 모든 인류를 위해 개발할 준비가 되었는가, 웹 접근성을 높이기 위해 개발자로서 뭘 할수 있을지 고찰해 보자
개발자가 웹 접근성을 높이기 위해서 뭘 할 수 있을까
웹 접근성을 달성하고자 할 때 장애물
웹 접근성은 기술적으로만 달성 되는 것이 아니다. 웹 접근성을 높이기 위한 지침들은 프론트 개발자 혼자서는 달성이 불가능한 것들이 대부분이다. 웹 접근성을 달성하고 할때 어떤 장애물 있을까
첫번째, 개발 일정과 검증 일정이 오래 걸리게 된다. 웹 접근성을 달성하기 위한 조건들은 포괄적이고 상당한 작업과 검증이 요구되기 때문에 단기간 개발을 위한 생산성이 저하 될 수도 있다. 개발 일정은 늘어 나고 검증을 위해 필요한 기기들도 더 늘어난다. 회사와 프로젝트 매니저가 이를 배려해주지 않는다면 웹 접근성 향상을 위한 노력은 소홀해 질 수 밖에 없다. 사용자 경험을 위해 꼭 필요한 일이고 회사의 리소스를 소모하는 작업이기 때문에 회사와 프로젝트 매니저의 웹 접근성에 대한 관심과 고려가 요구된다.
두번째로 디자인에 제약이 생긴다. 웹 접근성을 달성하기 위해서는 디자인적인 요소들도 많이 요구가 된다. 단순한 글자 크기 부터 명조, 폰트, 아이콘 디자인, 문구 등 변경이 필요하다. 디자이너가 이러한 웹 접근성을 높이기 위한 디자인 지침들을 잘 모른채 UX 를 디자인 했다면 시작부터 달성 불가능한 목표가 된다.
그래서 개발자는 뭘 할 수 있을까
첫번째, 웹 표준을 따라야 한다. 웹 표준이 중요한 이유는 산업에서 표준이 왜 존재하는지 생각해보면 된다. 웹 표준이 없던 시절 브라우저는 넷스케이프와 익스플로러의 양 파전으로 웹 개발을 위해서는 두가지 버전으로 개발을 했어야 했다. 마구잡이로 스펙들이 생겨났기 때문에 작업 효율도 떨어지고 사용자도 환경에 따라 기능이 동작 안하는 불편함을 겪게 된다. 웹 표준을 만들게 되면 서로 다른 기준으로 개발할 필요가 없고 하나의 표준 아래서 브라우저를 만들고 또 웹 어플리케이션을 만드는게 가능해진다. 표준을 이용한 기기와 환경은 단순히 브라우저에 따른 기능을 넘어서 장애인들을 위한 리더기나 OS가 제공하는 오디오 기능에도 활용이 가능해서 웹 접근성을 높이는데 큰 도움이 된다. 웹 표준화의 중심에는 시멘틱 웹이 있는데 기계가 이해 할 수 있는 리소스를 만들어서 처리하게 끔 하는 웹 개념이다. 역설적으로 기계가 이해 할 수 있어야 모든 사람이 이해하게 끔 다시 재처리가 가능하기 때문에 웹 표준에 꼭 필요한 개념이고 HTML5를 탄생하게 한 핵심 개념이다. ( Note : 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시멘틱 웹을 잘 실현하게 되면 SEO에도 도움이 된다 )
웹 개발자가 HTML5를 정확히 이해하고 사용해야 웹 접근성을 높일 수 있다. HTML5에는 시멘틱 웹을 실현하게하는 많은 태그들이 추가 되었고 이를 적절하게 쓰고 메타 데이터, 타이틀도 적절하게 넣어줘야 기계가 이 리소스를 적절하게 읽어서 다시 다양한 웹 사용자에게 필요한 방법으로 노출시켜 웹 접근성을 높일 수 있다.
두번째, 다양한 환경에서 다양한 사용자를 가정한 테스트를 해야한다. 맥에서 커맨드 + F5 키를 누르면 VoiceOver 기능을 켤 수 있는데 시각 장애인이 어떤 환경에서 웹을 어떻게 읽고 있는지 확인이 가능하다. 또 다양한 화면과 기기에서 웹 어플리케이션을 실행 시키면서 불편함이 없는지 확인해야한다. 반응형 웹도 웹 접근성을 높이는 좋은 방안이다. 하위 호환성을 상당 부분 가지는 것도 웹 접근성을 높이는데 큰 도움이 되는데 다들 낮은 버전의 어플리케이션 사용 중에 안되는 기능과 부수한 버그들로 인해 화가난 적이 있을 것이다. 하위 호환성을 놓치게 되면 그만큼 불편함을 만들고 웹 접근성을 낮추게 된다. ( Note : 구버전 IE 대응은 상당히 피곤하긴 하지만 ㅠㅠ) 반면, 하위 호환성을 지키기 위해서 더 나은 접근성을 위한 기능 제약을 만들 수도 있기 때문에 여러가지 다방면의 고려가 필요하다.
그외, 구체적인 고려 사항은 아래와 같다.
인지적 측면
- 사진 비디오 오디오 등 콘텐츠가 적절히 대체되고 있는지
- 비디오나 오디오에 자막이나 수화가 제공 되는지
운용적 측면
- 키보드 만으로 조작이 가능한지
- 키보드 외외에도 입력이 되는지
이해적 측면
- 오류가 사용자에게 잘 설명 되고 있는지
- 사용자 사용 방향이 예측되는 방법되로 실행 되는지
- 사용자가 쓰는 언어로 제대로 전달 되는지
웹 접근성에 큰 관심이 있다면 https://www.w3.org/TR/WCAG21/ 에 들어가서 A단계 부터 AAA단계까지 어떤 방법이 제시되어있는지 확인 할 수 있다.