이메일 마케팅의 접근성: 코드의 접근성을 높이는 7가지 간단한 트릭
게시 됨: 2019-04-16접근성은 사용자 경험 및 디자인만큼이나 빠르게 이메일 마케팅의 기둥이 되고 있습니다. 점점 더 많은 브랜드가 신체, 시각 또는 인지 장애가 있거나 회사 환경으로 인해 단순히 이메일의 이미지를 볼 수 없는 경우에도 모든 구독자 가 이메일 캠페인을 즐길 수 있도록 하고 있습니다.
이메일 마케팅 담당자로서 우리 모두는 구독자의 받은 편지함에 훌륭한 이메일을 전달하기 위해 노력합니다. 우리는 스팸 테스트와 이메일 테스트를 실행하여 디자인이 모든 기기와 이메일 클라이언트에서 완벽하게 렌더링되는지 확인합니다. 그러나 때때로 우리는 이미지에 ALT 태그를 설정하는 것을 잊거나, 읽기 어려운 색상 조합을 사용하거나, 스크린 리더에 맞게 이메일을 최적화하지 못하여 일부 구독자를 소외시킵니다.
이메일 코드를 보다 쉽게 액세스할 수 있도록 만드는 작업을 막 시작했다면 일이 너무 많아질 수 있습니다. 그러나 쉽게 구현할 수 있고 이메일 접근성에 큰 영향을 미치는 몇 가지 간단한 트릭이 있습니다.
섹션별로 모든 구독자가 이메일에 액세스할 수 있는지 확인하는 방법은 다음과 같습니다 .
 | 이메일에 액세스할 수 있습니까?Litmus 체크리스트의 접근성 검사를 사용하면 주요 접근성 모범 사례에 대해 이메일을 쉽게 테스트하고 개선할 영역을 식별하며 모든 구독자가 이메일에 더 쉽게 액세스할 수 있습니다. 더 알아보기 → |
접근성 체크리스트
1. <HTML>에 언어 코드 추가
모든 구독자가 랩톱이나 휴대전화에서 이메일을 읽는 것은 아닙니다. 일부 구독자는 스크린 리더를 사용하여 이메일에 액세스합니다. 이메일 내용이 큰 소리로 읽혀지기 때문에 올바른 언어로 되어 있어야 발음이 정확합니다. 프랑스어로 작성된 이메일이 미국 영어로 발음되는 것을 원하지 않겠습니까?
이러한 일이 발생하지 않도록 하려면 이메일이 어떤 언어 로 작성 되었는지 스크린 리더에 알려야 합니다. 이메일에 언어 코드가 지정되어 있지 않으면 스크린 리더가 사본을 올바르게 발음할 수 없으며 유창한 이메일이 나올 수 있습니다. 완전히 잘못된 소리.
그렇기 때문에 <HTML>에서 이메일 언어를 지정하는 간단한 코드 조각인 언어 코드를 확인하는 것이 중요합니다. 코드에 아직 없으면 lang=“xx”를 추가하고 xx 를 이메일에 적합한 언어 코드로 바꿉니다 . 영국식 영어와 미국식 영어의 구별과 같이 다양한 액센트를 설명할 수 있는 모든 가능한 언어 코드 및 지역 목록은 여기 에서 찾을 수 있습니다 .
고려해야 할 몇 가지 특별한 경우가 있습니다.
- <HTML> 태그에 XML을 사용하는 경우 xml:lang=“xx” 도 추가해야 합니다 .
- 전자 메일 코드에 Outlook 120dpi 수정 사항을 포함하는 경우 언어를 지정 하려면 이 솔루션이 필요합니다 . 이 수정 사항이 적용된 코드는 다음과 같습니다.
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
전문가 팁: ESP 내에서 현지화를 설정했다면 언어 코드를 동적으로 채울 수 있습니다.
2. 이미지에 항상 ALT 태그를 포함하십시오.
이메일의 이미지가 구독자에게 항상 표시되지 않을 수 있다는 점을 염두에 두는 것이 중요합니다. 이미지가 꺼져 있거나 연결 상태가 좋지 않거나 스크린 리더를 사용하고 있을 수 있습니다. 이미지에 중요한 정보가 많이 포함되어 있으면 해당 메시지가 손실됩니다. 이것이 ALT 텍스트가 들어오는 곳입니다. 구독자에게 표시되는 텍스트를 설정하거나 구독자의 스크린 리더로 읽을 수 있도록 설정하여 이미지를 볼 수 있는 사람들과 동일한 메시지를 계속 받을 수 있습니다.
이메일 코드에 <IMG> 태그가 있는 경우 ALT 태그를 설정해야 합니다. ALT 태그를 이미 채운 경우 텍스트가 이미지의 텍스트와 일치하는지 다시 확인하십시오. 비어 있는 ALT 태그가 있는 경우 스크린 리더가 볼 수 있도록 채워야 하는 텍스트가 이미지에 없는지 확인합니다. ALT = "": 이미지에는 ALT 태그와 이미지 자체 또는의 의미에 필요한 텍스트가있는 텍스트가 존재하지 않는 경우는 빈 ALT 태그를 추가 할 수 있는지 이메일을-합니다. 이것을 포함하지 않으면 스크린 리더가 이미지의 URL을 읽어주므로 아무도 긴 URL을 읽어주는 것을 원하지 않습니다!
이메일의 이미지에 대해 모든 ALT 태그를 비어 있거나 설정하지 않은 경우 스타일이 지정된 ALT 텍스트 의 <IMG> 태그에 글꼴 스타일을 추가 합니다 . 이 스타일을 사용하면 ALT 텍스트를 멋지게 만들 수 있으며 글꼴, 색상, 크기, 스타일 및 두께의 모양을 변경할 수 있습니다.
3. 모든 <TABLE> 요소에 role=”presentation” 속성 포함
대부분의 이메일 마케팅 담당자는 표를 사용하여 이메일 레이아웃을 구성하지만 이는 스크린 리더에 심각한 문제를 일으킬 수 있습니다. 스크린 리더가 이메일 코드에서 테이블을 식별하면 하나의 테이블로 소리내어 읽습니다. 말 그대로 행과 열이 몇 개인지 알려주고 각 열의 위치와 내용을 알려주므로 메시지를 이해하는 것이 불가능합니다.
그렇기 때문에 화면 판독기에 테이블을 레이아웃 목적으로만 사용하고 있음을 알리는 것이 중요합니다. 이메일의 모든 테이블에 role="presentation" 을 추가 하면 됩니다. 이 역할은 화면 판독기에 테이블에서 의미론적 의미를 제거하도록 지시하므로 행 및 열 번호를 읽는 대신 내용에 초점을 맞춥니다.
우리 자신의 이메일 중 하나에서 매우 간단한 이메일 헤더를 살펴보겠습니다.
접근성을 최적화하기 전의 코드는 다음과 같았습니다.
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>ALT 속성이 없고 테이블이 role=”presentation”으로 설정되어 있지 않다는 것을 눈치채셨습니까 ?
이러한 작은 실수가 접근성에 큰 영향을 미칩니다. 스크린 리더가 위의 코드를 해석하는 방법은 다음과 같습니다.
스크린 리더: 액세스할 수 없는 이메일 헤더
다음은 스크린 리더 친화적이도록 <TABLE> 태그에 ALT=”” 속성과 role=”presentation” 을 추가하여 리팩토링된 동일한 코드입니다 .
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>스크린 리더: 액세스 가능한 이메일 헤더
듣던대로 확연히 차이가 나네요!
4. 의미론적 요소를 사용하여 콘텐츠 구조화
시맨틱 요소를 사용하면 구독자(및 화면 판독기)가 헤드라인과 단락 사본을 표시하여 콘텐츠 계층을 쉽게 강조 표시할 수 있습니다. 의미론적 요소를 포함하면 스크린 리더를 사용하는 구독자에게 이메일을 보다 쉽게 "스캔"할 수 있는 옵션이 제공됩니다.
사본을 다시 확인할 때 제목에 적합한 사본이 <H1> , <H2> , <H3> 등과 같은 <H> 태그로 묶여 있는지 확인하십시오 . 유사하게, 모든 본문 사본이 <P> 태그 내에 있는지 확인하십시오 . 이메일을 살펴볼 때 스크린 리더는 특정 헤더에 중점을 두고 이러한 <H> 및 <P> 태그를 설정하면 이메일을 더 쉽게 탐색할 수 있습니다.
5. 가능한 경우 복사본을 왼쪽 정렬합니다.
본문 텍스트의 경우 가운데 정렬을 하고 싶을 수 있습니다. 그러나 접근성과 관련 하여 이것은 큰 금지 사항입니다 !
텍스트를 중앙에 배치하면 모든 줄의 시작 가장자리가 변경되므로 구독자는 각 줄의 시작 부분을 찾기 위해 더 열심히 노력해야 합니다. 이는 난독증 및 기타 읽기 장애가 있는 사람들에게 어려운 문제입니다. 두 줄보다 긴 사본이 있는 경우 해당 사본을 왼쪽 정렬합니다. 좁은 너비는 종종 생각하는 것보다 더 많은 텍스트 행을 생성하기 때문에 이것은 모바일에서 특히 중요합니다. 모바일에서 반응형으로 텍스트를 왼쪽 정렬해야 할 수도 있습니다.
6. 사본의 대비 확인
이메일의 배경색에 대한 텍스트 색상의 명암비를 확인하십시오. 색상이 부족한 구독자가 있을 수 있으며 색상이 충분한 대비를 제공하지 않으면 이메일을 읽지 못할 수 있습니다. 명암비를 확인할 수 있는 두 가지 방법이 있습니다.
- HTML을 호스팅하고 사용할 URL을 생성할 수 있다면 이것이 제가 가장 좋아하는 색상 확인 방법입니다. http://www.checkmycolours.com/
- 색상 코드를 수동으로 입력해야 하는 경우 https://contrast-ratio.com/을 확인 하세요.
7. CTA, 링크 및 이미지에 대한 호버 효과 추가
Litmus에서는 클릭 가능성을 나타내기 위해 CTA, 링크 및 이미지에 호버 효과 를 사용 합니다. 호버 효과는 이메일을 더 매력적으로 만들고 구독자의 경험을 향상시킬 수 있는 간단한 대화형 요소입니다. 호버 효과는 AOL, Apple Mail, Gmail 및 Yahoo!에서만 지원됩니다. 메일은 널리 사용되는 효과이며 이메일 코드에 구현할 가치가 있습니다. 이미지를 흐리게 하고, CTA 버튼의 색상을 변경하고, 팝업 탭을 추가하는 등의 작업을 수행할 수 있습니다. 
Litmus Builder에서 전체 이메일 보기 →
더 많은 이메일 팁을 원하십니까?
 | 이메일 접근성에 대한 궁극적인 가이드이 가이드에는 능력에 상관없이 누구나 즐길 수 있는 이메일을 작성, 디자인 및 코딩하는 데 필요한 통찰력과 단계별 조언이 있습니다. 전자책 다운로드 → |
Litmus News에 가입하면 최고의 이메일 마케팅 및 디자인 팁, 통계 및 리소스를 받은 편지함으로 바로 받고 이메일 혁신의 선두에 서십시오.
최신 정보 확인 →