이메일 접근성 지침: 표준 및 모범 사례

주위를 둘러보고 무슨 일이 일어나고 있는지 들어보십시오. 풀 컬러 모드에서 모든 것이 선명하게 보입니까? 그리고 소음과 목소리가 잘 들리나요? 축하합니다, 당신은 확실히 운이 좋은 사람입니다. 게다가 당신은 정말로 행복한 사람입니다. 당신은 시각과 청각이 있습니다!

이러한 능력이 모든 사람에게 기본적으로 주어지며 일반적이라고 생각할 수 있습니까? 연락처 목록에 있는 수신자 중 4.5%가 색맹으로 인해 이메일 내용을 읽거나 이해하기 어렵다고 말하면 어떻게 될까요?

색맹만이 널리 퍼진 장애는 아니지만. 단순한 사실: 전 세계적으로 2억 8,500만 명이 콘택트 렌즈나 안경을 착용해도 시력에 문제가 되는 심각한 시각 장애를 앓고 있습니다.

그리고 지구 인구의 5%는 청각 장애가 있습니다. 즉, 360만 이상입니다.

생각해 볼 문제입니다. 우리는 그 모든 사람들을 무시할 수 없습니다. 우리는 그들에게 친절하고 그들의 삶을 더 좋게 만들기 위해 최선을 다해야 합니다. 이것이 바로 접근성에 관한 것입니다.

이제 차나 커피 한 잔을 만들고 세부 사항을 살펴보겠습니다.

이메일 접근성이란 무엇을 의미합니까?

심각한 시각 장애 또는 완전한 실명으로 고통받는 사람들이 있습니다. 그들은 받은 편지함 이메일을 음성화하기 위해 화면 읽기 소프트웨어(VoiceOver, Microsoft Narrator 및 기타 유사한 도구)를 사용하고 있습니다. 따라서 우리의 의무는 이러한 조수에 맞게 콘텐츠를 조정하는 것입니다.

색맹과 관련하여, 원시(사람들이 특정 색을 구별할 수 없을 때)에서 단색에 이르기까지 이러한 조건을 가진 사람들을 돕는 도구는 없습니다. 따라서 이메일 이미지를 직접 최적화해야 합니다.

다른 사람들은 청각 장애, 난독증 등을 앓고 있습니다. 따라서 각 유형의 장애에 대한 접근성 규칙 세트가 있습니다. 따라서 우리는 제목의 질문에 대한 답변에 도달했습니다.

간단히 말해서 모든 유형의 특수 요구 사항을 가진 사람들이 이메일을 읽을 수 있도록 하는 표준을 고수한다는 의미입니다. 다행히도 최신 HTML 이메일 템플릿 빌더 및 기타 마케팅 소프트웨어는 특별한 기술 없이도 이러한 표준을 아주 쉽게 구현할 수 있는 고급 도구를 제공합니다.

아래에서 이러한 표준과 액세스 가능한 이메일을 만드는 데 도움이 될 몇 가지 방법을 공유하겠습니다.

접근성 기준

그러므로 친애하는 친구 여러분, 모든 유형의 시각, 청각 및 지각 기능 장애가 있는 수신자가 쉽게 읽을 수 있는 "보편적인" 이메일을 보내기 위해 따라야 하는 이러한 권장 사항 세트를 하나씩 탐색할 때입니다.

1. 색맹

색맹 유형 목록이 있습니다. 여기 있습니다:

Protanopia 는 붉은 색의 기능 상실을 의미합니다. 적색맹으로 알려진 적색맹을 가진 독자는 검은색을 모든 빨간색 음영과 혼동하는 경향이 있습니다. 그들은 또한 짙은 갈색과 짙은 녹색을 구별하지 못하며 파란색과 빨간색의 중간 diapason 사이에 차이가 없습니다. Uber에서 보낸 다음 이메일을 살펴보세요.

그리고 이것은 protanopia가 있는 수혜자들이 그것을 보는 방법입니다:

Deuteranopia 는 녹색에 대한 감소된 인식입니다. 이 사람들은 또한 중간 빨강/녹색 디아파손, 밝은 녹색/황색 및 밝은 파란색/라일락 색상을 혼동하는 경향이 있습니다. 다시 한 번 동일한 이메일을 살펴보십시오. 왼쪽은 원본이고 오른쪽은 듀테라노피아 버전입니다.

Tritanopia 는 파란색과 그 음영에 대한 실명을 의미합니다. 이것이 이 장애로 고통받는 사람들이 일반적으로 밝은 파란색/회색 및 진한 자주색/검정색을 혼동하는 이유입니다. 동일한 이메일 샘플이지만 오른쪽에서 이에 대한 tritanopia 인식을 볼 수 있습니다.

단색 은 전체 색맹에 대한 것입니다. 이 사람들은 검은색, 흰색 및 다양한 회색 음영으로만 칠해진 현실을 볼 수 있습니다. 다른 색상은 없습니다. 아주 오래된 TV 화면의 세상을 상상해 보십시오. 모노크롬은 이렇게 생겼습니다. 진심으로 소름이 돋습니다.

우리는 무엇을 해야 합니까?

• 이메일 사본의 글꼴 크기는 14픽셀 이상을 선택하십시오. 그러나 수신자에게 접근 가능한 이메일 디자인을 제공하려면 16px를 권장합니다.
• 색맹 고객이 구별할 수 없는 색상을 기반으로 한 대비 솔루션을 피하십시오. 예를 들어, 빨간색 또는 라일락 배경 위에 녹색 또는 파란색 텍스트로 사본을 작성하지 마십시오. 아래 메시지를 보십시오. 색지각 능력이 뛰어난 사람은 괜찮습니다만... 원시색이나 단색시도 괜찮을까요? 나는 그렇게 생각하지 않는다…

(원본 메시지)

(프로타노피아가 있는 고객이 볼 수 있는 방법입니다.)

(흑백이 이 메시지를 보는 방식)

좋아하는 팀이 경기에서 이기거나 졌는지 어떻게 이해해야 할까요?

• 빨간색 사진 위에 녹색 버튼을 추가하거나 그 반대의 경우도 마찬가지입니다. 위에서 언급한 모든 "위험한" 색상 조합에 대해서도 마찬가지입니다. 아이디어는 정말 좋지 않습니다. 색상 인식 기능이 제대로 작동하지 않는 사람들은 버튼을 전혀 알아차리지 못할 수도 있습니다.
• 항상 대괄호 안에 제품의 색상을 지정하십시오. 고객은 예를 들어 빨간색을 구별하지 못할 수 있지만 빨간색 셔츠나 드레스가 자신의 이미지와 완벽하게 일치한다는 것을 알고 있습니다.
• 이메일의 링크를 굵게 만드십시오.

예, 링크 텍스트의 일반 파란색으로는 충분하지 않습니다. 색맹 사용자 때문만은 아닙니다. 태양이 스마트폰 화면에 무자비하게 비칠 때 거리에서 이메일을 읽은 적이 있습니까? 그러면 색상을 구별하기가 전혀 어렵습니다. 따라서 링크를 굵게 표시하고 밑줄을 긋지 마십시오. 왜요? 밑줄을 그으면 난독증이 있는 사람들의 주의가 산만해질 수 있기 때문입니다. 난독증에 대해서는 잠시 후에 자세히 다루겠습니다.

이 이메일에서 메뉴 항목도 굵게 표시됩니다. 이 간단한 아이디어는 뉴스레터 내에서 고객의 탐색을 최적화합니다. 원하는 아파트 카테고리를 쉽게 찾을 수 있습니다.

화살표가 있는 "세부 정보 보기" 링크를 확인하십시오. 클릭하면 자세한 내용을 볼 수 있다고 합니다.

캠페인에서 상호작용 요소를 추가하거나 테스트를 실행하는 경우 녹색/짙은 빨간색/밝은 파란색을 선택하여 정답을 강조 표시합니다. 그리고 빨간색/검정색/회색은 각각 잘못된 것입니다. 텍스트와 함께 예/아니오 답변을 복제해야 합니다.

이메일이 색 부족으로 고통받는 사람들의 요구 사항에 맞는지 확인하는 것은 정말 중요합니다. 귀하의 편의를 위해 이 표를 우리 게시물에 추가하고 싶습니다. 일치하는 색상을 찾고 혼동을 피하기 위해 저장합니다.

색맹 수신자가 사진을 인식하는 방식으로 사진을 보여주는 무료 색맹 시뮬레이터 도구도 있습니다.

보시다시피, 색상 테스트는 너무 복잡하지 않습니다. 그냥 무시하지 마십시오. 모든 가입자에 대한 관심을 보여주십시오. 잘 지내.

2. 실명 및 심각한 시각 장애

다음 장은 시각 장애인 및 부분시력인을 위한 접근성 표준에 전념합니다. 이 규칙은 모두 시각 장애에 관한 것이기도 하지만 여기의 원칙과 해결책은 완전히 다릅니다. 이 경우 색 구성표나 대비 조합이 도움이 되지 않을 수 있습니다. 접근성 과학의 이러한 측면은 화면 읽기 소프트웨어 사용을 기반으로 합니다.

결과적으로 우리의 임무는 이러한 도구에 맞게 이메일을 조정하는 것입니다. 다시 말해 이러한 도구에서 이메일을 읽을 수 있도록 만들어야 합니다.

여기서 특별히 주의해야 할 점은 무엇입니까?

메일 제목

일반적으로 스크린 리더는 제목에서 이메일을 읽기 시작합니다.

따라서 일반적으로 받아 들여지는 규칙은 간단하면서도 효과적입니다. 제목 줄을 간단하고 설명적으로 만드십시오. 좋은 주제는 메시지의 핵심 본질을 설명해야 합니다.

언어 설정

이메일 사본에서 언어 설정을 구성하는 것은 정말 중요합니다. 이 작업은 약간의 노력이 필요하고 이메일 사본으로 작업하지만 그만한 가치가 있습니다. 문제는 이러한 설정을 무시하면 화면 판독기에서 음성으로 나오는 이메일 텍스트가 끔찍하게 들릴 수 있다는 것입니다. 반지의 제왕에 나오는 오크들의 대화 같은 것

이를 방지하려면 이메일 코드에 해당 언어를 지정하십시오(사용 가능한 경우).

논리적 순서

스크린 리더는 이메일을 발음하는 방법에 대해 엄격한 순서를 가지고 있습니다. 왼쪽에서 오른쪽으로 컨테이너와 블록을 읽고 다음 줄로 진행합니다.

접근성을 제공하려면 HTML 코드에서 <h1> , <h2> , <p> 등과 같은 헤더 태그를 지정하십시오. 이러한 태그는 일반 텍스트보다 우선 순위를 추가하므로 이러한 요소가 먼저 음성화됩니다.

또한 태그를 지정할 때 글꼴 크기는 중요하지 않습니다. 위의 예에서 제목 2 글꼴 크기는 24px이고 일반 복사 글꼴은 27px보다 큽니다. 그러나 스크린 리더는 제목 2를 먼저 발음합니다.

대체 텍스트

오늘날 AI 기술은 꾸준히 발전하고 있습니다. 그러나 스크린 리더 도구는 여전히 이메일에 있는 사진을 "보고" 설명할 만큼 똑똑하지 않습니다. 아마도 가까운 장래에... 요즘은 이러한 유틸리티가 이미지에 추가하는 대체 텍스트(일명 Alt 텍스트)만 읽을 수 있습니다.

대체 텍스트를 접근성 표준에 맞게 조정하는 방법은 무엇입니까? 당신이 추측한 것이 맞습니다. 이 텍스트를 간결하고 설명적이며 유익하게 만드십시오. 한 가지 유용한 참고 사항: 이 텍스트에서 "이미지"라는 단어를 사용하지 마십시오. 이미지 태그가 이미 지정하고 있으므로 복제된 "이미지 이미지..."를 듣는 것이 이상할 것입니다.

링크, CTA 항목, 소셜 아이콘

링크는 가능한 한 간결하고 유익해야 합니다. 일반 텍스트를 추가하고 스크린 리더가 이 텍스트를 음성으로 변환한다는 것을 기억하십시오! 클릭을 통해 받는 사람에게 무엇을 제공하고 어디로 갈지 알립니다.

다음 링크를 살펴보십시오.

첫 번째 링크는... 어... 진지하게, 나는 그것이 얼마나 오싹하게 들릴지 상상하기가 두렵습니다. 두 번째는 웹 사이트, 게시 날짜 및 게시물 제목을 명확하게 지정합니다.

CTA 버튼과 소셜 미디어 아이콘도 마찬가지입니다. 사실, 이 아이템들도 미학적으로 매력적인 시각적 형태로 싸인 하이퍼링크입니다. 모든 숙련된 이메일 마케터는 그들에게 가장 세심한 주의를 기울이고, 디자인과 효과에 대해 작업하고, 클릭을 생성하기 위해 완벽한 색상 솔루션을 선택합니다…

그러나 시각 장애인을 위한 스크린 리더 및 접근성과 관련하여 여기서 중요한 것은 텍스트뿐입니다. 임무를 완수할 수 있을 만큼 눈에 띄게 만드세요. 구독자가 버튼을 클릭하도록 유도하세요.

이메일에서 CTA 버튼이 표시되는 방식은 다음과 같습니다.

그러나 화면 읽기 도구는 모든 디자이너 트릭과 놀라운 호버 효과에 대해 날아가는 오리를 제공하지 않습니다. 소프트웨어에서 볼 수 있는 것은 텍스트뿐입니다. 다른 건 없습니다. 따라서 텍스트가 자체적으로 작동하는지 확인하십시오.

소셜 미디어 아이콘과 관련하여 받은 편지함 이메일을 "듣는" 일부 구독자는 이러한 아이콘에 적용되는 약어를 이해하지 못할 수 있습니다. 따라서 이러한 항목에 대한 설명 대체 텍스트를 작성하십시오.

실명에 관한 모든 것입니다. 한 가지 더 중요한 참고 사항: 스크린 리더는 오늘날 심각한 시각 장애가 있는 사람들만 사용하는 것이 아닙니다. 수백만 명의 수신자가 바쁠 때, 거리에서, 차 안에서 등을 통해 받은 편지함 전자 메일을 듣고 있습니다. 따라서 이러한 접근성 측면은 상상할 수 있는 것보다 훨씬 더 중요합니다.

3. 난독증

난독증을 앓고 있는 사람들은 정상적인 IQ 수준에도 불구하고 텍스트의 글자 순서를 혼동하는 경향이 있습니다.

다음은 그만큼 영국 난독증 협회.

• 링크에 밑줄을 긋지 마십시오. 위에서 이미 약간 언급했듯이 링크에 밑줄을 긋는 대신 굵게 표시하십시오.
• 줄 끝에서 새 문장을 시작하지 마십시오. 새 문장은 각각 새 줄이어야 합니다.
• 특정 아이디어를 강조/강조해야 하는 경우 Caps Lock을 사용하지 마십시오. 대신 더 큰 글꼴을 사용하십시오.
• 중앙 정렬은 잊어버리세요. 화면 왼쪽에만 있습니다.
• 흰색 배경은 난독증 환자의 주의를 산만하게 할 수 있으며 크림색은 더 부드럽고 어려움을 일으키지 않습니다.
• 모든 문장은 마침표(.)로 끝내고 이메일 사본에 글머리 기호가 있는 경우에도 세미콜론을 사용해야 합니다.

4. 난청 및 부분 청력

청각 장애가 있는 사람들을 위한 하나의 표준이 있습니다. 이메일에 포함된 모든 비디오에는 자막 또는 텍스트 설명이 포함되어야 합니다.

Youtube 및 기타 비디오 호스팅에서 제공하는 자동 자막에 의존하지 마십시오. 그들은 종종, eh eh… 온화하게 말해서 이상적과는 거리가 멀다. 그리고 어떤 경우에는 정신 분열증에 이르기까지 합니다.

이메일 접근성 주요 팁

오늘 최고의 접근성 사례에 대한 검토를 마치겠습니다. 우리가 볼 수 있듯이 이메일 마케팅 담당자의 작업에서 이러한 측면은 정말 중요합니다. 따라서 "보내기" 버튼을 클릭하기 전에 접근성 테스트를 건너뛰지 마십시오! 앞서 언급한 색맹 시뮬레이터로 캠페인을 확인하고 사용 가능한 모든 장치에 테스트 이메일을 보내고 다른 스크린 리더로 들어보세요.

이제 이 게시물의 핵심 사항을 간단히 요약해 보겠습니다. 접근성을 제공하는 방법?

• 혼동을 방지하기 위해 대비 구성표를 만들려면 다른 색상을 선택하십시오.
• 명확하고 설명적인 제목을 작성하십시오.
• 대체 텍스트를 잊지 말고 모든 이미지에 추가하십시오.
• GIF 애니메이션이 교육적인 역할을 하는 경우 독자에게 자세한 설명을 제공합니다.
• 스크린 리더는 한 번에 하나의 언어로만 작동할 수 있으므로 하나의 이메일에 다른 언어를 사용하지 마십시오.
• 링크의 의미를 확인하십시오.
• 텍스트를 왼쪽으로 정렬합니다.
• 진정한 사랑으로 뉴스레터를 만들고 이메일을 트리거하세요. 모든 구독자를 돌보십시오.

나는 진심으로 당신의 건승을 빕니다. 주위에 배려와 친절을 퍼뜨리십시오!