You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

多状态切换控件的最优无障碍标记方案咨询

多状态切换控件的无障碍标记最优方案咨询

我正在开发一款非仅开/关状态的多状态切换控件,它有三种状态且同一时间仅激活一种(功能类似单选按钮)。注:我的问题并非关于主题切换器的最优设计,而是此类多状态切换控件的通用最优无障碍标记。

我考虑了两种标记方案:

方案一:使用<fieldset>包裹radio按钮组

<fieldset>
  <legend>View in:</legend>
  <input type="radio" id="light" name="theme" value="light" checked>
  <label for="light">Light theme</label>
  <input type="radio" id="dark" name="theme" value="dark">
  <label for="light">Dark theme</label>
  <input type="radio" id="contrast" name="theme" value="constrast">
  <label for="light">High contrast</label>
</fieldset>

方案二:使用带aria-pressed属性的button组

<div class="toggle-thingy">
  <label>View in:</label>
  <button aria-pressed="true">Light theme</button>
  <button aria-pressed="false">Dark theme</button>
  <button aria-pressed="false">High contrast</button>
</div>

从功能上看它类似单选按钮,但参考相关资料,通用切换按钮建议用button而非checkbox(因不涉及表单提交),同理是否radio也应替换为button?但button组缺乏radio的name属性来关联控件。请问是否有更优的无障碍标记方案或建议?


内容的提问来源于stack exchange,提问作者Claus Stadel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 01:39:39