Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

无障碍访问问题:嵌套交互元素是否不好?

Posted on 2026-05-27

我目前正在为自己编写一个图库脚本,遇到了一个有趣的无障碍访问问题。我有一个图库列表,每个图库都有链接。我还想提供一个复选框,允许用户选择多个图库并合并或下载它们。我使用的 HTML代码如下:一个无序列表,其中包含标签、复选框以及标签内的链接。


猫

只要CSS设置得当,并留出足够的空间,这个功能就能很好地配合鼠标和键盘使用。您可以点击链接旁边的复选框,点击链接即可跳转到图库。它也支持键盘操作。您可以使用 Tab 键在列表中切换,并使用空格键进行勾选/取消勾选。以下屏幕录像展示了具体操作方式。

屏幕录像显示了如何使用鼠标和键盘与标签内的嵌套链接进行交互。

现在感觉不太对劲。我在这里混用了两种交互模式:导航和选择,一种是基于链接的,另一种是基于表单的。我想知道这会不会给屏幕阅读器用户带来问题。另外,我还在想,把所有内容都嵌套在标签里会不会有问题,因为一些老旧的辅助技术不支持这种做法。我可以用 `for` 和 `ids` 来解决这个问题:


鸭子

但问题是,这是否仍然是一个可访问性问题?将导航显示为链接,并创建一个切换按钮来切换到选择模式,岂不是更合理?您怎么看?

您可以点击此处亲自体验演示页面。

原文: https://christianheilmann.com/2026/05/27/accessibility-question-is-nesting-interactive-elements-bad/

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • A List Apart
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Alin Panaitiu
  • Anil Dash
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Big Technology
  • Bits about Money
  • Brandon Skerritt
  • Brent Simmons
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • eighty twenty
  • Elad Gil
  • Ellie Huxtable
  • Ethan Dalool
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • HeardThat Blog
  • Henrique Dias
  • Herman Martinus
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Li Haoyi
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Maggie Appleton
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mind Matters
  • Mostly metrics
  • Naval Ravikant
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Pieter Levels
  • PostHog
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Rohit Patel
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Slava Akhmechet
  • Small Good Things
  • Steph Ango
  • Stephen Wolfram
  • Steve Blank
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • Wes Kao
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2026 搞英语 → 看世界 | Design: Newspaperly WordPress Theme