uni-app ios 旁白h5 使用 uni-popup弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容

uni-app ios 旁白h5 使用 uni-popup弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Mac
版本号 3.0.0-3081220230817001
项目创建方式 CLI
CLI版本号 3.0.0-3081220230817001

操作步骤：

  1. 苹果手机-设置-辅助功能-打开旁白
  2. 页面中使用uni-popup组件，弹出
  3. 点击阴影处朗读阴影下方内容

预期结果：

  1. 苹果手机-设置-辅助功能-打开旁白
  2. 页面中使用uni-popup组件，弹出
  3. 点击阴影处不需要朗读阴影下方内容

实际结果：

点击阴影处朗读阴影下方内容

bug描述：

uniapp ios 旁白h5，使用 uni-popup弹出层，点击弹出层空白处，会点击到弹窗层阴影下方的文本内容

Image


更多关于uni-app ios 旁白h5 使用 uni-popup弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

您好，方便发个可复现demo吗？以便于更好的排查问题

更多关于uni-app ios 旁白h5 使用 uni-popup弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


picker等组件也同样存在

demo 已上传

已上传demo

这是一个iOS旁白(voiceOver)在H5环境下与uni-popup组件的无障碍访问兼容性问题。问题核心在于弹出层的遮罩层未能正确阻止旁白读取底层内容。

解决方案建议：

  1. 为遮罩层添加aria-hidden="true"属性，明确告知屏幕阅读器忽略该区域：
<view class="uni-popup__mask" aria-hidden="true"></view>
  1. 确保弹出层容器设置了正确的无障碍属性：
<view 
  class="uni-popup" 
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialogTitle"
>
  <view id="dialogTitle">弹窗标题</view>
  <!-- 弹窗内容 -->
</view>

  1. 检查遮罩层的CSS是否包含pointer-events: auto，确保能拦截点击事件

  2. 对于uni-popup组件，可以在初始化时动态设置这些属性：

this.$refs.popup.$el.setAttribute('aria-hidden', 'false')
this.$refs.popup.$el.setAttribute('role', 'dialog')
回到顶部