文件Journey Optimizer B2BJourney Optimizer B2B Edition 文件

設計無障礙內容 accessible-content

Last update: Thu Apr 16 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 初學者
  • 中繼
  • 使用者

歐洲無障礙法是一項指令，旨在透過消除因各成員國的不同國家規則所造成的障礙，來增強無障礙產品和服務的內部市場。

此法規規定所有數位通訊，包括電子郵件、電子報、PDF和可下載內容，皆應可供存取。 因此，在為收件者建立內容時，您必須遵循特定准則，例如使用無障礙字型、可讀格式以及為影像提供替代文字。

Journey Optimizer B2B Edition設計工具可讓行銷人員為​ 電子郵件 ​和​ 登陸頁面 ​建立內容。 請根據網頁內容可及性指引(WCAG) 2.1 （AA級），使用這些工具來遵守此指示。

以下各節概述使用Journey Optimizer B2B Edition設計無障礙內容的最佳實務。 此資訊著重於設計可供所有收件者存取的內容，讓身心障礙人士能夠閱讀、瞭解並與您的電子郵件和登入頁面互動。

確保文字可讀性 text-readability

運用​ Text ​元件的​ 樣式 ​標籤，確保文字可讀，例如使用適當的色彩對比和簡單字型。 如需文字元件樣式的詳細資訊，請參閱​內容元件

文字元件[樣式]索引標籤顯示字型、大小和顏色選項 {width="700" modal="regular"}

對於字型和文字，請遵循以下准則：

字型選取

  • 使用無襯線字型，例如Arial、Verdana、Tahoma、Helvetica或Open Sans。
  • 避免在正文內容中使用襯線、草稿或裝飾字型。
  • 保留至有限的字型集以取得一致性和遞補（例如： font-family: Arial, Helvetica, sans-serif;）。

字型大小調整

  • 確定內文字型大小下限為16px。
  • 為標題使用適當的階層。

顏色對比

  • 維持文字與背景之間的對比率至少為4.5:1。
  • 對於大型文字（≥24px或粗體18px），請確定至少3:1對比度。
  • 避免白色背景上的淺灰色或淡色文字。
  • 請勿僅仰賴顏色來傳達意義，而是要使用底線、圖示等。

文字協助工具

  • 避免影像中的文字。
  • 請勿在正文中使用全部大寫字。
  • 確保文字可以縮放至200%而不中斷版面。

確保視覺化協助工具 visual-accessibility

若要確保內容可透過視覺化方式存取，請遵循下列最佳實務：

  • 避免使用僅限顏色的指標來取得重要資訊。
  • 請使用文字標籤或圖示來確保清晰明瞭。
  • 針對行動裝置和回應式版面配置最佳化您的設計，確保按鈕較大且間距適當。
  • 定期測試裝置和熒幕大小，以維持協助工具。

在Journey Optimizer B2B Edition中，可以使用視覺化設計空間​ 樣式 ​窗格的樣式引數和屬性，進一步調整內容中不同元素的大小和間距。

例如，您可以更新背景，或變更邊界、邊框間距和對齊方式，以改善內容的視覺協助工具。

樣式窗格，包含背景、邊界、邊框間距和對齊方式設定 {width="700" modal="regular"}

Journey Optimizer B2B Edition視覺化設計工具可讓您預覽和最佳化不同裝置和熒幕大小的設計。 您隨時可以​切換到即時檢視，以檢查您的內容在各種裝置大小上可能會如何呈現。

顯示案頭、平板電腦和行動裝置預覽選項的即時檢視切換 {width="700" modal="regular"}

CAUTION
即時檢視是通用的預覽，用來比較各種裝置大小下的轉譯效果。 最終呈現可能會因收件者的電子郵件使用者端或網頁瀏覽器而異。

使用影像的替代文字 alt-text

使用​ 影像 ​元件提供影像的替代文字。 如需影像元件設定的詳細資訊，請參閱​內容元件

反白顯示替代文字欄位的影像元件設定面板 {width="700" modal="regular"}

若要在數位產品中使用有效的替代文字，請遵循以下准則：

  • 簡潔且情境化地描述影像用途。
  • 避免多餘的詞句，例如「影像……」 並將空的替代文字用於裝飾性影像。
  • 對於具有意義的圖示，提供有意義的標籤；對於複雜的影像，請使用簡短替代文字，並在其他位置使用較長的說明。

使用可讀格式 readable-format

在視覺化設計空間中，使用相關的結構和內容元件，以清晰、邏輯且簡潔的方式組織您的內容，讓所有人都能存取。 使用結構繼承最佳實務設定​ 樣式 ​窗格中的選項。

電子郵件設計空間，顯示組織版面的結構和內容元件 {width="700" modal="regular"}

  • 使用結構化、語意化的HTML，搭配適當的標題、段落、清單和表格。
  • 確保內容遵循由左至右、由上至下的邏輯流程。
  • 使用簡潔明瞭的語言。
  • 為PDF和Infographics提供替代格式。
  • 允許調整文字大小及重排，並確保印刷樣式在所有格式中都能以足夠的色彩對比讀取。

確保內容可讀性 readability

若要閱讀，您的內容必須清晰、結構良好，且可供所有人使用，包括視覺、認知或閱讀困難的人士以及使用輔助技術的人。 建立無障礙內容時，請考量以下幾點：

  • 將句子限制在20字以內。
  • 編輯您的復本，使其成為直接和指向的復本。
  • 使用主動語態讓句子結構更簡單。
  • 避免使用某些人可能不知道的俚語、行話或地區性用語。

若要評估內容可讀性，請使用Microsoft Word中常用的Flesch Reading Easy測試。 它會計算您閱讀內容的難易程度，範圍從0到100。

測試您的內容 test

若要驗證內容可存取性，您可以使用Journey Optimizer B2B Edition提供的測試功能。 它們不是特別設計來檢查您的內容是否完全可存取，但是它們可以提供第一級的驗證。

  • 使用測試設定檔預覽您的內容。

  • 使用呈現電子郵件選項，利用Litmus模擬您跨主要電子郵件使用者端(Apple Mail、Gmail、Outlook)的設計，並檢視文字、色彩和影像是否可讓您存取內容。

  • 傳送校樣以測試內容的轉譯，然後再傳送給真正的對象。

具有測試設定檔預覽選項的內容模擬介面 {width="800" modal="regular"}

若要檢查您的內容是否能夠以更一致的方式可靠地存取，請使用外部工具，例如：

使用深色模式 dark-mode

深色模式可增強對光線敏感度或視覺障礙的使用者的視覺協助功能，進而改善觀看體驗。

深色模式的設計設定 {width="700" modal="regular"}

對於深色模式設計，請使用透明的PNG或SVG影像，並設定適當的中繼標籤和CSS。 如果深色模式不受支援，請提供可存取的遞補樣式。 最後，以淺色和深色模式測試所有內容和UI元素。

如需在電子郵件設計空間中使用​ 深色模式 ​的詳細資訊，請參閱電子郵件內容的​深色模式。

針對協助工具使用特定屬性 attributes

HTML屬性可協助輔助技術解譯內容中的結構、語言和關係。 以下幾節涵蓋語言和文字方向、用於版面配置與資料的表格，以及熒幕助讀程式向使用者宣告的連結文字。

語言屬性 language

建立設計時，請在內容本文中包含lang （語言）和dir （文字方向）屬性。 這些屬性可協助輔助技術（例如熒幕閱讀程式）以適當的方式解譯和呈現您的內容。

  • lang屬性指出輔助技術所使用之電子郵件的語言，確保正確發音單字。

    accordion
    範例

    英文範例：

    code language-none 
    <body lang="en">

    法文範例：

    code language-none 
    <body lang="fr">

  • dir屬性指定文字方向。 大部分的語言，包括英文和法文，都是由左至右(ltr)閱讀，而阿拉伯文和希伯來文等語言則是由右至左(rtl)閱讀。

    accordion
    範例

    英文範例（由左至右）：

    code language-html 
    <body lang="en" dir="ltr">

    阿拉伯文範例（由右至左）：

    code language-html 
    <body lang="ar" dir="rtl">

熒幕朗讀程式依賴lang屬性來套用正確的發音規則。 文字方向可確保內容自然地由左至右或由右至左的語言。 如果沒有這些屬性，使用者可能會遇到閱讀順序混亂或發音錯誤的情況。 因此，請一律使用適當的lang和dir屬性包住您的電子郵件內文。

TIP
如果您的電子郵件包含多種語言，請將適當的語言屬性指派給特定區段（例如<table>或<td>區塊），以確保每個部分都可正確讀取。

表格 tables

在HTML內容中，表格通常用於版面。 依預設，熒幕助讀程式會將每個<table>視為資料表，宣告列、欄和結構。 如果表格僅用於格式設定，則此結構可能會令人困惑。

將role="presentation" （或role="none"）新增至配置表格，以確保輔助技術會略過其結構並僅專注於實際內容。

範例 — 配置表格（含role="presentation"）
code language-html 
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <h1>Hello World</h1>
      <p>Welcome to this newsletter</p>
    </td>
  </tr>
</table>

熒幕助讀程式顯示：
「你好。 歡迎使用此Newsletter。」 （未提及列、欄或資料表）

範例 — 資料表（不含role="presentation"）
code language-html 
<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>

熒幕助讀程式顯示：
「2欄3列的表格。」

「姓名，Alice。 分數， 95。」

「姓名，Bob。 分數， 88。」

TIP
僅使用role="presentation"配置表格。 對於資料表，請保留語意<table>結構，讓熒幕朗讀程式可以正確宣告標題和關聯性。

熒幕助讀程式會使用文字朗讀連結。 如果連結標示為​ 按一下這裡 ​或​閱讀更多，則輔助技術的使用者不知道目的地。 為了確保協助工具，這些檔案需要清楚指出目標或動作的描述性文字。

使用設計工具新增內容連結，並編輯標籤，使其可辨識（可見）且具描述性（清楚說明用途）。 避免​ 這裡 ​或​ 更多 ​這類模糊的標籤。

顯示URL欄位和描述性標籤選項的連結設定面板 {width="700" modal="regular"}

範例 — 良好連結（描述性）：
code language-none 
<p>Learn more in the
<a href="https://adobe.com/release-notes">August release notes</a>.
</p>

熒幕助讀程式顯示：
「連結，8月發行說明。」

範例 — 錯誤連結（非描述性）
code language-none 
<p>Learn more about our new features.
  <a href="https://adobe.com/release-notes">Click here</a>.
</p>

熒幕助讀程式顯示：
「連結，按一下這裡。」 （未提供讀取順序錯亂的內容）

提供鍵盤導覽和焦點支援 keyboard

對於登陸頁面，提供鍵盤導覽和焦點支援可讓無法使用滑鼠的人存取內容並與內容互動。 它也能讓所有使用者以清晰一致的方式瀏覽資訊，進而改善整體可用性。

  • 鍵盤導覽與焦點

    • 確定所有互動式元素（例如按鈕、核取方塊和連結）都有tabindex="0"，以便它們包含在自然索引標籤順序中。
    • 允許使用Tab鍵和方向鍵(↑ ↓ ← →)導覽，這應該會明顯反白標示重點元素。

  • 自訂焦點樣式

    • 套用清晰且可區分的樣式，以聚焦於可操作的元素：

      accordion
      範例(CSS)
      code language-none 
      [tabindex="0"] : focus {
outline: 2px solid #00AEEF;  /* Cyan border */
background-color: #20CEFF;   /* Optional background */
}

    • 確保焦點指標符合WCAG 2.2焦點外觀標準，包括：

      • 最小區域：2個CSS畫素粗輪廓。
      • 對比率：焦點狀態和非焦點狀態之間的對比≥3:1。

  • 鍵盤啟動支援

    • 確認核取方塊和按鈕會回應Enter和Space鍵。

    • 僅使用鍵盤驗證互動：

      • Enter或Space應該切換核取方塊。
      • 按Enter或Space鍵應該會觸發按鈕。
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0