dcloudio / dcloudio/uni-app

H5 平台 uni-page-head 导航栏返回按钮缺少无障碍语义(无 button 角色/aria-label,读屏与自动化无法识别)

Open
#6,062 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

## 问题描述

uni-app X 项目编译到 H5 平台后,使用默认导航栏(navigationBarTitleText,非 custom)的页面,左上角返回按钮由框架渲染为:

```html



← 返回按钮:纯 DIV





```

该元素存在以下无障碍问题:

1. `div.uni-page-head-btn` 无 `role="button"`、无 `tabindex`、无 `aria-label`(内层仅为 SVG 图标);
2. 不进入可访问性树(accessibility tree),读屏软件无法感知与操作返回功能;
3. 键盘无法聚焦与触发(无 Tab 焦点、无 Enter/Space 处理);
4. 自动化测试/无障碍检测工具(Playwright getByRole、axe-core 等)均无法按语义定位该按钮,只能依赖坐标点击。

## 复现步骤

1. uni-app X 项目任意页面,manifest/pages.json 中保留默认导航栏(非 navigationStyle: custom),编译到 H5;
2. 从列表页 navigateTo 进入带返回键的二级页面;
3. 检查 DOM:`document.querySelector('.uni-page-head-btn')`;
4. 用读屏软件或 axe-core / Playwright getByRole('button', { name: '返回' }) 定位。

## 实际结果

返回按钮为纯装饰性 DIV + SVG,无任何 ARIA 语义与键盘可达性。

## 期望结果

- `uni-page-head-btn` 具备 `role="button"`、`tabindex="0"`、`aria-label="返回"`(或等价本地化文案);
- 支持 Enter/Space 触发返回。

## 影响

视障用户(读屏)无法使用二级页面返回功能;企业无障碍合规验收(WCAG 4.1.2 Name/Role/Value)不通过;a11y 自动化测试无法覆盖导航返回场景。

## 环境

- HBuilderX:5.24.2026081301(uni-app X 项目,manifest 声明 "uni-app-x")
- 平台:H5
- 复现率:100%(所有带默认导航栏并有返回键的页面)

## 建议

在 uni-page-head 渲染返回按钮时输出为 button 语义(或对现有 DIV 补充 role/tabindex/aria-label 并监听键盘事件),并支持通过页面配置自定义 aria-label 文案。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.