마케터를 위한 디지털 접근성 3부: 이메일, 소셜 콘텐츠 및 SEO

게시 됨: 2022-08-04

마케터의 임무는 단순히 사용자 친화적인 웹사이트를 유지하는 것 이상입니다. 마케팅 전문가는 또한 다양한 전략과 채널을 사용하여 웹사이트 트래픽을 확보합니다. 지구상에서 가장 놀라운 사이트가 있는지 여부는 중요하지 않습니다. 아무도 방문하지 않는 경우 1997년에 있었던 Angelfire 사이트 중 하나(기억나나요?)를 갖고 있는 것이 가장 중요합니다.

3개의 기사로 구성된 이 시리즈는 디지털 콘텐츠의 접근성을 높이기 위해 즉시 구현할 수 있는 몇 가지 기본 사례를 소개하기 위한 것입니다.

사용자 경험 및 웹사이트를 위한 디지털 접근성에 대한 이전 게시물은 웹사이트 마케팅 기능 및 기술에 대해 자세히 살펴보았습니다. 이 게시물은 이메일을 시작으로 외부 채널 및 매체와 테스트 방법에 대해 설명합니다. 접근성 문제에 대한 개요를 보려면 이 3부작 시리즈 중 첫 번째 시리즈를 살펴볼 수도 있습니다.

액세스 가능한 이메일

이메일 마케팅은 마케터의 툴킷에서 가장 중요한 도구 중 하나입니다. 회사는 거래(생각, 주문 확인) 및 판촉 목적과 고객 지원을 위해 이메일을 사용합니다. 오늘날 많은 이점을 활용하지 못하는 디지털에 정통한 회사를 찾기가 어려울 것입니다.

그러나 거의 모든 조직이 이메일을 사용하여 고객, 클라이언트 및 잠재 고객과 의사 소통하지만 모든 조직에서 보내는 이메일에 액세스할 수 있는지 확인하지 않습니다.

HTML 대 일반 텍스트 이메일

회사에서 일반 텍스트 이메일을 보내는 경우 해당 이메일에 액세스할 수 있습니다. 링크 텍스트가 설명적이지 않은 경우(자세한 내용은 이전 게시물 참조) 장애가 있는 개인이 메시지의 요지를 이해하는 것이 약간 어려울 수 있습니다. 이는 불가능한 장벽이 아닙니다.

문제는 대부분의 마케터가 HTML 이메일을 좋아 한다는 것입니다. 그리고 사랑하지 말아야 할 것은 무엇입니까? 브랜드에 맞게 스타일을 지정하고 멋진 이미지와 눈길을 끄는 GIF로 채우고 일반 일반 텍스트 이메일보다 더 매력적인 이메일을 만들 수 있습니다. 또한, 이제 타사 쿠키가 과거의 일이 되면서 이메일은 큰 디지털 마케팅 트렌드로 빠르게 부활하고 있습니다.

그것은 여기에서 문제가 아닙니다. 문제는 이메일을 꾸미기 시작하고 접근성을 고려하지 않을 때 일부 사용자가 포괄적인 이해를 얻지 못할 수 있다는 것입니다(또는 최악의 경우에는 아무것도 이해하지 못할 수 있음).

HTML 이메일은 이메일 플랫폼에서 렌더링하기 위해 헤더 및 이미지 태그와 스타일을 사용한다는 점에서 웹페이지와 유사합니다. 일반 텍스트 이메일은 바로 일반 텍스트입니다. HTML 이메일에 액세스할 수 있으려면 웹사이트에서와 동일한 지침을 따라야 합니다.

테이블 기반 레이아웃의 문제

대부분의 HTML 이메일은 여러 이메일 클라이언트에서 볼 수 있는 이메일에 대해 가장 일관된 모양을 제공하기 때문에 테이블 태그를 사용하여 구조화됩니다. 그러나 table 태그는 실제로 이런 식으로 사용하도록 의도된 것이 아닙니다. 다른 많은 웹 디자인 기술과 마찬가지로 웹 디자이너는 자신의 목적을 위해 이 기술을 하이재킹했습니다. 이것은 스크린 리더 사용자에게 문제를 제기하지만 스크린 리더는 여전히 테이블 안의 내용을 개별 셀로 읽어서 연결되지 않은 사용자 경험을 만들기 때문입니다.

그러나 HTML에 작은 코드 스니펫을 추가하여 이를 우회할 수 있습니다. 단순히 role="presentation" 을 추가하여 이러한 사용자에게 데이터 테이블이 아니라 프레젠테이션 테이블임을 경고합니다.

프레젠테이션 역할은 화면 판독기에서 테이블 구조를 숨기고 테이블 내부의 내용은 영향을 받지 않도록 합니다. 화면 판독기 사용자에게는 시작할 테이블이 없는 것처럼 나타납니다.

당신의 태그에 인색하지 마십시오

이메일을 생성한다고 해서 질서 있는 코드에 대한 규칙이 사라지는 것은 아닙니다. 헤더가 올바르게 사용되었는지 확인하십시오(예: 제목에 H1, 하위 헤더에 H2/H3 사용 등). 따라서 시각적 능력에 관계없이 모든 사람이 논리적으로 읽을 수 있도록 콘텐츠의 요지를 이해할 수 있습니다. 주문하다. 추가 컨텍스트를 제공하기 위해 여기에서도 제목 태그를 활용하십시오.

여기서도 대체 텍스트가 중요합니다!

이메일 클라이언트에서 사용자가 이미지를 다운로드하기 위해 클릭해야 하는 경우 다음과 같은 상황을 경험했을 수 있습니다. 빈 사각형이 많이 포함된 이메일을 열고 진행 상황을 설명하기 위한 텍스트만 있습니다. "이미지 다운로드"를 클릭하고 비주얼이 나타나자 마자 퍼즐 조각이 제자리에 떨어지지만 그 순간까지는 완전히 혼란스러워집니다.

유감스럽게도 마케터가 시각 자료에 대체 텍스트를 포함하지 않는 경우 스크린 리더 사용자에게 이것은 매일(또는 시간당) 경험이 될 것입니다. 그래서 그들에게 호의를 베풀고 이메일 이미지에 포함시키십시오. 장식 이미지의 경우 빈 alt 속성을 사용하십시오.

모바일 접근성 모범 사례

사람들이 점점 더 모바일 장치에서 이메일을 읽게 됨에 따라 이러한 고려 사항을 염두에 두고 설계하는 것이 더욱 중요해졌습니다. 편리하게도 더 나은 모바일 경험을 위한 지침은 접근성과 일치합니다. 예를 들어:

텍스트를 14px 이상의 글꼴로 유지하는 것을 목표로 하세요. 사람들이 모바일에서 메시지를 읽을 수 없다면 전혀 읽지 않을 것입니다.
모든 시각 능력을 가진 사람들이 콘텐츠를 더 쉽게 소비할 수 있도록 허용되는 지침과 색상 대비를 유지하십시오.
가운데 정렬된 단락을 피하십시오(특히 작은 장치에서 읽기가 훨씬 더 어렵습니다).
링크 텍스트를 유익하고 짧게 만드십시오.

포괄적인 멀티미디어 경험

비디오 및 팟캐스트와 같은 멀티미디어는 마케터가 브랜드 인지도를 높이고 제품 관심을 유발하며 대상 고객과 연결하는 데 도움이 되는 훌륭한 자산입니다. 좋은 소식은 a) 이와 같은 콘텐츠를 액세스 가능하게 만드는 것이 매우 쉽고 b) 액세스 가능하게 만들면 모든 사람의 경험을 향상시킬 수 있다는 것입니다.

접근 가능한 비디오

시각 장애가 있는 사람은 화면에서 일어나는 일을 완전히 볼 수 없지만 청각 장애가 있는 사람은 대화를 들을 수 없습니다. 청각 장애인이나 청력이 좋지 않은 시청자를 위해 캡션을 추가할 수 있습니다. YouTube는 자동으로 캡션을 생성하지만 최상의 품질은 아닙니다. 일반적으로 동영상이 긴 경우 캡션 서비스를 사용하거나 짧은 경우 자동 생성된 캡션을 수동으로 수정하는 것이 좋습니다. 캡션의 한 가지 좋은 이점은 완벽하게 볼 수 있는 사람들에게 도움이 될 수 있다는 것입니다. 대기실이나 공항에 있을 때 음소거된 TV에서 사람들이 말하는 것을 듣고 싶었던 적이 있습니까? 또는 친구가 소셜 미디어에 보고 싶은 비디오를 게시했지만 당신은 헤드폰 없이 공공 장소에 있을 수 있습니다. 캡션은 이러한 문제를 모두 해결하고 시각 장애가 있는 사람들이 콘텐츠에 액세스할 수 있도록 합니다.

시각 장애가 있는 사람들은 대화를 들을 수 있지만 아무도 말하고 있지 않은 경우 내레이션이 없으면 비디오의 주요 부분을 놓칠 수 있습니다. 오디오 설명이 유용한 곳입니다. 오디오 설명은 화면에서 일어나는 일에 대한 설명입니다. 예를 들어 아래 비디오를 확인하십시오.

동영상이 재생되지 않습니까? 유튜브에서 보세요.

Netflix가 오디오 설명을 출시했을 때 큰 인기를 끌면서 사용자가 이동 중에도 데이터 사용량을 절약할 수 있는 오디오 전용 모드를 테스트하기로 결정했습니다.

오디오 콘텐츠의 대본

성적표는 모든 종류의 장애가 있는 사람들에게 매우 유용합니다. 스크린 리더 사용자와 청각 장애가 있는 사용자는 전체 비디오를 볼 필요 없이 압축할 수 있습니다(장애가 없는 사용자도 이 기능을 활용할 수 있습니다!).

일부 자산은 완전히 오디오 기반입니다. 예를 들어 팟캐스트는 들을 수 없는 사람에게는 전혀 쓸모가 없습니다. 대본을 통해 액세스할 수 있습니다. DMI는 온라인 라이브 극장 작업에 대한 이 에피소드와 같이 모든 팟캐스트에 대한 스크립트를 제공합니다.

사이트에 대본을 추가하는 가장 쉬운 방법은 다운로드 가능한 텍스트 파일로, 페이지에 텍스트를 표시하여 SEO 노력에 도움이 되는 경우입니다.

PDF(Portable Document Formats)

PDF를 액세스할 수 있도록 해야 하는 이유는 포괄성 때문만은 아닙니다. SEO에도 유리합니다. 스크린 리더가 읽을 수 있으면 웹 크롤러가 크롤링하여 웹사이트 콘텐츠에 대한 귀중한 신호를 Google에 다시 보낼 수 있습니다.

일부 소프트웨어는 다른 소프트웨어보다 문서를 액세스 가능한 PDF로 변환하는 데 더 적합합니다. Microsoft는 접근성에 특히 주의를 기울인 반면 다른 회사는 우선 순위를 낮추었으며 액세스 가능한 PDF를 만드는 데 필요한 노력의 수준을 보여줍니다.

마이크로소프트 프로그램

Microsoft Word에는 Acrobat 메뉴 헤더 아래에 PDF 작성 옵션이 있습니다. 그러면 파일이 액세스 가능한 PDF로 자동 변환됩니다. PowerPoint 프레젠테이션을 PDF로 변환하는 데 동일한 옵션을 사용할 수 있습니다. (파일을 PDF로 변환하기 전에 항상 이미지에 대체 텍스트를 추가해야 합니다.) 파일을 PDF로 변환하기 전에 기본 접근성 검사 ( 검토 메뉴 항목 아래에 있음)를 사용하십시오.

Adobe Acrobat을 사용하여 액세스 가능한 PDF 만들기

다른 파일 형식을 액세스 가능한 PDF로 변환하려면 조금 더 노력해야 합니다. 예를 들어, 디자인 파일(Adobe 소프트웨어에서 만든 파일과 같은)은 파일을 PDF로 변환하기 전후에 약간의 조작이 필요합니다.

Adobe Acrobat Pro에는 일부 오류를 표시하는 데 도움이 되는 기본 액세스 가능성 검사기 기능이 있지만 Acrobat 액세스 가능성 기능을 사용하여 프로세스를 완료하는 데 필요한 작업은 어려울 수 있으며 전문가에게 맡기는 것이 가장 좋습니다.

접근성을 위한 PDF 테스트

스크린 리더 또는 JAWS Inspect와 같은 도구를 사용하여 PDF 액세스 가능성을 테스트하는 것이 좋습니다. 기본 접근성 검사기가 PDF에 대해 알려 주는 내용과 상관없이 실제 사용자나 프록시에게 파일을 노출하는 것이 접근성을 확인하는 가장 좋은 방법입니다.

SO(검색 엔진 최적화) 및 접근성

SEO에 좋은 것은 접근성에도 좋습니다. 화면 판독기는 웹 크롤러와 유사합니다. 둘 다 사용 가능한 사이트의 콘텐츠만 읽을 수 있습니다. 즉, 액세스할 수 없는 PDF, 대체 텍스트가 없는 이미지, 스크립트가 없는 멀티미디어 등은 모두 사실상 보이지 않습니다. 파일 이름만 읽을 수 있습니다. 귀하의 웹사이트는 단순히 액세스할 수 없는 요소 때문에 순위를 매길 수 있는 놀라운 기회를 놓칠 수 있습니다.

적절하고 순차적인 제목 구조와 설명 링크 텍스트를 사용하는 것과 같이 접근성 지침과 수렴하는 다른 SEO 모범 사례가 있습니다. 이 주제에 대한 자세한 내용은 SEO가 접근성을 지원하는 방법과 그 반대의 경우에 대한 블로그 게시물을 확인하세요.

접근성을 위한 마케팅 자료 테스트

접근성 테스트는 애셋에 액세스할 수 있도록 하려는 노력만큼 중요합니다. 액세스 가능성을 목표로 하는 것은 훌륭하지만 콘텐츠에 실제로 액세스할 수 있는지 확인하기 전까지는 전투의 절반만 싸운 것입니다.

또한, 소송의 대상이 되는 경우 결과를 테스트하고 문서화하는 것이 회사에 도움이 될 것이며 소스에서 접근성 문제를 중지하기 위한 추세를 식별하는 데 도움이 될 것입니다.

TGPi 웹사이트에서 테스트 도구에 대한 자세한 내용을 확인할 수 있습니다.