咨询：React Native中View组件accessibilityLabel与aria-label的差异

核心区别 #

• 适用平台与技术栈
  • accessibilityLabel：React Native专属属性，用于iOS、Android等移动原生平台，适配系统级屏幕阅读器（iOS VoiceOver、Android TalkBack）。
  • aria-label：Web前端标准属性，属于WAI-ARIA规范，用于HTML元素，适配Web端屏幕阅读器（如NVDA、ChromeVox、桌面端VoiceOver）。
• 底层映射逻辑
  • accessibilityLabel：在iOS上直接对应原生UIView的accessibilityLabel属性；在Android上会映射为View的contentDescription属性，由移动系统无障碍框架解析。
  • aria-label：由浏览器无障碍API直接识别，将语义信息传递给Web端屏幕阅读器。
• 组件适用范围
  • accessibilityLabel：可用于React Native所有支持无障碍的组件（View、TouchableOpacity、Image等），重点解决无可见文本的自定义组件的语义缺失问题。
  • aria-label：主要用于HTML中无可见文本的交互元素（如<button>、<div role="button">），补充元素的功能说明。

示例对比 #

React Native 中使用 accessibilityLabel #

场景：自定义无文本的搜索图标按钮

import React from 'react';
import { View, TouchableOpacity, Image, StyleSheet } from 'react-native';

const SearchButton = ({ onPress }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      accessibilityLabel="搜索" // 屏幕阅读器会读出「搜索，按钮」
      accessibilityRole="button"
      style={styles.button}
    >
      <Image
        source={require('./search-icon.png')}
        style={styles.icon}
        accessible={false} // 图标本身不需要被单独识别
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 8,
    borderRadius: 4,
    backgroundColor: '#f0f0f0',
  },
  icon: {
    width: 24,
    height: 24,
  },
});

export default SearchButton;

说明：当用户用VoiceOver/TalkBack触发该按钮时，会听到清晰的功能提示，避免无文本组件无法被无障碍设备识别的问题。

Web 中使用 aria-label #

场景：同样是无文本的搜索图标按钮

<button aria-label="搜索">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  </svg>
</button>

说明：Web端屏幕阅读器会读出「搜索，按钮」，让视障用户明确该按钮的功能。

内容的提问来源于stack exchange，提问作者Varinder Sohal