html - CSS 样式 <a/> 与无表单复选框的可访问性

Question

我正在升级网站的 HTML，目前有一个元素列表显示为过滤器或改进，标记为带有标签的复选框，但不在表单中。然后出于“SEO 原因”，他们添加了一个 标签，该标签没有环绕它:

<label>
<input type="checkbox" name="one" value="one" /> Refinement One
</label>
<a href="/url-for-adding-one"></a>

这显然并没有真正增加完整的 SEO 值(value)，它是一种笨拙的 HTML，因为复选框不是必需的:页面通过监听标签上的点击并触发 ajax 加载来工作，所有这些都没有表单。要清楚:没有表单，更不用说表单提交了，所以复选框只是作为视觉提示。我想用 anchor 上的背景图像替换它，并完全放弃复选框，如下所示:

<a href="/url-for-adding-one">Refinement One</a>
<a class="checked" href="/url-for-adding-two">Refinement Two</a>

客户对此很满意，但他们主要关心的是可访问性以及这种变化将如何反射(reflect)到屏幕阅读器......我个人的想法是它一定比没有表单的复选框更好，但我想要一个更好的回答我的直觉检查。

您是否知道在这种情况下用链接替换复选框对可访问性的影响？

Answer 1

如果页面通过监听点击来工作，那么它原则上违反了可访问性要求 “Make all functionality available from a keyboard” .但实际上，在获得焦点的元素中按下 Enter 键通常被视为对应于点击，即触发点击事件。

没有表单的复选框本身不是问题，从来都不是。当然，它们只能通过客户端脚本来工作。

使用链接可能与历史簿记有关，而不是 SEO(因为以这种方式引用的页面在搜索中很少相关)。如果需要它们，则可以在使控件成为链接和使用链接复制它之间进行选择。重复可能会造成混淆，尤其是在不寻常的浏览情况下，因此链接方法似乎更好。如果链接的目的是立即引起某些 Action ，那么最好将其样式设置为看起来像一个按钮。因此，一个复选框，即使是一个纯图形，似乎也没有必要。

如果有必要向用户显示已选择的选项(类似于显示已选中的复选框)，可以这样做，例如通过显示当前选择的选项列表(可能连同取消选择的按钮)。