WEBAIM 이라는 웹 접근성 전문 기업에서 발표한 디자이너를 위한 웹 접근성(Web Accessibility for Designers)를 번역해 보았습니다. 짧지만 보다 많은 사람을 위한 웹 디자인을 고민하시다면 한 번 읽어보시고 이를 고려하여 디자인하시면 좋을 것으로 생각됩니다.
1. 초기에 헤딩 구조를 계획하라(Plan Heading Structure Early)
모든 콘텐츠와 디자인이 논리적인 헤딩 구조에 적합한지를 확인하라는 것이다. 의미론적 구조(Semantic Structure)를 만들 수 있도록 초기부터 토대를 갖추라는 것입니다. 의미론적 구조에 관해서는 WEBAIM의 별도 글인 Creating Semantic Structure을 참고하시기 바랍니다. 기계가 잘 인식할 수 있는 구조를 갖추는 것을 고민하라는 것입니다. 이를 위해서 대표적으로는 h1 – h6 같은 헤딩 태그를 폰트의 크기 등 텍스트 포맷의 형태, 즉 이미지적인 효과를 위해서 사용하지 말라는 것입니다. 또한 b, i 대신 strong, em 등 의미론적인 태그를 이용하고, ul, ol과 dl 등의 리스트 태그를 적절하게 이용하라는 것이다.
2. 콘텐츠 읽는 순서를 고려하라(Consider Reading Order)
시각적인 순서와 콘텐츠 읽는 순서를 동일하게 제공하라는 것이다. 콘텐츠 읽는 순서란, 기계가 읽는 순서를 말한다. 대표적인 예는 텍스트 전용 브라우저, 화면 낭독 프로그램 등이 해당될 것이다. 기계가 읽어내는 순서와 시각적인 순서가 일치해야 혼란을 방지할 수 있다는 것이다. 이를 쉽게 평가해 볼 수 있는 방법은 표현의 요소를 제거하고 순서(CSS 제거 화면)를 살펴보면 된다.
3. 좋은 대비를 제공하라(Provide Good Contrast)
약시, 고령자 등을 위해 고대비를 제공하라는 것이다. 대비가 낮을 경우 문맥을 제대로 파악하지 못하는 경우가 발생함으로 주요한 버튼, 메뉴, 본문 콘텐츠 등에는 반드시 고대비를 적용해야 한다는 것이다. 대비가 높으면서 디자인적으로 아름답게 만드는 것이 훌륭한 디자이너일 것이다. 우리나라의 경우에는 하단의 Copyright 등에 회색톤의 글씨를 사용하는 경우가 많은데, 이런한 것들은 대비가 낮아 해당 콘텐츠를 제대로 인식하지 못하게 만드는 대표적으로 잘못된 사례이다.
이러한 색상 대비를 평가하는 방법으로는 다양한 평가 도구들이 있다. W3C 웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)에서 제공하는 웹 접근성 평가도구 리스트(Complete List of Web Accessibility Evaluation Tools) 등을 참고하시면 색상과 관련된 평가도구 정보를 얻으실 수 있습니다. 대표적인 것들은 IBM aDesigner, Colour Check, Colour Contrast Analyser, Colour Contrast Analyser Firefox Extension, 후지쯔 ColorSelector, ColorDoctor 등이 있습니다. WEBAIM에서도 Color Contrast Checker를 제공하고 있습니다.
이와 관련하여서는 백남중님의 잊혀진 시각장애인, 저시력인이라는 블로깅과 정찬명님의 WCAG 2.0 지침이 전하는 전경색과 배경색의 명도 대비라는 블로깅을 참고하시기 바랍니다. 또한 미국 TRACE 센터에서 제공하고 있는 Index of Color Contrast Samples를 참고해 보시기 바랍니다.
4. 최대한 텍스트를 텍스트 형태로 제공하라(Use True Text Whenever Possible)
아름다운 디자인을 위해서 텍스트를 이미지로 만들어 제공하는 경우가 많이 있습니다. 영어에 비해 한글의 폰트가 이쁘지 않아서, 웹 사이트의 아름다움을 위해 다양한 형태의 텍스트 정보를 이미지화하는 경우가 많이 있습니다. 텍스트를 텍스트로 최대한 제공하면 확대, 로딩 속도, 자동 번역 등 기계가 보다 쉽게 인식하여 많은 사용자에게 도움을 줄 수 있다는 것입니다. 기계가 인식할 수 있도록 웹을 개발하는 것이 바로 접근성입니다.
5. 대문자 사용에 조심하라(Watch the Use of CAPS)
영어 콘텐츠의 경우 대문자만을 사용하여 글자를 제공할 경우 해당 내용을 인식하기 어렵다. 또한 모든 영어 단어를 대문자로 제공할 경우 화면낭독 프로그램에서도 잘 못 인식할 수 있는 문제가 발생함으로 대문자 사용에 조심해야 할 것이다.
6. 적절한 폰트 크기를 제공하라(Use Adequate Font Size)
폰트 크기는 폰트에 따라 다르게 적용할 수 있다. 하지만 WEBAIM에서는 최소 10 포인트 이상의 크기를 사용하라고 밝히고 있다. 사용자가 웹 페이지를 쉽게 읽을 수 있기 위해서는 폰트의 크기는 매우 중요한 요소임으로 가급적 폰트를 크게 제공해야 할 것이다.
7. 문단의 길이가 너무 길어지지 않도록 고민하라(Remember Line Length)
문단의 길이가 너무 길어지면 문서를 읽는데 어려움이 발생할 수 있다. 많은 사람들이 너무 긴 문장으로 웹 페이지를 제공할 경우 해당 페이지를 인식하는데 방해가 될 수 있다는 것이다. 적절한 문단의 길이를 고려하여 제공하는 것이 필요할 것이다.
8. 링크를 인식할 수 있도록 제공하라(Make Sure Links are Recognizable)
웹 페이지내에서 링크를 사용자가 쉽게 인식할 수 있도록 제공하라는 것이다. 링크가 걸린 것인지, 아닌 것인지를 색 하나에만 의존하지 말고 밑줄, 강조 표시 등을 통해 구분할 수 있도록 제공하는 것이 필요하다.
9. 링크 포커스를 구분할 수 있도록 제공하라 (Design Link Focus Indicators)
링크 포커스가 위치한 곳을 사용자가 인식할 수 있도록 제공하라는 것이다. 이러한 경우 키보드 사용자의 경우에도 현재의 위치를 파악할 수 있게 된다. 브라우저별, 웹 제작 기술별로 링크 포커스를 기본적으로 제공하는 관례(Practices)가 있다. 예를 들어 인터넷 익스플로러 브라우저의 경우에는 포커스가 갈 경우 해당 영역에 네모난 점선이 생기며, 플래시의 경우에는 초점이 가면 노락색 네모 상자로 표시된다. 이러한 포커스가 보기 좋지 않다고 없애는 경우가 생기고 있는데, 이는 키보드 사용자에게 치명적인 사용상의 문제를 야기함으로 반드시 포커스 위치를 파악할 수 있도록 디자인을 해야 할 것이다.
10. 본문 건너뛰기 링크를 제공하라(Design a “Skip to Main Content” Link)
키보드 사용자 등을 위해 본문 건너뛰기 링크, Skip Navigation을 제공해야 한다. 건너뛰기 링크는 화면에 표시하는 것이 가장 바람직하며, 디자인의 제약 등으로 인해 숨길 수는 있다. 하지만 숨길 경우에도 키보드로 이동할 경우에는 반드시 화면 상에 표현될 수 있도록 제공해야 한다.
11. 링크 텍스트 자체로 이해할 수 있도록 제공하라(Ensure Link Text Makes Sense on Its Own)
“여기를 클릭(Click here)”, “더보기” 등의 의미를 제대로 파악할 수 없는 링크를 제공하지 말라는 것이다. 해당 링크가 무엇인지를 올바르게 이해할 수 있도록 구체적인 의미나 용도를 파악할 수 있도록 링크 제목을 제공하라는 것이다.
12. 애니메이션, 비디오 및 오디오 제공시 접근성을 고민하라(Use Animation, Video, and Audio Carefully)
애니메이션, 비디오, 오디오의 경우에는 반드시 사용자가 선택을 하여 활성화한 경우에만 동작이 되어야 한다. 사용자의 선택없이 자동으로 3초 이상 애니메이션이, 비디오, 오디오가 제공되는 것은 화면낭독 프로그램 등의 사용자에게 혼란을 야기한다. 또한 깜빡이거나 번쩍이는 콘텐츠는 광과민성 발작 등을 야기할 수 있음으로 사용하지 말아야 할 것이다.
13. 색 하나에만 의존하지 말라(Don’t Rely on Color Alone)
색 정보 하나에만 의존하여 콘텐츠를 제공하지 말라는 것이다. 색각 이상자의 경우 특정한 색들을 구분하기 어려운 경우가 있다. 이에 색 하나에 의존한 콘텐츠의 경우에는 해당 정보를 제대로 인식하지 못하는 사용자가 나타날 수 있다. 색 이외에도 형태, 텍스트 등으로 구분이 가능하도록 제공하는 것이 필요하다.
14. 접근가능한 입력 서식을 제공하라(Design Accessible Form Controls)
입력 서식의 내용에는 레이블이나 지시사항을 제공해야 한다. 지시사항의 경우에는 서식 입력 전에 설명을 제공해야 할 것이다. 또한 오류 발생시 오류를 쉽게 정정할 수 있는 방법도 제공해야 할 것이다.
삐돌이의 웹 접근성 & IT Transformation 