간단한 3단계로 모든 사람을 위한 이메일을 만드는 방법: 웨비나 녹음 + Q&A

이메일 접근성은 2019년 가장 인기 있는 이메일 디자인 트렌드 중 하나로 선정되었으며 현재 대다수 브랜드의 우선 순위입니다. 그러나 많은 마케터가 이메일을 보다 포괄적으로 만드는 방법을 모르는 것도 사실입니다.

접근성 모범 사례를 구현하는 것은 생각보다 쉽습니다. 이 웨비나에서는 Litmus의 접근성 전문가인 Jason Rodriguez와 Alice Li가 접근성에 대한 투자가 가치가 있음을 증명하는 통계 및 연구를 살펴보고 모두를 위한 더 나은 이메일을 만들기 위해 취해야 할 3단계를 공유합니다.

웨비나를 생중계로 볼 기회가 없으셨나요? 걱정하지 마세요. 언제든지 전체 녹음 에 액세스할 수 있으며 아래 Q&A를 읽을 수 있습니다.

Q&A

웨비나 중에 질문을 해주신 모든 분들께 진심으로 감사드립니다! 다음은 가장 인기 있는 질문에 대한 답변과 라이브 웨비나에서 얻지 못한 질문에 대한 요약입니다. 추가 질문이 있습니까? 댓글에 남겨주세요.

인지적 한계를 어떻게 설명합니까?

베티나 : 기억력에 문제가 있거나 난독증이나 자폐증에 주의를 기울이는 데 어려움을 겪는 등 다양한 유형의 인지 장애가 있습니다. 이러한 각 조건은 고유하지만 이 웨비나의 카피라이팅 및 디자인 섹션에 있는 팁을 따르면 인지 장애가 있는 사람들이 이메일에 더 쉽게 액세스할 수 있습니다. 예를 들어, 이메일 사본을 명확하고 간결하게 유지하고 어려운 단어나 전문 용어를 사용하지 마십시오. 레이아웃을 단순하게 유지하고 구독자가 이메일을 쉽게 스캔하고 중요한 것과 그렇지 않은 것을 빠르게 이해할 수 있도록 명확한 시각적 계층 구조를 개발하십시오.

가장 많이 사용되는 스크린 리더는 무엇입니까? 어떻게 테스트합니까?

Alice: 가장 인기 있는 두 가지 스크린 리더는 NVDA 와 JAWS 입니다. NVDA는 NV Access에서 개발한 무료 오픈 소스 도구입니다. 그들은 시각 장애가 있는 사람들이 기술에 더 쉽게 접근할 수 있도록 하는 데 전념하는 놀라운 조직입니다. JAWS는 인기 있는 구독 기반 화면 읽기 도구입니다.

이메일이 스크린 리더에서 어떻게 들리는지 이해하기 위해 소프트웨어를 설치하고 싶지 않다면 Litmus를 사용할 수 있습니다! 최근 NVDA를 Litmus에 통합하여 이제 Litmus Checklist 내에서 바로 이메일의 오디오 미리 보기를 들을 수 있습니다. 더 알아보세요.

또한 모든 최신 운영 체제는 일종의 기본 화면 읽기 지원도 제공합니다. 예를 들어 Mac에서는 VoiceOver 입니다.

접근성을 위해 이메일을 최적화하는 데 큰 역할을 하는 브랜드는 무엇입니까? 영감을 받고 싶습니다!

Jason : 내가 가장 좋아하는 것 중 하나는 deque 입니다. 그들은 접근성 교육을 많이 하고, 멋진 블로그와 훌륭한 이메일을 가지고 있습니다! 그들의 이메일은 접근성 모범 사례를 따를 뿐만 아니라 주제에 대해 배우는 데 도움이 되는 훌륭한 콘텐츠를 제공합니다. 당신은 그들의 뉴스 레터에 가입 해야합니다 !

자만하게 들릴지 모르지만 나는 Alice와 이메일 팀이 Litmus 뉴스레터 에서 한 작업에 깊은 인상을 받았습니다 . 아름답게 디자인되었을 뿐만 아니라 이메일 접근성에 대한 궁극적인 가이드에서 논의된 모범 사례를 기반으로 액세스할 수 있도록 많은 노력을 기울였습니다.

"Alexa" 또는 "Siri"와 같은 도구가 다른 스크린 리더와 어떻게 다른지에 대한 통찰력이 있습니까? 아니면 Outlook의 "소리내어 읽기" 기능이 있습니까?

Jason : Delivering 팟캐스트 의 최근 에피소드에서 저는 음성 비서에 대해 자세히 알아보았습니다. 나는 Alexa가 당신의 이메일 을 진정으로 읽는 유일한 사람이라는 것을 알았 습니다. 그러나 그것은 HTML 텍스트만 읽을 것이고, 모든 alt 속성, 테이블 또는 다른 HTML 요소를 무시할 것입니다. 스크린 리더가 이메일을 처리하는 방식과 다릅니다. 음성 어시스턴트는 접근성을 위한 것이 아니라 편의를 위한 것이므로 예를 들어 NVDA와 같은 완전한 스크린 리더와 같은 방식으로 작동하지 않습니다. 대부분의 경우 콘텐츠를 탐색하려면 여전히 휴대전화나 노트북이 필요하며 음성 도우미는 사용자만 지원합니다. Alexa, Google Home, Siri 및 Cortana가 이메일을 처리하는 방법에 대한 전체 개요를 보려면 이 팟캐스트 에피소드를 시청하십시오 .  

애니메이션 GIF는 어떻습니까? 사용하거나 사용하지 않습니까? 독자들에게 문제를 일으키나요?

앨리스 : 사용할 수는 있지만 사용에 주의하세요. 애니메이션은 감광성 간질 발작을 유발할 수 있으므로 너무 거슬리거나 번쩍이는 GIF를 포함하고 싶지 않을 것입니다. 또한 GIF에 복사와 같은 중요한 정보를 포함하고 싶지 않습니다. GIF에 숨겨진 사본은 스크린 리더에서 액세스할 수 없으며 이미지가 비활성화된 이메일 클라이언트에는 표시되지 않으므로 메시지의 중요한 부분을 잃을 위험이 있습니다.

액세스 가능한 이메일 템플릿의 예는 어디에서 찾을 수 있습니까?

Jason : 무료 템플릿이 너무 많지만 접근성을 염두에 두고 최적화된 템플릿은 많지 않습니다! 그렇기 때문에 최근 접근성 모범 사례를 따르는 4개의 새로운 템플릿을 만들었으며 Litmus Community 에서 무료로 사용할 수 있습니다 . 만들고 싶다면 템플릿을 확인하세요…

• 접근 가능한 뉴스레터
• 접근 가능한 개인 메모
• 액세스 가능한 거래 이메일
• 접근 가능한 제품 발표

이모티콘을 사용하면 접근성에 어떤 영향을 미치나요?

Jason: 대부분의 스크린리더는 이모티콘을 이해하고 읽을 수 있지만 사용자에게는 최적의 경험이 아닐 수 있습니다. 이모티콘이 있는 이 예제 제목 줄을 읽는 NVDA를 들어보겠습니다.

올해 최대 매출

텍스트 옆에 이모티콘이 얼마나 분리된 소리로 들리는지 들을 수 있습니다. 이모티콘은 이제 흔하고 보조 기술 사용자는 이모티콘을 듣는 데 익숙하지만 이모티콘에 따라 여전히 어색하게 들릴 수 있습니다. 이메일의 다른 요소나 사본과 마찬가지로 작동 여부를 확인하는 가장 좋은 방법은 NVDA 또는 Litmus Accessibility Checker와 같은 도구를 사용하여 테스트하고 이메일을 듣는 것입니다.

DIV에도 "role=presentation"을 적용해야 하나요?

앨리스 : 아니! role="presentation" 은 스크린리더에게 태그의 의미론적 의미를 무시하도록 지시하기 위한 것일 뿐입니다. 따라서 그래프와 같은 테이블 형식 데이터는 사람들이 태그를 올바르게 탐색하고 이해하기 위해 모든 열과 행 정보를 필요로 하기 때문에 테이블이 필요합니다. 이메일에서 개발자는 표 형식 데이터 대신 프레젠테이션을 위해 표에 의존하는 경우가 많습니다. 이것이 표가 필요한 이유입니다. 반면에 DIV에는 스크린리더가 재정의해야 하는 의미론적 의미가 없습니다.

이미지 기반 이메일 사용을 주장하는 고객의 경우 따라야 할 모범 사례가 있습니까?

베티나 : 힘든 일이야! 전체 이미지 이메일을 보내는 것이 끔찍한 생각인 이유는 셀 수 없이 많습니다. 따라서 첫 번째 단계로 이 접근 방식이 끔찍한 구독자 경험을 제공한다는 것을 고객에게 확신시키기 위해 할 수 있는 모든 일을 하십시오. 이미지 전용 이메일을 보내지 말아야 하는 이유 에 대한 블로그 게시물 에는 귀하의 사례를 만드는 데 도움이 되는 많은 통찰력과 팁이 있습니다.

클라이언트를 올바른 길로 인도할 방법이 없다면 ALT 텍스트를 사용하여 이미지 오프 보기를 최적화하고( 해당 ALT 텍스트의 스타일을 지정할 수도 있음 ) 방탄 버튼 을 사용하여 최소한 CTA가 이미지가 비활성화된 경우에도 여전히 작동합니다.

웹 글꼴을 사용하면 접근성에 영향을 줍니까?

Alice : 코드 관점에서 보면 안됩니다. 디자인 관점에서 이는 웹 글꼴과 웹 안전 폴백이 모두 읽을 수 있도록 명암비 표준을 충족하는지 항상 확인해야 함을 의미합니다. 예를 들어 웹 글꼴이 대체보다 두꺼운 경우 대체가 Gmail과 같은 사용자에게 대신 표시될 수 있으므로 대체가 대비 비율 점수도 통과하는지 확인하세요.

코드 템플릿에서 변경하지 않은 한 가지는 머리글이나 단락에 의미 체계 요소를 사용하는 것입니다. 현재 텍스트의 테이블 셀에 스타일을 지정합니다. 접근성에 어떤 문제가 나타날 수 있습니까?

Alice : 텍스트를 감싸는 테이블이 불필요한 스크린리더 소음을 억제하기 위해 이미 "presentation" 또는 "none"으로 설정된 역할이 있다고 가정합니다. 따라서 해당 문제 외에도 올바른 제목/단락 태그를 사용하지 않으면 보조 장치에 탐색 문제가 발생할 수 있습니다. 일부 기술은 사용자가 마치 목차인 것처럼 제목에서 제목(및 관련 단락)으로 건너뛸 수 있기 때문입니다.

중괄호, 따옴표, 앰퍼샌드 등과 같은 특수 문자를 화면 판독기로 읽을 수 있습니까?

앨리스 : 따라 다릅니다. 앰퍼샌드는 종종 "and"로 읽습니다. 큰 따옴표와 둥근 아포스트로피는 큰 소리로 읽을 때 발음하지 못하는 것처럼 무시됩니다. 글머리 기호가 "글머리 기호"로 읽히는 것처럼 다른 특수 문자는 경우에 따라 고려됩니다. 나는 일반적으로 항상 테스트하는 것이 좋습니다.

접근성을 위한 텍스트 서식 지정에 대한 제안 사항이 있습니까? 섹션 사이에 여러 "=" 또는 "-" 나누기를 사용합니다. 어떻게 처리됩니까?

Alice : 대시와 밑줄은 잘 읽히지 않는 경향이 있으므로 괜찮습니다. 그러나 스크린 리더는 "등호" 기호를 읽을 것이므로 피하는 것이 좋습니다.