Accessibility 본문

디자이너와 기획자가 고려해야 할 웹접근성

디자이너를 위한 웹 접근성

Web Accessibility for Designers by WebAIM

WebAIM 은 Web Accessibility In Mind라는 이름의 미국 유타주의 웹접근성 전문 비영리단체

이 단체에서 발표한 Web Accessibility for Designers를 기초로 해당 자료를 정리


디자이너와 기획자가 고려해야 할 웹접근성
1. Plan Heading Structure Early – 초기에 헤딩 구조를 계획하라

의미론적 구조(Semantic Structure )를 만들 수 있도록 초기부터 토대를 갖추는 것이 중요 (관련 지침 : 2.4.2 제목제공)


헤딩 구조를 계획

  • 헤딩 태그를 이미지적인 효과(예를 들면 글씨 크기를 위해서 등)을 위해서 사용하지 말자
  • b, i 대신 strong, em 등 의미론적인 태그를 이용하고, ul, ol과 dl 등의 리스트 태그를 적절하게 이용
2. Consider Reading Order – 컨텐츠를 읽는 순서를 고려하라

사람이 화면을 읽는 순서와 기계가 컨텐츠를 읽는 순서를 동일하게 제공 (관련 지침 : 3.3.1 컨텐츠 선형화)

사람이 화면을 읽는 순서와 기계가 읽어내는 순서가 일치해야 혼란을 방지할 수 있다는 것

표현의 요소를 제거(CSS 제거)하고 순서를 살펴보면 됨


컨텐츠를 읽는 순서 1 컨텐츠를 읽는 순서 2

3. Provide Good Contrast – 좋은 대비를 제공하라

약시, 고령자 등을 위해 고대비를 제공 (관련 지침 : 1.3.3 텍스트 컨텐츠의 명도 대비)

주요한 버튼, 메뉴, 본문 컨텐츠 등에는 반드시 고대비를 적용

핵심 컨텐츠의 명도 대비

텍스트 명도 대 배경 명도는 4.5대 1 이상 이어야 함

폰트 크기에 따른 명도 대비
  • 기본 : 4.5대 1
  • 14pt 이상 bold : 3대 1
  • 18pt 이상 : 3대 1
WCAG 2.0 지침
  • 명암의 강도를 "1~21" 단계로 나눔
  • 명암을 전혀 구분할 수 없는 상태를 "1:1"(white:white) 으로 표현하며 전경과 배경이 확연하게 구분되는 상태를 "21:1"(black:white) 으로 표현함

Provide Good Contrast
WCAG 2.0 적합성 수준의 의미
  • A : 웹 접근성을 확보했다는 주장을 펼치기 위하여 반드시 지켜야 할 최소한의 수준으로써 강력하게 권장된다.
  • AA : 최소한의 수준을 넘어서 보다 향상된 접근성을 갖추기 위한 수준으로써 권장된다.
  • AAA : 웹 접근성을 극대화 하고자 할 때 갖추어야 할 수준으로써 이 수준은 의무화 하기에 너무 어려울 수도 있다.
색상 대비를 평가하는 방법으로는 다양한 평가 도구 이용

ex) IBM aDesigner, Colour Check, Colour Contrast Analyser, Colour Contrast Analyser Firefox Extension, Fujitsu ColorSelector, ColorDoctor

참고 – 잊혀진 시각장애인, WCAG 2.0 지침이 전하는 전경색과 배경색의 명도 대비, Index of Color Contrast Samples

4. Use True Text Whenever Possible – 최대한 텍스트를 텍스트 형태로 제공하라

텍스트를 텍스트로 최대한 제공하면 확대, 로딩 속도, 자동 번역, 검색 등 기계가 보다 쉽게 인식하여 많은 사용자에게 도움을 줄 수 있음

5. Watch the Use of CAPS – 대문자 사용에 조심하라

영어로 된 컨텐츠의 경우 대문자만을 사용하여 제공할 경우 해당 내용을 제대로 읽기 어려움 (참고 :webstyleguide)

  • 미국에서 문장을 대문자로 쓰면 크게 소리내는 것 또는 소리지르는 것으로 받아들이기 쉽기 때문에 사용자로 하여금 심리적으로 불편하게 할 수 있음
  • 모든 영어 단어를 대문자로 제공할 경우 화면낭독 프로그램에서도 잘못 인식할 수 있는 문제가 발생함으로 대문자 사용에 조심해야 함 (참고 : Upper Case Character Test)

    예를 들어 "who"의 경우, "누구"를 의미하는 단어로 작성하였지만, 대문자로 작성시 화면낭독 프로그램에서는 "WHO"를 "후"가 아닌 "더블유에이치오(세계보건기구)"로 읽음

6. Use Adequate Font Size – 적절한 폰트 크기를 제공하라

WEBAIM에서는 최소 10 포인트 이상의 크기를 사용하라고 밝히고 있음

영문 폰트 기준으로 접근성에 맞는 최소 한글 폰트 사이즈에 대한 명확한 지침은 없으나, 많은 홈페이지에서 12px를 기본 폰트 사이즈로 사용하고 있음

참고 - 서울신문 "敬老"없는 인터넷 세상

7. Remember Line Length – 문단의 길이가 너무 길어지지 않도록 고민하라

많은 사람들이 너무 긴 문장으로 웹 페이지를 제공할 경우 해당 페이지를 인식하는데 방해가 될 수 있음

8. Make Sure Links are Recognizable – 링크를 인식할 수 있도록 제공하라

링크가 걸린 것인지, 아닌 것인지를 색 하나에만 의존하지 말고 밑줄, 강조 표시 등을 통해 구분할 수 있도록 제공하는 것이 필요

Make Sure Links are Recognizable
9. Design Link Focus Indicators – 링크 포커스를 구분할 수 있도록 제공하라

링크 포커스가 위치한 곳을 사용자가 인식할 수 있도록 제공하게 되면 키보드 사용자의 경우에도 현재의 위치를 파악하기 쉬워짐 (관련 지침 : 2.1.2 초점이동)

Design Link Focus Indicators 1 Design Link Focus Indicators 2
10. Design a "Skip to Main Content" Link – 본문 건너뛰기 링크를 제공하라

키보드 사용자 등을 위해 본문 건너뛰기 링크, Skip Navigation을 제공해야 함 (관련 지침 : 2.4.1 반복영역 건너뛰기)

본문 건너뛰기 제공한 경우
11. Ensure Link Text Makes Sense on Its Own – 링크 텍스트 자체로 이해할 수 있도록 제공하라

"여기를 클릭(Click here)", "더보기" 등의 의미를 제대로 파악할 수 없는 링크를 제공하지 말라는 것

해당 링크가 무엇인지를 올바르게 이해할 수 있도록 구체적인 의미나 용도를 파악할 수 있도록 링크 제목을 제공해야 함

링크 텍스트 자체로 이해할 수 있도록 제공한 사례
12. Use Animation, Video, and Audio Carefully – 애니메이션, 비디오 및 오디오 제공시 접근성을 고민하라

애니메이션, 비디오, 오디오의 경우에는 반드시 사용자가 선택을 하여 활성화한 경우에만 동작이 되어야 함


비디오와 오디오를 제어할 수 있는 수단 제공한 경우

깜빡이거나 번쩍이는 컨텐츠는 광과민성 발작 등을 야기할 수 있음으로 사용하지 말아야 할 것 (관련 지침 : 2.3.1 깜빡임과 번쩍임 사용 제한)


광과민성 발작에 관한 잘못 된 사례
13. Don’t Rely on Color Alone – 색 하나에만 의존하지 말라

색 이외에도 형태, 텍스트 등으로 구분이 가능하도록 제공하는 것이 필요 (관련 지침 : 1.3.1 색에 무관한 컨텐츠 인식)


색에 무관한 컨텐츠 인식 사례 1
색에 무관한 컨텐츠 인식 사례 2

색각이상은 대단히 흔한 이상으로 전체 남자인구의 약 5~8%에서 나타납니다. 서양에서는 전체 남자인구 중 8%, 전체 여자인구 중 0.5%가 색각이상이라고 하며 국내의 통계에서는 전체 남자의 5.9%, 전체 여자의 0.4%가 색각이상이라고 알려져 있습니다. 색각이상 중에서는 일반적으로 녹색약(Deuteranomaly)이 가장 흔하여 전체 색각이상의 25~45%를 차지합니다. 그 다음으로 녹색맹(Deuteranopia), 적색맹 (Protanopia), 적색약 (Protanomaly)의 빈도 순서를 보입니다. 하지만 이 세 가지의 빈도는 서로 비슷하여 각각 전체 남자인구 중 약 1%에 해당합니다. 제삼색각이상이나 완전색맹은 매우 드물어서 약 0.005%의 빈도를 보입니다.

색약자와 비색약자 모두에게 명확하게 보일 수 있는 색상들


색약자와 비색약자 모두에게 명확하게 보일 수 있는 색상
Colorblind barrier-free color pallet
Accessibility Color Wheel
  • 색맹환자들을 고려한 컬러값을 표기해줌
  • 왼쪽 부터 Deuteranope – 제2색맹환자(녹색맹환자)고려 컬러, Protanope – 적색맹환자(녹시자)고려 컬러, Tritanope – 제3색맹인 사람 고려 컬러

참고 – 웹 접근성 연구소, wearecolorblind, Color Universal Design

14. Design Accessible Form Controls – 접근가능한 입력 서식을 제공하라

입력 서식의 내용에는 레이블이나 지시사항을 제공해야하며 지시사항의 경우에는 서식 입력 전에 설명을 제공해야 함 (관련 지침 : 3.4 입력 도움)


접근가능한 입력 서식 사례

오류 발생시 오류를 쉽게 정정할 수 있는 방법도 제공해야 함

Basics of Website design and accessibility by studygs
당신이 보고 있는 것이 사용자가 보게될 그것이라고 가정하지 말자
Screen's real estate를 고려하자
  • 왼쪽 상단에 중요한 정보를 배치
  • 사용자의 스크린 해상도나 모니터 크기를 가정하지 말자
  • 표준화된 표시와 네비게이션
  • 로고, 메뉴, 기능 등을 일관되게 배치
  • 컨텐츠가 긴 페이지에서는 "back to the top(상단으로)" 링크 추가
상단으로 링크 추가 사례
읽기 쉽게 만들기
  • 글머리 기호, 표제, 하위 표제 및 글꼴 크기의 일관된 활용
  • default 글꼴을 사용하지 않을 경우 표준 또는 일반적인 글꼴을 사용
  • 접근성을 높이기 위해서는 절대 크기보다 상대 크기를 사용하는 것이 좋음 (단, 고정 사이즈의 경우 최소 글꼴 크기는 10 (PC) 또는 12 (매킨토시) 또는 medium 또는 "3")
  • 두가지 이상의 폰트를 사용하지 않도록 하자
  • 서식 글꼴의 사용을 자제
이미지

드롭다운메뉴에서 roll over는 피하자 – 링크의 유무를 시각적으로 알아보기 힘들게 함

링크
  • 디자인된 이미지를 사용한 링크는 피하자 – 필요하다면 대체텍스트
  • 드롭다운메뉴에서 roll over는 피하자 – 링크의 유무를 시각적으로 알아보기 힘들게 함
BUT, 웹 접근성을 보장하기 위해 디자인 방식을 제한해서는 안된다.

기획자를 위한 웹 접근성

  • 웹 기획자는 상위에 열거했던 디자이너가 고려해야 할 웹 접근성의 개념들을 사전에 잘 이해하고 있어야 함
  • 웹 기획자는 웹 퍼블리셔와 더불어 그 누구보다 웹 접근성의 개념을 잘 이해하고 있어야 하며 적용가능한 표준기술과 스펙에 대한 명확한 지식을 갖추고 있어야함
  • 더불어 웹 접근성과 관련된 국내 지침이나 법률 역시 확실히 이해하고 이를 기획에 반영할 수 있어야 함
  • 접근성 향상을 위한 효과적인 방법을 고안해 나가고 그 부분을 기획에 포함해 나가는 일 역시 기획자가 책임감 있게 맡아야 할 일임
  • 참고 : 구글 로고를 보며-접근성에서 기획자의 역할
The Importance of Planning for Accessibility by WebAIM
기획단계에서부터 웹 접근성을 고려한다면 모든 프로세스가 훨씬 쉬워짐
  • 웹 접근성을 작업 완료 후에 지켜나가는 것은 집을 지은 후, 휠체어를 위해 문과 복도를 넓히는 것과 같음
  • 만약 집을 짓는 단계에서부터 넓은 문과 복도를 지어나간다면 여러가지 면에 있어서 훨씬 효율적인 작업이 됨
  • 작업 도중 웹 접근성 측면을 추가하는 것은 작업 완료 후에 추가하는 것 보다는 여러가지 면에서 낫지만, 여전히 근시적인 시각임
모든 단계에서 사용자 관점을 고려해야 함
  • 언제, 어떻게 웹 접근성을 지켜나가는 지에 관계없이 모든 기능들이 real people을 위한 것임을 염두해야 함
  • 웹 접근성은 단순히 관련 법률, 지침 또는 표준 준수의 문제가 아님
  • 웹 접근성은 웹에서 정보를 얻을 때 여타 도움이 필요했던 수백만의 사람에게 독립적인 생활을 가능케 해주는 기술임
  • 사용자의 관점을 생각하지 않고 웹 접근성을 기계적으로 접근하는 개발자들은 접근성이 준수된 사이트는 만들 수 있지만, 종종 사용자로 하여금 사용이 어려운 웹을 만들기도 함
  • 디자이너의 경우, 디자인 측면에서 완벽한 사이트를 만들 수 있지만, 심미적인 측면을 위해 웹 접근성을 준수하지 못하는 일이 발생하기도 함
  • 기획자가 사전에 모든 단계에서 사용자의 관점을 고려하여 웹 접근성을 준수한 웹을 기획하고 만들어 나가면 이러한 문제점들을 해결할 수 있음
웹 접근성에 대한 오해들
웹 접근성 사업은 장애인만을 위한 사업인가

결코 장애인에게만 좋은 것이 아니다. 예를 들어 그림과 멀티미디어 요소에 의미 있는 대체 텍스트를 달아주게 되면 검색엔진이 그림과 멀티미디어를 검색할 때 훨씬 유의미하고 풍부한 검색결과를 얻을 수 있게 된다.네트워크 사정이 나쁘거나 서버에 문제가 있어서 그림이 화면에 뜨지 않을 경우에도 그림이 나타내고자하는 바를 알 수 있어 큰 도움이 된다. 웹 표준을 준수하게 됨으로써 사용성이 높아지고 정보에 대한 이해력도 높일 수 있다.

웹 접근성 준수 때문에 디자인이 조악해지는 건 아닌가

웹 접근성을 잘못 이해한 대표적인 경우다. 웹접근성을 준수하기 위해 이미지를 배제하고 텍스트만으로 구성하라는 게 아니다. 이미지나 플래시, 스크립트 등을 사용할 때 대체텍스트 등의 대체수단을 제공하면 된다. 이미지, 플래시에 대한 대체수단이나 자체 접근성을 제공하게 되면 접근성을 준수하면서도 디자인 품질이 높은 사이트를 만들 수 있다.

접근성이 높은 사이트를 만들기 위해 비용이 많이 드는 건 아닌가

그렇지 않다. 접근성이 전혀 고려되지 않은 사이트를 개편하려면 추가비용이 들어가는 것은 당연할 것이다. 동영상 등에 자막을 넣으려고 하면 비용도 더 들어갈 것이다.하지만 기획 단계부터 웹 접근성이 고려되고 웹 표준을 적용해 개발하는 경우에 웹 접근성 표준 준수로 인한 비용이 크게 발생하지 않는다. 접근성이 높은 사이트는 소스코드 자체가 이해하기 쉽고 간결해서 사후 유지보수 측면에서도 훨씬 유리하다.

웹 접근성 지침이 너무 까다로운 건 아닌가

웹 접근성 지침에서는 HTML을 구현할 수 있는 수준의 기술을 요구한다. 접근성을 구현하는 것은 특별하고 신기한 기술을 필요로 하는 게 아니다. 단지 표준을 지키면 대부분 해결되는 기술이다. 장애인이나 보조기술 등에 대한 이해가 있다면 많은 도움이 되겠지만 반드시 알아야 되는 것도 아니다.

시각장애인 전용 페이지를 만들면 되는 것 아닌가

웹 접근성 지침을 준수하게 되면 장애인 등 모든 이용자가 동등하게 정보에 접근 가능하기 때문에 비장애인용 웹사이트와 시각 장애인용 웹사이트를 분리해서 운영할 필요가 없다.시각 장애인용 웹사이트를 별도로 두다보면 정보가 부족하게 되고 업데이트가 제대로 되지 않는 등 동등한 정보제공을 할 수 없게 돼 또 다른 차별이 발생한다.