sungyup's.

dont_make_me_think / 사용성 평가 및 그외 / 3.12 웹 접근성과 여러분

3.12웹 접근성과 여러분

여러분이 마쳤다고 생각할 때 고양이가 등에 묶인 버터 토스트 때문에 공중부양한다

고양이는 항상 발이 땅에 닿게 떨어지고, 토스트는 항상 버터를 바른 쪽이 땅에 떨어진다. 나는 버터 바른 토스트와 고양이의 등을 끈으로 묶을 것을 제안한다. 그러면 이 둘은 공중에서 맴돌고, 회전할 것이다. -John Frazee-

많은 사이트들이 글꼴의 크기를 키우는 간단한 접근성 문제도 신경쓰지 못하고 있다.

사람들이 개발자나 디자이너에게 하는 말

접근성은 실제 사이트를 제작하는 개발자나 디자이너가 신경쓰게 된다. 하지만 접근성을 높이면 막연히 좋겠다고 생각하는 것과 별개로, 접근성에 대해 신경을 쓰면 쓸수록 업무가 늘어나고, 디자인을 타협 해야한다.

W3C에서는 WCAG(Web Content Accessibility Guideline)이라는 접근성 맞춤 검사기를 제공하지만, 막상 실행해보면 고치지 않아도 되는 부분을 고쳐야 한다면서 줄줄 지적하는 느낌을 준다. 이 때문에 접근성을 신경쓰려고 하다가도 용기가 사그라든다.

지금 당장 할 수 있는 네 가지 사항

하지만 가장 효과가 좋은 몇 가지 사항에 집중한다면 현재 기술과 표준만으로도 충분히 접근성 좋은 사이트를 만들 수 있다.

  1. 모두가 혼란스러워 하는 사용성 문제부터 고쳐라

사이트 사용자 대부분이 혼란스러워 하는 부분이라면 장애인도 접근성 문제를 겪는다. 사이트 접근성을 개선하는 최고의 방법은 자주 평가하고 모두를 혼란스럽게 하는 부분을 꾸준히 제거하는 것이다.

  1. 논문을 한 편 추천한다 사용성을 개선하는 가장 좋은 방법은 사람들이 실제 사용하는 모습을 관찰하는 것이다. 시각 장애가 있는 웹 사용자 한두 명을 만나서 그들이 스크린 리더 소프트웨어를 어떻게 사용하는지 몇 시간 정도 관찰하는것이 따라서 가장 좋다.

하지만 실제로 그렇게 하기는 쉽지 않다. 대신, Mary Theofanos와 Janice Redish가 시각 장애인 16명이 스크린 리더를 사용해서 다양한 사이트에서 여러 작업을 하는 모습을 관찰해서 Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers라는 논문을 내서 우리의 일을 대신했다.

스크린 리더 사용자는 귀로 사이트를 훑어본다. 시각 장애인 대부분은 정상 시력을 가진 사용자 대부분과 마찬가지로 인내심이 적다. 그들은 자신이 원하는 정보를 최대한 빨리 찾기 원한다. 그들은 페이지에 나와 있는 모든 단어를 듣지 않는다. 그들은 귀로 훑어본다. (...중략...) 그들은 링크 맨 앞에 나오는 단어 몇 개나 텍스트의 첫 줄을 듣는다. 만약 관련이 없다고 느껴지면 다음 링크, 다음 줄, 다음 제목, 다음 단락으로 빠르게 넘어간다. 키워드가 링크의 앞 부분이나 텍스트의 첫 줄에 없으면 시력 장애인 사용자는 이를 놓치기 쉽다.

  1. 책을 추천한다
  • Sarah Horton과 Whitney Quesenbery의 A Web for Everyone: Designing Accessible User Experiences
  • Jim Thatcher et al.의 Web Accessibility: Web Standards and Regulatory Compliance
  1. 쉬운 문제부터 해결하라
  • 모든 페이지에 적절한 대체 텍스트를 추가하라: 웹 개발자는 이미지 등에 alt 속성을 추가해야 한다.
  • 올바른 헤딩을 사용하라: 페이지 제목이나 메인 콘텐츠에는 <h1>을, 주요 섹션 헤딩에는 <h2>를, 부제목에는 <h3>을 사용하라.
  • 폼이 스크린 리더에서도 잘 동작하도록 작성하라: HTML <label> 엘리먼트를 사용하면 필드와 텍스트 라벨이 연결되어 사용자가 무엇을 입력해야 하는지 알게 된다.
  • 각 페이지를 시작할 때 '메인 콘텐츠로 넘어가기' 링크를 넣어라: 장애인들은 실제 콘텐츠를 보기 전 글로벌 내비게이션을 20초간 들어야한다.
  • 키보드로 모든 컨텐츠에 접근할 수 있게 하라: 마우스를 못 쓰는 상황도 있다.
  • 텍스트와 배경 간에 눈에 띄는 차이를 두라.
  • 접근성 있는 템플릿을 사용하라.