본 글은 웹접근성, 웹표준 전문 솔루션 컴플리언스 셰리프 Compliance Sheriff (http://www.sheriff.co.kr)와 함께 합니다.
지난 글 보기
대한민국에서 웹접근성과 웹표준 얘기하기 – 무엇을 위한 웹인증이며, 누구를 위한 웹진단 솔루션인가?
웹인증 진단을 한 방에! – 웹표준, 웹접근성 진단 솔루션 Compliance Sheriff 리뷰
지난 2회의 글에서 웹접근성의 의의 그리고 전문적인 웹접근성 진단 솔루션에 대해서 살펴보았다면, 이번부터는 웹접근성, 웹표준을 고려한 사이트를 개발하는 방법에 대해서 안내해보고자 한다.
1.
왜 웹접근성을 고려하여 사이트를 만드는가?
이에 대해서는 지난 글(http://gy.pe.kr/tc/495)에서 충분히 얘기되었다. 지금 다시 이를 묻는 것은 그것을 몰라서가 아니라, 실제 개발에서는 그 취지를 망각하는 경우가 있어 상기시키기 위함이다.
많은 클라이언트들이 단순히 웹접근성 인증을 받으려고만 한다. 이러한 접근 방식은 실무 개발자들에게 웹접근성을 고려한 개발이 단지 정해진 기준을 통과시키기 위한 요식행위로만 느껴지게 한다. 그러나 이는 대단히 잘못된 접근이다. 애초에 이런 자세로는 다양한 기준들을 충족하기도 어렵지만, 프로젝트 종료 후, 그렇게 만들어진 사이트들은 장애인들 같은 실수요자들의 입장에서 보면 웹접근성을 어떻게 고려했다는 건지 알 수 없는 오히려 불편한 사이트인 경우가 많다.
웹사이트를 제작하면서 웹접근성을 고려하겠다고 선언하는 것은 그동안 우리가 놓쳐왔던 다양한 사용자들을 고려하겠다는 것이다. 크로스브라우징 테스트를 해야 하는 것은 기본이며, 직접 시각장애인이 사용하는 센스리더기를 구매하여 테스트하지는 않더라도 그들이 사용하는 프로그램들이 사이트에 담긴 콘텐츠를 무리 없이 읽어낼 수 있도록 alt tag 등을 넣어주는 노력을 해야 한다.
2.
웹접근성을 고려한 사이트 개발 시, 놓치기 쉬운
것들
당연히 웹사이트를 개발하는 사람은 장애인이 아닌 경우가 대부분이다. 그렇다보니 실제로 장애인들의 입장에서 필요한 것들이 무엇인지 모르는 경우가 많다. 아래는 웹접근성 사이트 개발 시, 장애인의 관점에서 필요한 것들을 나열한 것이다. 이러한 것들은 KWCAG나 WCAG 등에 나와 있는 것은 아니지만 현장에서는 중요한 것들이니 잊지 말자. 그리고 이 부분들은 웹접근성 인증에서 사용자 심사 시 모두 플러스 점수로 작용할 수 있는 것들이다.
(1) 색 대비를 활용한다.
약시 및 저시력의 장애인의 경우는 색대비를 통해 사이트를 이용한다. 그런데 만약 회색버튼에 하얀색 글씨가 쓰여져 있다면 사실상 읽어내지 못할 것이다. 이러한 것들 것 고려하여 디자인시 색대비가 필요하다.
(2) Title tag의 내용을 정확하게 기입한다.
보통 title tag는 무시하거나 신경 안쓰기 마련이다. 그러난 이 title tag는 일반인들이 웹브라우저에서 즐겨찾기에 북마크를 할 때에도 기본 제목으로 사용될 뿐더러, 특히 장애인들의 경우에는 리더기를 통해 현재 브라우저가 사이트의 어느 위치에 있는지를 파악하는 수단으로 애용한다. 예를 들면 아래와 같다.
예) 네이버 부동산 :: 내집마련의 시작 – 매물
이러한 까닭에 가장 피해야 할 것이 iframe이다. Iframe을 사용하게 되면 title바가 변동하지 않는 상태에서 사이트가 변경되기 때문이다.
(3) frame으로 만들어진 경우, 모두 이름을 붙여주어야 한다.
이름이 안 써있으면 그냥 frame이라고 리더기가 읽어준다. 이 경우 자신이 선택한 게 어느 프레임인지 알 수도 없을 뿐더러, 프레임 구조에 대한 파악도 안 된다.
(4) 로그인 박스의 tab 순서는 지켜주어야 한다.
보통 아래와 같은 순서로 tab 이동이 이루어질 것이다.
ID입력 필드 → id저장 체크 박스 버튼 → 비밀번호 입력 필드 → 로그인버튼
(5) 대체 컨텐츠를 마련한다.
이는 대부분의 방송사 사이트의 경우에는 기본으로 지키고 있는 것들이긴 한데, 일반 기업 사이트에서는 자주 간과하는 것 중에 하나이다.
예를 들어 동영상의 경우, 동영상의 내용을 text로 보여주는 것이 필요하다.
[참고]
위 사진을 보면, 동영상 우측에 방송전문이 text로 나타나 있다. 이렇게 하면 동영상을 보지 못하는 사람도 리더기가 읽어주는 글 내용을 통해 동영상의 내용을 파악하게 된다.
이와 마찬가지로 요즘에는 플래쉬만을 이용해서 UI를 꾸미는 경우가 많은데, 이는 웹접근성 면에서 보면 좋지 않은 방법이다. 만약 영화 홍보 사이트처럼 감각적인 디자인을 살리기 위해 플래쉬로 UI를 구성했다면, 플래쉬 없는 사이트를 같이 만들어서 첫화면에 이 둘을 선택할 수 있게 해주어야 한다. (이는 장애인이 아니더라도 플래쉬를 사용하지 않는 웹브라우저를 쓰는 사람들을 위해 꼭 필요한 조치다.)
(6) 보안 문자는 alt text를 반드시 병행 출력하도록 프로그래밍해야 한다.
요즘 들어 프로그램을 통한 회원가입이나 도배글 작성을 막기 위해, 랜덤하게 문자를 출력시키고는 사용자가 입력하게 하는 경우가 많다. 근데 이게 시각장애인들에게는 아예 회원가입을 못하게 막거나, 게시물 작성을 못하게 막는 장치로 작용해버린다. 이때 생성된 보안문자 이미지 파일에 동일한 내용의 alt text만 출력시켜줘도 이를 해결할 수 있다. 아니면 아예 인증 방식을 바꾸는 것도 고려해 볼 필요가 있다. 신용카드인증, 휴대폰인증, ARS인증. 찾아보면 인증방법은 많다.
3. 웹사용성(Web Usability) → 웹접근성(Web Accessibility) → 웹표준(Web Standard)
웹접근성 인증을 위한 사이트를 개발할 경우, 실무에 적용되는 개념은 결국 위 3단계로 나뉘어 볼 수 있다.
(1) 웹사용성(Web Usability)
실무적으로 보았을 때, 웹사용성을 적용했다 함은, 사용자 편의를 고려하여 제작된 웹사이트를 말한다. 예를 들면 사이트 네비게이션을 기획활 때, 최소한의 클릭으로 원하는 컨텐츠를 찾아갈 수 있게 한다거나, 각각의 양식은 최대한 컨트롤하기 쉽게 만드는 것이 그것이다.
(2) 웹접근성(Web Accessibility)
웹접근성을 적용하는 것은 웹사용성에서 한 발 더 나아가는 것이다. 단순히 편리함을 넘어 누구나 구조를 파악하기 쉽고, 다양한 사용자가 다양한 환경에서 사이트를 이용할 수 있도록 만다는 것이다. 가장 대표적인 예가 마우스 없는 경우, 키보드로만으로 사이트를 이용 가능하게 만드는 것이다.
(3) 웹표준(Web Standard)
웹표준을 적용하는 것은 W3C같은 공공의 기관이나 단체에서 만든 기술적 규약에 따라 웹사이트를 제작하는 것이다. 모든 웹표준들은 앞서 얘기한 개념들을 모두 고려하여 만들어진 경우가 대부분이므로, 결국 웹접근성 개발은 기술적으로 보면 웹표준에 따라 웹사이트를 만드는 것이 된다.
다음에는 웹접근성 개발의 Flow와 웹표준 개발의 핵심 내용에 대해 살펴보겠다.
