Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
Ring
AWS
文档
Support
Contact Us
My Cases

Console

as

新手入门
设计和开发
应用发布
参考
支持

网页应用无障碍功能指南

网页应用无障碍功能指南

有关更详尽的Vega网页应用无障碍功能指南，请参阅WCAG（最低AA）和WAI-ARIA。WCAG涵盖了无障碍功能的所有方面。

无障碍功能的目标是让电视应用为存在以下类型障碍的用户提供支持：

  • 视觉障碍：从色盲到完全失明
  • 行动受限：从手部灵活性下降到难以做出手势。
  • 言语变化：从带有口音的交流到非语言交流。
  • 认知挑战：从学习障碍到难以理解复杂指令。
  • 听力丧失：从部分失聪到完全失聪。

开发者可以通过包容性设计（例如屏幕阅读器、简化的控件、替代输入法、清晰的界面以及字幕）来解决这些方面的问题，从而打造让所有用户都能独立浏览和欣赏内容的电视体验。

Vega WebView与Vega OS API集成，可提供HTML5标准无障碍功能，让电视应用能够支持存在各种障碍的用户。尽管Vega OS提供了基础性的无障碍基础架构，但应用开发者必须在其网页应用中实现正确的焦点管理，以便以编程方式实现使用遥控器或辅助技术访问和浏览每个交互式元素的操作。

开发者必须为网页用户界面组件添加适当的描述、标签和操作属性，这样才能让屏幕阅读器以有意义的方式朗读屏幕内容，并让用户能够理解每个元素的用途。这包括设置ARIA属性、保持合乎逻辑的选项卡顺序、在各个模态中实现焦点捕获、在交互后复原焦点，以及提供可清晰显示当前导航位置的可见焦点指示器。在VueJS、ReactJS、React Native、适用于Vega的React Native和AngularJS等框架中，使用类似JSX或HTML的模板进行编写。

有关更多信息，请参阅ReactJS无障碍功能指南或Angular无障碍功能指南。

无障碍功能指南

使用以下指南实现无障碍功能。

语义HTML结构

  • 使用有意义的HTML标签。例如，使用语义HTML标签，如<header>、<footer>和<nav>。
  • 对于按钮，使用<button>元素代替<div>或<span>。
  • 对于链接，使用<a>代替非语义元素。
  • 使用分层标题结构： 从<h1>到<h6>，在应用中保持有序的标头。分层标题有助于屏幕阅读器和其他辅助技术了解内容层次结构，从而改善整体导航。

系统可以识别这些语义标签和辅助技术（例如VoiceView、屏幕放大镜和TextBanner），如果它们使用得当，系统就能自动处理大多数无障碍功能。

无障碍富互联网应用 (ARIA) 标签

开发者可能需要非语义元素，例如自定义组件。自定义组件可能包括图块、卡片或轮播。在这些情况下，使用ARIA属性将目的和行为传达给辅助技术。

ARIA属性有助于提供三种关键类型的信息：

  • 元素是什么。示例：role="button"。
  • 它能做什么。示例：aria-pressed或aria-expanded。
  • 其他上下文或标签。示例：aria-label或aria-describedby。

有关可以使用的ARIA标签、属性和方法的列表，请参阅ARIA创作实践指南。

ARIA用法示例如下。

<section aria-labelledby="features-title">
  <h2 id="features-title">无障碍功能</h2>
  <p>此部分介绍如何使您的内容易于访问。</p>
</section>

替代文本或图像和图标描述

VoiceView本身无法理解图像或图形。您必须提供替代文本或有意义的描述。例如，对于设置图标，使用诸如“设置”之类的描述，而不是“设置图标的图像”或“图标”。 VoiceView会预先添加“图像...”或“链接图像...”。

“设置”alt标签示例如下。

<img src="" alt="设置">
  • 装饰图像： 对于对用户没有价值的纯粹装饰性图像，可跳过alt标签。
  • 重复文本： 如果已经写好的文本也存在于alt标签或aria-label中，请不要重复这些文本。

焦点管理

元素的焦点应清晰可见。遵循WCAG指南。如果使用语义HTML标签（<button>和<a>），则默认情况下会看到焦点环，也可根据应用的设计进行自定义。VoiceView会识别并大声读出。以下列出了一些焦点管理指南。

  • 初始焦点： 使用React/Angular autoFocus属性。
  • 非语义标签： 如果使用此类标签，则编写自定义JavaScript代码来应用焦点，并编写自定义样式onFocus。
  • tabindex： 仅用于以下用例。
    • 您正在让不可设定焦点的元素成为可设定焦点的元素。
    • 您正在自定义焦点顺序，这一操作会影响模态和自定义组件。示例如下：```html
    可设定焦点的div，使用tabindex

    // tabindex使元素成为可设定焦点的元素 ```

  • 字母间距： 保持一致，避免间距过小或过大。
  • 全大写字母： 避免使用全大写字母，尤其是在长句中，因为这种形式更难阅读。
  • 行高： 根据WCAG，至少使用1.5（或150%）来提高可读性。
  • 排版： 保持一致的排版。

程序化公告

对于构建没有标签的软件或是不以程序化方式公告信息的开发者，有一些选项可用。对于使用画布绘制图表、示意图、交互式导航或3D世界元素的网页应用，以下选项很有用。

选项1： 使用<div>来实现公告，这样就可以在需要时更新公告文本

示例如下：

已复制到剪贴板。

<!-- index.html -->
<div id="announcer" aria-live="assertive" aria-atomic="true"></div>

<script>
  const announcerDiv = document.getElementById("announcer");

  // 模拟更新
  setTimeout(() => {
    announcerDiv.textContent = "新公告！";
  }, 5000);
</script>

选项2： 使用postMessage向Vega WebView容器发送消息，然后使用onMessage处理此消息

在onMessage中，调用AccessibilityInfo.announceForAccessibility();。这需要完成更多设置，但运行方式与SpeechSynthesis的运行方式类似。

此示例使用了类型-值消息模式，与使用JSON API或套接字数据行业标准的情况非常相似。发送或接收消息时，可以更轻松地序列化和反序列化不同的数据类型。在下列代码中，顶部的脚本是网页应用，而底部是Vega网页应用代码。

网页应用示例：

已复制到剪贴板。

<!-- index.html -->
<script>
  const message = JSON.stringify({
    type: "announcement",
    value: "新公告！"
  });
  
  // 使用postMessage向Vega网页应用发送数据。
  window.ReactNativeWebView.postMessage(message);
</script>

Vega网页应用

已复制到剪贴板。

// App.tsx
import { AccessibilityInfo } from "@amazon-devices/react-native-kepler";

export const App = () => {

  // 如果类型为“announcement”（公告），则实现以返回值
  const getAnnouncement = (message: string) => {};

  return (
        <WebView
      source={{ uri: 'https://amazon.com' }}
      
      // 使用onMessage从postMessage接收数据
      onMessage={(event: WebViewMessageEvent) => {
        const announcement = getAnnouncement(event.nativeEvent.data);
        
        // 公告
        AccessibilityInfo.announceForAccessibility(announcement);
      }}
      >
    </WebView>
  );
};

排版和颜色

以下列出了一些排版和颜色指南。

  • 字体大小必须符合可读性标准。
  • 普通文本的颜色对比度比值必须≥ 4.5:1，大号文本必须≥ 3:1。依据WCAG。请查看对比度检查器，网址为https://webaim.org/resources/contrastchecker/（仅提供英文版）
  • 视觉焦点应使用与背景不同的颜色。
  • 字体系列应简单易懂，避免使用连笔过多或颜色过浅的字体
  • 行高应使内容易于阅读。

以上仅列出了部分标准。还有更多关于排版和颜色的无障碍功能指南。

VoiceView

使用VoiceView进行测试以避免多余的公告，保持正确的阅读顺序，并启用实时更新 (aria-live)。

测试播放、Alexa和其他音频行为。

要隐藏无障碍功能API中的非交互式内容，请使用aria-hidden="true"。有关更多信息，请查看MDN文档。以下提供了一些非交互式内容的示例。

  • 纯粹的装饰性内容，例如图标或图像
  • 重复的内容，例如重复的文本
  • 屏幕外或折叠的内容，例如菜单

Vega WebView中的无障碍功能

  • 电视遥控器（方向键、后退、选择）
  • VoiceView（屏幕阅读器）
  • 放大镜（屏幕缩放）

  • 隐藏式字幕/字幕

    Fire TV菜单中的无障碍功能选项

在WebView中启用无障碍功能元素

启用VoiceView

  1. 导航到无障碍功能设置。
  2. 开启VoiceView。

在Fire TV菜单中打开VoiceView

隐藏VoiceView的元素

要隐藏VoiceView元素，可使用以下代码。

已复制到剪贴板。

aria-hidden="true"

缺少默认可访问名称时通知VoiceView注意某个元素

使用以下代码让VoiceView知晓该元素。

已复制到剪贴板。

<button aria-label="关闭对话框">X</button>

公告动态值

HTML、ReactJS和Angular使用aria-live。有关更多详细信息，请参阅ARIA: aria-live属性。使用以下代码公告动态值。

已复制到剪贴板。

<div aria-live="polite" id="status"> <!- Text inserted here will be announced --></div>

测试案例

以下提供了一些用于验证应用无障碍功能的最小测试案例。

VoiceView

可以启用和禁用VoiceView

  1. 导航到无障碍功能设置。
  2. 开启/关闭VoiceView

应用在启用VoiceView的情况下正常工作

  1. 启用VoiceView。
  2. 使用遥控器浏览应用
  3. 验证每个用户界面元素的语音提示。

在新屏幕上以语音讲述文本

在新屏幕上，以语音讲述标题、描述、用法提示、方向文本和当前聚焦项目。

  1. 导航到不同的应用部分（例如，主页、设置、内容）
  2. 确认VoiceView输出

确保用户可以（使用方向键/选择/快速选择按钮操作）导航到所有可操作的元素。必须以语音完整讲述聚焦元素，并且在标准模式下必须以语音讲述该元素的静态文本。

暂停后以语音讲述聚焦元素

停顿片刻后（约0.5秒），应该会听到以语音讲述的用法提示、方向文本、描述方和静态文本。

图像和图标包含描述性文本

如果图像提供了指令，请在替代文本中描述所有指令，以便VoiceView以语音讲述。

VoiceView在审阅模式下正常工作

在开启VoiceView的情况下，按住菜单键2秒钟。用户应该能够导航（在方向键上向左/向右）浏览所有文本和控件，但粒度会发生变化（方向键上向上/向下）。用户必须能够在审阅模式下阅读不可操作的文本和项目。

无障碍功能手势正常工作

例如，双击激活项目，或者长按。

放大（屏幕缩放）

可以启用和禁用放大

  1. 转到无障碍功能
  2. 启用放大镜
  3. 验证它是否可以放大/缩小。

整个用户界面的缩放功能

  1. 尝试缩放文本、按钮、图像。
  2. 确认缩放比例和可见性正确无误

缩放后可保持可读性，不会剪裁内容

  1. 在所有屏幕上放大/缩小
  2. 确认布局保持不变，且滚动功能可正常工作。

1.5倍放大在首次尝试时就能正常工作

  1. 转到Settings（设置）。
  2. 确保缩放已关闭。
  3. 激活缩放
  4. 观察缩放和应用行为。

首次访问后，会根据用户的首选项保留缩放设置

  1. 转到Settings（设置）。
  2. 确保缩放已关闭。
  3. 激活缩放
  4. 观察缩放和应用行为
  5. 关闭应用
  6. 重新打开应用或再次打开设备电源
  7. 确认是否保留之前的缩放级别

放大镜在焦点上正常工作

确保用户可以（使用方向键/选择）导航到可操作的控件，并且放大镜会跟随焦点。

可以访问所有文本和控件（通过使用菜单键+方向键进行“平移”）

字幕/隐藏式字幕

可以启用和禁用字幕

  1. 播放视频。
  2. 在播放器/设置中切换字幕
  3. 确认可见性。

隐藏式字幕样式正常工作

在全局设置下，在本地播放器中使用CC设置。

  1. 更改字幕设置
  2. 相应地验证用户界面更新

字幕在各会话之间保留（如果适用）

  1. 启用
  2. 退出应用
  3. 重新打开
  4. 检查设置是否仍然存在。

字幕准确无误且与音频同步

  1. 播放内容。
  2. 确认字幕同步且准确无误。

用户可获得准确的隐藏式字幕

确保字幕仅有短暂延迟，并确保字幕与内容一致。

字体/文本大小

文本大小增大和缩小

  1. 访问字体设置。
  2. 调整大小
  3. 验证用户界面中的文本比例是否正确

应用中保留字体更改

  1. 更改字体大小
  2. 导航到不同的屏幕
  3. 确认一致性。

使用大字体时，不会破坏布局

  1. 设置最大字体大小。
  2. 确认没有用户界面剪裁或重叠

焦点/视觉指示器

每个可操作的元素都有一个可见的焦点环

  1. 使用遥控器浏览所有用户界面
  2. 检查每个元素上的焦点环。

应用具有一致的焦点顺序（导航流程符合逻辑）

  1. 使用遥控器导航。
  2. 确认焦点顺序清晰直观（从上到下、从左到右）

可选： 焦点变化时的音频反馈

  1. 启用音频提示
  2. 导航
  3. 确认焦点变化时有声音指示。

用户操作（例如关闭模态）后焦点不会丢失

  1. 打开和关闭模态或对话框。
  2. 焦点返回到预期的元素
  1. 使用方向键、后退、选择按钮
  2. 确认无需触摸输入即可访问所有区域。

键盘导航正常工作（如支持）

  1. 使用外接键盘或无障碍输入设备进行测试。
  2. 验证所有互动区域

没有卡滞区域（可以离开所有区域）

  1. 尝试进入/退出模态、菜单和轮播
  2. 确认不会发生卡死

延迟

无障碍功能元数据作为标准有效负载包的一部分加载

用户会收到视觉和声音通知，指出屏幕上正在加载内容

在连接超时的情况下不会屏蔽用户

确认即使用户处于离线状态，也不会屏蔽他们。

通过设计实现无障碍功能

图像和图标包含描述性文本

如果图像提供了指令，请将这些指令添加到替代文本中，以便VoiceView以语音讲述。

状态通过多种方式传达

传达方式可以是文本、颜色和声音。

所有图标都有文本描述

即使是常用图标也需要文本描述。

WebView无障碍功能故障排除

在启用VoiceView的情况下，VoiceView不以语音讲述任何项目

检查无障碍功能标记。

用户界面元素读取为按钮

出现这一行为，是因为用户界面元素没有无障碍功能标签或描述，但它们的无障碍功能角色设置为按钮。

用户界面元素与显示的视觉效果不同

存在这种差异，可能是因为应用未正确设置辅助功能的聚焦元素。

VoiceView多次以语音讲述标题或用户界面元素

以语音重复讲述的项目可能是由于重复的A11Y公告造成。移除所有重复的A11Y公告。

视频播放导致连续读取

连续读取可能是错误使用的标签造成的。焦点位于内容细节上，而不是视频播放器组件上，后者内部没有文本。应用应仅聚焦于视频播放期间在屏幕上看到的元素/节点。

Last updated: 2026年4月24日

关注我们:
amazon_developer_logo

© 2010-2026 年，亚马逊公司或其附属公司. 保留所有权利。

协议

开发人员博客

联系我们