ArcGIS Hub 可访问性

Esri 在 ArcGIS 软件中融入了包容性、多样性和平等,其中包括与最新辅助技术兼容的产品和服务,并遵循当前软件可访问性标准和指南。

ArcGIS Hub 中的可访问性包括以下部分中介绍的特性和功能。 Hub 支持创建用于协作、沟通和共享内容的站点,并且包含许多支持可访问性的内置组件。 站点编辑者在配置其站点时也可以融入可访问性。 请使用以下功能和建议以改善站点的可访问性。

在整个站点中选择高对比度颜色

高对比度颜色可帮助各类视觉能力的用户更清晰地辨识站点上的信息。 根据 WCAG 指南 1.4.3 对比度(最低要求),文本与背景颜色之间的颜色亮度对比度必须满足:对于小号文本,必须大于或等于 4.5:1;对于大号文本,必须大于或等于 3:1。

大号文本是指粗体状态下字号为 14 磅(18 像素)及以上的文本,或者常规字重下字号为 18 磅(24 像素)及以上的文本。 小号(常规)文本是指除了上述大号文本以外的所有其他文本。 要确保您的站点具备足够的对比度,请参考以下建议:

使用高对比度主题

如果您使用的是 ArcGIS Online 共享主题,则在 Hub 中创建的站点将自动导入该共享主题。 此主题用于比较前景和背景颜色之间的对比度。

要确保您的站点主题符合无障碍要求,请验证以下内容是否均已满足常规文本的对比度要求:标题文本与背景、全局导航文本与背景、正文文本与背景,以及正文链接与背景。 Hub 将使用这些组合以生成应用于所有组件的主题。

提示:

要增强文本与行背景图像之间的对比度,可为该行添加浅色或深色背景颜色,并调整该颜色的透明度。 当有些用户在禁用图像的情况下浏览网页时,此颜色也可以用作背景。

确保视觉内容的可访问性

颜色亮度对比度标准同样适用于站点中的图形元素。 WCAG 指南 1.4.11 非文本对比度建议采用对比度 3:1​,以确保图标及图形元素与背景之间达到足够的对比度。 根据图形的不同,可以调整嵌入式元素的配置设置,以满足颜色亮度对比度标准。 例如,可以将一些社交媒体帖子配置为使用高对比度主题。

使用自动化工具验证网站的可访问性

如果您为站点设置了主题,则可以使用外部工具验证所选颜色的对比度。 多种免费的颜色对比度分析工具可供使用。 例如,可以使用 WebAIM 的颜色对比度检查器以比较两种十六进制代码颜色,或者安装 TPGI 的桌面应用程序以比较十六进制、RGB、HSL 和 HSV 颜色,并使用吸管工具从屏幕的任何部分提取颜色。

一些工具可以对整个站点运行自动化测试,以检查是否存在违反可访问性的问题。 Deque 提供了一款 aXe 浏览器插件,可与 Chrome、Firefox 或 Edge 浏览器配合使用。

自动化可访问性测试工具无法检查背景图像上文本的可读性,因此您可能需要手动进行此项检查。 如果存在背景图像,并且自动化工具报告失败,请检查背景颜色与前景颜色对比度。 这些工具将比较颜色,就像背景图像不存在一样。

确保行卡片具有足够的颜色对比度

行卡片是站点的构建模块,可以包含其他布局卡片的任意组合。 当配置行的设置时,可以设置背景颜色或上传图像。 对于这两种选择,请确保背景与该行中其他卡片显示的任何内容之间达到足够高的颜色对比度。

组织可访问的内容结构

请使用节和标题来组织文本内容,以便屏幕阅读器能够更准确地导航文本。 有关详细信息,请参阅相关 WCAG 指南。 此外,您也可以通过使用节标题级别来改善内容的信息等级。 避免在布局中使用表格来组织内容。 当使用布局卡片时,可以使用 WCAG 指南“2.4.4. 链接用途(在上下文中)”以及“2.4.6 标题和标签”,以创建便于导航的结构化文本。

使用节和节标题来组织倡议

在发布的每个页面上,至少包含一个 <h1> 标题,以便为访问者提供上下文。 请勿跳过标题级别,也不要为了美观而对文本应用标题样式以增大字号。

当使用文本卡片时,请使用节和标题级别来组织文本。 可以使用文本卡片表格随附的表格标题切换 (H) 选项以针对辅助技术以最佳方式组织表格。 当使用图库卡片时,请调整标题以辅助嵌套标题。 此操作不会更改字号。

确保链接可访问

在新窗口或选项卡中打开的链接可能会干扰浏览,并且令部分用户感到困惑。 在新窗口或选项卡中,后退按钮不起作用,用户必须关闭选项卡,才能返回到之前的内容。 如果链接到诸如外部站点和页面等资源,请在新选项卡或窗口中打开链接时提供通知,因为这是一种上下文更改(G201 3.2.2 输入)。 当目标为不同类型的文件格式(例如 PDF)时,此方法也非常有用。 请使用文本或图标以提供此通知。

在链接内部使用独立启动图标,并为其单独设置标签:

<calcite-link href="#" target="_blank">Get started &nbsp;<calcite-icon icon="launch" text-label="opens in new tab" scale="s"></calcite-icon></calcite-link>

图库中的图标被标记为装饰性图标,因为链接所需上下文由 aria-label 提供,其与可见文本不同。 如果在链接上使用 aria-label,则当传递给辅助技术时,aria-label 会覆盖链接文本。

如果图标末尾空位用于视觉指示器,请在 aria-label 中包含链接文本并提供程序上下文:

<calcite-link href="#" target="_blank" icon-end="launch" aria-label="Get started, Opens in new tab">Get started</calcite-link>

对于外部链接,还需要确保文本描述了链接的目的或目标。 当邀请访客关注链接时,可以使用类似“了解有关……的详细信息”这样的措辞,而非“单击此处”。 这意味着使用快捷方式在页面上导航链接的辅助技术无需读取周围的上下文。

使视觉内容易于访问

添加图像和媒体以丰富您的站点和页面。 选择能够提供独特信息的视觉内容。

向图像添加替代文本

除了装饰性内容之外,所有视觉内容均需要一个文本等效项(1.1.1 非文本内容),通常称为替代文本或 alt 文本。 替代文本是对非装饰性图像的客观描述,用于向使用屏幕阅读器的人员描述图像。 屏幕阅读器将朗读替代文本以描述显示的图像。

图像卡片设置提供多种自定义图像显示方式的选项,其中包括提供图像替代文本的选项。 对于类别卡片,您可以上传自己的图像,也可以从图标图库中进行选择。 图库中的图标为可伸缩矢量图形 (SVG),这是一种可以缩放至不同大小而不会影响图像质量的图像文件格式。 链接文本比图标提供了更丰富的上下文,因此图标在图库中会自动标记为装饰性图标。

当使用您自己的图像时,请提供 SVG 或透明 PNG 文件的 URL。 如果图像用于提供补充信息,请添加替代文本;如果图像为装饰性图像,请将其留空。 请考虑以下为图像编写替代文本的最佳做法:

  • 简略描述图像。
  • 请勿在描述中包含诸如“图片”、“图像”或“图形”等词语。 将自动传达此信息。
  • 提供与上下文相关的详细信息。
  • 使用与图像字幕不同的替代文本。 与替代文本不同,字幕用于对图像进行更加主观的描述。 替代文本与图像存在程序上的关联,而字幕则没有。 屏幕阅读器可以读取替代文本和字幕,因此,如果这两者相同,则屏幕阅读器可能会重复该短语。
  • 如果使用图像作为链接,请描述链接的目标或目的,而非描述图像本身。

为视频内容添加字幕和标题

WCAG 指南“1.2.2 字幕”要求为视频卡片中包含的视频添加字幕。 Hub 支持 FacebookVimeoYouTube 视频。 可以在 YouTube 的支持页面上了解有关为该视频添加字幕的详细信息,该页面提供了如何上传字幕文件或者手动转录字幕并将其与视频同步的说明。

嵌入内容必须包含标题,以便使用辅助技术的用户决定是否进入页面的该部分。 可以使用视频卡片上的标题设置来描述视频内容。

提示:

这也适用于嵌入在 Iframe 卡片中的内容。 在 iframe 内添加用于描述内容的标题,因为使用屏幕阅读器的用户不会自动读取该标题。 必须选择进入 iframe。

了解详细信息

有关符合当前版本的 Web 内容无障碍指南 (WCAG) 的 ArcGIS Hub 可访问性一致性级别的信息,请参阅 Esri 可访问性一致性报告。 这些报告基于自愿产品可访问性模板 (VPAT),是通过由认证的可访问性专业人员对 ArcGIS Hub 进行评估完成的。

有关 Esri 和无障碍技术的详细信息,请参阅 Esri 法律可用性。有关产品可访问性,请参阅以下资源: