Skip to content

Braze에서 접근성 높은 메시지 구축하기

마케팅 콘텐츠에서 접근성을 고려해야 하는 이유와 Braze에서 접근성 높은 메시지를 구축하는 방법을 알아보세요. 자세한 안내는 Braze Learning의 접근성 높은 메시징 기초 과정을 확인하세요.

장애가 있는 사람들을 의도치 않게라도 배제하는 마케팅 콘텐츠는 수백만 명이 브랜드와 상호작용하는 것을 방해할 수 있습니다. 마케팅에서의 접근성은 모든 사람이 마케팅을 경험하고, 커뮤니케이션을 이해하며, 제품, 서비스 또는 브랜드에 투자하거나 팬이 될 기회를 갖도록 하는 것입니다.

메시지를 디자인할 때 모든 고객이 접근할 수 있는 디자인을 만들기 위해 추가적인 시간을 투자하세요.

Braze에서의 접근성

접근성 높은 커뮤니케이션을 지원한다는 것은 열린 마음으로 호기심을 갖고 기꺼이 배우려는 자세를 의미합니다. Braze에서는 사람들이 연결되도록 돕는 것에 관심을 가지고 있으며, 모든 사람을 위한 공간을 만드는 것이 그 일의 일부라는 것을 알고 있습니다. 접근성은 “완료”된 것으로 간주하지 않으며, 계속 배울 수 있는 기회를 환영합니다.

Braze에 대한 접근성 또는 Braze에서 전송된 메시지에 대한 피드백이 있으시면, 저희는 귀하의 의견을 듣고 싶습니다. 전역 헤더에서 지원 메뉴를 열고 피드백 공유를 선택하여 의견을 보내주세요.

고려해야 할 장애 영역

이 섹션은 W3C: 다양한 능력과 장벽에서 부분적으로 발췌했습니다.

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

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

  • 텍스트 크기와 이미지 확대 또는 축소
  • 글꼴, 색상 및 간격에 대한 설정 커스터마이즈
  • 콘텐츠의 텍스트 음성 변환 듣기(즉, 스크린 리더 사용)
  • 동영상의 오디오 설명 듣기
  • 점자 디스플레이를 사용하여 텍스트 읽기

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

이러한 사용자가 콘텐츠를 이해하려면 다음에 의존합니다:

  • 오디오 콘텐츠의 자막 및 캡션
  • 캡션을 표시하고 텍스트 크기 및 색상을 조정할 수 있는 옵션을 제공하는 미디어 플레이어
  • 오디오 콘텐츠의 정지, 일시 정지 및 볼륨 조절 옵션(시스템 볼륨과 독립적)
  • 배경 소음과 명확하게 구분되는 고품질 전경 오디오

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

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

  • 큰 클릭 영역
  • 작업을 완료하기에 충분한 시간
  • 현재 포커스의 시각적 표시기
  • 페이지 헤더나 내비게이션 바와 같은 콘텐츠 블록을 건너뛸 수 있는 메커니즘

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

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

  • 명확하게 구조화된 콘텐츠
  • 양식, 버튼 및 기타 콘텐츠의 일관된 레이블링
  • 예측 가능한 링크 대상 및 전반적인 상호작용
  • 메뉴 및 검색 바와 같은 다양한 탐색 방법
  • 깜빡이거나 번쩍이거나 주의를 산만하게 하는 콘텐츠를 끌 수 있는 설정
  • 이미지로 보완되는 간단한 텍스트

모범 사례

접근성 높은 콘텐츠를 만드는 것이 부담스러울 필요는 없습니다. 작지만 사려 깊은 선택이 큰 차이를 만들 수 있습니다. 이 섹션에서는 더 많은 사람들이 메시지를 성공적으로 읽고, 탐색하고, 상호작용할 수 있도록 돕는 실용적인 팁을 안내합니다. 문구를 조정하든, 버튼 스타일을 지정하든, 이미지에 대체 텍스트를 추가하든, 각각의 개선이 더 포용적인 경험으로 이어집니다. 자세히 살펴보겠습니다.

콘텐츠

구조와 흐름

기본부터 시작하겠습니다. 콘텐츠에 명확한 구조가 있으면 모든 사람이 따라가기 쉬워집니다. 특히 스크린 리더나 키보드 탐색에 의존하는 사람들에게 더욱 그렇습니다.

  • 콘텐츠를 섹션으로 나누세요: 제목, 글머리 기호 및 목록을 사용하면 사람들이 콘텐츠를 빠르게 이해하고 훑어볼 수 있습니다. 바쁠 때도 마찬가지입니다.
  • 제목 수준을 건너뛰지 마세요: 제목은 콘텐츠에 구조를 부여하여 독자가 섹션 간의 관계를 빠르게 이해할 수 있도록 합니다. 제목 수준을 건너뛰면(예: H2에서 H4로 바로 이동) 이 논리적 구조가 깨집니다. 이는 특히 스크린 리더를 사용하는 사용자가 메시지를 탐색하고 이해하기 어렵게 만듭니다. 콘텐츠가 체계적이고 접근 가능하며 모든 사람이 따라가기 쉽도록 항상 논리적이고 순차적인 제목 계층(H1에서 H2, H3 순서)을 따르세요.

가독성

구조가 갖춰지면 다음 단계는 실제로 읽기 쉬운 문장을 작성하는 것입니다. 이는 간결하고, 훑어보기 쉽고, 다양한 기기와 사용자 요구에서 편안하게 읽을 수 있도록 하는 것을 의미합니다.

  • 짧고 명확한 문장을 작성하세요: 짧은 문장은 모든 사람이 이해하기 쉽습니다. 특히 스크린 리더를 사용하거나 복잡한 정보를 처리하는 데 어려움이 있는 사람들에게 더욱 그렇습니다. 미국 7학년 수준의 읽기 수준으로 작성하세요. Hemingway App과 같은 리소스를 사용하여 텍스트의 읽기 수준을 확인할 수 있습니다.
  • 읽기 쉬운 글꼴 크기와 간격을 선택하세요: 너무 작은 텍스트는 읽기 어려울 수 있습니다. 특히 모바일에서 더욱 그렇습니다. 본문 텍스트에는 최소 14px를 사용하세요. 사용자가 차이를 명확하게 볼 수 있도록 제목을 더 크게 만드세요. 줄 사이의 추가 간격(약 1.5 줄 높이)과 단락 간격은 시각적 또는 인지적 요구가 있는 사람들의 가독성을 향상시킵니다.
  • 양쪽 정렬 텍스트를 피하세요: 양쪽 정렬 텍스트는 단어 사이에 불균일한 간격을 만들어 난독증이나 인지 장애가 있는 사람들이 읽기 어렵게 합니다. 두 줄 이상으로 줄바꿈되는 콘텐츠는 왼쪽에서 오른쪽으로 읽는 언어의 경우 왼쪽 정렬, 오른쪽에서 왼쪽으로 읽는 언어의 경우 오른쪽 정렬을 고려하세요.
  • 굵게, 기울임꼴 및 대문자 텍스트를 아껴서 사용하세요: 너무 많은 텍스트를 강조하면 읽기가 어려워집니다. 특히 난독증이나 시각 장애가 있는 사람들에게 더욱 그렇습니다. 간결하게 유지하세요.

명확성과 사용성

마지막으로, 사용자가 콘텐츠를 보는 것뿐만 아니라 이해하고 상호작용할 수 있도록 돕는 세부 사항에 대해 이야기하겠습니다.

  • 링크와 버튼에 명확한 레이블을 지정하세요: 링크와 버튼 텍스트가 다음에 무슨 일이 일어나는지 명확하게 설명하는지 확인하세요. 스크린 리더를 사용하거나 키보드로 탐색하는 사람들이 무엇을 기대할 수 있는지 알 수 있도록 합니다.
  • 기호와 이모지를 적절히 사용하세요: 특수 문자와 이모지는 콘텐츠를 재미있게 만들 수 있지만, 스크린 리더가 읽을 때 혼란스러울 수 있습니다. 아껴서 사용하고, 명확하고 설명적인 텍스트를 대체하지 않도록 하세요.
  • 잘림 현상을 테스트하세요: 항상 기기에 테스트 메시지를 전송하여 텍스트가 잘리지 않는지 확인하세요. 메시지가 잘리면 콘텐츠가 오디언스에게 전달되지 않으므로 양쪽 모두에게 손해입니다.

접근성 언어

접근성 언어는 스크린 리더 및 기타 보조 도구에 콘텐츠가 어떤 언어로 작성되었는지 알려줍니다. 전체 HTML 페이지나 이메일을 전송하는 채널의 경우, Braze는 에디터에서 설정하거나 Liquid를 통해 설정할 때 언어 태그(lang)를 추가할 수 있습니다. 이는 WCAG 2.1 성공 기준 3.1.1 페이지 언어(레벨 A)를 지원합니다.

접근성 언어를 비워두고 안전한 기본값이 없는 경우, Braze는 언어 태그를 생략합니다. 언어가 설정되지 않으면 보조 도구는 종종 사용자의 휴대폰이나 컴퓨터 언어로 대체합니다. 이것이 메시지 언어와 다르면 발음이 잘못될 수 있습니다.

Campaigns와 Canvases는 워크스페이스에서 기능을 사용할 수 없는 경우를 제외하고 이러한 옵션에 동일한 에디터를 사용합니다.

접근성 언어 구성

에디터에 해당 옵션이 포함되어 있으면 메시지 설정의 접근성 섹션으로 이동하세요. 드롭다운에서 언어를 선택하거나 Liquid를 사용하세요(예: 다국어 메시지가 켜져 있고 현지화 설정이 설정된 경우 {{accessibility_language}}).

다국어 메시지

현지화 설정에서 각 로케일에 대한 접근성 언어를 설정하면 Liquid가 현지화된 발송에 대해 {{accessibility_language}}를 채울 수 있습니다. 해당 값이 새 메시지에 이미 선택되어 있는지 여부는 채널에 따라 다릅니다. CSV 및 번역 워크플로의 경우 언어 설정 및 접근성부터 시작하세요.

채널 및 에디터 지원

이 표를 사용하여 채널을 비교하세요. 기본값이 다를 수 있으므로 오디언스가 실제로 수신하는 내용을 확인하세요.

채널 알아야 할 사항
이메일(드래그 앤 드롭, 전체 템플릿) 에디터에서 언어를 설정합니다. 다국어 메시지를 사용하면 전체 이메일 템플릿이 각 로케일의 언어에 맞출 수 있습니다. Content Blocks만 사용하는 경우(단일 행) 이러한 단축키가 동일하게 작동하지 않습니다. 에디터에서 허용하는 곳에서 직접 언어를 선택하세요.
이메일(HTML 코드) Braze는 언어 태그를 자동으로 추가하지 않습니다. 필요한 경우 HTML에 직접 추가하세요.
인앱 메시지(드래그 앤 드롭) 접근성에서 언어를 선택하면 Braze가 메시지의 외부 HTML에 해당 언어를 추가하여 스크린 리더가 전체 메시지를 해당 언어로 처리합니다. 다국어 메시지가 켜져 있으면 새 메시지가 로케일 언어로 기본 설정될 수 있습니다. 미리보기에서는 설정에서 언어를 선택할 때까지 언어가 표시되지 않을 수 있습니다.
배너 인앱 메시지와 동일한 동작입니다.
랜딩 페이지 라이브 페이지에서 언어를 설정할 수 있습니다. 하나의 언어를 선택하거나, 계정에서 랜딩 페이지에 Liquid를 허용하는 경우 Liquid를 사용하세요. 기본값도 인앱 메시지 및 배너와 다릅니다. 게시된 페이지를 확인하세요.
Content Cards Cards는 명시적인 접근성 언어 대신 앱용 언어 필드를 사용합니다.

HTML을 직접 작성하는 경우에도 메시지의 일부에 언어 태그를 추가할 수 있습니다(예: 다른 언어로 된 하나의 구문). 더 많은 패턴은 커스텀 HTML을 참조하세요.

표준 참조

Braze가 HTML에 루트 수준 언어 태그를 추가할 때 HTML lang 규칙을 따릅니다. 테스트 도구는 종종 html-has-lang을 확인합니다. Content Cards는 해당 HTML 패턴 대신 언어 필드를 사용합니다.

버튼

양식 제출이나 캐러셀 재생과 같은 동작을 나타내려면 버튼을 사용하세요. 새 URL로 이동하는 경우에는 링크를 사용하는 것을 고려하세요.

명확하고 동작 지향적인 텍스트 작성

링크 텍스트와 마찬가지로 버튼 레이블은 동작을 명확하게 설명해야 합니다. 효과적인 버튼 텍스트는 구체적이고 동작 지향적입니다. 예를 들어, “주문 제출”은 클릭 시 무슨 일이 일어나는지 명확하게 알려주지만, 단순히 “제출”은 모호할 수 있습니다. 각 레이블은 의도된 동작을 정확하게 설명해야 하므로, 스크린 리더와 모든 사용자가 버튼과 상호작용할 때 결과를 쉽게 이해하고 예측할 수 있습니다.

잘림을 방지하기 위해 버튼 텍스트를 간결하게 유지하세요. 버튼 텍스트가 너무 길면 줄바꿈 대신 말줄임표로 잘릴 수 있습니다.

충분한 색상 대비 사용

버튼 텍스트는 버튼의 배경색에 대해 읽기 쉬워야 합니다. 버튼 텍스트가 WCAG 2.2 AA 대비 최소값을 충족하는지 확인하세요:

  • 일반 크기 텍스트(대부분의 버튼)에 대해 4.5:1 대비 비율
  • 큰 텍스트(일반적으로 18pt 이상)에 대해 3:1 대비 비율

높은 대비는 시각 장애가 있는 사용자나 어려운 환경에서 메시지를 보는 사용자를 포함하여 모든 사람이 버튼을 읽고 클릭할 수 있도록 합니다. 자세한 안내는 색상 대비 섹션을 참조하세요.

버튼을 쉽게 탭할 수 있도록 만들기

버튼(및 링크)이 모바일 기기 사용자를 위해 충분히 크고 간격이 충분한지 확인하세요. 작거나 밀집된 터치 타겟은 운동 장애가 있는 사용자가 상호작용하기 어렵거나 불가능할 수 있습니다.

외부 페이지로 사용자를 안내하는 것과 같은 탐색에는 링크를 사용하세요.

설명적인 링크 텍스트 작성

링크가 사용자를 어디로 데려갈지 명확하게 설명하는 링크 텍스트를 작성하세요. 스크린 리더 사용자는 콘텐츠를 훑어보는 방법으로 링크에서 링크로 건너뛰는 경우가 많으므로, 링크 텍스트가 독립적으로 의미가 통하는지 확인하세요. “여기를 클릭”, “더 보기”, “자세히 보려면 클릭”과 같은 문구는 문맥 없이 읽을 때 모호하므로 피하세요.

예를 들어, 날씨 보고서를 보기 위한 링크를 어떻게 작성할지 생각해 보세요.

나쁨 보통 좋음
여기를 클릭 오늘의 날씨를 보려면 여기를 클릭 오늘의 날씨

모든 콘텐츠와 마찬가지로 가능한 한 적은 추가 단어로 간결하게 유지하세요.

Braze 드래그 앤 드롭 에디터는 기본적으로 시맨틱 HTML을 출력하므로 링크가 버튼처럼 스타일링되지 않습니다. 그러나 커스텀 HTML을 사용하거나 코드 수준에서 변경하는 경우 다음을 유의하세요:

  • 링크(<a>) 는 Enter 키에 반응합니다.
  • 버튼(<button>) 은 Enter와 Space 키 모두에 반응합니다.

링크를 버튼처럼 보이게 스타일링하면 키보드로 탐색하는 사람들이 혼란스러울 수 있습니다. Space를 눌러 작동할 것으로 기대할 수 있기 때문입니다.

동작에 맞는 올바른 요소를 사용하세요:

  • 양식 제출이나 모달 열기와 같은 동작에는 <button>을 사용하세요.
  • 다른 페이지나 파일로 연결하는 탐색에는 <a>를 사용하세요.
1
2
3
4
5

<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

터치 타겟

터치 타겟은 사용자가 동작을 수행하기 위해 탭하는 메시지의 모든 부분으로, 버튼, 링크 또는 아이콘 등이 있습니다. 이러한 요소는 사람들이 쉽게 탭할 수 있도록 충분히 크고 간격이 충분해야 합니다. 특히 모바일 기기에서 더욱 그렇습니다.

터치 타겟이 너무 작거나 너무 가까이 있으면 이동성이나 손재주에 어려움이 있는 사용자가 메시지와 상호작용하기 어렵거나 불가능할 수 있습니다. 이를 개선하면 오류를 줄이고 모든 사람에게 더 원활한 경험을 제공할 수 있습니다.

다음 사항을 유의하세요:

  • 적절한 터치 타겟 크기를 사용하세요. 최소 터치 타겟 크기 44 x 44 픽셀을 목표로 하세요. 이는 터치 타겟에 대한 WCAG 2.2 가이드라인 및 일반적인 모바일 사용성 표준에 부합합니다.
  • 각 타겟에 여유 공간을 주세요. 탭 타겟이 너무 가까이 있으면(예: 겹쳐진 링크나 밀집된 버튼) 놓치거나 잘못된 것을 탭하기 쉽습니다. 이를 방지하기 위해 요소 사이에 간격이나 패딩을 추가하세요.
  • 시각적 요소에만 의존하지 마세요. 작은 아이콘도 추가 패딩으로 레이아웃을 변경하지 않고 최소 크기 요구 사항을 충족할 수 있습니다.
  • 모바일에서 미리보기하세요. 다양한 화면 크기에서 메시지를 테스트하고 인터랙티브 요소가 사용하기 쉬운지 확인하세요.

터치 타겟을 개선하는 것은 모바일에서 메시지의 접근성을 높이는 가장 효과적인 방법 중 하나이며, 모든 사람에게 좋은 UX입니다.

이미지

대체 텍스트 제공

대체 텍스트(alt 텍스트)는 스크린 리더 및 기타 보조 기술이 사용자에게 제공하는 이미지의 콘텐츠 또는 기능에 대한 짧은 설명입니다. 의미 있는 모든 이미지에 대해 설명적인 대체 텍스트를 작성하여 시각적 요소를 볼 수 없는 사용자도 메시지나 행동 유도를 이해할 수 있도록 하세요.

텍스트 이미지 피하기

가능하면 이미지 안에 텍스트를 넣는 것을 피하세요. 스크린 리더는 이미지 기반 텍스트를 읽을 수 없으며, 사용자가 더 나은 가시성을 위해 글꼴 크기나 색상을 쉽게 조정할 수 없습니다. 다음 팁을 고려하세요:

  • 가능한 곳에서 텍스트를 제거하세요: 이미지에서 설명적이거나 홍보적인 텍스트를 메시지의 텍스트 필드로 옮기세요. 이렇게 하면 사용자가 기기나 브라우저 환경설정을 사용하여 필요에 따라 크기를 조정하거나 색상을 변경할 수 있습니다.
  • 가독성과 대비를 테스트하세요: 이미지에 텍스트를 유지해야 하는 경우 색상 대비 모범 사례를 따르고 큰 크기 글꼴을 사용하세요. 이는 텍스트가 굵지 않은 경우 최소 18포인트(약 24픽셀), 굵은 경우 14포인트(약 18픽셀) 이상이어야 함을 의미합니다. 이러한 크기를 사용하면 사용자가 확대하지 않아도 텍스트가 읽기 쉽게 유지되며, 콘텐츠의 전반적인 대비와 가독성이 향상됩니다. 작은 화면에서도 여전히 읽기 쉬운지 테스트하세요.
  • 대체 텍스트를 제공하세요: 이미지에 반드시 남아야 하는 필수 텍스트의 경우 해당 단어를 설명하는 대체 텍스트를 포함하세요.

이미지에 편집할 수 없는 텍스트가 포함되어 있으면 시각 장애가 있는 사용자는 읽기 조정을 할 수 있는 유연성을 잃게 됩니다. 텍스트를 이미지에서 분리하면 더 많은 사용자가 메시지를 편안하게 읽고 상호작용할 수 있습니다.

대체 텍스트 작성 팁

이미지에 실제로 있는 것을 설명하세요

스크린 리더 사용자는 이미지의 콘텐츠나 기능을 이해하기 위해 대체 텍스트에 의존합니다. 시각적으로 보이는 것과 일치하지 않는 일반적인 “마케팅 문구”를 피하세요.

짧지만 구체적으로 유지하세요

간결한 대체 텍스트는 사용자가 처리하기 쉽게 합니다. 목적을 전달하기에 충분한 세부 사항을 포함하되 불필요한 내용은 생략하세요. 일반적으로 대체 텍스트는 125자 이하로 유지하세요. 간단한 구문이나 문장 이상이 필요한 경우 W3C의 긴 설명 방법 중 하나를 사용하는 것을 고려하세요.

“이미지” 또는 “사진”을 피하세요

스크린 리더는 이미 이미지를 알려줍니다. 바로 주제를 설명하세요.

이미지에 나타나는 텍스트를 반영하세요

이미지에 필수 텍스트가 포함되어 있다면 사용자가 놓치지 않도록 대체 텍스트에 해당 정보를 넣으세요.

관련 맥락에 집중하세요—추가 마케팅 용어 없이

이미지와 직접 관련되지 않은 SEO 용어나 행동 유도 문구로 대체 텍스트를 채우지 마세요. 이미지를 볼 수 없는 사람들에게 가치를 제공하세요.

이미지의 목적을 고려하세요

이미지가 링크나 행동 유도 역할을 하는 경우 레이블이나 표시된 제품뿐만 아니라 의도된 동작(“쇼핑”, “링크”, “가입”)을 설명하세요.

이미지에 목적이 없다면 그것도 알려주세요. 로고와 같은 장식용 이미지는 빈 alt 태그(alt="")를 사용하여 스크린 리더가 알림을 건너뛰도록 해야 합니다. 이것이 없으면 일반적으로 이미지 파일 이름이 대신 읽힙니다.

동영상

동영상은 매력적이지만 접근성이 없으면 오디언스의 일부를 배제할 위험이 있습니다. 다음 팁을 사용하여 동영상 콘텐츠를 더 포용적으로 만드세요:

자막 제공

사용자가 대화, 효과음 및 기타 오디오 콘텐츠를 따라갈 수 있도록 동영상에 자막을 포함하세요. 자막은 다음에 도움이 됩니다:

  • 청각 장애가 있는 사람들
  • 소리 없이 시청하는 시청자
  • 읽으면서 따라가는 것을 선호하는 비원어민 화자

자막은 켜거나 끌 수 있어 사용자가 자신에게 가장 적합한 것을 선택할 수 있습니다.

재생 컨트롤 제공

임베디드 동영상에 재생, 일시 정지, 음소거 및 탐색과 같은 접근 가능한 재생 컨트롤이 포함되어 있는지 확인하여 사용자가 자신에게 가장 적합한 방식으로 상호작용할 수 있도록 하세요.

자동 재생 피하기

가능하면 동영상이 자동으로 재생되도록 설정하는 것을 피하세요. 자동 재생은 다음 사용자에게 놀라움이나 혼란을 줄 수 있습니다:

  • 스크린 리더나 키보드 탐색에 의존하는 사용자
  • 움직임에 민감한 사람들
  • 조용한 환경(직장이나 늦은 밤 등)에 있는 모든 사람

명확한 컨트롤을 포함하여 사용자가 동영상을 재생할 시점을 선택할 수 있도록 하세요.

깜빡이거나 번쩍이는 콘텐츠 피하기

특히 높은 빈도의 깜빡이거나 번쩍이는 효과가 있는 동영상을 포함하지 마세요. 이는 광과민성 간질이 있는 사용자에게 발작을 유발하고 다른 사람들에게 불편을 줄 수 있습니다.

색상 대비

충분한 색상 대비는 저시력 사용자나 밝거나 어려운 조건에서 콘텐츠를 보는 사용자를 포함하여 모든 사람이 메시지를 쉽게 읽을 수 있도록 합니다. WCAG 2.2 AA 수준 요구 사항을 준수하는 대비 비율을 목표로 하세요:

  • 일반 텍스트(본문 텍스트, 버튼 및 링크)에 대해 4.5:1 대비 비율
  • 큰 텍스트(제목 및 큰 레이블)에 대해 3:1 대비 비율

WebAim 대비 검사 도구를 사용하여 색상 선택을 테스트할 수 있습니다.

커스텀 HTML

메시지에 커스텀 HTML을 사용하는 경우:

  • 시맨틱 HTML을 사용하세요. 이는 하나의 요소를 다른 것처럼 보이게 스타일링하는 대신 의도된 목적에 맞는 올바른 HTML 요소를 사용하는 것을 의미합니다. 대부분의 HTML 요소에는 자체 접근성 지원이 내장되어 있습니다.
  • Braze가 내보내기 시 HTML 메타데이터를 추가할 수 있는 문서 수준 언어의 경우 접근성 언어를 참조하세요. 동작은 채널에 따라 다릅니다. 콘텐츠를 직접 마크업하는 경우 HTML 내에서 lang 속성을 설정하여 콘텐츠의 언어를 식별하세요. 스크린 리더는 해당 언어의 발음과 특성에 따라 각 언어에 대해 다른 음성 라이브러리를 사용합니다. 이것이 지정되지 않으면 스크린 리더는 사용자가 스크린 리더를 설정할 때 선택한 기본 언어로 콘텐츠가 작성되었다고 가정합니다. 메시지가 실제로 기본 언어가 아닌 경우 스크린 리더가 메시지를 올바르게 발음하지 못할 수 있습니다.
1

<html lang="en-us">
  • ARIA 속성을 사용하여 추가 컨텍스트를 제공하세요. 이러한 속성은 보조 기술에 추가 정보를 제공하여 그렇지 않으면 불명확할 수 있는 UI 요소의 역할, 상태 또는 등록정보를 명확히 하는 데 도움이 됩니다.

ARIA 속성

Braze 에디터에서 커스텀 코드를 사용할 때 접근 가능한 리치 인터넷 애플리케이션(ARIA)을 사용하여 보조 기술에 의존하는 사용자에게 추가 접근성 지원을 제공할 수 있습니다. ARIA 역할과 속성은 스크린 리더가 콘텐츠를 더 명확하게 해석하도록 도와줍니다. 특히 자체적으로 의미를 전달하지 않는 요소(<div> 또는 <span> 등)를 사용할 때 유용합니다.

메시징 맥락에서 특히 유용한 몇 가지 예시는 다음과 같습니다:

aria-label

aria-label은 보이는 텍스트가 없는 요소에 접근 가능한 이름을 추가합니다. 텍스트 없이 아이콘(예: 휴지통이나 닫기용 “X”)을 사용하는 경우 스크린 리더를 사용하는 사람은 레이블을 지정하지 않으면 그것이 무엇을 하는지 알 수 없습니다. aria-label은 해당 아이콘에 음성을 부여합니다.

1
2
3

<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledby는 요소를 이미 보이는 레이블이 있는 것에 연결합니다. 따라서 제목과 함께 소리 내어 읽어야 하는 배너나 영역이 있는 경우 aria-labelledby를 사용하여 보조 기술에 “저기 있는 제목을 사용하여 이 부분의 이름을 지정하세요”라고 알릴 수 있습니다.

1
2

<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true"는 스크린 리더에서 항목을 숨깁니다. 중요한 의미를 전달하지 않는 텍스트나 시각적 요소(예: 순수하게 스타일을 위해 사용되는 반짝임, 체크 표시 또는 이모지)에 유용합니다.

이는 스크린 리더 사용자에게 더 깔끔한 경험을 제공합니다. 그렇지 않으면 중복되거나 혼란스러운 콘텐츠를 들을 수 있기 때문입니다. 아직 확장되지 않은 화면 밖 아코디언 콘텐츠와 같은 것을 숨기는 데도 유용합니다.

1

<span aria-hidden="true">✔️</span>

일반적으로 장식용 이미지와 아이콘에는 aria-hidden="true" 대신 alt=""를 사용하는 것이 좋습니다. 시맨틱 HTML은 모든 스크린 리더와 보조 소프트웨어에서 널리 지원되지만 ARIA 지원은 다양합니다. aria-hidden을 사용하더라도 빈 alt 속성을 포함해야 합니다.

role=”presentation”

role="presentation"은 보조 기술에 디자인 테이블과 같은 레이아웃 전용 요소를 무시하도록 알려줍니다. 예를 들어, 이메일은 종종 정렬을 위해 테이블을 사용합니다. 이 역할이 없으면 스크린 리더가 레이아웃을 데이터 테이블로 가정하고 행과 열 번호를 읽기 시작할 수 있습니다.

1

<table role="presentation">...</table>

이메일 드래그 앤 드롭 에디터에서 생성된 이메일은 프레젠테이션 요소에 ARIA 속성 role="presentation"이 자동으로 표시됩니다.

aria-live=”polite”

aria-live="polite"는 사용자 상호작용 없이 콘텐츠가 변경될 때 업데이트를 알립니다. 성공, 오류 또는 기타 알림과 같은 동적 업데이트를 메시지 내에 표시할 때 사용하세요.

1

<div aria-live="polite">Your preferences have been saved.</div>

자동화된 접근성 테스트

접근성 문제를 조기에 식별하고 수정할 수 있도록 Braze는 다음 영역에서 자동화된 접근성 테스트를 제공합니다:

이러한 테스트는 접근 가능한 콘텐츠에 대한 국제적으로 인정된 기술 표준 세트인 웹 콘텐츠 접근성 지침(WCAG) 표준에 따라 메시지를 검사합니다. 자동으로 감지할 수 있는 모든 문제는 우선순위를 정하는 데 도움이 되도록 심각도별로 플래그가 지정되고 분류됩니다.

자동화된 테스트가 감지할 수 있는 것과 없는 것

자동화된 접근성 테스트는 훌륭한 출발점이지만 모든 것을 감지할 수는 없습니다. 일부 문제는 적절하게 평가하기 위해 사람의 판단이 필요합니다. 특히 맥락이나 시각적 디자인이 사용자가 이메일을 경험하는 방식에 영향을 미치는 경우에 그렇습니다.

일부 문제는 검토 필요로 표시될 수 있습니다. 이는 검사기가 접근성에 문제가 있는지 확실히 판단할 수 없는 경우입니다. 이런 경우 수동으로 검토하는 것을 권장합니다.

자동화된 도구가 안정적으로 감지할 수 없는 몇 가지 예시는 다음과 같습니다:

  • 인터랙티브 요소의 포커스 순서가 논리적 순서를 따르는지
  • 마우스 없이 키보드만으로 콘텐츠를 완전히 조작할 수 있는지
  • 대체 텍스트가 이미지를 의미 있게 설명하는지
  • 제목이 콘텐츠를 체계적으로 구성하는 데 적절하게 사용되는지
  • 링크와 버튼이 명확하게 레이블이 지정되고 이해하기 쉬운지
  • 터치 타겟이 충분히 크고 적절하게 간격이 있는지
  • 배경 이미지 위의 텍스트가 색상 대비 요구 사항을 충족하는지
  • 지침이나 레이블이 모든 사용자에게 명확하고 도움이 되는지

이러한 제한 사항은 Braze에만 국한된 것이 아니라 모든 자동화된 접근성 도구에 공통적입니다. 자동화된 검사는 모든 보조 기술, 스크린 리더 또는 사용자 요구를 모방할 수 없습니다. 그래서 접근성은 일회성 검사가 아니라 지속적인 실천입니다.

메시지가 모든 자동화된 검사를 통과하더라도 다음을 수행하는 것이 여전히 중요합니다:

  • 플래그가 지정된 문제를 주의 깊게 검토하세요. 특히 검토 필요로 레이블이 지정된 문제를 확인하세요.
  • 가능한 경우 수동으로 테스트하세요. 특히 레이아웃과 상호작용 패턴에 대해서 테스트하세요.
  • 스크린 리더, 키보드 전용 탐색 및 브라우저 확대/축소와 같은 도구를 사용하여 다양한 접근 요구를 시뮬레이션하세요.

자동화된 테스트와 사려 깊은 수동 검토를 결합하면 더 많은 잠재적 문제를 발견하고 모든 수신자를 위해 더 포용적이고 사용하기 쉬운 캠페인을 만들 수 있습니다.
New Stuff!