접근 가능한 이메일에 대한 궁극적인 가이드

이메일 마케팅 담당자로서 우리는 구독자에게 완벽한 이메일 경험을 제공하기 위해 노력합니다. 우리는 분석을 기반으로 이메일이 적시에 전송되고 전달 가능성을 모니터링하고 스팸 테스트를 실행하여 받은 편지함으로 전달되도록 합니다. 우리는 이메일이 수많은 기기와 모든 이메일 클라이언트에서 완벽하게 렌더링되도록 콘텐츠를 보다 관련성 있게 개인화하고 디자인을 수정합니다.

다음은 모두 이메일이 전환으로 이어지는지 확인하기 위한 권장 단계입니다. 그러나 시각, 신체 또는 인지 및 신경 장애가 있는 구독자의 상당수가 귀하의 이메일을 놓칠 수 있습니다.

모든 구독자가 이메일에 더 쉽게 액세스할 수 있도록 하려면 몇 가지 작은 단계만 거치면 됩니다. 이 게시물에서는 이러한 단계가 무엇이며 모든 사람에게 더 나은 이메일을 제공할 수 있는 방법에 대해 설명합니다.

이메일에 액세스할 수 있습니까? Litmus 체크리스트의 접근성 검사를 사용하면 주요 접근성 모범 사례에 대해 이메일을 쉽게 테스트하고 개선할 영역을 식별하며 모든 구독자가 이메일에 더 쉽게 액세스할 수 있습니다. 더 알아보기 →

접근성이란 무엇입니까?

접근성은 사용자 경험과 디자인의 기본 기둥 중 하나입니다. 이메일의 경우 장애가 있거나 사용 중인 보조 장치에 관계없이 모든 사람이 메시지를 수신하고 이해할 수 있도록 하는 것을 의미합니다.

이메일의 접근성은 지원이 열악한 이메일 클라이언트를 처리하는 것의 확장이라고 생각할 수 있습니다. 해결 방법 및 대체를 포함하면 모든 구독자가 긍정적인 경험을 얻을 수 있습니다.

이메일 개발자로서 우리는 시장 점유율이 1% 미만인 클라이언트에서 이메일이 제대로 보이도록 몇 시간을 소비하지만 이메일에 액세스할 수 있도록 만드는 데 몇 분을 할애하는 사람은 거의 없습니다.
– 마크 로빈스, Rebelmail

이메일 디자인의 접근성

접근성에 영향을 줄 수 있는 전자 메일의 시각적 측면과 개선할 수 있는 부분부터 살펴보겠습니다.

지능적으로 색상 사용

색맹이 있는 가입자는 이메일의 일부 색상을 구별하지 못할 수 있으므로 색상이 정보를 전달하는 유일한 방법이 아님을 확인하십시오.

색상 대비는 시각 장애가 있는 가입자에게 문제가 될 수도 있습니다. 이메일의 다양한 요소, 특히 사본과 배경색 간에 높은 색상 대비를 사용하십시오. 이를 수행하는 한 가지 방법은 WebAim의 색상 대비 검사기를 사용하여 이메일 색상의 대비 비율을 확인하는 것입니다.

이메일에 액세스할 수 있습니까? Litmus Email Previews에서 색맹 필터를 사용하여 시각 장애가 있는 사용자에게 이메일이 어떻게 보이는지 확인하십시오. 리트머스 무료 체험 →

유해한 콘텐츠를 만들지 마십시오

애니메이션 GIF와 같이 특정 속도로 또는 패턴으로 깜박이는 콘텐츠는 일부 개인에게 감광성 발작을 일으킬 수 있습니다. 콘텐츠를 깜박이거나 유사한 콘텐츠가 있을 수 있는 동영상에 대한 링크를 포함하지 마세요.

텍스트와 이미지의 균형

시각 사용자는 관련 없는 콘텐츠를 시각적으로 스캔하거나 건너뛸 수 있지만 시각 장애인 사용자는 이메일의 전체 콘텐츠를 한 번에 하나씩 들어야 합니다. 이메일의 작성된 내용을 조정하여 주요 메시지를 전달하십시오. 또한 디자인이 JAWS 또는 Window-Eyes와 같은 인기 있는 스크린 리더와 얼마나 호환되는지 고려하십시오.

이메일 가독성 향상

더 큰 글꼴 크기 사용

데스크탑이나 노트북 화면에서 14픽셀보다 작은 것은 읽기 위해 약간의 노력이 필요합니다. 사용자는 화면을 읽을 수 있도록 장치의 확대/축소 수준을 높일 수 있지만 이는 이메일에 부정적인 영향을 미칠 수 있으며 깨지거나 잘릴 수 있습니다.

텍스트는 모바일 장치에서 더 작게 표시될 수 있으므로 사용자가 전자 메일을 더 어렵게 읽을 수 있습니다. 미디어 쿼리를 사용하여 더 작은 장치에서 최소 글꼴 크기를 14픽셀에서 16픽셀로 늘리면 사용자가 이메일을 읽을 수 있습니다.

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

숨을 쉴 수 있는 복사 공간 제공

어떤 사람들에게는 카피 줄이 서로 가까이 있는 단락과 텍스트 블록을 읽기 어려울 수 있습니다. 모든 사람이 읽기 쉽도록 텍스트에 적절한 줄 높이를 설정합니다. 글꼴 크기보다 4픽셀 큰 줄 높이를 선택하는 것이 좋습니다.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

팁: 모바일 장치의 글꼴 크기를 늘릴 때 줄 높이도 높이는 것을 잊지 마십시오.

카피의 단락은 가독성을 돕기 위해 숨을 쉴 공간도 필요합니다. 이메일을 스캔할 때 단락을 쉽게 식별하고 제자리를 유지할 수 있어야 합니다. 단락 위와 아래에 충분한 공백을 만드십시오.

텍스트를 더 읽기 쉽게 만드는 또 다른 단계는 이메일 가장자리에서 멀리 옮기는 것입니다. 표 셀이나 단락 태그에 패딩을 추가하면 이를 달성하는 데 도움이 됩니다.

귀하의 이메일에서 정당한 사본을 피하십시오

"정렬" 복사는 텍스트가 왼쪽 및 오른쪽 여백과 같은 높이로 떨어지도록 문자 및 단어 간격이 조정됨을 의미합니다. 인쇄물에서는 일반적이지만 단어 간격이 일치하지 않으면 정렬된 사본을 읽기 어렵게 만들 수 있습니다. 왼쪽 정렬된 텍스트는 모두가 읽기 쉬운 것으로 입증되었습니다.

올바른 서체 선택

웹 글꼴의 사용으로 이메일에 사용할 수 있는 가능한 서체 풀이 늘어났지만 Lobster를 본문 글꼴로 사용하기로 결정하기 전에 Lobster가 얼마나 접근 가능한지 생각해 보십시오. 이메일의 서체를 선택할 때 간격이 고르고 너무 압축되지 않은 서체를 선택하십시오. 이는 접근성뿐만 아니라 모바일 사용자에게도 좋은 아이디어입니다.

시맨틱 요소 사용

의미론적 요소를 포함하면 스크린 리더를 사용하는 구독자에게 헤더로 이메일을 "스캔"할 수 있는 옵션이 제공됩니다. <p> 및 <h> 태그를 사용하여 이를 수행할 수 있습니다. 이러한 기능은 모든 클라이언트에서 지원되므로 전자 메일에 더 쉽게 액세스할 수 있도록 시작하는 것이 좋습니다.

역사적으로 <p> 및 <h> 태그의 스타일을 지정하는 것은 쉽지 않았기 때문에 이러한 태그가 이메일에서 사용되는 것을 보는 것은 여전히 ​​드문 일입니다. 이러한 태그 중 하나로 래핑된 텍스트 주변의 여백은 관리하기 어려웠지만 다음과 같은 코드를 사용하면 해당 공백을 제어할 수 있습니다.

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

팁: mso-line-height-rule:exactly 사용 <h> 태그에서 Microsoft Outlook 이메일 클라이언트에서 설정한 줄 높이 규칙을 유지합니다.

이메일 개발자 Paul Airy가 이메일에 시맨틱 HTML 요소를 사용하여 더 쉽게 액세스할 수 있도록 하는 이유와 방법을 설명하는 Litmus Live 2017의 이 클립을 시청하세요.

이 비디오 트윗 →

Litmus Live의 전문가로부터 배우십시오. Litmus Live 컨퍼런스에 참여하여 실제 조언, 모범 사례 및 실용적인 정보를 통해 더 나은 이메일 마케팅 담당자가 되십시오. 더 알아보기 →

읽을 수 있는 복사본 쓰기

더 접근하기 쉽고 읽기 쉬운 이메일을 만드는 것은 이메일이 코딩되는 방식뿐만 아니라 사본이 작성되는 방식에 달려 있습니다. 이메일 사본을 보다 인간적으로 만들면 가독성이 향상되고 귀하와 구독자 간의 1:1 커뮤니케이션을 구축하는 데 도움이 됩니다.

Flesch-Kincaid 읽기 용이성 테스트로 알려진 가장 인기 있는 테스트는 Microsoft Word에서 찾을 수 있으며 콘텐츠가 0-100의 척도로 읽기 쉬운 정도를 계산합니다. 그 의미는:

• 90-100점은 11세 학생이 쉽게 이해할 수 있습니다.
• 60-70점은 13-15세 학생이 쉽게 이해할 수 있습니다.
• 30-50점은 대학생이 이해할 수 있습니다.
• 0-30점은 대학 졸업생이 더 잘 이해할 수 있습니다.

무언가를 더 "가독성 있게" 만드는 것이 까다로운 주제나 무거운 주제를 피하는 것을 의미해서는 안 됩니다. 글을 멍청하게 만드는 것이 아니라 텍스트의 접근성을 나타냅니다. 당신의 스위트 스폿은 일반 청중을 사로잡기 위해 60에서 70 사이입니다. 물론 청중이 교육 수준이 높으면 더 복잡한 언어를 사용하는 것을 두려워하지 마십시오.

사본을 직접적이고 요점으로 편집하여 가독성을 높일 수도 있습니다.

접근 가능한 콘텐츠 만들기

링크를 클릭 가능/탭 가능하게 만들기

방탄 버튼의 크기가 모바일 장치에서 엄지손가락과 손가락으로 사용할 수 있을 만큼 충분히 큰지 확인하면 이메일 접근성에도 도움이 됩니다. 더 큰 버튼은 정밀하게 마우스를 제어할 수 없는 사람들에게 도움이 될 것입니다.

나는 큰 단추를 좋아하고 거짓말을 할 수 없습니다.
– 저스틴 조던, 리트머스

Apple의 iPhone 휴먼 인터페이스 지침에서는 버튼의 최소 너비와 높이를 44픽셀로 권장하지만 이 수치는 모바일 장치 공급업체에 따라 다릅니다. 엄지손가락의 평균 픽셀 너비인 72픽셀의 최소 너비와 높이를 사용하는 방법도 있습니다.

"여기를 클릭" 링크 복사 금지

링크 사본으로 "여기를 클릭하십시오"를 사용하지 마십시오. 스크린 리더 사용자는 종종 콘텐츠를 탭하여 이메일을 스캔하는 방법으로 건너뜁니다. 링크 컨텍스트를 제공하면 이러한 사용자가 클릭할 것인지 여부를 결정하는 데 도움이 됩니다.

예를 들어 신발 제품 목록으로 연결되는 링크가 있는 경우 "신발 더 보기"와 같은 링크 카피를 사용하면 스크린 리더 사용자가 링크의 모호성을 줄일 수 있습니다. 링크의 모호성을 줄이는 것은 링크를 둘러싼 컨텍스트를 읽을 필요가 없기 때문에 모든 구독자에게 유용합니다.

접근성을 위한 것일 뿐만 아니라 "여기를 클릭하십시오" 링크를 제거하면 이메일 콘텐츠가 더 장치 독립적으로 이동합니다. 랩톱이나 데스크톱을 사용하는 구독자에게는 "여기를 클릭하세요"가 의미가 있을 수 있지만 탭핑이 필요한 작업인 모바일 장치나 태블릿을 사용하는 사람에게는 적합하지 않습니다.

ALT 속성을 올바르게 사용하십시오

ALT 속성은 기본적으로 이미지를 차단하는 이메일 클라이언트로 인해 HTML 이메일의 시작부터 이메일 모범 사례였습니다. 이미지에 첨부된 ALT 속성에 사용된 텍스트는 이미지가 로드되지 않을 때 표시됩니다. 이렇게 하면 구독자가 이메일 클라이언트에서 기본적으로 이미지가 꺼져 있거나 스크린 리더를 사용하여 이메일을 읽는 경우 이메일을 "볼" 수 있습니다.

ALT 속성을 올바르게 사용하려면 이미지를 둘러싼 내용과 관련하여 이미지의 컨텍스트를 완전히 이해해야 합니다. 먼저 이미지가 기능적인지, 설명적인지 또는 장식적인지 결정해야 합니다.

모든 이미지에는 ALT 속성이 필요하므로 화면 판독기에서 읽을 필요가 없거나 구독자에게 중요한 것을 나타낼 필요가 없는 이미지에는 null ALT 속성을 사용해야 합니다.

ALT 속성이 필요한 이미지와 null 속성을 가질 수 있는 이미지를 결정하는 데 도움이 되도록 모든 이미지를 끈 상태로 이메일을 확인하세요.

컨텍스트가 이미지에 대한 ALT 속성의 사용을 알리는 방법을 더 자세히 이해하려면 ALT 속성에 대한 WebAim 페이지를 방문하세요.

모든 프레젠테이션 테이블에서 role="presentation" 사용

이메일 디자인에서 테이블은 내용을 담고 이메일 디자인을 구성하는 데 사용됩니다. 테이블은 디자인에 사용하도록 의도된 것이 아닙니다. 그러나 Outlook과 같은 이메일 클라이언트의 제한으로 인해 이메일 디자이너는 <table> 요소를 디자인 요소로 사용해야 했습니다.

화면 판독기가 콘텐츠를 포함하는 <table> 요소와 순수하게 디자인을 위한 요소 간의 차이점을 이해하도록 돕기 위해 구독자가 읽어야 하는 콘텐츠가 포함된 각 테이블에 add role="presentation"을 사용합니다. 모든 <td>가 아니라 각 <table> 요소에만 추가하면 됩니다. 이렇게 하면 화면 판독기가 테이블의 각 셀을 한 번에 하나씩 읽도록 강제하는 것을 방지하고 구독자가 중요한 콘텐츠를 바로 볼 수 있습니다.

role=”presentation” 외에도 aria-hidden=”true”는 시각적 콘텐츠용이며 화면 판독기에서 숨겨야 하는 HTML의 요소에 추가할 수 있는 또 다른 HTML 속성입니다.

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="presentation"은 이미지에도 사용할 수 있습니다. 이메일 개발자 Remi Parmienter는 MacOS용 스크린 리더 애플리케이션인 VoiceOver 사용자를 위해 Chrome에서 몇 가지 비정상적인 동작을 발견했습니다. ALT 속성이 있지만 비어 있는 경우에도 VoiceOver가 이미지의 파일 이름을 읽기 시작했습니다. 이미지 이름을 읽지 않으려면 ALT 속성이 비어 있는 이미지에 HTML 속성 role="presentation"을 사용하는 것이 좋습니다.

실행 중인 액세스 가능한 이메일

도전과제 너머를 바라보면 접근성 수준을 구현할 수 있습니다. 할 수 없는 것이 아니라 할 수 있는 것에 집중하세요.
– 폴 에어리, Beyond Envelope

Litmus 커뮤니티 회원은 커뮤니티 콘테스트에 참여하여 액세스 가능한 이메일을 작성했습니다. 제출물은 새로운 청중에게 이메일을 공개하기 위해 취할 수 있는 작은 단계를 보여줍니다.

이 이메일의 구독자는 이메일 디자인을 손상시키지 않고 브라우저를 통해 텍스트 크기를 최대 200%까지 늘릴 수 있습니다. 그리고 광과민성 발작으로 고통받는 사람들을 위해 3주기(5초 이내) 후에 멈추는 애니메이션 GIF를 제공합니다.

Eyal Bitton은 문맥에 맞지 않는 링크에 대해 사본을 사용하는 이메일을 만들었으며 Eyal은 숨겨진 텍스트를 사용하여 시각 장애인 구독자에게 이메일의 끝을 알립니다.

Type E의 뉴스레터는 가입자가 표준 또는 큰 텍스트 크기를 선택할 수 있도록 대화식 점진적 향상 기능을 사용합니다. 이메일 개발자 Paul Airy는 가입자가 특정 장애가 있는 경우 배경색이 있는 이메일을 표시하도록 선택할 수 있는 옵트인 방식의 옵션도 포함했습니다.

이러한 이메일은 이메일에 더 쉽게 접근할 수 있고 잠재적으로 더 많은 청중에게 도달하는 데 몇 가지 작은 단계만 거치면 된다는 것을 보여줍니다. 이러한 단계 중 다수는 접근성을 지원할 뿐만 아니라 모든 사람의 이메일을 개선하는 데도 도움이 됩니다.

이미지를 켜고 끄는 이메일 미리보기

이미지 오프 보기를 포함하여 60개 이상의 데스크톱, 모바일 및 웹메일 클라이언트에서 이메일이 어떻게 보이는지 보고 싶으십니까? Litmus를 무료로 사용해 보세요!

지금 테스트 시작 →

이메일 접근성에 대한 궁극적인 가이드 이 가이드에는 능력에 상관없이 누구나 즐길 수 있는 이메일을 작성, 디자인 및 코딩하는 데 필요한 통찰력과 단계별 조언이 있습니다. 전자책 다운로드 →