Braze에서 접근 가능한 메시지 구축하기

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

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

메시징을 디자인할 때는 모든 고객이 디자인에 액세스할 수 있는 방법을 고려하는 데 시간을 할애하세요.

Braze의 접근성

접근성 높은 커뮤니케이션을 지원한다는 것은 열린 자세와 호기심, 배움의 의지를 유지하는 것을 의미합니다. Braze는 사람들이 서로 연결될 수 있도록 돕는 것을 중요하게 생각하며, 모두를 위한 공간을 만드는 것이 이를 잘 수행하는 것의 일부라는 것을 잘 알고 있습니다. 접근성은 ‘완료’라고 생각하는 것이 아니며, 계속해서 학습할 수 있는 기회를 환영합니다.

If you have feedback about the accessibility of Braze or messages sent from Braze, we’d love to hear from you. Open the Support menu in the global header and select Share feedback to send us your thoughts.

고려해야 할 장애 영역

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

• visual
• hearing
• physical
• cognitive

모범 사례

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

콘텐츠

구조와 흐름

기초부터 시작하겠습니다. 콘텐츠의 구조가 명확하면 모든 사람, 특히 화면 리더나 키보드 탐색에 의존하는 사람들이 더 쉽게 따라갈 수 있습니다.

• 콘텐츠를 섹션으로 나누세요: 제목, 글머리 기호 및 목록을 사용하면 사람들이 급한 상황에서도 콘텐츠를 빠르게 이해하고 스캔할 수 있습니다.
• 제목 레벨을 건너뛰지 마세요: 제목은 콘텐츠에 구조를 부여하여 독자가 섹션이 서로 어떻게 연관되어 있는지 빠르게 이해할 수 있도록 도와줍니다. 헤딩 레벨을 건너뛰면(예: H2에서 H4로 바로 점프) 이 논리 구조가 깨집니다. 이로 인해 사용자, 특히 스크린 리더를 사용하는 사용자는 메시지를 명확하게 탐색하고 이해하기 어렵습니다. 항상 논리적이고 순차적인 제목의 계층 구조(H1, H2, H3 등)를 따라 콘텐츠를 체계적이고 접근 가능하며 누구나 쉽게 따라갈 수 있도록 하세요.

가독성

구조가 완성되면 다음 단계는 실제로 글을 읽기 쉽게 만드는 것입니다. 즉, 기기와 사용자 요구사항에 따라 간단하고 스캔이 가능하며 읽기 편한 디자인을 유지해야 합니다.

• 짧고 명료한 문장을 작성하세요: 짧은 문장은 특히 화면 리더를 사용하거나 복잡한 정보를 처리하는 데 어려움을 겪는 사람 등 누구나 쉽게 이해할 수 있습니다. 미국 초등학교 7학년 읽기 수준으로 글을 씁니다. 헤밍웨이 앱과 같은 리소스를 사용하여 텍스트의 읽기 수준을 확인할 수 있습니다.
• 가독성 있는 글꼴 크기와 간격을 선택합니다: 특히 모바일에서는 텍스트가 너무 작으면 읽기 어려울 수 있습니다. 본문 텍스트에는 최소 14px를 사용합니다. 사용자가 차이를 명확하게 확인할 수 있도록 제목을 더 크게 만듭니다. 줄과 단락 사이의 간격(약 1.5줄 높이)을 넓히면 특히 시각 또는 인지 장애가 있는 사람들의 가독성이 향상됩니다.
• 아래쪽 맞춤 텍스트를 피하세요: 맞춤 텍스트는 단어와 단어 사이의 간격이 고르지 않아 난독증이나 인지 장애가 있는 사람이 읽기 어렵게 만듭니다. 왼쪽에서 오른쪽 언어의 경우 왼쪽 정렬, 오른쪽에서 왼쪽 언어의 경우 오른쪽 정렬로 두 줄 이상 래핑되는 콘텐츠를 만드는 것을 고려하세요.
• 굵게, 이탤릭체 및 대문자 텍스트는 아껴서 사용합니다: 텍스트를 너무 많이 강조하면 특히 난독증이나 시각 장애가 있는 사람이 읽기 어렵습니다. 단순하게 유지하세요.

명확성 및 유용성

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

• 링크와 버튼에 명확하게 레이블을 지정하세요: 링크와 버튼 텍스트에 다음에 일어날 일을 명확하게 설명해야 합니다. 화면 리더를 사용하거나 키보드로 탐색하는 사람들이 예상되는 사항을 알 수 있도록 도와줍니다.
• 기호와 이모티콘은 가볍게 사용하세요: 특수 문자와 이모티콘은 콘텐츠를 재미있게 만들 수 있지만 화면 리더가 읽을 때 혼란을 줄 수 있습니다. 가급적 사용하지 말고 명확하고 설명적인 텍스트를 대체하지 않도록 주의하세요.
• 잘림을 테스트합니다: 항상 기기에 테스트 메시지를 보내 사본을 테스트하여 텍스트가 잘리지 않는지 확인하세요. 메시징이 끊기면 콘텐츠가 오디언스에게 도달하지 못하기 때문에 여러분과 오디언스 모두에게 피해를 줍니다.

버튼

버튼을 사용하여 양식 보내기 또는 캐러셀 재생과 같은 작업을 표시합니다. 새 URL로 이동하는 경우 링크를 대신 사용하는 것이 좋습니다.

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

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

버튼 텍스트가 잘리지 않도록 간결하게 유지하세요. 버튼의 텍스트가 너무 길면 줄 바꿈 대신 줄임표로 잘릴 수 있습니다.

충분한 색상 대비 사용

버튼 텍스트는 버튼의 배경색과 대비하여 쉽게 읽을 수 있어야 합니다. 버튼 텍스트가 WCAG 2.2 AA 최소 대비를 충족하는지 확인하세요:

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

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

탭하기 쉬운 버튼 만들기

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

링크

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

설명이 포함된 링크 텍스트 작성

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

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

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

버튼과 같은 링크 스타일링 피하기

Braze 드래그 앤 드롭 편집기는 기본값으로 시맨틱 HTML을 출력하므로 링크는 버튼처럼 스타일이 지정되지 않습니다. 그러나 커스텀 HTML로 작업하거나 코드 레벨을 변경하는 경우 이 점을 염두에 두세요:

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

링크를 버튼처럼 보이도록 스타일을 지정하면 키보드로 탐색하는 사람들이 스페이스키를 눌러서 작동할 것으로 기대하는 등 혼란을 겪을 수 있습니다.

작업에 적합한 요소를 사용하세요:

• 양식 제출 또는 모달 열기와 같은 작업에는 <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입니다.

이미지

대체 텍스트 입력

대체 텍스트(대체 텍스트)는 화면 리더 및 기타 보조 기술이 사용자에게 제공하는 이미지의 콘텐츠 또는 기능에 대한 짧은 설명입니다. 의미 있는 모든 이미지에 대해 설명이 포함된 대체 텍스트를 작성하여 시각적 이미지를 볼 수 없는 사용자도 메시지나 콜투액션을 이해할 수 있도록 하세요.

텍스트 이미지 피하기

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

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

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

대체 텍스트 작성을 위한 팁

• 이미지에 실제로 무엇이 있는지 설명하세요.
• 짧지만 구체적으로 작성하세요.
• “이미지” 또는 “사진”을 피하십시오.
• 이미지에 표시되는 텍스트 반영
• 마케팅 전문 용어 없이 관련 맥락에 충실하세요.
• 이미지의 목적을 고려하세요.

이미지에 실제로 무엇이 있는지 설명하세요.

화면 리더 사용자는 이미지의 콘텐츠나 기능을 이해하기 위해 대체 텍스트에 의존합니다. 시각적으로 보여지는 것과 일치하지 않는 일반적인 ‘마케팅 용어’는 피하세요.

짧지만 구체적으로 작성하세요.

간결한 대체 텍스트를 사용하면 사용자가 더 쉽게 처리할 수 있습니다. 목적을 전달할 수 있는 충분한 세부 정보를 포함하되 불필요한 내용은 생략하세요. 대체 텍스트는 일반적으로 125자 이하로 유지합니다. 짧은 구절이나 문장 이상의 설명이 필요한 경우 W3C의 긴 설명 방법 중 하나를 사용하는 것이 좋습니다.

“이미지” 또는 “사진”을 피하십시오.

화면 리더는 이미 이미지를 알려줍니다. 주제 설명으로 바로 이동합니다.

이미지에 표시되는 텍스트 반영

이미지에 필수 텍스트가 포함된 경우 해당 정보를 대체 텍스트에 넣어 사용자가 놓치지 않도록 합니다.

마케팅 전문 용어 없이 관련 맥락에 충실하세요.

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

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

이미지가 링크나 콜투액션처럼 작동하는 경우 표시된 라벨이나 제품뿐만 아니라 의도된 동작(‘쇼핑’, ‘링크’, ‘가입’)을 설명하세요.

이미지에 목적이 없다면 그 점도 알려주세요. 로고와 같은 장식용 이미지에는 빈 대체 태그(alt="")가 있어야 화면 리더가 이를 건너뛸 수 있습니다. 이 옵션이 없으면 일반적으로 이미지 파일 이름이 대신 읽혀집니다.

동영상

동영상은 참여도가 높지만 접근성이 떨어지면 오디언스 중 일부가 배제될 위험이 있습니다. 다음 팁을 사용하여 동영상 콘텐츠를 더욱 포용적으로 만들 수 있습니다:

• 선택 자막 제공
• 재생 컨트롤 제공
• 자동 재생 방지
• 깜박이거나 스트로빙되는 콘텐츠 피하기

선택 자막 제공

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

• 청각 장애인 또는 난청인
• 소리가 꺼진 환경에서 시청하는 시청자
• 따라 읽기를 선호하는 비원어민

선택 캡션은 켜거나 끌 수 있으므로 사용자가 자신에게 가장 적합한 것을 선택할 수 있습니다.

재생 컨트롤 제공

임베디드 동영상에 재생, 일시 중지, 음소거, 찾기 등의 재생 컨트롤이 포함되어 있는지 확인하여 사용자가 자신에게 가장 적합한 방식으로 동영상과 상호 작용할 수 있도록 하세요.

자동 재생 방지

가능하면 동영상이 자동으로 재생되도록 설정하지 마세요. 자동 재생은 어지럽거나 방향 감각을 잃게 할 수 있습니다:

• 화면 리더 또는 키보드 탐색에 의존하는 사용자
• 움직임에 민감한 사람
• 조용한 환경(직장이나 심야 등)에 있는 사람

명확한 컨트롤을 포함하여 사용자가 동영상 재생 시기를 선택할 수 있도록 합니다.

깜박이거나 스트로빙되는 콘텐츠 피하기

특히 높은 빈도로 깜박이거나 스트로빙 효과가 있는 동영상은 포함하지 마세요. 이는 광과민성 뇌전증 사용자의 발작을 트리거하고 다른 사람들에게 불편함을 줄 수 있습니다.

색상 대비

충분한 색상 대비는 시력이 좋지 않은 사람이나 밝거나 어려운 환경에서 콘텐츠를 보는 사람을 포함하여 모든 사람이 메시지를 쉽게 읽을 수 있도록 도와줍니다. WCAG 2.2 AA 수준 요구 사항을 준수하는 명암비를 목표로 합니다:

• 일반 텍스트(본문 텍스트, 버튼, 링크)의 4.5:1 대비 비율
• 큰 텍스트의 경우 3:1 대비 비율(제목과 큰 레이블 등)

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

커스텀 HTML

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

• 시맨틱 HTML을 사용합니다. 즉, 한 요소를 다른 요소처럼 보이게 스타일링하는 대신 의도한 목적에 맞는 올바른 HTML 요소를 사용해야 합니다. 대부분의 HTML 요소에는 자체 접근성 지원이 구축되어 있습니다.
• HTML 내에 lang 속성을 설정하여 콘텐츠의 언어를 식별합니다. 화면 리더는 해당 언어의 발음과 특성에 따라 각 언어마다 다른 사운드 라이브러리를 사용합니다. 이를 지정하지 않으면 화면 리더는 화면 리더를 설정할 때 사용자가 선택한 기본값으로 콘텐츠가 작성된 것으로 간주합니다. 메시징이 실제로 기본값 언어가 아닌 경우 화면 리더가 메시지를 올바르게 발음하지 못할 수 있습니다.

1
<html lang="en-us">

• ARIA 속성을 사용하여 추가 컨텍스트를 제공하세요. 이러한 속성은 보조 기술에 추가 정보를 제공하여 불분명할 수 있는 UI 요소의 역할, 상태 또는 속성을 명확히 하는 데 도움이 됩니다.

ARIA 속성

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

다음은 메시징 상황에서 특히 유용한 몇 가지 예입니다:

• 아리아 레이블
• 아리아 레이블
• aria-hidden=”true”
• role=”프레젠테이션”
• aria-live=”polite”

아리아 레이블

aria-label 는 텍스트가 표시되지 않는 요소에 접근 가능한 이름을 추가합니다. aria-label 텍스트가 없는 아이콘(예: 휴지통 또는 닫기를 뜻하는 ‘X’)을 사용하는 경우, 라벨을 지정하지 않는 한 화면 리더를 사용하는 사람은 해당 아이콘이 무엇을 하는지 알 수 없습니다.

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

아리아 레이블

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=”프레젠테이션”

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는 다음 영역에서 접근성 테스트 자동화를 제공합니다:

• 이메일 수신편지함 비전
• HTML 편집기를 사용하여 만든 메시지(예: HTML 인앱 메시지, HTML 콘텐츠 블록, 커스텀 이메일 푸터, 이메일 옵트인 페이지, 이메일 탈퇴 페이지)에 대한 접근성 스캐너입니다.

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

자동화 테스트가 포착할 수 있는 것과 포착할 수 없는 것

접근성 테스트 자동화는 훌륭한 출발점이지만 모든 것을 파악할 수는 없습니다. 특히 컨텍스트나 시각적 디자인이 사용자가 이메일을 경험하는 방식에 영향을 미치는 경우, 제대로 평가하려면 사람의 손길이 필요한 문제도 있습니다.

검토 필요로 표시된 일부 이슈가 표시될 수 있습니다. 이러한 경우는 검사기에서 접근성 문제인지 확실하게 알 수 없는 경우입니다. 이 경우 수동으로 검토하는 것이 좋습니다.

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

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

이러한 제한 사항은 Braze에만 국한된 것이 아니라 모든 자동화 접근성 도구에 공통적으로 적용됩니다. 자동화된 검사로 모든 보조 기술, 스크린 리더 또는 사용자의 요구 사항을 모방할 수는 없습니다. 그렇기 때문에 접근성 점검은 일회성으로 끝나는 것이 아니라 지속적으로 이루어져야 합니다.

메시징이 모든 자동화 검사를 통과하더라도 여전히 중요합니다:

• 플래그가 지정된 이슈, 특히 검토 필요로 표시된 이슈를 주의 깊게 검토하세요.
• 특히 레이아웃과 상호작용 패턴에 대해 가능한 경우 수동으로 테스트하세요.
• 화면 리더, 키보드 전용 탐색, 브라우저 확대/축소와 같은 도구를 사용하여 다양한 액세스 요구 사항을 시뮬레이션할 수 있습니다.

자동화된 테스트와 신중한 수동 검토를 결합하면 더 많은 잠재적 문제를 발견하고 모든 수신자에게 더 포괄적이고 사용 가능한 캠페인을 만들 수 있습니다.