【OpenHarmony】React Native鸿蒙实战：Accessibility 语义标签开发指南

本文深入探讨如何在React Native中实现OpenHarmony 6.0.0平台上的无障碍访问功能。

苹安.

253人浏览 · 2026-02-06 21:36:34

苹安. · 2026-02-06 21:36:34 发布

在这里插入图片描述

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

在这里插入图片描述

摘要

本文深入探讨如何在React Native中实现OpenHarmony 6.0.0平台上的无障碍访问功能。

Accessibility 组件介绍

Accessibility（无障碍访问）是现代移动应用开发的核心功能之一，它确保所有用户（包括视障人士）都能平等地访问应用内容。在React Native中，Accessibility通过一系列语义化标签和属性实现，这些标签为辅助技术（如屏幕阅读器）提供了必要的上下文信息。

技术原理与架构

React Native的Accessibility API构建在平台原生无障碍服务之上。在OpenHarmony 6.0.0中，这对应着AccessibilityManager服务的实现。当React Native组件渲染时，它会将Accessibility属性转换为OpenHarmony的AccessibilityEvent对象，通过以下架构进行交互：

这种分层架构确保了跨平台一致性，同时允许平台特定的优化。在OpenHarmony 6.0.0上，Accessibility事件通过以下路径传递：

React Native组件设置Accessibility属性
Harmony渲染引擎将属性转换为OHOS AccessibilityNodeInfo
AccessibilityManager收集节点信息
TalkBack服务解析并朗读内容

核心Accessibility属性

在React Native中，有五个核心Accessibility属性适用于OpenHarmony 6.0.0平台：

属性	类型	作用	OpenHarmony对应属性
`accessibilityLabel`	string	替代可见文本的朗读内容	`contentDescription`
`accessibilityHint`	string	操作提示信息	`hintText`
`accessibilityRole`	string	元素类型（按钮、标题等）	`className`
`accessibilityState`	object	元素状态（选中、禁用等）	`stateDescription`
`accessibilityValue`	object	元素值（进度条、滑块等）	`progressDescription`

OpenHarmony 6.0.0无障碍服务特性

OpenHarmony 6.0.0的无障碍服务提供了以下关键特性，这些特性直接影响React Native Accessibility的实现：

语音反馈系统：基于TTS引擎的实时朗读
焦点导航：支持手势控制的焦点切换
屏幕内容放大：为低视力用户提供放大支持
高对比度模式：增强视觉区分度
振动反馈：为操作确认提供触觉反馈

React Native与OpenHarmony平台适配要点

将React Native的Accessibility功能适配到OpenHarmony 6.0.0平台需要考虑以下关键因素：

1. 语义映射差异

虽然React Native提供了跨平台的Accessibility API，但在OpenHarmony 6.0.0上需要特别注意语义映射关系：

这种映射在大多数情况下是直接的，但存在以下特殊情况：

React Native的switch角色映射为OHOS的ToggleButton
image角色需要额外设置isImportantForAccessibility=true
header角色在OHOS中需要设置heading标志

2. 焦点管理机制

OpenHarmony 6.0.0使用基于树形结构的焦点管理系统，而React Native采用声明式的焦点控制。这要求开发者在混合使用原生组件和React Native组件时特别注意：

焦点场景	React Native解决方案	OpenHarmony注意事项
初始焦点	`autoFocus`属性	需要确保根布局已加载
焦点顺序	`accessibilityFlow`属性	必须设置`focusable=true`
焦点丢失	`onBlur`事件处理	检查无障碍服务是否启用
自定义焦点	`ref.focus()`方法	需要请求`accessibilityFocus`

3. 无障碍事件处理

在OpenHarmony 6.0.0上处理无障碍事件时，需要注意以下平台特定行为：

这个交互流程揭示了两个关键适配点：

事件发送延迟：OpenHarmony 6.0.0上的无障碍事件有约100ms的处理延迟
节点查询机制：当屏幕阅读器请求信息时，会触发额外的节点查询

4. 测试策略

在OpenHarmony 6.0.0上测试Accessibility功能时，推荐以下方法：

开发阶段：使用@testing-library/react-native的getByA11yLabel
模拟测试：通过ADB命令激活TalkBack模拟模式
真机测试：在设备上启用"无障碍快捷方式"
自动化测试：使用Hypium框架的Accessibility断言

Accessibility基础用法

1. 语义化内容标记

为UI元素添加有意义的语义标签是Accessibility的核心。在OpenHarmony 6.0.0上，应遵循以下最佳实践：

简洁描述：accessibilityLabel应简明扼要，不超过20个字符
上下文独立：标签应自包含，无需额外上下文
避免冗余：不要重复可见文本内容
本地化支持：所有标签应通过i18n系统实现多语言

例如，对于一个搜索按钮：

✅ 正确：accessibilityLabel="搜索"
❌ 错误：accessibilityLabel="按钮"

2. 角色与状态管理

正确设置accessibilityRole和accessibilityState对于OpenHarmony 6.0.0的屏幕阅读器至关重要：

这个状态图展示了按钮组件的典型状态变化，在代码中应这样表示：

<Button
  accessibilityRole="button"
  accessibilityState={{ disabled: isDisabled }}
/>

3. 复杂组件适配

对于自定义复合组件，在OpenHarmony 6.0.0上需要特殊处理：

组合组件：使用accessible={false}隐藏子元素
列表项：设置accessibilityCollectionItem属性
分组元素：使用accessibilityRole="group"创建逻辑分组
可调整组件：为滑块等元素提供accessibilityValue

4. 焦点控制策略

在OpenHarmony 6.0.0上实现高效的焦点导航：

导航模式	React Native实现	OpenHarmony优化
线性导航	默认顺序	添加`focusable=true`
分块导航	`accessibilityRole="group"`	设置`accessibilityTraversal`
快捷导航	`accessibilityActions`	注册自定义快捷键
模态焦点	`accessibilityViewIsModal`	使用`modal`布局标志

Accessibility代码展示

以下是一个完整的Accessibility实现示例，展示了在OpenHarmony 6.0.0上如何创建无障碍友好的用户界面：

/**
 * AccessibilitySemanticLabelScreen - Accessibility语义标签演示
 *
 * 来源: 用React Native开发OpenHarmony应用：Accessibility语义标签
 * 网址: https://blog.csdn.net/2501_91746149/article/details/157580802
 *
 * @author pickstar
 * @date 2025-02-01
 */

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Switch,
} from 'react-native';

interface Props {
  onBack: () => void;
}

interface AccessibilityAttribute {
  name: string;
  type: string;
  description: string;
  ohMapping: string;
}

interface SemanticMapping {
  rnRole: string;
  ohNodeType: string;
  notes: string;
}

const AccessibilitySemanticLabelScreen: React.FC<Props> = ({ onBack }) => {
  const [switchStates, setSwitchStates] = useState({
    darkMode: false,
    notifications: true,
    autoUpdate: false,
  });
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [sliderValue, setSliderValue] = useState(50);
  const [actionMessage, setActionMessage] = useState<string | null>(null);

  const accessibilityAttributes: AccessibilityAttribute[] = [
    {
      name: 'accessibilityLabel',
      type: 'string',
      description: '替代可见文本的朗读内容',
      ohMapping: 'contentDescription',
    },
    {
      name: 'accessibilityHint',
      type: 'string',
      description: '操作提示信息',
      ohMapping: 'hintText',
    },
    {
      name: 'accessibilityRole',
      type: 'string',
      description: '元素类型（按钮、标题等）',
      ohMapping: 'className',
    },
    {
      name: 'accessibilityState',
      type: 'object',
      description: '元素状态（选中、禁用等）',
      ohMapping: 'stateDescription',
    },
    {
      name: 'accessibilityValue',
      type: 'object',
      description: '元素值（进度条、滑块等）',
      ohMapping: 'progressDescription',
    },
  ];

  const semanticMappings: SemanticMapping[] = [
    { rnRole: 'button', ohNodeType: 'Button', notes: '标准按钮映射' },
    { rnRole: 'link', ohNodeType: 'Link', notes: '链接元素' },
    { rnRole: 'header', ohNodeType: 'Heading', notes: '需要设置heading标志' },
    { rnRole: 'switch', ohNodeType: 'ToggleButton', notes: '切换按钮映射' },
    { rnRole: 'search', ohNodeType: 'SearchBox', notes: '搜索输入框' },
    { rnRole: 'image', ohNodeType: 'Image', notes: '需设置isImportantForAccessibility' },
    { rnRole: 'text', ohNodeType: 'TextView', notes: '纯文本元素' },
    { rnRole: 'adjustable', ohNodeType: 'SeekBar', notes: '可调节控件' },
  ];

  const toggleSwitch = (key: keyof typeof switchStates) => {
    setSwitchStates(prev => ({ ...prev, [key]: !prev[key] }));
    const newState = !switchStates[key];
    const labels = {
      darkMode: `深色模式已${newState ? '开启' : '关闭'}`,
      notifications: `通知权限已${newState ? '开启' : '关闭'}`,
      autoUpdate: `自动更新已${newState ? '开启' : '关闭'}`,
    };
    showActionMessage(labels[key]);
  };

  const showActionMessage = (message: string) => {
    setActionMessage(message);
    setTimeout(() => setActionMessage(null), 2000);
  };

  const handleConfirmPress = () => {
    showActionMessage('已确认操作');
  };

  const handleCancelPress = () => {
    showActionMessage('已取消操作');
  };

  const handleLinkPress = () => {
    showActionMessage('正在导航到详情页...');
  };

  const listItems = ['选项一', '选项二', '选项三', '选项四'];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={onBack} style={styles.backButton}>
          <Text style={styles.backButtonText}>← 返回</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Accessibility语义标签</Text>
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {/* 介绍卡片 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>♿ 无障碍访问介绍</Text>
          <Text style={styles.cardText}>
            Accessibility通过一系列语义化标签和属性实现，为辅助技术（如屏幕阅读器）提供必要的上下文信息。
            在OpenHarmony 6.0.0上，与鸿蒙的无障碍服务深度集成。
          </Text>
        </View>

        {/* 核心属性表格 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>核心Accessibility属性</Text>
          <View style={styles.tableContainer}>
            <View style={styles.tableHeader}>
              <Text style={styles.tableHeaderText}>属性</Text>
              <Text style={styles.tableHeaderText}>类型</Text>
              <Text style={styles.tableHeaderText}>作用</Text>
              <Text style={styles.tableHeaderText}>OH映射</Text>
            </View>
            {accessibilityAttributes.map((attr, index) => (
              <View key={index} style={styles.tableRow}>
                <Text style={styles.tableCellCode}>{attr.name}</Text>
                <Text style={styles.tableCell}>{attr.type}</Text>
                <Text style={styles.tableCell}>{attr.description}</Text>
                <Text style={styles.tableCell}>{attr.ohMapping}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 语义映射 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>OpenHarmony语义映射</Text>
          {semanticMappings.map((mapping, index) => (
            <View key={index} style={styles.mappingItem}>
              <View style={styles.mappingHeader}>
                <Text style={styles.rnRole}>{mapping.rnRole}</Text>
                <Text style={styles.mappingArrow}>→</Text>
                <Text style={styles.ohNode}>{mapping.ohNodeType}</Text>
              </View>
              <Text style={styles.mappingNotes}>{mapping.notes}</Text>
            </View>
          ))}
        </View>

        {/* 演示区域 - 开关控件 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>开关控件演示</Text>
          <Text style={styles.demoHint}>
            屏幕阅读器将朗读："深色模式，开关，未选中，双击可启用或禁用深色主题"
          </Text>

          {actionMessage && (
            <View style={styles.actionMessageContainer}>
              <Text style={styles.actionMessage}>{actionMessage}</Text>
            </View>
          )}

          <View style={styles.settingItem}>
            <Text style={styles.settingLabel}>深色模式</Text>
            <Switch
              value={switchStates.darkMode}
              onValueChange={() => toggleSwitch('darkMode')}
              accessibilityLabel="深色模式切换"
              accessibilityHint="双击可启用或禁用深色主题"
              accessibilityRole="switch"
              accessibilityState={{ checked: switchStates.darkMode }}
            />
          </View>

          <View style={styles.settingItem}>
            <Text style={styles.settingLabel}>通知权限</Text>
            <Switch
              value={switchStates.notifications}
              onValueChange={() => toggleSwitch('notifications')}
              accessibilityLabel="通知权限开关"
              accessibilityHint="管理应用通知权限"
              accessibilityRole="switch"
              accessibilityState={{ checked: switchStates.notifications }}
            />
          </View>

          <View style={styles.settingItem}>
            <Text style={styles.settingLabel}>自动更新</Text>
            <Switch
              value={switchStates.autoUpdate}
              onValueChange={() => toggleSwitch('autoUpdate')}
              accessibilityLabel="自动更新开关"
              accessibilityHint="控制应用自动下载更新"
              accessibilityRole="switch"
              accessibilityState={{ checked: switchStates.autoUpdate }}
            />
          </View>
        </View>

        {/* 演示区域 - 按钮角色 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>按钮角色演示</Text>
          <Text style={styles.demoHint}>
            不同角色的按钮会被屏幕阅读器正确识别
          </Text>

          {actionMessage && (
            <View style={styles.actionMessageContainer}>
              <Text style={styles.actionMessage}>{actionMessage}</Text>
            </View>
          )}

          <View style={styles.buttonRow}>
            <TouchableOpacity
              style={styles.actionButton}
              accessibilityLabel="确认按钮"
              accessibilityHint="点击确认当前操作"
              accessibilityRole="button"
              onPress={handleConfirmPress}
            >
              <Text style={styles.buttonText}>确认</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.actionButton, styles.cancelButton]}
              accessibilityLabel="取消按钮"
              accessibilityHint="点击取消当前操作"
              accessibilityRole="button"
              onPress={handleCancelPress}
            >
              <Text style={styles.buttonText}>取消</Text>
            </TouchableOpacity>
          </View>

          <TouchableOpacity
            style={styles.linkButton}
            accessibilityLabel="查看详情链接"
            accessibilityRole="link"
            onPress={handleLinkPress}
          >
            <Text style={styles.linkText}>查看详情 →</Text>
          </TouchableOpacity>
        </View>

        {/* 演示区域 - 列表选择 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>列表项演示</Text>
          <Text style={styles.demoHint}>
            列表项使用语义化标记，支持逐项导航
          </Text>

          <View
            accessibilityRole="list"
            accessibilityLabel="选项列表"
            style={styles.listContainer}
          >
            {listItems.map((item, index) => (
              <TouchableOpacity
                key={index}
                style={[
                  styles.listItem,
                  selectedIndex === index && styles.listItemSelected,
                ]}
                onPress={() => {
                  setSelectedIndex(index);
                  showActionMessage(`已选择：${item}`);
                }}
                accessibilityLabel={item}
                accessibilityHint={`选项${index + 1}，${selectedIndex === index ? '已选中' : '双击选中'}`}
                accessibilityRole="listitem"
                accessibilityState={{ selected: selectedIndex === index }}
              >
                <View style={styles.listItemRadio}>
                  {selectedIndex === index && <View style={styles.listItemRadioSelected} />}
                </View>
                <Text style={styles.listItemText}>{item}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* 演示区域 - 滑块控件 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>滑块控件演示</Text>
          <Text style={styles.demoHint}>
            可调节控件会播报当前值和范围
          </Text>

          <View
            accessible={true}
            accessibilityLabel="音量调节"
            accessibilityRole="adjustable"
            accessibilityValue={{ text: `${sliderValue}%`, min: 0, max: 100 }}
            accessibilityHint="左右滑动调节音量"
          >
            <View style={styles.sliderContainer}>
              <Text style={styles.sliderLabel}>🔊 音量</Text>
              <View style={styles.sliderTrack}>
                <View style={[styles.sliderFill, { width: `${sliderValue}%` }]} />
              </View>
              <Text style={styles.sliderValue}>{sliderValue}%</Text>
            </View>

            <View style={styles.sliderButtons}>
              <TouchableOpacity
                style={styles.sliderButton}
                onPress={() => {
                  const newValue = Math.max(0, sliderValue - 10);
                  setSliderValue(newValue);
                  showActionMessage(`音量: ${newValue}%`);
                }}
                accessibilityLabel="减少音量"
              >
                <Text style={styles.sliderButtonText}>-10</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.sliderButton}
                onPress={() => {
                  const newValue = Math.min(100, sliderValue + 10);
                  setSliderValue(newValue);
                  showActionMessage(`音量: ${newValue}%`);
                }}
                accessibilityLabel="增加音量"
              >
                <Text style={styles.sliderButtonText}>+10</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {/* 焦点管理 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>焦点管理策略</Text>
          <View style={styles.focusTable}>
            <View style={styles.focusTableRow}>
              <Text style={styles.focusTableHeader}>场景</Text>
              <Text style={styles.focusTableHeader}>解决方案</Text>
              <Text style={styles.focusTableHeader}>OH兼容性</Text>
            </View>
            <View style={styles.focusTableRow}>
              <Text style={styles.focusTableCell}>初始焦点</Text>
              <Text style={styles.focusTableCell}>autoFocus属性</Text>
              <Text style={styles.focusCellGood}>✓ 需确保根布局加载</Text>
            </View>
            <View style={styles.focusTableRow}>
              <Text style={styles.focusTableCell}>焦点顺序</Text>
              <Text style={styles.focusTableCell}>accessibilityFlow</Text>
              <Text style={styles.focusCellGood}>✓ 需focusable=true</Text>
            </View>
            <View style={styles.focusTableRow}>
              <Text style={styles.focusTableCell}>模态焦点</Text>
              <Text style={styles.focusTableCell}>accessibilityViewIsModal</Text>
              <Text style={styles.focusCellGood}>✓ 完整支持</Text>
            </View>
            <View style={styles.focusTableRow}>
              <Text style={styles.focusTableCell}>隐藏区域</Text>
              <Text style={styles.focusTableCell}>accessibilityElementsHidden</Text>
              <Text style={styles.focusCellGood}>✓ 完整支持</Text>
            </View>
          </View>
        </View>

        {/* 最佳实践 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>语义标记最佳实践</Text>
          <View style={styles.practiceItem}>
            <Text style={styles.practiceCheck}>✅</Text>
            <View style={styles.practiceContent}>
              <Text style={styles.practiceTitle}>简洁描述</Text>
              <Text style={styles.practiceText}>accessibilityLabel应简明扼要，不超过20个字符</Text>
            </View>
          </View>
          <View style={styles.practiceItem}>
            <Text style={styles.practiceCheck}>✅</Text>
            <View style={styles.practiceContent}>
              <Text style={styles.practiceTitle}>上下文独立</Text>
              <Text style={styles.practiceText}>标签应自包含，无需额外上下文</Text>
            </View>
          </View>
          <View style={styles.practiceItem}>
            <Text style={styles.practiceCheck}>✅</Text>
            <View style={styles.practiceContent}>
              <Text style={styles.practiceTitle}>避免冗余</Text>
              <Text style={styles.practiceText}>不要重复可见文本内容</Text>
            </View>
          </View>
          <View style={styles.practiceItem}>
            <Text style={styles.practiceCheck}>✅</Text>
            <View style={styles.practiceContent}>
              <Text style={styles.practiceTitle}>本地化支持</Text>
              <Text style={styles.practiceText}>所有标签应通过i18n系统实现多语言</Text>
            </View>
          </View>
        </View>

        {/* 设备兼容性 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>设备兼容性</Text>
          <View style={styles.compatibilityItem}>
            <View style={styles.compatibilityHeader}>
              <Text style={styles.compatibilityDevice}>旗舰手机</Text>
              <View style={styles.compatibilityBadges}>
                <Text style={styles.compatibilityBadge}>完整支持</Text>
                <Text style={styles.compatibilityBadge}>全手势</Text>
              </View>
            </View>
          </View>
          <View style={styles.compatibilityItem}>
            <View style={styles.compatibilityHeader}>
              <Text style={styles.compatibilityDevice}>中端手机</Text>
              <View style={styles.compatibilityBadges}>
                <Text style={[styles.compatibilityBadge, styles.compatibilityBadgePartial]}>基本功能</Text>
                <Text style={[styles.compatibilityBadge, styles.compatibilityBadgePartial]}>部分手势</Text>
              </View>
            </View>
          </View>
          <View style={styles.compatibilityItem}>
            <View style={styles.compatibilityHeader}>
              <Text style={styles.compatibilityDevice}>入门手机</Text>
              <View style={styles.compatibilityBadges}>
                <Text style={[styles.compatibilityBadge, styles.compatibilityBadgeBasic]}>核心功能</Text>
                <Text style={[styles.compatibilityBadge, styles.compatibilityBadgeBasic]}>仅方向键</Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#FFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  backButton: {
    padding: 8,
  },
  backButtonText: {
    fontSize: 16,
    color: '#2196F3',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginLeft: 8,
    color: '#333',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  card: {
    backgroundColor: '#FFF',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  cardText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 22,
  },
  section: {
    backgroundColor: '#FFF',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 12,
  },
  tableContainer: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 4,
    overflow: 'hidden',
  },
  tableHeader: {
    flexDirection: 'row',
    backgroundColor: '#2196F3',
    paddingVertical: 10,
    paddingHorizontal: 8,
  },
  tableHeaderText: {
    flex: 1,
    fontSize: 11,
    fontWeight: 'bold',
    color: '#FFF',
    textAlign: 'center',
  },
  tableRow: {
    flexDirection: 'row',
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
    flexWrap: 'wrap',
  },
  tableCellCode: {
    flex: 1,
    fontSize: 10,
    color: '#2196F3',
    fontFamily: 'monospace',
  },
  tableCell: {
    flex: 1,
    fontSize: 10,
    color: '#666',
  },
  mappingItem: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  mappingHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  rnRole: {
    fontSize: 14,
    fontWeight: '600',
    color: '#2196F3',
    fontFamily: 'monospace',
  },
  mappingArrow: {
    fontSize: 14,
    color: '#999',
    marginHorizontal: 8,
  },
  ohNode: {
    fontSize: 14,
    fontWeight: '600',
    color: '#4CAF50',
    fontFamily: 'monospace',
  },
  mappingNotes: {
    fontSize: 12,
    color: '#999',
    marginLeft: 24,
  },
  demoHint: {
    fontSize: 12,
    color: '#999',
    marginBottom: 12,
    fontStyle: 'italic',
  },
  actionMessageContainer: {
    backgroundColor: '#E8F5E9',
    borderRadius: 6,
    padding: 10,
    marginBottom: 12,
    alignItems: 'center',
  },
  actionMessage: {
    fontSize: 14,
    color: '#2E7D32',
    fontWeight: '500',
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  settingLabel: {
    fontSize: 15,
    color: '#333',
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 12,
  },
  actionButton: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 6,
    minWidth: 100,
    alignItems: 'center',
  },
  cancelButton: {
    backgroundColor: '#757575',
  },
  buttonText: {
    color: '#FFF',
    fontSize: 14,
    fontWeight: '600',
  },
  linkButton: {
    alignItems: 'center',
    paddingVertical: 8,
  },
  linkText: {
    fontSize: 14,
    color: '#2196F3',
  },
  listContainer: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 6,
    overflow: 'hidden',
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  listItemSelected: {
    backgroundColor: '#E3F2FD',
  },
  listItemRadio: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#2196F3',
    marginRight: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  listItemRadioSelected: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#2196F3',
  },
  listItemText: {
    fontSize: 15,
    color: '#333',
  },
  sliderContainer: {
    paddingVertical: 12,
  },
  sliderLabel: {
    fontSize: 14,
    color: '#333',
    marginBottom: 8,
  },
  sliderTrack: {
    height: 8,
    backgroundColor: '#E0E0E0',
    borderRadius: 4,
    overflow: 'hidden',
    marginBottom: 8,
  },
  sliderFill: {
    height: '100%',
    backgroundColor: '#2196F3',
  },
  sliderValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#2196F3',
    textAlign: 'center',
  },
  sliderButtons: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 8,
  },
  sliderButton: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 6,
    marginHorizontal: 8,
  },
  sliderButtonText: {
    color: '#FFF',
    fontSize: 14,
    fontWeight: '600',
  },
  focusTable: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 4,
    overflow: 'hidden',
  },
  focusTableRow: {
    flexDirection: 'row',
    paddingVertical: 10,
    paddingHorizontal: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  focusTableHeader: {
    flex: 1,
    fontSize: 11,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
  focusTableCell: {
    flex: 1,
    fontSize: 11,
    color: '#666',
    textAlign: 'center',
  },
  focusCellGood: {
    flex: 1,
    fontSize: 10,
    color: '#4CAF50',
    textAlign: 'center',
  },
  practiceItem: {
    flexDirection: 'row',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  practiceCheck: {
    fontSize: 18,
    marginRight: 12,
  },
  practiceContent: {
    flex: 1,
  },
  practiceTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    marginBottom: 2,
  },
  practiceText: {
    fontSize: 13,
    color: '#666',
  },
  compatibilityItem: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  compatibilityHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  compatibilityDevice: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
  },
  compatibilityBadges: {
    flexDirection: 'row',
  },
  compatibilityBadge: {
    fontSize: 10,
    color: '#FFF',
    backgroundColor: '#4CAF50',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
    marginLeft: 4,
  },
  compatibilityBadgePartial: {
    backgroundColor: '#FF9800',
  },
  compatibilityBadgeBasic: {
    backgroundColor: '#F44336',
  },
});

export default AccessibilitySemanticLabelScreen;

这个示例展示了：

使用accessibilityRole定义元素类型
通过accessibilityLabel提供简洁描述
利用accessibilityHint添加操作提示
使用accessibilityState反映组件状态
通过accessibilityElementsHidden隐藏非必要元素
集成AccessibilityInfo检测服务状态

OpenHarmony 6.0.0平台特定注意事项

在OpenHarmony 6.0.0 (API 20)上开发Accessibility功能时，需要特别注意以下平台特定行为：

1. 语音输出限制

OpenHarmony 6.0.0的TTS引擎有以下限制：

最大语音输出长度：200个字符
不支持SSML标记
数字朗读格式固定（如"123"读作"一百二十三"）
英文单词按字母逐个朗读

解决方案：

2. 焦点优先级问题

在OpenHarmony 6.0.0上，React Native组件可能遇到焦点冲突：

问题现象	原因分析	解决方案
焦点跳转异常	原生组件与RN组件混合	设置`importantForAccessibility="yes"`
焦点丢失	异步加载组件	使用`accessibilityFocus()`方法
焦点顺序错乱	动态内容变化	调用`notifyAccessibilityEvent()`
焦点无法获取	视图层级过深	优化布局层级，减少嵌套