我目前正在为自己编写一个图库脚本,遇到了一个有趣的无障碍访问问题。我有一个图库列表,每个图库都有链接。我还想提供一个复选框,允许用户选择多个图库并合并或下载它们。我使用的 HTML代码如下:一个无序列表,其中包含标签、复选框以及标签内的链接。
只要CSS设置得当,并留出足够的空间,这个功能就能很好地配合鼠标和键盘使用。您可以点击链接旁边的复选框,点击链接即可跳转到图库。它也支持键盘操作。您可以使用 Tab 键在列表中切换,并使用空格键进行勾选/取消勾选。以下屏幕录像展示了具体操作方式。
现在感觉不太对劲。我在这里混用了两种交互模式:导航和选择,一种是基于链接的,另一种是基于表单的。我想知道这会不会给屏幕阅读器用户带来问题。另外,我还在想,把所有内容都嵌套在标签里会不会有问题,因为一些老旧的辅助技术不支持这种做法。我可以用 `for` 和 `ids` 来解决这个问题:
但问题是,这是否仍然是一个可访问性问题?将导航显示为链接,并创建一个切换按钮来切换到选择模式,岂不是更合理?您怎么看?
您可以点击此处亲自体验演示页面。
原文: https://christianheilmann.com/2026/05/27/accessibility-question-is-nesting-interactive-elements-bad/
