多状态切换控件的最优无障碍标记方案咨询
多状态切换控件的无障碍标记最优方案咨询
我正在开发一款非仅开/关状态的多状态切换控件,它有三种状态且同一时间仅激活一种(功能类似单选按钮)。注:我的问题并非关于主题切换器的最优设计,而是此类多状态切换控件的通用最优无障碍标记。
我考虑了两种标记方案:
方案一:使用<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
相关产品推荐
相关产品推荐

