設計無障礙檢視的最佳做法

您建立了一個很好的檢視,並且想要使其更方便存取,以確保所有使用者都可以看到和理解您整理的資料。

Tableau 支持多控件,以便您構建可存取的視圖,並幫助您滿足《美國第 508 條款》的要求與《Web 內容協助工具指南 (WCAG 2.1 AA)》。確保從 Tableau Cloud 或 Tableau Server 共用的內容遵循製作無障礙檢視中的步驟,並符合以下 WCAG 2.1 AA 原則:

  • 可感知 - 資訊和使用者介面元件必須採用可感知的方式向使用者呈現。考慮採用替代文字和替代方式來呈現內容。

  • 可操作 - 使用者必須可透過他們用於與檢視交互的不同裝置或方法來存取使用者介面元件和巡覽。
  • 可理解 - 使用者必須能夠理解檢視中呈現的資訊。例如,為檢視中顯示的不同元素使用可明顯區分的名稱和標籤。

遵循本文中介紹的最佳作法,並結合製作無障礙檢視中所述的步驟,以建置在發佈到 Tableau Server 或 Tableau Cloud 後可供所有使用者存取的檢視。

保持簡單

WCAG 2.1 AA 原則: 可理解

您可能有想要用檢視傳達的許多資訊。但是,密集型檢視可能難以理解,或者很難使用螢幕助讀程式或鍵盤進行巡覽。使用以下準則可幫助您傳達需要傳達的一切內容,而不會使使用者因為檢視資料過多而受不了。

  • 盡可能彙總資料,幫助減少要顯示的標記數。此外,如果在檢視中顯示超過 1000 個標記,將可能導致檢視由伺服器(而不是瀏覽器)轉換,而就遵循 WCAG 而言,尚不支援伺服器轉換的檢視。

    使用者也可以存取 [檢視資料] 頁面(預設情況下已啟用)來檢視標記的基礎資料,或可將資料從該頁面下載到無障礙應用程式,透過該方式檢視資料。

    範例:此範例顯示兩種不同的橫條圖檢視,用於闡述詳細檢視和彙總檢視的差異。

    無法輕鬆存取 - 標記太多更容易存取 - 彙總檢視
    具有 5000 個標記的直條圖具有文字標籤和較少標記的直條圖
    • 這麼多詳細資料使得檢視更難於理解。

    • 檢視要顯示超過 5000 個標記,而未包括足夠的文字說明不同標記所表示的資訊。

    • 對於需要螢幕助讀程式的使用者來說很難使用。

    • 此範例顯示資料彙總程度更高的同一檢視。

    • 仍包括關鍵資料點,但現在使用者閱讀和理解起來更容易。

    • 標記數從超過 5000 個減少到約 20 個。

    • 透過將焦點放在檢視上,然後按 Enter 開啟 [檢視資料] 頁面,使用者仍然可閱讀標記的基礎詳細資料。

     

  • 請考慮使用簡單的圖形元素,如橫條圖或折線圖,可以使用文字、色彩和形狀在檢視中新增其他上下文。

  • 限制標記數量,只顯示強調最重要資料點的那些標記。

有關如何組建這種檢視的資訊和範例,請參閱製作無障礙檢視中的保持簡單

 

標題和說明

WCAG 2.1 AA 原則: 可感知、可理解

如果在標題和說明中提供良好的描述性文字,則可以為使用輔助技術的使用者提供上下文,並且可以說明他們瞭解檢視中的資料。使用以下準則來適應 Tableau 的視覺特性,以滿足您的所有使用者的需求。

  • 將您的檢視視為用於描述它的文字的補充。

  • 使用標題和說明中的文字來描述您的視覺效果以及您所顯示的內容。

  • 使用簡單易懂的語言。避免使用術語、首字母縮寫或縮寫。

  • 不要在您的文字說明中包含像 [某某的影像] 或者 [某某的圖片] 這樣的字眼,因為螢幕助讀程式有時已經包括此資訊。

  • 避免使用全大寫字母(例如在標題中),因為它們可能難以閱讀。

    範例:此範例顯示兩個不同的橫條圖。一個使用非常少的文字,另一個使用標題和說明來新增上下文

    無法輕鬆存取 - 文字太少更易於存取 - 新增描述性文字來提供上下文
    具有極少文字的直條圖新增標題和說明文字的直條圖
    • 單字標題不足以描述相關資訊。

    • 各個標記用色彩和大小區分。但如果沒有附加文字,則可能很難理解這些標記的上下文。

    • 沒有說明或其他說明性文字來說明解釋此檢視。

    • 此範例顯示同一檢視,但在標題和說明中都包括了附加說明性文字。

    • 使用了相同的色標和大小區分比例,但向條形標記中新增了標籤來提供附加上下文。

有關如何組建包括上下文文字的檢視的資訊和範例,請參閱製作無障礙檢視中的顯示更多文字並使其有用

 

其他文字

WCAG 2.1 AA 原則: 可感知、可理解

除了僅在檢視中新增標題和說明之外,使用文字可以說明使用者瞭解您正在顯示不同元素的內容,以及說明描述不同控制項(例如圖例和篩選器)與資料之間的關係。

新增其他文字時,請遵循以下指南:

  • 在圖例或篩選器的標題中使用文字來描述控制項及其作用。您也可以使用儀表板上的文字區域為視覺效果新增更多上下文,以進一步描述您正在顯示的內容。

  • 在可視化中新增替代文字(alt text)。Tableau 開始為 Tableau 23.1 中的可視化自動生成替代文字。如果是 Tableau 23.2 及更高版本,則可以編輯自動生成的替代文字,以新增您認為對您的受眾很重要的其他內容。
  • 盡可能按標籤參考控制項。例如,將圖例標籤從「Subcategory(子類)」變更為「Color key for product type(產品類型的色鍵)」可幫助使用者理解控制項與資料的關係。

  • 如果在您的檢視中包括連結文字,請使用文字來描述連結會將使用者帶到的位置。例如,使用連結文字「1999 至 2000 年全球變暖統計資料」。避免使用「按一下此處」、「更多」或「更多資訊」這樣的措辭。這些連結文字範例太過寬泛,可能會使使用者感到迷惑。

  • 範例:此範例顯示兩個泡泡圖。一種檢視僅使用建立檢視時預設顯示的文字,另一種檢視則有額外的文字,可在整個檢視中新增內容,以幫助傳達含義。

    無法輕鬆存取 - 文字太少更易於存取 - 更多描述性文字
    具有極少文字的泡泡圖具有標題、說明文字和更多文字的泡泡圖
    • 此檢視只為工作表標題使用預設文字,並為篩選器和圖例使用預設標籤。

    • 各個標記僅透過大小和色彩加以區分。

    • 檢視中沒有說明或其他說明性文字來幫助提供內容。

    • 此範例顯示同一檢視,但包括了附加說明性文字。

    • 標題和說明中增加了附加文字,用於解釋標記的關係,並提供有關檢視所顯示內容的附加上下文。

    • 新增了用於顯示利潤數位的標記標籤,因此使用者不必只依靠色彩來理解此資訊。

有關如何組建包括附加內容文字檢視的資訊和範例,請參閱製作無障礙檢視中的顯示更多文字並使其有用製作無障礙檢視

 

色彩和對比度

WCAG 2.1 AA 原則: 可感知、可理解

您可以使用色彩來說明區分檢視中的標記。然而,對於有視覺障礙的使用者,只使用色彩並不總是能夠十分明顯地進行區分,尤其是當檢視中有許多標記時。在檢視中使用色彩時,請遵循以下指南:

  • Tableau 提供了一個色盲調色板,可用來幫助您為檢視選取適當的色彩。對於您使用的任何調色板,請嘗試提供足夠的對比度,並分配在深淡色譜上彼此不同的色彩。

  • 如果是線條標記,請使用像形狀、大小和標籤這樣的附加選項來說明區分各個標記。

  • 使用對比分析器(連結在新視窗開啟)工具幫助選取具有足夠對比度的最佳文字色彩和背景。確保文字色彩對比度很強,並滿足 4.5:1 的對比度標準(3:1 表示大文字)。

    範例:此範例顯示兩個折線圖。一個折線圖使用的色彩只能區分線條,另一個折線圖使用了更恰當的色彩加形狀來區分標記。

    無法輕鬆存取 - 只使用色彩來區分標記更易於存取 - 使用色彩和形狀來區分標記
    僅顯示色彩以區分標記的折線圖使用色彩和形狀來區分標記的折線圖
    • 此檢視僅使用色彩來區分線條。

    • 檢視中的標記未使用能讓有視覺障礙的使用者完全看清楚的調色盤。

    • 此範例顯示同一檢視,但同時使用了色彩和形狀來標識標記。

    • 色彩圖例和帶有明確標題的形狀圖例標識了色彩和形狀在檢視中所代表的內容。

有關如何組建使用色彩來說明區分標記的檢視的資訊和範例,請參閱製作無障礙檢視中的製作無障礙檢視

 

發佈您的檢視

WCAG 2.1 AA 原則: 可感知、可執行、可理解

若要將檢視提供給使用者使用,請將檢視發布到 Tableau Server 或 Tableau Cloud,然後在工具列功能表中按一下「共用」。使用者可以使用螢幕助讀程式或鍵盤與檢視和工具列按鈕互動。有關詳情,請參閱 Tableau 檢視的鍵盤協助工具

有關如何發佈和嵌入工作簿、查找嵌入代碼以複製到網頁以及關閉工具列的資訊,請參閱製作無障礙檢視中的發布和共用檢視

感謝您的意見反應!已成功提交您的意見回饋。謝謝!