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

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

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

마케터가 Journey Optimizer이메일 및랜딩 페이지​ 에 대한 콘텐츠를 모두 만들 수 있는 이메일 Designer ​을(를) 사용하면 WCAG(Web Content Accessibility Guidelines) 2.1, 레벨 AA를 기반으로 이 지시문을 쉽게 준수할 수 있습니다.

이에 따라 Journey Optimizer을(를) 사용하여 액세스 가능한 콘텐츠를 디자인하는 모범 사례가 아래에 나와 있습니다.

Text 구성 요소의 Styles 탭을 사용하여 적절한 색상 대비 및 간단한 글꼴을 사용하는 등 텍스트를 읽을 수 있도록 합니다. 자세히 알아보기

{width="80%"}

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

글꼴 선택

글꼴 크기 조정

색상 대비

텍스트 접근성

시각적 접근성 보장 visual-accessibility

콘텐츠에 시각적으로 액세스할 수 있도록 하려면 아래 모범 사례를 따르십시오.

Journey Optimizer에서 전자 메일 Designer 스타일 창의 스타일 매개 변수 및 특성을 사용하여 콘텐츠에 있는 여러 요소의 크기와 간격을 추가로 조정할 수 있습니다. 자세히 알아보기

예를 들어 background을 업데이트하거나 여백, 패딩 및 맞춤을 변경하여 콘텐츠의 시각적 접근성을 향상시킬 수 있습니다. 자세히 알아보기

{width="80%"}

또한 Journey Optimizer 이메일 Designer을 사용하면 다양한 장치와 화면 크기에 맞게 디자인을 미리 보고 최적화할 수 있습니다. 언제든지 실시간 보기로 전환 ​하여 다양한 장치 크기에서 콘텐츠가 어떻게 렌더링되는지 확인할 수 있습니다.

{width="80%"}

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

이미지 구성 요소를 사용하여 이미지에 대체 텍스트를 제공하십시오. 자세히 알아보기

{width="90%"}

디지털 제품의 효과적인 대체 텍스트를 보려면 아래 지침을 따르십시오.

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

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

{width="1000%"}

컨텐츠 가독성 보장 readability

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

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

콘텐츠 테스트 test

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

{width="90%"}

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

다크 모드 사용 dark-mode

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

{width="90%"}

어두운 모드에서 콘텐츠를 디자인하는 우수 사례 중에는 투명 PNG 또는 SVG를 사용하고, 적절한 메타 태그와 CSS를 설정하고, 어두운 모드가 지원되지 않는 경우 액세스 가능한 대체 스타일을 제공하는 것이 있습니다. 마지막으로, 밝은 모드와 어두운 모드 모두에서 모든 이메일 콘텐츠와 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>Alice</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>88</td>

  </tr>

</table>

링크 텍스트 links

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

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

{width="70%"}

<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>

키보드 탐색 및 포커스 지원 제공 keyboard

키보드 탐색 및 포커스 지원을 제공하면 마우스를 사용할 수 없는 사용자가 콘텐츠에 완전히 액세스하고 상호 작용할 수 있습니다. 또한 모든 사용자가 정보를 통해 명확하고 일관되게 이동할 수 있는 방법을 제공하여 전반적인 유용성을 향상시킵니다.