网页应用无障碍功能指南

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

​

无障碍功能指南

​

语义HTML结构

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

​

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

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

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

​

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

<img src="" alt="设置">

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

​

焦点管理

• 初始焦点：使用React/Angular autoFocus属性。
• 非语义标签：如果使用此类标签，则编写自定义JavaScript代码来应用焦点，并编写自定义样式onFocus。
• tabindex：仅用于以下用例。
  • 您正在让不可设定焦点的元素成为可设定焦点的元素。
  • 您正在自定义焦点顺序，这一操作会影响模态和自定义组件。示例如下：
    <code>{"<div tabindex=\"0\">"}</code>使用tabindex<code>{"</div>"}</code>实现可设定焦点的div // tabindex使元素成为可设定焦点
    
• 字母间距：保持一致，避免间距过小或过大。
• 全大写字母：避免使用全大写字母，尤其是在长句中，因为这种形式更难阅读。
• 行高：根据WCAG，至少使用1.5（或150%）来提高可读性。
• 排版：保持一致的排版。

​

程序化公告

​

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

<!-- 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处理此消息

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

// 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

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

​

Vega WebView中的无障碍功能

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

​

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

​

启用VoiceView

​

在屏幕上导航

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

​

使用Fire TV遥控器

• 按住Back和菜单键2秒钟。

​

使用命令行

vega device shell

vdcm set "com.amazon.devconf/system/accessibility/VoiceViewEnabled" "ENABLED"

​

禁用VoiceView

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

​

隐藏VoiceView的元素

aria-hidden="true"

​

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

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

​

公告动态值

<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输出

​

导航和以语音讲述的元素正常工作

​

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

​

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

​

VoiceView在审阅模式下正常工作

​

无障碍功能手势正常工作

​

放大（屏幕缩放）

​

可以启用和禁用放大

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. 确认可见性。

​

隐藏式字幕样式正常工作

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. 确认不会发生卡死

​

延迟

​

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

​

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

​

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

​

通过设计实现无障碍功能

​

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

​

状态通过多种方式传达

​

所有图标都有文本描述

​

WebView无障碍功能故障排除

​

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

​

用户界面元素播报为按钮

​

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

​

VoiceView多次语音播报标题或用户界面元素

​

视频播放导致连续读取

​

音频降低不起作用

​

相关主题

• Vega网页应用概述
• Vega WebView组件参考
• 适用于Vega的辅助技术
• 无障碍功能