접근성이 뛰어난 디자인
7가지 간단한 가이드라인
디지털 접근성(accessibility)은 시각, 운동, 청각, 언어 또는 인지 장애가 있는 개인을 포함하여 다양한 사람들이 디지털 콘텐츠와 애플리케이션을 이용할 수 있도록 구축하는 것을 의미합니다. 웹사이트 접근성을 확보하는 것은 어렵고 비용이 많이 든다는 통념이 있지만, 반드시 그렇지만은 않습니다. 접근성 요구 사항을 충족하는 제품을 처음부터 디자인한다고 해서 추가 기능이나 콘텐츠가 추가되는 것은 아니므로 추가 비용과 노력이 들지 않습니다. 접근성이 좋지 않은 기존 사이트를 수정하려면 약간의 노력이 필요할 수 있습니다. 여러분의 사이트를 더 접근성이 뛰어나게 만들 수 있도록 몇 가지 간단한 단계를 공유하고자 합니다. 이러한 원칙은 웹 및 모바일 접근성에 중점을 둡니다. 시작하기 전에, 왜 이것이 중요한지 이야기해 보겠습니다.
접근성을 고려한 디자인은 왜 필요할까요?
디자이너로서 우리는 능력, 상황, 맥락에 관계없이 모든 사람이 우리가 만드는 것에 접근할 수 있도록 해야 할 책임과 권한을 가지고 있습니다. 접근성을 고려하여 디자인하면 모두에게 더 나은 경험을 제공할 수 있다는 장점이 있습니다. 2024년 말 기준 한국의 등록장애인은 2,631,356명으로, 주민등록인구 대비 5.1%를 차지하고 있으며, 전 세계적으로는 10억 명이 넘는 사람들이 장애를 가지고 있습니다. 2017년에는 미국 연방 및 주 법원에 814건의 웹사이트 접근성 관련 소송이 제기되었습니다. 이 두 가지 사실만으로도 접근성을 고려한 디자인의 중요성을 알 수 있습니다. 접근성은 강력한 비즈니스 경쟁력이기도 합니다. 연구에 따르면 접근성이 좋은 웹사이트는 검색 결과가 더 좋고, 더 많은 사용자에게 도달하며, SEO 친화적이고, 다운로드 시간이 더 빠르며, 좋은 코딩 방식을 장려하고, 항상 더 나은 사용성을 제공합니다.
1. 색상 대비를 충분히 확보
색상 대비가 좋은 버튼은 가독성이 더 좋습니다. 색상 대비는 종종 간과되는 웹 접근성 문제입니다. 저시력자들은 대비가 낮은 배경색의 텍스트를 읽는 데 어려움을 겪을 수 있습니다. 세계보건기구(WHO)는 시각 장애 및 실명 관련 자료에서 중등도에서 심각한 시각 장애인이 2억 1,700만 명에 달하는 것으로 추정합니다. 따라서 텍스트와 배경 간의 충분한 대비를 고려하는 것이 중요합니다. W3C [1]에 따르면 텍스트와 배경 간의 대비율은 최소 4.5:1(AA 준수 수준)이어야 합니다. 더 크고 굵은 글꼴은 낮은 대비에서도 읽기 쉽기 때문에 비율이 더 관대해집니다. 글꼴 크기가 18pt 이상이거나 14pt 굵게인 경우 최소 대비율은 3:1로 낮아집니다.
이것을 빠르게 확인하는 데 도움이 되는 몇 가지 도구가 있습니다. Mac을 사용하는 경우 색상 대비 앱을 사용하는 것이 좋습니다. 이 도구를 사용하면 색상 선택기를 사용하여 즉시 대비를 확인할 수 있습니다. 더 자세한 점수를 얻고 싶다면 WebAIM 색상 대비 검사기에 색상 값을 입력하는 것이 좋습니다. 이 도구는 다양한 준수 수준(A, AA, AAA)에서 일반 텍스트 크기와 더 큰 텍스트 크기에 대한 점수를 모두 계산합니다. 색상 값을 변경하고 결과를 실시간으로 확인할 수 있습니다.
[1] W3C는 회원, 직원 및 일반 대중이 협력하여 웹 표준을 개발하는 국제 커뮤니티입니다.
출처: WebAIM2. 색상만으로 중요한 정보를 전달하는 것은 지양
중요한 내용을 전달하거나, 특정 행동을 유도하거나, 응답을 요청할 때 색상에만 의존하지 마세요. 저시력 또는 색맹이 있는 사용자는 콘텐츠를 이해하는 데 어려움을 겪을 수 있습니다. 텍스트 레이블이나 패턴 등 색상 외에 다른 지표를 활용해 보세요. 오류를 표시할 때는 색상 텍스트 외에 아이콘을 추가하거나 메시지에 제목을 포함하는 것이 좋습니다. 문장 내 링크 텍스트에 굵은 글씨나 밑줄과 같은 시각적 단서를 추가하여 링크를 더욱 돋보이게 할 수도 있습니다. 차트나 그래프처럼 복잡한 정보를 담은 요소는 색상만으로 데이터를 구분하면 가독성이 떨어질 수 있습니다. 모양, 레이블, 크기 등 다양한 시각적 요소를 활용하여 정보를 전달하세요. 패턴을 넣어 차이를 명확하게 하는 것도 좋은 방법입니다.
Trello의 색맹 모드는 텍스처를 추가하여 레이블 접근성을 높인 훌륭한 예시입니다. 흑백으로 인쇄하여 그래프 내용을 이해하는 데 문제가 없는지 확인해 보세요. 또는 Color Oracle과 같은 앱을 사용하여 색각 이상을 가진 사용자가 콘텐츠를 어떻게 보는지 실시간으로 확인할 수도 있습니다. 이러한 팁을 활용하면 웹사이트 정보가 색상에 관계없이 명확하게 전달되도록 할 수 있습니다.
출처: Trello Colorblind Friendly Mode3. 사용 가능한 포커스 상태 디자인
링크, 입력창, 버튼 주위에 파란색 또는 아래 예시와 같은 다른 색상의 윤곽선이 나타나는 것을 본 적이 있나요? 이 윤곽선을 포커스 표시기라고 합니다. 브라우저는 기본적으로 CSS 가상 클래스를 사용하여 요소가 선택될 때 이러한 윤곽선을 표시합니다. 이러한 기본 포커스 표시기가 보기 좋지 않아서 숨기고 싶을 수도 있습니다. 하지만 이 기본 스타일을 제거하는 경우 다른 스타일로 대체해야 합니다. 포커스 표시기는 사람들이 키보드 포커스가 있는 요소를 알고 사이트를 탐색할 때 현재 위치를 파악하는 데 도움이 됩니다. 시각 장애가 있어 화면 판독기가 필요한 사람, 거동이 불편한 사람, 손목 터널 증후군과 같은 부상을 입은 사람, 이러한 유형의 탐색을 선호하는 고급 사용자가 사용합니다.
아, 그리고 우리 중 일부는 키보드를 웹 탐색의 주요 방법으로 사용합니다! 초점을 맞춰야 하는 요소는 링크, 양식 필드, 위젯, 버튼, 메뉴 항목입니다. 주변 요소와 다르게 보이도록 하는 포커스 표시기가 있어야 합니다. 사이트 스타일에 맞고 브랜드와 잘 어울리는 포커스 표시기를 디자인할 수 있습니다. 나머지 콘텐츠와 잘 어울리도록 대비가 잘 되어 눈에 잘 띄는 상태를 만드세요.
출처: 네이버4. 폼 필드 및 입력에 레이블 또는 지침을 사용
폼을 디자인할 때 플레이스홀더(자리 표시자) 텍스트를 레이블로 사용하는 것은 가장 흔한 실수 중 하나입니다. 공간이 제한적이거나 디자인을 단순하고 현대적으로 만들고 싶을 때 이러한 방식을 고려할 수 있지만, 사용하지 않는 것이 좋습니다. 플레이스홀더 텍스트는 보통 회색이며 대비가 낮아 읽기가 어렵습니다. 또한, 내용을 잊어버리는 경우 레이블이 사라지면 어떤 내용을 입력해야 하는지 알기 어렵습니다. 스크린 리더를 사용하는 사용자는 Tab 키를 사용하여 폼 컨트롤을 탐색하는데, 이때 요소는 각 폼 컨트롤에 대해 읽힙니다. 하지만 플레이스홀더 텍스트와 같이 레이블이 아닌 텍스트는 건너뛰는 경우가 많습니다. 따라서 사용자가 폼에 무엇을 입력해야 하는지 쉽게 알 수 있도록 항상 레이블을 제공해야 합니다. 레이블은 사용자가 입력을 하는 동안에도 사라지지 않도록 하는 것이 가장 좋습니다. 그래야 사용자가 입력 내용에 대한 맥락을 잃지 않기 때문입니다.
디자이너가 폼에 설명이나 지침을 숨기는 것은 단순함을 위해 사용성을 희생하는 것과 같습니다. 불필요한 정보로 디자인을 복잡하게 만들 필요는 없지만, 필수적인 정보는 제공해야 합니다. 교육적인 텍스트가 너무 많은 것도 너무 적은 것만큼이나 문제가 될 수 있습니다. 핵심은 사용자가 어려움 없이 작업을 완료할 수 있도록 충분한 정보를 제공하는 것입니다.
자리 표시자 옳은 예시: Styleboost5. 이미지 및 기타 텍스트가 아닌 콘텐츠에 유용한 대체 텍스트를 작성
저시력자들은 웹을 "듣기" 위해 스크린 리더를 사용하는 경우가 많습니다. 이러한 도구는 텍스트를 음성으로 변환하여 사용자가 사이트의 단어를 들을 수 있도록 합니다.
대체 텍스트를 제공하는 방법에는 두 가지가 있습니다.
이미지 요소의 속성 내에 있습니다.
이미지 자체의 콘텍스트 또는 주변 환경 내에 있습니다.
단순히 "사진"과 같이 말하는 대신 이미지에서 무슨 일이 일어나고 있는지, 그리고 그것이 이야기에 어떤 영향을 미치는지 설명해 주세요. 맥락이 무엇보다 중요합니다. 이미지가 순전히 장식용이거나 주변 환경에서 이미 내용을 설명하여 중복성을 생성하는 경우 빈 속성을 추가하면 스크린 리더가 건너뜁니다. 대체 텍스트를 작성하지 않으면 일부 스크린 리더는 개인에게 파일 이름을 읽어줍니다. 이것은 당신이 제공할 수 있는 최악의 경험입니다.
Google은 사진을 94% 정확도로 설명할 수 있는 이미지 캡션 (Google's image captioning) AI를 개발하고 있습니다. 이 모델은 오픈 소스이며 여전히 연구 중입니다. 바라건대, 우리는 그것이 다른 제품에서 사용되는 것을 보게 될 것입니다. 당분간은 콘텐츠에서 이미지의 의미와 기능을 설명하는 텍스트를 수동으로 제공해야 합니다.
출처: Google AI6. 콘텐츠에 올바른 마크업(Markup)[2] 사용
제목은 콘텐츠가 시작되는 위치를 표시하며, 텍스트에 스타일과 목적을 정의하기 위해 부여되는 태그입니다. 또한 제목은 페이지 콘텐츠의 계층 구조를 설정합니다. 큰 글꼴 크기의 제목은 독자가 콘텐츠의 순서를 더 잘 이해하도록 돕고, 스크린 리더도 제목 태그를 사용하여 콘텐츠를 읽습니다. 이러한 방식으로 시력이 낮은 사람들은 계층적 흐름으로 각 제목을 읽음으로써 페이지의 개요를 파악할 수 있습니다.
사이트를 개발할 때 적절한 구조적 요소를 사용하는 것이 중요합니다. HTML 요소는 브라우저에게 어떤 종류의 콘텐츠를 포함하고 있는지, 브라우저가 해당 콘텐츠를 어떻게 렌더링 하거나 처리해야 하는지를 전달합니다. 페이지의 구성 요소와 구조는 접근성 트리를 구성하는 요소입니다. 이 트리는 시각 장애인이 페이지를 "들을" 수 있도록 스크린 리더를 통해 작동합니다.
[2] 텍스트에 추가 지시사항이나 정보를 기록하기 위해 사용되는 태그나 코드의 집합
XML markup 예시7. 키보드 탐색 지원
키보드 접근성은 웹 접근성의 가장 중요한 측면 중 하나입니다. 운동 장애가 있는 사람, 화면 판독기에 의존하는 시각 장애인, 정밀한 근육 제어가 어려운 사람, 심지어 고급 사용자까지 키보드를 사용하여 콘텐츠를 탐색합니다. 저와 같다면 키보드의 Tab 키를 사용하여 웹 페이지의 대화형 요소(링크, 버튼 또는 입력 필드)를 탐색할 것입니다.
앞에서 설명한 포커스 상태는 현재 선택된 구성 요소를 시각적으로 나타냅니다. 페이지를 탐색할 때 대화형 요소의 순서가 중요하며 탐색은 논리적이고 직관적이어야 합니다. 탭 순서는 페이지의 시각적 흐름(왼쪽에서 오른쪽, 위에서 아래로, 머리글, 주 탐색, 콘텐츠 버튼 및 입력, 마지막으로 바닥글)을 따라야 합니다. 사이트를 키보드만 사용하여 테스트하는 것이 좋습니다. Tab 키를 사용하여 링크와 양식을 이동합니다. 엔터 키를 사용하여 요소를 선택하는지 테스트합니다. 모든 대화형 구성 요소가 예측 가능하고 순서대로 되어 있는지 확인합니다. 마우스 없이도 사이트 전체를 탐색할 수 있다면 좋은 위치에 있는 것입니다!
마지막으로 중요한 것은 탐색 크기에 주의해야 한다는 것입니다. 여기에는 링크 수와 텍스트 길이가 포함됩니다. 긴 메뉴를 탭 하는 것은 운동 장애가 있는 사람들에게 부담이 될 수 있습니다. 그리고 긴 링크를 듣는 것은 화면 판독기를 사용하는 사람들에게 번거로울 수 있습니다. 간결하게 작성하세요.
이 가이드라인 외에도 제품의 접근성을 더욱 개선하려면 다음 사항을 고려해 보시기 바랍니다. 접근성 감사를 받으십시오. 감사 서비스를 사용하여 제품이 지원 기술과 호환되는지 확인하고 WCAG 2.0 AA 레벨을 충족하는지 확인하십시오. 감사 결과를 사용하여 문제를 해결하고 다른 테스트를 수행하십시오. 감사관을 임명하십시오. 회사에서 접근성 감사를 반복적으로 수행할 사람을 임명할 수 있습니다. QA 팀의 누군가가 될 수 있습니다. 경험이 있는 사람이 없다면 외부 공급 업체를 고용할 수 있습니다. 디자인 리서치에 접근성을 포함하세요. 연구를 수행할 때 접근성에 대한 가정이 올바른지, 개선할 잠재적 기회가 있는지 확인하세요. 장애가 있는 사람을 모집하려면 약간의 노력이 더 필요합니다. 협회 및 커뮤니티에 주저하지 말고 연락해 보세요. 사람들은 기꺼이 도울 것입니다.
이것으로 웹 콘텐츠 접근성 지침의 AA 수준을 충족하는 데 도움이 되는 7가지 지침을 소개했습니다. 접근성을 고려한 디자인은 제가 여전히 개선하려고 노력하는 부분입니다. 저는 제가 설파하는 것을 실천하기 위해 노력하고 있습니다. 예전에는 너무 어렵고 중요하지 않다고 생각했지만, 오해였습니다. 이러한 지침을 프로세스의 일부로 고려하고 접근성이 왜 중요한지에 대한 대화를 계속 이어가시길 바랍니다. 디자이너로서 접근성을 옹호하는 것은 우리의 책임입니다. 접근성을 통해 우리는 모든 사람의 능력, 경제적 상황, 나이, 교육 수준 또는 지리적 위치에 관계없이 기술을 사용할 수 있게 합니다. 책임감 있는 디자인을 하세요.
