---
schema_version: "1"
id: f627b17c902f5fe7bf2840608f68424fde0b625d25cab881c2d5c4bbd2dab71c
title: 设计无障碍视图的最佳做法
collection: tableau
version: next
locale: zh-cn
portal_url: https://docs.salesforce.com/tableau/next/zh-cn/pro/desktop/accessibility_best_practice.md
canonical_url: https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_best_practice.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 6ae48cbd8c798d5be5f730b9bc5a170911fa942383af02574e995135c6751c62
description: Design guidelines for building WCAG 2.2 AA-compliant Tableau views using color, titles, captions, and layout.
---
[跳转到主要内容](#main-content)

# 设计无障碍视图的最佳做法

您创建了一个很好的视图，并且您希望使其更易于访问，以便所有用户都可以看到和理解数据。

Tableau 支持用于构建无障碍视图的多个控件。这些控件符合 US Section 508 要求和 Web 内容辅助功能准则 (WCAG 2.2 AA)。确保已从 Tableau Cloud 或 Tableau Server 共享的内容遵循[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的步骤，并符合以下 WCAG 2.2 AA 原则：

- **可感知** - 信息和用户界面组件必须采用可感知的方式向用户呈现。考虑采用替代文本和替代方式来呈现内容。
- **可操作** - 用户必须可通过他们用于与视图交互的不同设备或方法来访问用户界面组件和导航。
- **可理解** - 用户必须能够理解视图中呈现的信息。例如，为视图中显示的不同元素使用可明显区分的名称和标签。

遵循本文和[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中介绍的最佳做法，构建在 Tableau Server 或 Tableau Cloud 上发布后可供所有用户访问的视图。

## 保持简单

**WCAG 2.1 AA 原则：** 可理解

您可能有想要用视图传达的许多信息。但是，密集型视图可能难以理解，或者很难通过使用屏幕阅读器或键盘进行导航。使用以下准则可帮助您传达需要传达的一切内容，而不会使用户因为视图数据过多而受不了。

- 尽可能聚合数据，帮助减少所显示的标记数。并且，如果在视图中显示超过 1000 个标记，将可能导致视图由服务器（而不是浏览器）渲染，而对于 WCAG 合规性而言，尚不支持服务器渲染的视图。
    
    用户也可以访问“查看数据”页面（默认情况下已启用）来查看标记的基础数据，或可将数据从该页面下载到无障碍应用程序，通过该方式查看数据。
    
    **示例**：此示例显示两种不同的条形图视图，用于阐述详细视图和聚合视图的差异。
    
    <table><tbody><tr><th style="text-align: left;">无法轻松访问 - 标记太多</th><th style="text-align: left;">更容易访问 - 聚合视图</th></tr><tr><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/notaccessible_5000marks.png" alt="带有 5000 个标记的的柱形图"></td><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibilitycompliant_aggregated.png" alt="带有文本标签和较少标记的柱形图"></td></tr><tr><td><ul><li><p>这么多详细信息使得视图更难于理解。</p></li><li><p>视图显示超过 5000 个标记，而未包括足够的文本来指明不同标记所表示的信息。</p></li><li><p>需要屏幕阅读器的用户很难使用。</p></li></ul></td><td><ul><li><p>此示例显示数据聚合程度更高的同一视图。</p></li><li><p>关键数据点仍然包括在内，但现在用户阅读和理解起来更容易。</p></li><li><p>标记数从超过 5000 个减少到约 20 个。</p></li><li><p>通过将焦点放在视图上，然后按 <span class="uicontrol">Enter</span> 打开<span class="uicontrol">“查看数据”</span>页面，用户仍然可阅读标记的基础详细信息。</p></li></ul></td></tr></tbody></table>
- 请考虑简单的图形元素，如允许您使用文本、颜色和形状向视图添加更多上下文的条形图或折线图。
- 限制标记数量，只显示强调最重要数据点的那些标记。

有关如何构建这种视图的信息和示例，请参见[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的[保持简单](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#SimpleAggregated)。

## 标题和说明

**WCAG 2.1 AA 原则：**可感知、可理解

如果在标题和说明中提供良好的描述性文本，则可以为使用辅助技术的用户提供上下文，并且可以帮助他们了解视图中的数据。使用以下准则来适应 Tableau 的视觉特性，以满足您的所有用户的需求。

- 将您的视图视为用于描述它的文本的补充。
- 使用标题和说明中的文本来描述您的可视化项以及您所显示的内容。
- 使用简单易懂的语言。避免使用术语、首字母缩写或缩写。
- 不要在您的文本说明中包含像“某某的图像”或者“某某的图片”这样的字眼，因为屏幕阅读器有时包括此信息。
- 避免全大写字母（例如在标题中），因为它们可能难以阅读。
    
    **示例：**此示例显示两个不同的条形图。一个包含非常少的文本，另一个包含标题和说明来添加上下文
    
    <table><tbody><tr><th style="text-align: left;">无法轻松访问 - 文本太少</th><th style="text-align: left;">更易于访问 - 添加描述性文本来提供上下文</th></tr><tr><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibility_NoTitlesandCaptions.png" alt="包含最少文本的柱形图"></td><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibility_MoreTitlesandCaptions.png" alt="添加了标题和说明文字的柱形图"></td></tr><tr><td><ul><li><p>单字标题不足以描述相关信息。</p></li><li><p>各个标记用颜色和大小区分。但如果没有附加文本，则可能很难理解这些标记的上下文。</p></li><li><p>没有说明或其他说明性文本来帮助解释此视图。</p></li></ul></td><td><ul><li><p>此示例显示同一视图，但在标题和说明中都包括了附加说明性文本。</p></li><li><p>使用了相同的色标和大小区分比例，但向条形标记中添加了标签来提供附加上下文。</p></li></ul></td></tr></tbody></table>

有关如何构建包括上下文文本的视图的信息和示例，请参见[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的[显示更多文本并使其有用](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#UseText)。

## 其他文本

**WCAG 2.1 AA 原则：**可感知、可理解

通过使用除了仅标题和说明之外的文本，可以帮助用户了解您正在显示的内容的上下文，以及帮助描述不同控件（例如图例和筛选器）与数据之间的关系。

添加其他文本时，请遵循以下准则：

- 在图例或筛选器的标题中使用文本来描述控件及其作用。您也可以使用仪表板上的文本区域为可视化项添加上下文，以进一步描述您正在显示的内容。
- 向可视化项中添加替代文本。在 Tableau 23.1 中，Tableau 开始为可视化项自动生成替代文本。在 Tableau 23.2 及更高版本中，您可以编辑自动生成的替代文本，以添加您知道对您的受众很重要的上下文。
- 尽可能按标签参考控件。例如，将图例标签从**“Subcategory”（子类）**更改为**“Color key for product type”（产品类型的色键）**可帮助用户理解控件与数据的关系。
- 如果在您的视图中包括链接文本，请使用文本来描述链接会将用户带到的位置。例如，使用像这样的链接文本：“1990 至 2020 年全球变暖统计数据”。避免像“单击此处”、“更多” 或“更多信息”这样的措辞。这些链接文本示例太过宽泛，可能会使用户感到迷惑。
- **示例：**以下示例显示两个气泡图。一个视图仅使用创建视图时默认显示的文本，另一个视图具有额外的文本，可在整个视图中添加上下文以帮助传达含义。
    
    <table><tbody><tr><th style="text-align: left;">无法轻松访问 - 文本太少</th><th style="text-align: left;">更易于访问 - 更多描述性文本</th></tr><tr><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibility_no_text1.png" alt="带有很少文本的气泡图"></td><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/access_helptextbulbblechart1.png" alt="带有标题、说明文字和更多文本的气泡图"></td></tr><tr><td><ul><li><p>此视图只为工作表标题使用默认文本，并为筛选器和图例使用默认标签。</p></li><li><p>各个标记仅通过大小和颜色加以区分。</p></li><li><p>视图中没有说明或其他说明性文本来帮助提供上下文。</p></li></ul></td><td><ul><li><p>此示例显示同一视图，但包括了附加说明性文本。</p></li><li><p>标题和说明中增加了附加文本，用于解释标记的关系，并提供有关视图所显示内容的附加上下文。</p></li><li><p>添加了用于显示利润数字的标记标签，因此用户不必只依靠颜色来理解此信息。</p></li></ul></td></tr></tbody></table>

有关如何构建包括附加上下文文本的视图的信息和示例，请参见[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的[显示更多文本并使其有用](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#UseText)和[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#Edit)。

## 颜色和对比度

**WCAG 2.1 AA 原则：**可感知、可理解

您可以使用颜色来帮助区分视图中的标记。然而，对于有视觉障碍的用户来说，仅仅颜色并不能始终提供足够的区分。当视图中有许多标记时，颜色太多尤其困难。在视图中添加颜色时，请遵循以下准则：

- Tableau 提供了一个色盲调色板，可用来帮助您为视图选择适当的颜色。对于您使用的任何调色板，请尝试提供足够的对比度，并分配在深淡色谱上彼此不同的颜色。
- 对于线条标记，请使用像形状、大小和标签这样的附加选项来帮助区分各个标记。
- 使用[对比分析器](https://www.paciellogroup.com/resources/contrastanalyser/)工具帮助选择具有足够对比度的最佳文本颜色和背景。确保文本颜色对比度很强，并满足 4.5:1 的对比度标准（3:1 表示大文本）。
    
    **示例：**此示例显示两个折线图。一个折线图使用的颜色只能区分线条，另一个折线图使用了更恰当的颜色加形状来区分标记。
    
    <table><colgroup><col><col></colgroup><tbody><tr><th style="text-align: left;">无法轻松访问 - 只使用颜色来区分标记</th><th style="text-align: left;">更易于访问 - 使用颜色和形状来区分标记</th></tr><tr><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibility_badcolor.png" alt="仅显示颜色以区分标记的折线图"></td><td><img src="https://help.tableau.com/v0.0/pro/desktop/zh-cn/Img/accessibility_colorshape.png" alt="使用颜色和形状来区分标记的折线图"></td></tr><tr><td><ul><li><p>此视图仅使用颜色来区分线条。</p></li><li><p>视图中的标记未使用能让有视觉障碍的用户完全看清楚的调色。</p></li></ul></td><td><ul><li><p>此示例显示同一视图，但同时使用了颜色和形状来标识标记。</p></li><li><p>颜色图例和带有明确标题的形状图例标识了颜色和形状在视图中所代表的内容。</p></li></ul></td></tr></tbody></table>

有关如何构建使用颜色来帮助区分标记的视图的信息和示例，请参见[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#ColorContrast)。

## 发布您的视图

**WCAG 2.1 AA 原则：**可感知、可操作、可理解

为了将视图提供给用户使用，请将视图发布到 Tableau Server 或 Tableau Cloud。然后在工具栏菜单中，单击“共享”。用户可以使用屏幕阅读器或键盘与视图和工具栏按钮进行交互。有关详细信息，请参见[Web 上适用于Tableau 的键盘辅助功能](https://help.tableau.com/v0.0/pro/desktop/zh-cn/access_keyboard_navigation.htm)。

有关如何发布和嵌入工作簿、查找嵌入代码以及关闭工具栏的信息，请参见[针对辅助功能制作视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm)中的[发布和共享视图](https://help.tableau.com/v0.0/pro/desktop/zh-cn/accessibility_create_view.htm#Publish)。