액세스 가능한 콘텐츠 디자인 accessible-content

유럽 접근성 법률은(는) 회원국 간에 국가 규칙이 서로 달라 발생하는 장벽을 제거하여 액세스 가능한 제품 및 서비스의 내부 시장을 개선하기 위해 고안된 지침입니다.

이 규정에는 이메일, 뉴스레터, PDF 및 다운로드 가능한 콘텐츠를 포함한 모든 디지털 통신에 액세스할 수 있어야 한다고 명시되어 있습니다. 따라서 수신자를 위한 컨텐츠를 만들 때 액세스 가능한 글꼴 및 읽기 가능한 형식 사용, 이미지에 대한 대체 텍스트 제공과 같은 특정 지침을 따라야 합니다.

Marketo Engage 이메일 Designer을 사용하면 WCAG(Web Content Accessibility Guidelines) 2.1, 레벨 AA를 기반으로 이 지시문을 쉽게 준수할 수 있습니다. Marketo Engage을 사용하여 액세스 가능한 콘텐츠를 디자인하는 모범 사례는 아래에 나와 있습니다.

텍스트 가독성 확인 text-readability

적절한 색상 대비 및 간단한 글꼴을 사용하는 등, 텍스트를 읽을 수 있도록 Styles 구성 요소의 Text 탭을 활용하십시오.

글꼴 및 텍스트의 경우 다음 지침을 따라야 합니다.

글꼴 선택

글꼴 크기 조정

색상 대비

텍스트 접근성

시각적 접근성 보장 visual-accessibility

Marketo Engage에서는 전자 메일 Designer Styles 창의 스타일 매개 변수 및 특성을 사용하여 콘텐츠에 있는 여러 요소의 크기와 간격을 보다 세밀하게 조정할 수 있습니다.

예를 들어 배경을 업데이트하거나 여백, 패딩 및 맞춤을 변경하여 시각적 접근성을 향상시킬 수 있습니다.

Marketo Engage 이메일 Designer을 사용하면 다양한 디바이스와 화면 크기에 맞게 디자인을 미리 보고 최적화할 수 있습니다. 언제든지 Switch to live view ​하여 다양한 장치 크기에서 콘텐츠가 어떻게 렌더링되는지 확인할 수 있습니다.

이미지에 대체 텍스트 사용 alt-text

Image 구성 요소를 사용하여 이미지에 대체 텍스트를 제공하십시오.

읽을 수 있는 형식 사용 readable-format

Styles 창의 옵션뿐만 아니라 이메일 Designer 관련 구조 및 콘텐츠 구성 요소를 사용하여 모든 사용자가 액세스할 수 있는 명확하고 논리적이며 간결한 방법으로 콘텐츠를 구성하십시오.

컨텐츠 가독성 보장 readability

읽을 수 있으려면 콘텐츠가 명확하고, 잘 구성되어 있어야 하며, 시각, 인지 또는 읽기에 어려움이 있는 사람들과 보조 기술을 사용하는 사람들을 포함하여 모든 사람이 사용할 수 있어야 합니다. 액세스 가능한 컨텐츠를 만들 때 고려해야 할 사항은 다음과 같습니다.

전자 메일 가독성을 평가하기 위해 Microsoft Word에서 볼 수 있는 인기 있는 Flesh Reading Ease 테스트를 사용할 수 있으며 0~100의 범위에서 콘텐츠를 얼마나 쉽게 읽을 수 있는지를 계산합니다.

콘텐츠 테스트 test

콘텐츠의 접근성을 확인하기 위해 Marketo Engage에서 제공하는 테스트 기능을 사용할 수 있습니다. 콘텐츠에 완전히 액세스할 수 있는지 확인하도록 특별히 고안된 것은 아니지만 첫 번째 수준의 확인을 제공할 수 있습니다.

콘텐츠에 안정적으로 액세스할 수 있는 경우 보다 일관된 방식으로 체크 인하려면 다음과 같은 특정 외부 도구를 사용하십시오.

다크 모드 사용 dark-mode

다크 모드는 광도 또는 시각적 장애가 있는 사용자의 시각적 접근성을 향상시켜 향상된 시청 환경을 제공합니다.

다크 모드에서 콘텐츠를 디자인하는 몇 가지 모범 사례는 다음과 같습니다.

밝은 모드와 어두운 모드 모두에서 모든 이메일 콘텐츠와 UI 요소를 테스트하여 이메일이 어두운 모드에서 올바르게 렌더링되는지 확인하십시오.

접근성을 위해 특정 특성 사용 attributes

언어 속성 language

디자인을 만들 때 콘텐츠 본문에 lang(언어) 및 dir(텍스트 방향) 특성을 포함하십시오. 이러한 속성은 보조 기술(예: 화면 판독기)이 적절한 방식으로 콘텐츠를 해석하고 제공하는 데 도움이 됩니다.

화면 판독기는 lang 특성을 사용하여 올바른 발음 규칙을 적용하지만 텍스트 방향에서는 컨텐츠가 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 언어로 자연스럽게 흐릅니다. 이러한 속성이 없으면 사용자가 읽기 순서를 혼동하거나 발음을 잘못 이해할 수 있습니다. 항상 적절한 lang 및 dir 특성으로 전자 메일 본문을 래핑합니다.

테이블 tables

HTML 컨텐츠에서 테이블은 종종 레이아웃에 사용됩니다. 기본적으로 화면 판독기는 행, 열 및 구조를 알리는 모든 <table>을(를) 데이터 테이블로 취급합니다. 이 경우 표를 포맷에만 사용하는 경우 혼동을 줄 수 있습니다.

레이아웃 표에 role="presentation"(또는 role="none")을(를) 추가하여 보조 기술이 구조를 건너뛰고 실제 콘텐츠에만 집중할 수 있도록 합니다.

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <h1>Hello World</h1>
      <p>Welcome to our newsletter</p>
    </td>
  </tr>
</table>

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Parker</td>
    <td>62</td>
  </tr>
</table>

링크 텍스트 links

화면 판독기는 텍스트를 사용하여 링크를 읽습니다. 링크에 '여기를 클릭' 또는 '자세히 읽기'만 레이블이 지정되면 보조 기술 사용자는 대상을 알 수 없습니다. 액세스 가능성을 보장하기 위해 대상이나 작업을 명확하게 나타내는 설명 텍스트가 필요합니다.

이메일 Designer을 사용하여 콘텐츠에 대한 링크를 추가하고 레이블을 편집하여 식별 가능(표시) 및 설명(목적에 대해 명확함)하도록 합니다. '여기' 또는 '기타'와 같은 모호한 레이블을 사용하지 마십시오.

<p>Learn more in the
<a href="https://adobe.com/release-notes">August release notes</a>.
</p>

<p>Learn more about our new features.
  <a href="https://adobe.com/release-notes">Click here</a>.
</p>