Amazon Developer

Console

as

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

Console

as

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

网页应用无障碍功能指南

网页应用无障碍功能指南

对于Vega网页应用，我们建议您遵循WCAG（最低AA）和WAI-ARIA的指导方针。WCAG涵盖了无障碍功能的所有方面。

无障碍功能的目标是提供一款支持以下类型残障用户的电视应用：

  • 视觉： 从色盲到全盲。
  • 行动能力： 从灵活性受限到难以做出手势。
  • 言语： 从说话有口音到使用非语言表达（如果使用语音输入）。
  • 认知： 包括学习障碍、复杂指令接受困难。
  • 听力： 从丧失部分听力到完全丧失听力。

WebView可以是HTML、ReactJS或Angular应用。一个无障碍WebView包括3个层：

  1. 网页应用： 开发者必须编写和实现无障碍代码。
  2. Vega WebView包装器： Vega团队提供了这一WebView包装器。
  3. 操作系统： 操作系统提供所有必需的无障碍功能支持和API。

Vega WebView包装器

要使您的HTML/Angular/React应用成为Vega网页应用，请使用Vega WebView包装器将其包装。

焦点应进入应用内，并满足以下要求：

  1. 将初始焦点设置到应用容器
  2. 将电视遥控器事件（方向键、选择）显示为键盘事件
  3. 在设备上使用辅助技术测试应用

网页应用

重点关注这一层，让您的应用实现无障碍访问。在VueJS、ReactJS、React Native、适用于Vega的React Native和AngularJS等框架中，使用类似JSX或HTML的模板进行编写。

可供探索的资源

  1. ReactJS无障碍功能指南
  2. Angular无障碍功能指南

无障碍功能指南

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

语义HTML结构

  • 使用有意义的HTML标签。例如，使用语义HTML标签，如<header>、<footer>和<nav>。对于按钮，使用<button>元素代替<div>或<span>。对于链接，请使用<a>代替非语义元素。平台可以识别这些语义标签和辅助技术（例如VoiceView、屏幕放大镜和TextBanner）。如果使用得当，系统会自动处理大多数无障碍功能。
  • 使用分层标题结构： 从<h1>到<h6>，在应用中保持有序的标头。分层标题有助于屏幕阅读器和其他辅助技术了解内容层次结构，从而改善整体导航。

无障碍富互联网应用 (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>

alt或图像和图标描述

VoiceView无法理解图像或图形。因此，请提供alt或有意义的描述。例如，对于设置图标，使用诸如“设置”之类的描述，而不是“设置图标的图像”或“图标”。 VoiceView会添加“图像...”或“链接图像...”。添加“图像”或“图标”之类的文本过于模糊。

<img src="" alt="设置">
  • 装饰图像： 对于没有用户价值的纯粹装饰性图像，可跳过alt标签。
  • 重复文本： 如果图像已经包含alt标签或aria-label中附近的文本，请勿重复该文本。

焦点管理

  • 元素的焦点应清晰可见。遵循WACG指南。
  • 如果使用语义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>

已复制到剪贴板。

// App.tsx
import { AccessibilityInfo } from "@amzn/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>
  );
};

排版和颜色

  1. 字体大小必须符合可读性标准。
  2. 对于普通文本，使用≥ 4.5:1的颜色对比度比率，对于大型文本，使用≥ 3:1。依据WCAG请查看https://webaim.org/resources/contrastchecker/（仅提供英文版）
  3. 视觉焦点应使用与背景不同的颜色
  4. 字体系列应该易于理解，避免使用过于草书或过淡的字体
  5. 行高应使内容易于阅读

等等。

VoiceView

使用VoiceView进行测试，以避免多余的公告，保持正确的阅读顺序，并启用实时更新 (aria-live)。如有常见问题，请查看常见问题解答。

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

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

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

Vega WebView中的无障碍功能

  1. 电视遥控器（方向键、后退、选择）
  2. VoiceView（屏幕阅读器）
  3. 放大镜（屏幕缩放）
  4. 隐藏式字幕/字幕

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. 转到设置
  2. 确保缩放已关闭
  3. 激活缩放
  4. 观察缩放和应用行为

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

  1. 转到设置
  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以语音讲述。

验证状态是否通过多种方式传达

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

验证所有图标是否都有文本描述

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

故障排除

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

检查无障碍功能标记。

用户界面元素读取为按钮

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

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

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

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

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

视频播放导致连续读取

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

音频降低不起作用

如果VoiceView在视频播放期间开始以语音讲述，则VoiceView语音会获得优先权，视频播放音频应该会降音（音量降低）。

Last updated: 2026年2月4日

关注我们:
amazon_developer_logo

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

协议

开发人员博客

联系我们