Braze에서 접근성 높은 메시지 작성

의도하지 않았더라도 장애인을 배제하는 마케팅 콘텐츠는 수백만 명의 사람들이 브랜드와 소통하지 못하게 만들 수 있습니다. 마케팅에서 접근성이란 누구나 쉽게 마케팅을 경험하고, 커뮤니케이션을 수신하고 이해하며, 제품, 서비스 또는 브랜드에 투자하거나 팬이 될 수 있는 기회를 가질 수 있도록 하는 것입니다. 메시징을 디자인할 때는 모든 고객이 디자인에 액세스할 수 있도록 하는 방법을 고려하는 데 시간을 할애하세요.

접근성이 중요한 이유

• 더 나은 사용성: 접근성은 사용자가 콘텐츠와 상호 작용하는 방식을 고려하기 때문에 앱이나 사이트의 사용성에 대해 생각하도록 장려합니다. 즉, 접근성은 장애가 있는 사용자뿐만 아니라 모든 사용자의 온라인 경험을 개선하는 경우가 많습니다.
• 시장 범위 확장: 전 세계 장애인 시장은 10억 명이 넘는 인구가 약 7조 달러의 소비력을 가지고 있습니다.

  “전 세계 인구의 고령화로 인해 장애인 시장은 규모가 크고 성장하고 있습니다. 대규모 장애인 시장을 퍼플 파운드라고 부르는 영국에서는 장애인과 그 가족이 매년 최소 2,490억 파운드를 지출하고 있습니다. 미국에서는 장애인의 연간 재량 지출이 2,000억 달러가 넘습니다. 전 세계 장애 시장의 규모는 약 7조 달러에 달합니다.”
  출처: W3C

• 법적 리스크를 최소화하세요: 많은 국가에서 디지털 접근성을 요구하는 법률을 시행하고 있습니다.

고려해야 할 장애 영역

이 섹션은 W3C에서 부분적으로 수정되었습니다. 다양한 능력과 장벽.

시각적

시각 장애는 한쪽 또는 양쪽 눈의 경증 또는 중등도 시력 상실부터 양쪽 눈의 상당한 또는 완전한 시력 상실까지 다양합니다. 어떤 사람들은 특정 색에 대한 민감도가 감소하거나 부족하거나 밝은 색에 대한 민감도가 증가합니다.

이러한 사용자가 콘텐츠와 상호 작용하려면 다음과 같은 기능이 필요합니다.

• 텍스트 크기 및 이미지 확대 또는 축소
• 글꼴, 색상 및 간격에 대한 설정 사용자 지정하기
• 콘텐츠의 텍스트 음성 합성 듣기(즉, 화면 리더 사용)
• 동영상에 대한 오디오 설명 듣기
• 새로 고침 점자를 사용하여 텍스트 읽기

청각

청각 또는 청각 장애에는 한쪽 또는 양쪽 귀의 경증에서 중등도 청각 장애가 포함될 수 있습니다. 부분적인 청력 상실도 오디오 콘텐츠와 관련하여 문제가 될 수 있습니다.

이러한 사용자는 콘텐츠를 이해하기 위해 다음과 같은 정보를 활용합니다:

• 오디오 콘텐츠의 대본 및 캡션
• 캡션을 표시하고 캡션의 텍스트 크기와 색상을 조정할 수 있는 옵션을 제공하는 미디어 플레이어
• 오디오 콘텐츠의 볼륨을 중지, 일시 중지 및 조정하는 옵션(시스템 볼륨과 무관)
• 배경 소음과 명확하게 구분되는 고품질 포그라운드 오디오

신체적

신체적 장애에는 근육 조절이나 감각의 약화 및 제한, 관절 장애, 움직임을 방해하는 통증, 사지 결손 등이 포함될 수 있습니다.

이러한 사용자는 표준 키보드를 사용하지 않더라도 기능을 활성화하기 위해 키보드 지원에 의존합니다. 이러한 사용자가 콘텐츠와 상호 작용하려면 다음이 필요합니다:

• 클릭 가능한 넓은 영역
• 작업을 완료하는 데 충분한 시간
• 현재 초점의 가시적 표시기
• 페이지 헤더 또는 탐색 모음과 같은 콘텐츠 블록을 건너뛰는 메커니즘

인지

인지, 학습 및 신경 장애에는 신경 다양성 및 신경 장애뿐만 아니라 반드시 신경학적 장애가 아닌 행동 및 정신 건강 장애도 포함됩니다. 신경계의 모든 부분에 영향을 미칠 수 있으며 사람들이 듣고, 움직이고, 보고, 말하고, 정보를 이해하는 능력에 영향을 줄 수 있습니다.

개인의 필요에 따라 이러한 사용자는 다음을 사용합니다:

• 명확하게 구조화된 콘텐츠
• 양식, 버튼 및 기타 콘텐츠의 일관된 레이블 지정
• 예측 가능한 링크 타겟 및 전반적인 상호 작용
• 메뉴 및 검색창과 같은 다양한 탐색 방법
• 깜박임, 플래시 또는 기타 산만하게 하는 콘텐츠를 끌 수 있는 설정
• 이미지로 지원되는 더 간단한 텍스트

모범 사례

콘텐츠

• 콘텐츠는 브랜드에 맞게 유지하되 평이한 언어를 사용하세요. 미국 초등학교 7학년 읽기 수준으로 글을 씁니다. 헤밍웨이 앱과 같은 리소스를 사용하여 텍스트의 읽기 수준을 확인할 수 있습니다.
• 콘텐츠를 논리적으로 구성하고 제목이 올바른 계층 구조를 따르도록 하세요. 제목 레벨을 건너뛰지 마세요.
• 긴 콘텐츠의 경우 중앙에 정렬된 텍스트를 피하세요. 인지 장애나 학습 장애가 있는 사용자는 이 글을 읽기 어려울 수 있습니다. 두 줄 이상으로 래핑되는 콘텐츠는 왼쪽으로 정렬해야 합니다.
• 디지털 기기에서 읽기 쉬운 산세리프 글꼴을 사용합니다.
• 항상 기기에 테스트 메시지를 보내 사본을 테스트하여 텍스트가 잘리지 않는지 확인하세요. 메시지가 끊어지면 콘텐츠가 사용자에게 전달되지 못하기 때문에 운영자와 사용자 모두에게 피해를 줍니다.

링크

사용자를 외부 페이지로 안내하는 등 탐색에 링크를 사용합니다.

링크가 사용자를 어디로 이동시킬지 명확하게 설명하는 링크 텍스트를 작성합니다. 화면 리더 사용자는 콘텐츠를 훑어보기 위해 링크에서 링크로 건너뛰는 경우가 많으므로 링크 텍스트가 독립적으로 서 있을 수 있는지 확인하세요. ‘여기를 클릭하세요’, ‘자세히 보기’, ‘자세히 보기’와 같은 문구는 문맥에서 읽으면 모호하므로 피하세요.

예를 들어 일기 예보를 볼 수 있는 링크를 작성하는 방법을 생각해 보세요.

모든 콘텐츠와 마찬가지로 추가 단어를 최대한 줄이고 간결하게 작성하세요.

버튼

양식 전송이나 캐러셀 재생과 같은 클릭 가능한 작업에는 버튼을 사용합니다.

링크 텍스트와 마찬가지로 사용자가 버튼을 누를 때 수행되는 작업을 명확하게 설명하는 버튼 텍스트를 작성합니다(예: “자세히 보기”가 아닌 “전체 스토리 읽기”). 버튼 텍스트가 너무 길지 않은지 테스트합니다. 버튼이 모든 텍스트를 표시할 수 없는 경우 텍스트가 새 줄로 줄 바꿈되는 대신 줄임표로 잘립니다.

이미지

일부 사용자는 마케팅 콘텐츠의 이미지를 볼 수 없습니다. 접근성을 고려하지 않으면 이미지가 모든 사용자에게 동일한 콘텐츠를 제공하지 못하는 장벽이 될 수 있습니다.

대체 텍스트

대체 텍스트는 화면 리더 및 기타 보조 기술이 사용자에게 제공하는 이미지의 콘텐츠에 대한 짧은 설명입니다.

• 모든 이미지에 대해 이미지의 정보나 기능을 제공하는 대체 텍스트를 작성합니다.
• 이미지가 장식용 (콘텐츠에 추가되지 않음)인 경우 빈 alt 속성(alt="")을 사용합니다.
• 대체 텍스트에 ‘사진’ 또는 ‘이미지’라는 단어를 사용하지 마세요.

텍스트 이미지

화면 리더는 이미지 안에 포함된 텍스트를 읽을 수 없으므로 텍스트 이미지를 사용하지 마세요. 텍스트 이미지도 크기가 잘 조정되지 않으며 사용자의 요구와 선호도에 맞게 커스텀할 수 없습니다. 실제 텍스트를 사용하면 색상과 대비 등을 사용자 지정하고 품질 저하 없이 텍스트 크기를 조정할 수 있습니다. 텍스트 이미지가 확대되면 픽셀화되고 품질이 낮아져 읽기 어려워집니다.

동영상

동영상에 자막을 제공합니다. 시각 장애가 있는 사람, 시끄러운 곳에서 시청하는 사람, 동영상에 나오는 언어와 다른 언어를 사용하는 사람에게 도움이 됩니다.

색상 대비

색상 대비가 충분하면 접근성을 높이는 데 큰 도움이 될 수 있습니다. 포그라운드(텍스트)와 배경색 간의 대비 비율은 WCAG 2.1 AA 수준 요구 사항을 준수해야 합니다.

• 일반 텍스트(본문 텍스트, 버튼, 링크)의 명암비는 4.5:1입니다.
• 큰 텍스트(헤더 등)의 대비 비율 3:1

WebAim 대비 검사 도구를 사용하여 텍스트가 배경색에 대해 가독성이 있는지 확인할 수 있습니다.

양식

더 긴 양식을 더 작은 섹션으로 분할
인지 부하를 줄이려면 긴 양식을 작은 섹션으로 나누세요. 이를 청킹이라고 하며, 정보를 더 쉽게 소비할 수 있도록 점진적으로 공개하는 패턴입니다. 이는 모든 사용자에게 도움이 되지만 특히 인지 장애가 있는 사용자에게 유용합니다.

툴팁이나 기타 마우스오버 상태에서 중요한 콘텐츠를 숨기지 마세요.
호버 상태에 포함된 콘텐츠는 검색성과 모바일 친화성이 떨어지며 화면 확대기 사용자는 호버 상태에서만 사용할 수 있는 콘텐츠를 보는 데 어려움을 겪을 수 있습니다.

필드에서 유효하지 않은 문자 차단 방지
양식 필드에 특정 문자 유형을 입력하지 못하도록 막지 마세요. 사용자가 원하는 내용을 입력할 수 있도록 허용한 다음 무엇이 잘못되었는지에 대한 오류 메시지를 제공하는 것이 좋습니다. 보조 기술 사용자는 양식을 올바르게 작성했는지 확인하기 위해 인라인 유효성 검사에 크게 의존하기 때문에 키보드 입력을 차단하는 것은 특히 문제가 될 수 있습니다.

명확한 오류 메시지 작성
좋은 오류 메시지는 무슨 일이 일어났는지, 무엇이 잘못되었는지, 어떻게 해결할 수 있는지 등 세 부분으로 구성됩니다. 오류 메시지는 명확하고 이해하기 쉬워야 합니다. 간단한 언어로 말하세요. 화려한 전문 용어는 필요 없습니다.

사용자 지정 HTML

메시징에 사용자 지정 HTML을 사용하는 경우:

• 시맨틱 HTML을 사용합니다. 즉, 한 요소를 다른 요소처럼 보이도록 스타일을 지정하는 대신 의도한 목적에 맞는 올바른 HTML 요소를 사용해야 합니다. 대부분의 HTML 요소에는 자체 접근성 지원이 내장되어 있습니다.
• HTML 내에서 언어 속성을 설정하여 콘텐츠의 언어를 식별합니다. 화면 리더는 해당 언어의 발음과 특성에 따라 각 언어마다 다른 사운드 라이브러리를 사용합니다. 언어를 지정하면 화면 리더는 필요에 따라 언어 라이브러리 간에 자동으로 전환할 수 있습니다. 예를 들어, 다음과 같습니다.

1
<html lang="en-us">