마케터를 위한 디지털 접근성 2부: 사용자 경험 및 웹사이트

게시 됨: 2022-06-16

디지털 접근성에 대한 이 시리즈의 첫 번째 게시물에서 우리는 마케터를 위한 접근성의 "무엇과 이유"를 다루었습니다. 이제 "어떻게" 할 때입니다.

우리는 의도적으로 구현하기 쉽고 마케팅 담당자와 관련된 요소로 권장 사항을 제한했습니다. 이 시리즈는 액세스 가능한 콘텐츠와 관련하여 기업이 알아야 하는 모든 표준의 포괄적인 목록이 아닙니다. 접근성 지침 및 WCAG 기준의 핵심에 대해 알아보려면 TGPI 전자 학습 프로그램을 확인하십시오. 기술을 최신 상태로 유지하거나 접근성 기술 및 모범 사례에 대한 최신 정보를 얻는 데 사용할 수 있는 자습 옵션입니다.

추천으로 넘어가겠습니다!

접근성 및 사용자 경험

매끄럽고 손쉬운 사용자 경험은 모든 마케터에게 북극점입니다. 개인이 중요한 작업을 얼마나 쉽게 완료할 수 있는지와 콘텐츠가 기대치를 얼마나 잘 충족시키는지는 이에 큰 영향을 미치며 마케팅 노력의 성패를 좌우합니다.

말이 됩니까? 온라인으로 물건을 사고 싶은데 신용 카드 정보를 입력하는 데 문제가 발생하거나 원하는 품목의 재고가 없으면 사용자 경험의 질이 떨어집니다. 첫째, 당신이 계획한 일을 성취할 수 없었기 때문이고, 둘째, 당신이 그것을 성취할 수 있을 것이라고 기대했지만 그것이 카드에 없었기 때문입니다. 이 이중적인 망치는 당신이 그 특정 웹사이트로 돌아오지 않도록 거의 확실하게 보장할 것입니다!

마케터는 우수한 사용자 경험의 중요성을 잘 알고 있습니다. 당신은 그것을 테스트하거나(당신에게 좋습니다!) 그것을 측정하기 위한 분석이 있을 수도 있습니다. 이러한 측정은 마케팅 퍼널을 최적화하는 데 중요합니다. 그러나 하지 않을 수 있는 것은 접근성에 대한 사용자 경험을 테스트하는 것입니다. (그렇지 않은 경우 판단은 없습니다! 이것이 이 일련의 게시물이 변경하려는 내용입니다.)

사용자 여정

사용자 여정(사용자 흐름 또는 사용자 경로라고도 함)은 사용자가 사이트에서 수행하는 일련의 작업입니다. 중요한 사용자 여정은 구매 완료, 양식 제출, 비디오 시청, 게시물 읽기 등과 같은 사이트의 주요 목표와 일치합니다.

여러 가지 이유로 필수 사용자 여정에 대한 접근성 개선을 항상 우선시해야 합니다.

첫째, 사이트 전체에 놀라운 콘텐츠가 있을 수 있지만 사용자가 웹사이트 방문의 주요 목표를 완료할 수 없다면 그것은 영원히 잃어버린 고객입니다.

둘째, 많은 장애인들은 불행하게도 다른 사람들이 당연하게 여겼던 일을 할 때 어려움을 겪는 데 익숙합니다. 세상의 많은 부분이 그들의 특정한 장애를 염두에 두고 창조되지 않았기 때문에 그들은 일반적으로 그들을 기대합니다.

평균적으로 접하는 콘텐츠에 대한 사소한 접근성 문제는 법적 조치를 시작하는 지점까지 그들을 좌절시키지 않을 것입니다. 그러나 그들이 귀하의 웹사이트에서 달성하기 위해 온 한 가지 일 을 할 수 없다면, 특히 귀하가 미국 기반 브랜드인 경우 법적 위험에 직면하게 됩니다.

중요한 사용자 경로 테스트

그렇다면 접근성에 대한 중요한 사용자 흐름을 어떻게 테스트합니까? 수동 경로를 선택하면 장애가 있는 사용자를 대상으로 사용자 테스트를 수행하거나 TPgi의 ARC Toolkit(나중에 자세히 설명)과 같은 도구를 사용하여 각 단계의 코드를 검사하여 WCAG 오류를 식별할 수 있습니다.

수동 테스트가 궁극적으로 더 포괄적이지만 중요한 사용자 경로에서 접근성 오류를 즉시 식별하려는 경우 ARC Monitoring의 사용자 흐름 기능을 사용하여 접근성을 위해 각 구성 요소를 자동으로 스캔할 수 있습니다. 스캔을 위해 이미지에서 대화 상자에 이르기까지 사용자 여정의 모든 구성 요소와 동적 상호 작용을 포함할 수 있으며 시간 경과에 따른 오류를 추적하여 내부 수정 프로세스를 개선할 수 있습니다.

ARC의 사용자 흐름 모니터링에서 얻은 정보를 Google 애널리틱스 유입경로 및 목표와 같은 다른 분석 도구와 연결하여 사용자가 원하는 작업을 완료하는 것을 방해하는 장벽을 식별할 수 있습니다.

액세스 가능한 웹사이트

웹 사이트는 비즈니스의 디지털 상점 또는 사무실입니다. 잠재 고객이 회사에 대해 받는 첫 번째(또는 유일한) 인상일 수 있으므로 가능한 한 매력적으로 만들고 싶을 것입니다. 단조로움을 없애기 위해 몇 개의 비디오나 많은 이미지가 있거나 귀중한 블로그 콘텐츠 페이지가 있을 수 있습니다. 이들은 모두 마케터가 사람들이 제품을 구매하도록 설득하는 데 활용할 수 있는 훌륭한 자산입니다.

이 모든 콘텐츠에 액세스할 수 있는지 확인하는 것은 어려운 일처럼 보일 수 있지만 액세스 가능한 콘텐츠에 대한 많은 모범 사례는 모범 마케팅 사례와 구별할 수 없습니다. 자세히 알아보려면 계속 읽어보세요.

설명 링크 텍스트

모든 훌륭한 마케터는 명확한 의사 소통을 위해 명확성이 필수적이라는 것을 알고 있습니다. 당신이 당신의 카피를 보잘것없고 중요하게 들리는(그러나 궁극적으로 의미가 없는) 단어로 꾸민다면 당신의 메시지는 사라질 것입니다. 마찬가지로 설명이 너무 부족하면 고객이 설명하는 내용을 이해하기에 충분한 정보가 없을 수 있습니다.

고품질 콘텐츠는 이 두 극단 사이의 균형이며, 당연히 링크 또는 앵커 텍스트도 이와 동일한 규칙을 따릅니다. 최고의 링크 텍스트는 사용자가 클릭하면 예상되는 내용에 대한 아이디어를 제공합니다. 설명 링크 텍스트는 클릭 유도문안 문구에 특히 중요합니다. 사용자가 "여기를 클릭" 또는 "백서 다운로드"를 클릭할 때 보게 될 내용에 대해 더 잘 준비하는 것은 무엇입니까? 분명히, 후자! (전자를 선택했다면 새로운 진로를 고려해볼 수도 있습니다.)

CTA를 요란한 말로 모실 필요는 없지만("Harry Houdini의 마법에 관한 세계 최고의 백서를 다운로드하세요!") 사람들이 무엇에 빠져들고 있는지 알 수 있도록 설정하는 것이 중요합니다.

링크 텍스트가 접근성에 중요한 이유는 무엇입니까? 첫째, 페이지 콘텐츠를 훑어보는 시각 장애인이나 저시력자에게 큰 도움이 됩니다. (이것은 완벽한 시력을 가진 사람들에게도 해당됩니다.) 시각 장애가 있는 사용자는 시각 장애인을 위한 화면 확대 도구 및 시각 장애인을 위한 화면 판독기와 같은 다양한 보조 기술을 사용하여 디지털 콘텐츠에 액세스합니다. 이름에서 알 수 있듯이 스크린 리더는 문자 그대로 화면에 있는 내용을 읽습니다.

그러나 JAWS와 같은 화면 판독기는 사용자가 모든 HTML을 위에서 아래로 이동하는 대신 다양한 구성 요소를 읽어 화면 전체를 이동할 수 있도록 합니다. 사용자가 구성 요소에서 구성 요소로 이동할 때 스크린 리더는 링크의 앵커 텍스트만 읽고 주변 사본은 읽지 않습니다. 즉, 모든 링크가 동일한 "여기를 클릭하십시오" 사본인 경우 스크린 리더 사용자는 해당 링크를 따라갈 경우 어떤 일이 일어날지 전혀 알 수 없습니다. 링크가 무엇과 관련되어 있는지 이해하기 위해 주변 콘텐츠를 탐색해야 합니다.

또한 화면 판독기를 통해 사용자는 웹 페이지의 모든 링크에 빠르게 액세스할 수 있는 "링크 목록"을 열 수 있습니다. 이것은 링크 텍스트가 주변 컨텍스트에서 읽혀지고 "여기를 클릭하십시오"와 같은 것이 실제 문제가 되는 일반적인 시나리오입니다.

이미지의 대체 텍스트

대체 텍스트 또는 "대체 텍스트"는 웹 사이트의 이미지를 설명하므로 스크린 리더 사용자는 각 웹 페이지의 콘텐츠에 대해 보다 포괄적인 아이디어를 얻을 수 있습니다. 시각적 설명 역할을 하는 이미지를 선택하면 대체 텍스트를 생략하면 볼 수 없는 사람들이 어리둥절할 것입니다.

그러나 순전히 미학적인 이유로 이미지를 포함하고(컴퓨터에 구부정한 사람들의 사진을 진정으로 좋아할 수도 있음) 이미지가 여러 개 있는 경우 모든 이미지에 대체 텍스트를 추가하고 싶지 않을 수 있습니다. 스크린 리더는 모든 이미지에 대한 모든 대체 텍스트를 읽습니다. 텍스트가 경험에 가치를 적극적으로 추가하지 않으면 성가실 수 있습니다. 이미지가 장식적인 것으로 간주될 수 있고 페이지 콘텐츠에 대한 추가 의미/이해를 추가하지 않는 경우 빈 alt 속성을 제공하여 보조 기술에 숨겨야 합니다.

잘 구성된 웹사이트

머리글 태그를 적절하게 활용하여 시각 장애인과 비장애 독자 모두가 페이지를 훑어보고 내용에 대한 기본적인 이해를 얻고 쉽게 탐색할 수 있도록 합니다. 페이지의 내용을 설명하는 H1으로 각 페이지를 시작한 다음 H2 및 H3을 하위 제목으로 사용하는 것과 같은 헤더에 대한 모범 사례를 따르십시오. 제목 태그를 의도적으로 사용하십시오. 구조에 대해 생각하지 않고 무작위로 비틀거리지 마십시오.

CSS 스타일을 통해 시각적 수단을 통해 제목을 구분할 수 있지만 화면 판독기 사용자는 이러한 구분을 볼 여유가 없습니다. 시각 장애가 있는 사용자가 콘텐츠를 쉽게 사용할 수 있도록 올바른 형식의 페이지 레이아웃을 활용하는 것이 특히 중요합니다.

조밀한 단락을 최소화하고 가능한 한 짧은 문장을 사용하고 전문 용어나 속어를 사용하지 마십시오. 더 명확하고 간결한 카피는 인지 장애가 있는 사용자가 콘텐츠를 더 잘 이해하는 데 도움이 되며 모든 독자의 혼란을 최소화하는 데도 도움이 됩니다.

사람들의 주의 집중 시간이 금붕어보다 짧다는 말을 들어본 적이 있습니까? 확신이 서지 않으면 분해하십시오. 가능한 한 간단하게 만드십시오.

색상 명암비

보색에 빨간색과 녹색을 사용하면 사용자에게 아무런 도움이 되지 않으므로 조직의 스타일 가이드가 산타클로스에 의해 설계되지 않았으면 합니다. 색상 대비는 접근 가능한 디자인의 필수 요소입니다. 시력이 낮은 개인은 너무 유사한 색상을 구별하기 어려울 수 있으며 색맹 사용자의 경우 많은 색상을 구별할 수 없습니다.

TGPi의 무료 Color Contrast Analyzer 도구를 사용해 볼 수 있습니다. 색상 선택기를 사용하여 전경색과 배경색을 선택하면 CCA가 대비가 적절한지 알려줍니다.

접근 가능한 양식

거의 모든 사이트는 사용자가 작업을 완료할 수 있도록 양식을 사용합니다. 귀하의 비즈니스가 전자 상거래, 서비스 기반 또는 단순한 온라인 쇼케이스인지 여부에 관계없이 양식이 포함될 가능성이 큽니다. 그러나 양식은 장애가 있는 사람들에게 까다로울 수 있습니다. 코딩 지식이 없는 마케터가 쉽게 따를 수 있는 비기술적 고려 사항(읽기: 개발자가 구현할 수 있는 사항)과 비기술적 고려 사항이 몇 가지 있습니다. 비기술적 모범 사례는 다음과 같습니다.

양식을 짧고 간단하게 유지 - 고객 연락처 정보를 얻은 다음 관계를 구축하여 참여를 유도하고 추가 지식을 얻습니다.
명확한 지침과 눈에 띄는 라벨 제공 - 아무도 혼란스러운 양식을 좋아하지 않습니다.
입력 유효성 검사(변경 취소/확인) – 사용자에게 문제와 해결 방법을 알립니다.
사용자 알림(성공/실패) – 양식 제출의 성공 여부를 사용자에게 알립니다.
다중 페이지 또는 프로그레시브 채택 – 보다 복잡한 형식이 필요한 경우 사용자를 압도하지 않는 다중 페이지 또는 점진적 형식을 목표로 합니다.
시간 제한 제거 또는 옵션 제공 – 시간 제한은 쇼핑객에게 구매를 강요하는 데 편리할 수 있지만 심각한 불안 문제가 있는 개인에게 과도한 스트레스를 줍니다.

빵 부스러기

이동 경로는 현재 탐색 중인 페이지가 더 큰 그림에 어떻게 맞는지 볼 수 있도록 하는 사이트 탐색의 한 형태입니다. 일반적으로 상위 수준 페이지로 연결되는 링크입니다.

의류를 판매하는 전자 상거래 사이트의 이동 경로의 예는 다음과 같습니다.

여성 > 재킷 > 울 > 완두콩 코트.

이동 경로는 길 찾기에 유용하며 사용자가 처음부터 여정을 시작하지 않고도 상위 수준 페이지로 쉽게 돌아갈 수 있도록 합니다.

그들은 여러 가지 이유로 장애가 있는 사람들에게 특히 중요합니다. 첫째, 인지 장애가 있는 사용자는 모호성을 최소화하는 사용자 친화적인 경험의 이점을 항상 누릴 수 있습니다. 사이트가 광범위하고 복잡한 경우 이동 경로는 특히 중요합니다. 또한 이동 경로는 화면 판독기 사용자에게 즉시 방향을 지정하여 사이트 탐색을 덜 힘들게 만듭니다.

이동 경로는 많은 접근성 모범 사례와 같이 장애가 있는 사용자에게 분명히 도움이 되지만 모든 사용자의 경험을 개선합니다.

챗봇 및 타사 통합

많은 웹 사이트는 챗봇, 팝업 모달, 동적 방문 페이지 등과 같은 웹 사이트에 대한 타사 통합을 활용합니다. 타사 소프트웨어에 액세스할 수 없는 경우가 많으며 회사가 이를 수정할 수 없는 상황이 더욱 악화되는 것은 불행한 현실입니다.

조직에서 타사 응용 프로그램을 웹 사이트에 통합하기로 선택한 경우 추가하기 전에 전문가에게 평가를 요청하십시오. 많은 접근성 실패를 조정하지 못할 수도 있지만 적어도 감수하고 있는 위험 수준은 이해하게 될 것입니다. 계약을 구축하기 위해 공급업체에 접근성 설명 또는 보증을 요청할 수도 있습니다(구현하기 전에 정확성을 확인하기 위해 여전히 제품을 테스트해야 함).

참고로 항상 공급업체에 제품의 접근성에 대해 문의하십시오. 액세스 가능한 제품을 요청하는 고객이 많을수록 공급업체가 이를 듣고 제품 빌드에 액세스 가능성 기능을 통합할 가능성이 커집니다.