E047 - alex1221/bootlint-customization GitHub Wiki

E047

.btn 必须用在 <a>, <button>, <input>, 或 <label> 元素上.

.btn 用于将元素设置为交互式可点击按钮

如果不用 <a>, <button>, <input>, 活 <label> 元素来创建按钮组件可能会导致一些辅助技术(如屏幕阅读器)的用户出现问题,因为默认情况下,这样组件不会被该技术识别交互。除非你做一些额外ARIA属性的工作,tabindex属性,和自定义一些JavaScript脚本。

这样的组合在语义上也是有问题的。一个 <button> 元素表示一个按钮,具有固有的关联语义(例如,可以通过点击来交互)。相比之下,<div> or <span> 元素没有这样的内在含义(尽管利用 ARIA 可以在某种程度上弥补这一点)。

错误的:

<span class="btn btn-primary">Button</span>
<div class="btn btn-primary">Button</div>

正确的:

<a class="btn btn-primary">Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Button">
<label class="btn btn-primary">Button</label>
⚠️ **GitHub.com Fallback** ⚠️