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团队提供
  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

    // 这是为了让一个元素可设定焦点

  • 字母间距： 保持一致，避免间距过小或过大。
  • 避免使用全大写字母： 特别是对于长句子，因为它更难阅读。
  • 行高： 根据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 = () => {

  // 如果类型为“公告”，则实现以返回值
  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"> <!— 将公告此处插入的文本 --></div>

测试案例

以下是建议的最小测试案例。您可以将它们用于应用的无障碍功能测试。

VoiceView

启用和禁用VoiceView

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

使用支持VoiceView的应用

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

验证新的屏幕以语音讲述的文本

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

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

验证导航和以语音讲述的元素

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

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

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

验证图像和图标是否包含描述性文本

如果图像提供指令，则还必须以alt-text描述所有指令，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. 确认不会发生卡死

延迟

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

验证用户是否被告知内容正在屏幕上加载（视觉和听觉）

验证连接超时的情况下用户未被屏蔽

如果用户处于离线状态，这也适用。

通过设计实现无障碍功能

验证图像和图标是否使用描述性文本标记

如果图像提供指令，则必须用alt-text描述所有内容，VoiceView才能讲述。

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

其中一些传达方式可能是文本、颜色和声音。

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

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

故障排除

启用VoiceView之后未在应用中以语音讲述任何项目

检查无障碍功能标记。

用户界面元素读取为按钮

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

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

这可能是因为该应用未正确设置辅助功能的聚焦元素。

多次讲述标题或用户界面元素

这可能是由于重复的A11Y公告造成。移除所有重复的A11Y公告。

视频播放期间有持续朗读现象

这可能是对标签的错误使用，因此焦点位于内容细节上，而不是视频播放器组件上，后者内部没有文本。当应用在视频播放期间未在视觉上聚焦于屏幕时，不得聚焦于元素/节点。

音频降低不起作用

如果VoiceView在视频播放期间开始讲述，VoiceView语音将获得优先权，视频播放音频应该会消失。

Last updated: 2025年10月7日

关注我们:
amazon_developer_logo

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

协议

开发人员博客

联系我们