分页无障碍优化:省略号链接的aria-label设置与结构规范问询
分页导航可访问性问题解答
1. 带省略号的分页链接的aria-label设置
分两种场景处理:
- 如果省略号是可点击交互的(比如点击后展开中间更多分页选项),要设置清晰描述功能的aria-label,比如
aria-label="查看中间更多页面"或aria-label="展开更多分页选项",绝对不能只用aria-label="..."——屏幕阅读器无法识别这种模糊描述; - 如果省略号只是纯视觉占位、不可点击,别用
<a>标签,换成<span>并加上aria-hidden="true",让屏幕阅读器忽略这个纯装饰元素,避免干扰正常阅读流程。
2. 是否需要用ul/li包裹分页元素
推荐用ul+li的列表结构包裹所有分页导航项,原因是:
分页是一组紧密相关的导航选项,列表结构能让屏幕阅读器明确识别出这是一个包含多个项的导航集合,用户能快速知晓总共有多少个分页选项,大幅提升可访问性。
正确的示例结构如下:
<nav role="navigation" aria-label="分页导航"> <ul> <li><a href="page-1" aria-label="跳转到第1页">1</a></li> <li><a href="page-2" aria-label="跳转到第2页">2</a></li> <li><a href="page-3" aria-label="跳转到第3页">3</a></li> <li><a href="#" aria-label="查看中间更多页面">...</a></li> <li><a href="page-10" aria-label="跳转到第10页">10</a></li> </ul> </nav>
另外给<nav>加上aria-label="分页导航"也很关键,能让用户清楚这个导航的用途。
内容的提问来源于stack exchange,提问作者Alyona
相关产品推荐
相关产品推荐

