uni-app vue3 无障碍模式h5 代码设置aria-label设置 苹果手机无法正确朗读

uni-app vue3 无障碍模式h5 代码设置aria-label设置 苹果手机无法正确朗读

开发环境 版本号 项目创建方式
Mac 3.0.0-3081220230817001 CLI

操作步骤：

<view class="__border pdver passenger-container" tabindex="10" ariaLabel="are you ok?">内容</view>


## 预期结果：


<p>在苹果手机打开旁白模式下，点击“内容”文本，需朗读出文本“are you ok?"</p>

实际结果：

还是朗读“内容”

```

bug描述：

uniapp 无障碍模式h5，苹果手机打开aria-label设置无效，无法朗读出设置内容


更多关于uni-app vue3 无障碍模式h5 代码设置aria-label设置 苹果手机无法正确朗读的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你提供的源码，在 h5 中渲染的结果是，看着没问题，你对比测试。如果需要调整编译结果你可以具体提出 <uni-view class="__border pdver passenger-container" tabindex="10" aria-label="are you ok?">内容</uni-view>

更多关于uni-app vue3 无障碍模式h5 代码设置aria-label设置 苹果手机无法正确朗读的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app Vue3的H5项目中，苹果手机的无障碍朗读问题可能是由于以下原因导致的：

  1. 在Vue3中，正确的属性名应该是aria-label而不是ariaLabel（React风格的写法）。请尝试修改为：
<view class="__border pdver passenger-container" tabindex="10" aria-label="are you ok?">内容</view>

  1. 确保元素是可聚焦的，你已经设置了tabindex="10"是正确的做法。

  2. iOS的VoiceOver对某些HTML元素的aria-label支持可能不一致，可以尝试改用role属性明确指定元素角色：

<view role="button" tabindex="10" aria-label="are you ok?">内容</view>
  1. 如果仍然无效，可以尝试使用<button>标签包裹内容，因为按钮元素的无障碍支持通常更好：
<button class="__border pdver passenger-container" aria-label="are you ok?">内容</button>
回到顶部