React Native中react-native-render-html如何实现无障碍功能

问题根因 #

• 外层<Text>组件设置accessible={true}后，会将内部所有子元素合并为单个无障碍节点，但react-native-render-html会渲染独立的嵌套原生视图，Text组件无法正确提取内部自定义节点的文本内容传递给屏幕阅读器
• react-native-render-html默认未给内置渲染器开启无障碍属性，需要手动配置相关参数

修复方案 #

1. 移除外层冗余的Text组件 #

react-native-render-html本身会输出符合原生规范的视图结构，额外的Text包裹会破坏无障碍语义传递，不需要用Text组件包裹RenderHtml。

2. 配置RenderHtml无障碍属性 #

通过renderersProps给所有用到的文本类标签启用无障碍属性，也可以直接给根节点配置兜底的无障碍属性：

const renderersProps = {
  // 按需给你用到的HTML文本标签开启无障碍
  text: {
    accessible: true
  },
  p: {
    accessible: true
  },
  span: {
    accessible: true
  },
  h1: {
    accessible: true
  },
  li: {
    accessible: true
  }
}

// 渲染代码
<RenderHtml 
  source={source} 
  renderersProps={renderersProps}
  // 若需要将整个HTML内容合并为单个无障碍节点，开启下面两个配置
  // accessible={true}
  // accessibilityLabel={你提前提取的HTML纯文本内容}
/>

3. 特殊场景自定义渲染器 #

如果有自定义标签或者需要特殊处理的内容，可以自定义渲染器手动配置无障碍属性：

// 自定义段落渲染器
const customRenderers = {
  p: ({ TDefaultRenderer, ...props }) => (
    <TDefaultRenderer 
      {...props} 
      accessible={true}
      accessibilityRole="text"
    />
  )
}

// 传入RenderHtml
<RenderHtml 
  source={source} 
  renderersProps={renderersProps}
  renderers={customRenderers}
/>

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